From 42af9d5438146d30f5c780d5717fa883220e8206 Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Mon, 23 Feb 2026 17:36:35 +0530
Subject: [PATCH 01/26] test(web): add members-page account-setting specs and
 improve coverage (#32311)

---
 .../year-and-month-picker/options.spec.tsx    |   6 +-
 .../edit-workspace-modal/index.spec.tsx       | 103 ++++++++++
 .../members-page/index.spec.tsx               | 194 ++++++++++++++++++
 .../members-page/invite-button.spec.tsx       |  71 +++++++
 .../members-page/invite-modal/index.spec.tsx  | 118 +++++++++++
 .../invite-modal/role-selector.spec.tsx       |  61 ++++++
 .../members-page/invited-modal/index.spec.tsx |  24 +++
 .../invited-modal/invitation-link.spec.tsx    |  30 +++
 .../members-page/operation/index.spec.tsx     |  39 +++-
 .../operation/transfer-ownership.spec.tsx     |  89 ++++++++
 .../transfer-ownership-modal/index.spec.tsx   | 149 ++++++++++++++
 .../member-selector.spec.tsx                  | 107 ++++++++++
 12 files changed, 982 insertions(+), 9 deletions(-)
 create mode 100644 web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/invite-button.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/invite-modal/role-selector.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/invited-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/invited-modal/invitation-link.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/operation/transfer-ownership.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.spec.tsx

diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/options.spec.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/options.spec.tsx
index d4319650f5..2ca448fed0 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/options.spec.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/options.spec.tsx
@@ -32,10 +32,10 @@ describe('YearAndMonthPicker Options', () => {
     it('should render year options', () => {
       const props = createOptionsProps()
 
-      render(<Options {...props} />)
+      const { container } = render(<Options {...props} />)
 
-      const allItems = screen.getAllByRole('listitem')
-      expect(allItems).toHaveLength(212)
+      const yearList = container.querySelectorAll('ul')[1]
+      expect(yearList?.children).toHaveLength(200)
     })
   })
 
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
new file mode 100644
index 0000000000..791ca0362e
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
@@ -0,0 +1,103 @@
+import type { AppContextValue } from '@/context/app-context'
+import type { ICurrentWorkspace } from '@/models/common'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { ToastContext } from '@/app/components/base/toast'
+import { useAppContext } from '@/context/app-context'
+import { updateWorkspaceInfo } from '@/service/common'
+import EditWorkspaceModal from './index'
+
+vi.mock('@/context/app-context')
+vi.mock('@/service/common')
+
+describe('EditWorkspaceModal', () => {
+  const mockOnCancel = vi.fn()
+  const mockNotify = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useAppContext).mockReturnValue({
+      currentWorkspace: { name: 'Test Workspace' } as ICurrentWorkspace,
+      isCurrentWorkspaceOwner: true,
+    } as unknown as AppContextValue)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  const renderModal = () => render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <EditWorkspaceModal onCancel={mockOnCancel} />
+    </ToastContext.Provider>,
+  )
+
+  it('should show current workspace name in the input', async () => {
+    renderModal()
+
+    expect(await screen.findByDisplayValue('Test Workspace')).toBeInTheDocument()
+  })
+
+  it('should let user edit workspace name', async () => {
+    const user = userEvent.setup()
+
+    renderModal()
+
+    const input = screen.getByPlaceholderText(/account\.workspaceNamePlaceholder/i)
+    await user.clear(input)
+    await user.type(input, 'New Workspace Name')
+
+    expect(input).toHaveValue('New Workspace Name')
+  })
+
+  it('should submit update when confirming as owner', async () => {
+    const user = userEvent.setup()
+    const mockAssign = vi.fn()
+    vi.stubGlobal('location', { ...window.location, assign: mockAssign })
+    vi.mocked(updateWorkspaceInfo).mockResolvedValue({} as ICurrentWorkspace)
+
+    renderModal()
+
+    const input = screen.getByPlaceholderText(/account\.workspaceNamePlaceholder/i)
+    await user.clear(input)
+    await user.type(input, 'Renamed Workspace')
+    await user.click(screen.getByRole('button', { name: /operation\.confirm/i }))
+
+    await waitFor(() => {
+      expect(updateWorkspaceInfo).toHaveBeenCalledWith({
+        url: '/workspaces/info',
+        body: { name: 'Renamed Workspace' },
+      })
+      expect(mockAssign).toHaveBeenCalled()
+    })
+  })
+
+  it('should show error toast when update fails', async () => {
+    const user = userEvent.setup()
+
+    vi.mocked(updateWorkspaceInfo).mockRejectedValue(new Error('update failed'))
+
+    renderModal()
+
+    await user.click(screen.getByRole('button', { name: /operation\.confirm/i }))
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+      }))
+    })
+  })
+
+  it('should disable confirm button for non-owners', async () => {
+    vi.mocked(useAppContext).mockReturnValue({
+      currentWorkspace: { name: 'Test Workspace' } as ICurrentWorkspace,
+      isCurrentWorkspaceOwner: false,
+    } as unknown as AppContextValue)
+
+    renderModal()
+
+    expect(await screen.findByRole('button', { name: /operation\.confirm/i })).toBeDisabled()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/index.spec.tsx b/web/app/components/header/account-setting/members-page/index.spec.tsx
new file mode 100644
index 0000000000..211c44444a
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/index.spec.tsx
@@ -0,0 +1,194 @@
+import type { AppContextValue } from '@/context/app-context'
+import type { ICurrentWorkspace, Member } from '@/models/common'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useProviderContext } from '@/context/provider-context'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useMembers } from '@/service/use-common'
+import MembersPage from './index'
+
+vi.mock('@/context/app-context')
+vi.mock('@/context/global-public-context')
+vi.mock('@/context/provider-context')
+vi.mock('@/hooks/use-format-time-from-now')
+vi.mock('@/service/use-common')
+
+vi.mock('./edit-workspace-modal', () => ({
+  default: ({ onCancel }: { onCancel: () => void }) => (
+    <div>
+      <div>Edit Workspace Modal</div>
+      <button onClick={onCancel}>Close Edit Workspace</button>
+    </div>
+  ),
+}))
+vi.mock('./invite-button', () => ({
+  default: ({ onClick, disabled }: { onClick: () => void, disabled: boolean }) => (
+    <button onClick={onClick} disabled={disabled}>Invite</button>
+  ),
+}))
+vi.mock('./invite-modal', () => ({
+  default: ({ onCancel, onSend }: { onCancel: () => void, onSend: (results: Array<{ email: string, status: 'success', url: string }>) => void }) => (
+    <div>
+      <div>Invite Modal</div>
+      <button onClick={onCancel}>Close Invite Modal</button>
+      <button onClick={() => onSend([{ email: 'sent@example.com', status: 'success', url: 'http://invite/link' }])}>Send Invite Results</button>
+    </div>
+  ),
+}))
+vi.mock('./invited-modal', () => ({
+  default: ({ onCancel }: { onCancel: () => void }) => (
+    <div>
+      <div>Invited Modal</div>
+      <button onClick={onCancel}>Close Invited Modal</button>
+    </div>
+  ),
+}))
+vi.mock('./operation', () => ({
+  default: () => <div>Member Operation</div>,
+}))
+vi.mock('./operation/transfer-ownership', () => ({
+  default: ({ onOperate }: { onOperate: () => void }) => <button onClick={onOperate}>Transfer ownership</button>,
+}))
+vi.mock('./transfer-ownership-modal', () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <div>
+      <div>Transfer Ownership Modal</div>
+      <button onClick={onClose}>Close Transfer Modal</button>
+    </div>
+  ),
+}))
+
+describe('MembersPage', () => {
+  const mockRefetch = vi.fn()
+  const mockFormatTimeFromNow = vi.fn(() => 'just now')
+
+  const mockAccounts: Member[] = [
+    {
+      id: '1',
+      name: 'Owner User',
+      email: 'owner@example.com',
+      avatar: '',
+      avatar_url: '',
+      role: 'owner',
+      last_active_at: '1731000000',
+      last_login_at: '1731000000',
+      created_at: '1731000000',
+      status: 'active',
+    },
+    {
+      id: '2',
+      name: 'Admin User',
+      email: 'admin@example.com',
+      avatar: '',
+      avatar_url: '',
+      role: 'admin',
+      last_active_at: '1731000000',
+      last_login_at: '1731000000',
+      created_at: '1731000000',
+      status: 'active',
+    },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useAppContext).mockReturnValue({
+      userProfile: { email: 'owner@example.com' },
+      currentWorkspace: { name: 'Test Workspace', role: 'owner' } as ICurrentWorkspace,
+      isCurrentWorkspaceOwner: true,
+      isCurrentWorkspaceManager: true,
+    } as unknown as AppContextValue)
+
+    vi.mocked(useMembers).mockReturnValue({
+      data: { accounts: mockAccounts },
+      refetch: mockRefetch,
+    } as unknown as ReturnType<typeof useMembers>)
+
+    vi.mocked(useGlobalPublicStore).mockImplementation(selector => selector({
+      systemFeatures: { is_email_setup: true },
+    } as unknown as Parameters<typeof selector>[0]))
+
+    vi.mocked(useProviderContext).mockReturnValue(createMockProviderContextValue({
+      enableBilling: false,
+      isAllowTransferWorkspace: true,
+    }))
+
+    vi.mocked(useFormatTimeFromNow).mockReturnValue({
+      formatTimeFromNow: mockFormatTimeFromNow,
+    })
+  })
+
+  it('should render workspace and member information', () => {
+    render(<MembersPage />)
+
+    expect(screen.getByText('Test Workspace')).toBeInTheDocument()
+    expect(screen.getByText('Owner User')).toBeInTheDocument()
+    expect(screen.getByText('Admin User')).toBeInTheDocument()
+  })
+
+  it('should open and close invite modal', async () => {
+    const user = userEvent.setup()
+
+    render(<MembersPage />)
+
+    await user.click(screen.getByRole('button', { name: /invite/i }))
+    expect(screen.getByText('Invite Modal')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Close Invite Modal' }))
+    expect(screen.queryByText('Invite Modal')).not.toBeInTheDocument()
+  })
+
+  it('should open invited modal after invite results are sent', async () => {
+    const user = userEvent.setup()
+
+    render(<MembersPage />)
+
+    await user.click(screen.getByRole('button', { name: /invite/i }))
+    await user.click(screen.getByRole('button', { name: 'Send Invite Results' }))
+
+    expect(screen.getByText('Invited Modal')).toBeInTheDocument()
+    expect(mockRefetch).toHaveBeenCalled()
+
+    await user.click(screen.getByRole('button', { name: 'Close Invited Modal' }))
+    expect(screen.queryByText('Invited Modal')).not.toBeInTheDocument()
+  })
+
+  it('should open transfer ownership modal when transfer action is used', async () => {
+    const user = userEvent.setup()
+
+    render(<MembersPage />)
+
+    await user.click(screen.getByRole('button', { name: /transfer ownership/i }))
+    expect(screen.getByText('Transfer Ownership Modal')).toBeInTheDocument()
+  })
+
+  it('should show non-interactive owner role when transfer ownership is not allowed', () => {
+    vi.mocked(useProviderContext).mockReturnValue(createMockProviderContextValue({
+      enableBilling: false,
+      isAllowTransferWorkspace: false,
+    }))
+
+    render(<MembersPage />)
+
+    expect(screen.getByText('common.members.owner')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /transfer ownership/i })).not.toBeInTheDocument()
+  })
+
+  it('should hide manager controls for non-owner non-manager users', () => {
+    vi.mocked(useAppContext).mockReturnValue({
+      userProfile: { email: 'admin@example.com' },
+      currentWorkspace: { name: 'Test Workspace', role: 'admin' } as ICurrentWorkspace,
+      isCurrentWorkspaceOwner: false,
+      isCurrentWorkspaceManager: false,
+    } as unknown as AppContextValue)
+
+    render(<MembersPage />)
+
+    expect(screen.queryByRole('button', { name: /invite/i })).not.toBeInTheDocument()
+    expect(screen.queryByText('Transfer ownership')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/invite-button.spec.tsx b/web/app/components/header/account-setting/members-page/invite-button.spec.tsx
new file mode 100644
index 0000000000..7388c7ef3b
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/invite-button.spec.tsx
@@ -0,0 +1,71 @@
+import type { AppContextValue } from '@/context/app-context'
+import type { ICurrentWorkspace } from '@/models/common'
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useWorkspacePermissions } from '@/service/use-workspace'
+import InviteButton from './invite-button'
+
+vi.mock('@/context/app-context')
+vi.mock('@/context/global-public-context')
+vi.mock('@/service/use-workspace')
+
+describe('InviteButton', () => {
+  const setupMocks = ({
+    brandingEnabled,
+    isFetching,
+    allowInvite,
+  }: {
+    brandingEnabled: boolean
+    isFetching: boolean
+    allowInvite?: boolean
+  }) => {
+    vi.mocked(useGlobalPublicStore).mockImplementation(selector => selector({
+      systemFeatures: { branding: { enabled: brandingEnabled } },
+    } as unknown as Parameters<typeof selector>[0]))
+    vi.mocked(useWorkspacePermissions).mockReturnValue({
+      data: allowInvite === undefined ? null : { allow_member_invite: allowInvite },
+      isFetching,
+    } as unknown as ReturnType<typeof useWorkspacePermissions>)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useAppContext).mockReturnValue({
+      currentWorkspace: { id: 'workspace-id' } as ICurrentWorkspace,
+    } as unknown as AppContextValue)
+  })
+
+  it('should show invite button when branding is disabled', () => {
+    setupMocks({ brandingEnabled: false, isFetching: false })
+
+    render(<InviteButton />)
+
+    expect(screen.getByRole('button', { name: /members\.invite/i })).toBeInTheDocument()
+  })
+
+  it('should show loading status while permissions are loading', () => {
+    setupMocks({ brandingEnabled: true, isFetching: true })
+
+    render(<InviteButton />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should hide invite button when permission is denied', () => {
+    setupMocks({ brandingEnabled: true, isFetching: false, allowInvite: false })
+
+    render(<InviteButton />)
+
+    expect(screen.queryByRole('button', { name: /members\.invite/i })).not.toBeInTheDocument()
+  })
+
+  it('should show invite button when permission is granted', () => {
+    setupMocks({ brandingEnabled: true, isFetching: false, allowInvite: true })
+
+    render(<InviteButton />)
+
+    expect(screen.getByRole('button', { name: /members\.invite/i })).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
new file mode 100644
index 0000000000..fc733d9cd7
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
@@ -0,0 +1,118 @@
+import type { InvitationResponse } from '@/models/common'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { ToastContext } from '@/app/components/base/toast'
+import { useProviderContextSelector } from '@/context/provider-context'
+import { inviteMember } from '@/service/common'
+import InviteModal from './index'
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContextSelector: vi.fn(),
+  useProviderContext: vi.fn(() => ({
+    datasetOperatorEnabled: true,
+  })),
+}))
+vi.mock('@/service/common')
+vi.mock('@/context/i18n', () => ({
+  useLocale: () => 'en-US',
+}))
+
+describe('InviteModal', () => {
+  const mockOnCancel = vi.fn()
+  const mockOnSend = vi.fn()
+  const mockRefreshLicenseLimit = vi.fn()
+  const mockNotify = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useProviderContextSelector).mockImplementation(selector => selector({
+      licenseLimit: { workspace_members: { size: 5, limit: 10 } },
+      refreshLicenseLimit: mockRefreshLicenseLimit,
+    } as unknown as Parameters<typeof selector>[0]))
+  })
+
+  const renderModal = (isEmailSetup = true) => render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <InviteModal isEmailSetup={isEmailSetup} onCancel={mockOnCancel} onSend={mockOnSend} />
+    </ToastContext.Provider>,
+  )
+
+  it('should render invite modal content', async () => {
+    renderModal()
+
+    expect(await screen.findByText(/members\.inviteTeamMember$/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /members\.sendInvite/i })).toBeDisabled()
+  })
+
+  it('should show warning when email service is not configured', async () => {
+    renderModal(false)
+
+    expect(await screen.findByText(/members\.emailNotSetup$/i)).toBeInTheDocument()
+  })
+
+  it('should enable send button after entering an email', async () => {
+    const user = userEvent.setup()
+
+    renderModal()
+
+    const input = screen.getByRole('textbox')
+    await user.type(input, 'user@example.com{enter}')
+
+    expect(screen.getByRole('button', { name: /members\.sendInvite/i })).toBeEnabled()
+  })
+
+  it('should not close modal when invite request fails', async () => {
+    const user = userEvent.setup()
+    vi.mocked(inviteMember).mockRejectedValue(new Error('request failed'))
+
+    renderModal()
+
+    await user.type(screen.getByRole('textbox'), 'user@example.com{enter}')
+    await user.click(screen.getByRole('button', { name: /members\.sendInvite/i }))
+
+    await waitFor(() => {
+      expect(inviteMember).toHaveBeenCalled()
+      expect(mockOnCancel).not.toHaveBeenCalled()
+      expect(mockOnSend).not.toHaveBeenCalled()
+    })
+  })
+
+  it('should send invites and close modal on successful submission', async () => {
+    const user = userEvent.setup()
+    vi.mocked(inviteMember).mockResolvedValue({
+      result: 'success',
+      invitation_results: [],
+    } as InvitationResponse)
+
+    renderModal()
+
+    const input = screen.getByRole('textbox')
+    await user.type(input, 'user@example.com{enter}')
+    await user.click(screen.getByRole('button', { name: /members\.sendInvite/i }))
+
+    await waitFor(() => {
+      expect(inviteMember).toHaveBeenCalled()
+      expect(mockRefreshLicenseLimit).toHaveBeenCalled()
+      expect(mockOnCancel).toHaveBeenCalled()
+      expect(mockOnSend).toHaveBeenCalled()
+    })
+  })
+
+  it('should keep send button disabled when license limit is exceeded', async () => {
+    const user = userEvent.setup()
+
+    vi.mocked(useProviderContextSelector).mockImplementation(selector => selector({
+      licenseLimit: { workspace_members: { size: 10, limit: 10 } },
+      refreshLicenseLimit: mockRefreshLicenseLimit,
+    } as unknown as Parameters<typeof selector>[0]))
+
+    renderModal()
+
+    const input = screen.getByRole('textbox')
+    await user.type(input, 'user@example.com{enter}')
+
+    expect(screen.getByRole('button', { name: /members\.sendInvite/i })).toBeDisabled()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.spec.tsx
new file mode 100644
index 0000000000..3c7a496a74
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.spec.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { vi } from 'vitest'
+import { useProviderContext } from '@/context/provider-context'
+import RoleSelector from './role-selector'
+
+vi.mock('@/context/provider-context')
+
+type WrapperProps = {
+  initialRole?: 'normal' | 'editor' | 'admin' | 'dataset_operator'
+}
+
+const RoleSelectorWrapper = ({ initialRole = 'normal' }: WrapperProps) => {
+  const [role, setRole] = useState<'normal' | 'editor' | 'admin' | 'dataset_operator'>(initialRole)
+  return <RoleSelector value={role} onChange={setRole} />
+}
+
+describe('RoleSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useProviderContext).mockReturnValue({
+      datasetOperatorEnabled: true,
+    } as unknown as ReturnType<typeof useProviderContext>)
+  })
+
+  it('should show current role in trigger text', () => {
+    render(<RoleSelectorWrapper initialRole="admin" />)
+
+    expect(screen.getByText(/members\.invitedAsRole/i)).toBeInTheDocument()
+  })
+
+  it.each([
+    'common.members.admin',
+    'common.members.editor',
+    'common.members.datasetOperator',
+  ])('should update selected role after user chooses %s', async (nextRoleLabel) => {
+    const user = userEvent.setup()
+
+    render(<RoleSelectorWrapper initialRole="normal" />)
+
+    await user.click(screen.getByText(/members\.invitedAsRole/i))
+    await user.click(screen.getByText(nextRoleLabel))
+
+    expect(screen.getByText(new RegExp(nextRoleLabel.replace('.', '\\.'), 'i'))).toBeInTheDocument()
+  })
+
+  it('should hide dataset operator option when feature is disabled', async () => {
+    const user = userEvent.setup()
+
+    vi.mocked(useProviderContext).mockReturnValue({
+      datasetOperatorEnabled: false,
+    } as unknown as ReturnType<typeof useProviderContext>)
+
+    render(<RoleSelectorWrapper />)
+
+    await user.click(screen.getByText(/members\.invitedAsRole/i))
+
+    expect(screen.queryByText('common.members.datasetOperator')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.spec.tsx
new file mode 100644
index 0000000000..127c33a29f
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.spec.tsx
@@ -0,0 +1,24 @@
+import type { InvitationResult } from '@/models/common'
+import { render, screen } from '@testing-library/react'
+import InvitedModal from './index'
+
+vi.mock('@/config', () => ({
+  IS_CE_EDITION: true,
+}))
+
+describe('InvitedModal', () => {
+  const mockOnCancel = vi.fn()
+  const results: InvitationResult[] = [
+    { email: 'success@example.com', status: 'success', url: 'http://invite.com/1' },
+    { email: 'failed@example.com', status: 'failed', message: 'Error msg' },
+  ]
+
+  it('should show success and failed invitation sections', async () => {
+    render(<InvitedModal invitationResults={results} onCancel={mockOnCancel} />)
+
+    expect(await screen.findByText(/members\.invitationSent$/i)).toBeInTheDocument()
+    expect(await screen.findByText(/members\.invitationLink/i)).toBeInTheDocument()
+    expect(screen.getByText('http://invite.com/1')).toBeInTheDocument()
+    expect(screen.getByText('failed@example.com')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.spec.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.spec.tsx
new file mode 100644
index 0000000000..4a2dbb54e7
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.spec.tsx
@@ -0,0 +1,30 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import InvitationLink from './invitation-link'
+
+describe('InvitationLink', () => {
+  const value = { email: 'test@example.com', status: 'success' as const, url: '/invite/123' }
+
+  it('should render invitation url and keep it visible after click', async () => {
+    const user = userEvent.setup()
+
+    render(<InvitationLink value={value} />)
+
+    const url = screen.getByText('/invite/123')
+    await user.click(url)
+
+    expect(url).toBeInTheDocument()
+  })
+
+  it('should keep link visible after copy feedback timeout passes', async () => {
+    const user = userEvent.setup()
+
+    render(<InvitationLink value={value} />)
+
+    await user.click(screen.getByText('/invite/123'))
+
+    await waitFor(() => {
+      expect(screen.getByText('/invite/123')).toBeInTheDocument()
+    }, { timeout: 1500 })
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/operation/index.spec.tsx b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
index fbe3959a0f..661b2fbc83 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
@@ -1,5 +1,6 @@
 import type { Member } from '@/models/common'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast'
 import Operation from './index'
@@ -55,20 +56,45 @@ describe('Operation', () => {
   })
 
   it('shows dataset operator option when the feature flag is enabled', async () => {
+    const user = userEvent.setup()
+
     mockUseProviderContext.mockReturnValue({ datasetOperatorEnabled: true })
     renderOperation()
 
-    fireEvent.click(screen.getByText('common.members.editor'))
+    await user.click(screen.getByText('common.members.editor'))
 
     expect(await screen.findByText('common.members.datasetOperator')).toBeInTheDocument()
   })
 
+  it('shows owner-allowed role options for admin operators', async () => {
+    const user = userEvent.setup()
+
+    renderOperation({}, 'admin')
+
+    await user.click(screen.getByText('common.members.editor'))
+
+    expect(screen.queryByText('common.members.admin')).not.toBeInTheDocument()
+    expect(screen.getByText('common.members.normal')).toBeInTheDocument()
+  })
+
+  it('does not show role options for unsupported operators', async () => {
+    const user = userEvent.setup()
+
+    renderOperation({}, 'normal')
+
+    await user.click(screen.getByText('common.members.editor'))
+
+    expect(screen.queryByText('common.members.normal')).not.toBeInTheDocument()
+    expect(screen.getByText('common.members.removeFromTeam')).toBeInTheDocument()
+  })
+
   it('calls updateMemberRole and onOperate when selecting another role', async () => {
+    const user = userEvent.setup()
     const onOperate = vi.fn()
     renderOperation({}, 'owner', onOperate)
 
-    fireEvent.click(screen.getByText('common.members.editor'))
-    fireEvent.click(await screen.findByText('common.members.normal'))
+    await user.click(screen.getByText('common.members.editor'))
+    await user.click(await screen.findByText('common.members.normal'))
 
     await waitFor(() => {
       expect(mockUpdateMemberRole).toHaveBeenCalled()
@@ -77,11 +103,12 @@ describe('Operation', () => {
   })
 
   it('calls deleteMemberOrCancelInvitation when removing the member', async () => {
+    const user = userEvent.setup()
     const onOperate = vi.fn()
     renderOperation({}, 'owner', onOperate)
 
-    fireEvent.click(screen.getByText('common.members.editor'))
-    fireEvent.click(await screen.findByText('common.members.removeFromTeam'))
+    await user.click(screen.getByText('common.members.editor'))
+    await user.click(await screen.findByText('common.members.removeFromTeam'))
 
     await waitFor(() => {
       expect(mockDeleteMemberOrCancelInvitation).toHaveBeenCalled()
diff --git a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.spec.tsx b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.spec.tsx
new file mode 100644
index 0000000000..74f86d601d
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.spec.tsx
@@ -0,0 +1,89 @@
+import type { AppContextValue } from '@/context/app-context'
+import type { ICurrentWorkspace } from '@/models/common'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useWorkspacePermissions } from '@/service/use-workspace'
+import TransferOwnership from './transfer-ownership'
+
+vi.mock('@/context/app-context')
+vi.mock('@/context/global-public-context')
+vi.mock('@/service/use-workspace')
+
+describe('TransferOwnership', () => {
+  const setupMocks = ({
+    brandingEnabled,
+    isFetching,
+    allowOwnerTransfer,
+  }: {
+    brandingEnabled: boolean
+    isFetching: boolean
+    allowOwnerTransfer?: boolean
+  }) => {
+    vi.mocked(useGlobalPublicStore).mockImplementation(selector => selector({
+      systemFeatures: { branding: { enabled: brandingEnabled } },
+    } as unknown as Parameters<typeof selector>[0]))
+    vi.mocked(useWorkspacePermissions).mockReturnValue({
+      data: allowOwnerTransfer === undefined ? null : { allow_owner_transfer: allowOwnerTransfer },
+      isFetching,
+    } as unknown as ReturnType<typeof useWorkspacePermissions>)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useAppContext).mockReturnValue({
+      currentWorkspace: { id: 'workspace-id' } as ICurrentWorkspace,
+    } as unknown as AppContextValue)
+  })
+
+  it('should show loading status while permissions are loading', () => {
+    setupMocks({ brandingEnabled: true, isFetching: true })
+
+    render(<TransferOwnership onOperate={vi.fn()} />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should show owner text without transfer menu when transfer is forbidden', () => {
+    setupMocks({ brandingEnabled: true, isFetching: false, allowOwnerTransfer: false })
+
+    render(<TransferOwnership onOperate={vi.fn()} />)
+
+    expect(screen.getByText(/members\.owner/i)).toBeInTheDocument()
+    expect(screen.queryByText(/members\.transferOwnership/i)).toBeNull()
+  })
+
+  it('should open transfer dialog when transfer option is selected', async () => {
+    const user = userEvent.setup()
+    const onOperate = vi.fn()
+
+    setupMocks({ brandingEnabled: true, isFetching: false, allowOwnerTransfer: true })
+
+    render(<TransferOwnership onOperate={onOperate} />)
+
+    await user.click(screen.getByRole('button', { name: /members\.owner/i }))
+    const transferOptionText = await screen.findByText(/members\.transferOwnership/i)
+    const transferOption = transferOptionText.closest('div.cursor-pointer')
+    if (!transferOption)
+      throw new Error('Transfer option container not found')
+    fireEvent.click(transferOption)
+
+    await waitFor(() => {
+      expect(onOperate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should allow transfer menu when branding is disabled', async () => {
+    const user = userEvent.setup()
+
+    setupMocks({ brandingEnabled: false, isFetching: false })
+
+    render(<TransferOwnership onOperate={vi.fn()} />)
+
+    await user.click(screen.getByRole('button', { name: /members\.owner/i }))
+
+    expect(screen.getByText(/members\.transferOwnership/i)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
new file mode 100644
index 0000000000..d2ef1a6af7
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
@@ -0,0 +1,149 @@
+import type { AppContextValue } from '@/context/app-context'
+import type { ICurrentWorkspace } from '@/models/common'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { ToastContext } from '@/app/components/base/toast'
+import { useAppContext } from '@/context/app-context'
+import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
+import TransferOwnershipModal from './index'
+
+vi.mock('@/context/app-context')
+vi.mock('@/service/common')
+
+vi.mock('./member-selector', () => ({
+  default: ({ onSelect }: { onSelect: (id: string) => void }) => (
+    <button onClick={() => onSelect('new-owner-id')}>Select member</button>
+  ),
+}))
+
+describe('TransferOwnershipModal', () => {
+  const mockOnClose = vi.fn()
+  const mockNotify = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(globalThis, 'setInterval').mockImplementation(() => 0 as unknown as ReturnType<typeof setInterval>)
+    vi.spyOn(globalThis, 'clearInterval').mockImplementation(() => {})
+
+    vi.mocked(useAppContext).mockReturnValue({
+      currentWorkspace: { name: 'Test Workspace' } as ICurrentWorkspace,
+      userProfile: { email: 'owner@example.com', id: 'owner-id' },
+    } as unknown as AppContextValue)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  const renderModal = () => render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <TransferOwnershipModal show onClose={mockOnClose} />
+    </ToastContext.Provider>,
+  )
+
+  const mockEmailVerification = ({
+    isValid = true,
+    token = 'final-token',
+  }: {
+    isValid?: boolean
+    token?: string
+  } = {}) => {
+    vi.mocked(sendOwnerEmail).mockResolvedValue({
+      data: 'step-token',
+      result: 'success',
+    } as Awaited<ReturnType<typeof sendOwnerEmail>>)
+    vi.mocked(verifyOwnerEmail).mockResolvedValue({
+      is_valid: isValid,
+      token,
+      result: 'success',
+    } as Awaited<ReturnType<typeof verifyOwnerEmail>>)
+  }
+
+  const goToTransferStep = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
+    await user.type(screen.getByPlaceholderText(/members\.transferModal\.codePlaceholder/i), '123456')
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.continue/i }))
+  }
+
+  const selectNewOwnerAndSubmit = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.click(screen.getByRole('button', { name: /select member/i }))
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.transfer$/i }))
+  }
+
+  it('should complete ownership transfer flow through all steps', async () => {
+    const user = userEvent.setup()
+
+    mockEmailVerification()
+    vi.mocked(ownershipTransfer).mockResolvedValue({
+      result: 'success',
+    } as Awaited<ReturnType<typeof ownershipTransfer>>)
+
+    const mockReload = vi.fn()
+    vi.stubGlobal('location', { ...window.location, reload: mockReload })
+
+    renderModal()
+
+    await goToTransferStep(user)
+
+    expect(await screen.findByText(/members\.transferModal\.transferLabel/i)).toBeInTheDocument()
+
+    await selectNewOwnerAndSubmit(user)
+
+    await waitFor(() => {
+      expect(ownershipTransfer).toHaveBeenCalledWith('new-owner-id', { token: 'final-token' })
+      expect(mockReload).toHaveBeenCalled()
+    })
+  }, 15000)
+
+  it('should show error when email verification returns invalid code', async () => {
+    const user = userEvent.setup()
+
+    mockEmailVerification({ isValid: false, token: 'step-token' })
+
+    renderModal()
+
+    await goToTransferStep(user)
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+      }))
+    })
+  })
+
+  it('should show error when sending verification email fails', async () => {
+    const user = userEvent.setup()
+
+    vi.mocked(sendOwnerEmail).mockRejectedValue(new Error('network error'))
+
+    renderModal()
+
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+      }))
+    })
+  })
+
+  it('should show error when ownership transfer fails', async () => {
+    const user = userEvent.setup()
+
+    mockEmailVerification()
+    vi.mocked(ownershipTransfer).mockRejectedValue(new Error('transfer failed'))
+
+    renderModal()
+
+    await goToTransferStep(user)
+    await selectNewOwnerAndSubmit(user)
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+      }))
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.spec.tsx
new file mode 100644
index 0000000000..afed247394
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.spec.tsx
@@ -0,0 +1,107 @@
+import type { Member } from '@/models/common'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { vi } from 'vitest'
+import { useMembers } from '@/service/use-common'
+import MemberSelector from './member-selector'
+
+vi.mock('@/service/use-common')
+
+const MemberSelectorHarness = ({ initialValue = '', exclude = [] as string[] }: { initialValue?: string, exclude?: string[] }) => {
+  const [selected, setSelected] = useState<string>(initialValue)
+  return (
+    <>
+      <MemberSelector value={selected} onSelect={setSelected} exclude={exclude} />
+      {selected && (
+        <div>
+          Selected:
+          {' '}
+          {selected}
+        </div>
+      )}
+    </>
+  )
+}
+
+describe('MemberSelector', () => {
+  const mockMembers = [
+    { id: '1', name: 'User 1', email: 'user1@example.com', role: 'admin' },
+    { id: '2', name: 'User 2', email: 'user2@example.com', role: 'normal' },
+  ] as Member[]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useMembers).mockReturnValue({
+      data: { accounts: mockMembers },
+    } as unknown as ReturnType<typeof useMembers>)
+  })
+
+  it('should show member options when selector is opened', async () => {
+    const user = userEvent.setup()
+
+    render(<MemberSelectorHarness />)
+
+    await user.click(screen.getByText(/members\.transferModal\.transferPlaceholder/i))
+
+    expect(screen.getByPlaceholderText(/common\.operation\.search/i)).toBeInTheDocument()
+    expect(screen.getByText('User 1')).toBeInTheDocument()
+    expect(screen.getByText('User 2')).toBeInTheDocument()
+  })
+
+  it('should filter displayed members by search term', async () => {
+    const user = userEvent.setup()
+
+    render(<MemberSelectorHarness />)
+
+    await user.click(screen.getByText(/members\.transferModal\.transferPlaceholder/i))
+    await user.type(screen.getByPlaceholderText(/common\.operation\.search/i), 'User 2')
+
+    expect(screen.queryByText('User 1')).not.toBeInTheDocument()
+    expect(screen.getByText('User 2')).toBeInTheDocument()
+  })
+
+  it('should show selected member after clicking an option', async () => {
+    const user = userEvent.setup()
+
+    render(<MemberSelectorHarness />)
+
+    await user.click(screen.getByText(/members\.transferModal\.transferPlaceholder/i))
+    await user.click(screen.getByText('User 1'))
+
+    expect(screen.getByText('Selected: 1')).toBeInTheDocument()
+  })
+
+  it('should show selected value details when an initial value is provided', () => {
+    render(<MemberSelectorHarness initialValue="2" />)
+
+    expect(screen.getByText('User 2')).toBeInTheDocument()
+    expect(screen.getByText('user2@example.com')).toBeInTheDocument()
+  })
+
+  it('should hide excluded members from options', async () => {
+    const user = userEvent.setup()
+
+    render(<MemberSelectorHarness exclude={['1']} />)
+
+    await user.click(screen.getByText(/members\.transferModal\.transferPlaceholder/i))
+
+    expect(screen.queryByText('User 1')).not.toBeInTheDocument()
+    expect(screen.getByText('User 2')).toBeInTheDocument()
+  })
+
+  it('should render empty options when member data is unavailable', async () => {
+    const user = userEvent.setup()
+
+    vi.mocked(useMembers).mockReturnValue({
+      data: undefined,
+    } as unknown as ReturnType<typeof useMembers>)
+
+    render(<MemberSelectorHarness />)
+
+    await user.click(screen.getByText(/members\.transferModal\.transferPlaceholder/i))
+
+    expect(screen.queryByText('User 1')).not.toBeInTheDocument()
+    expect(screen.queryByText('User 2')).not.toBeInTheDocument()
+  })
+})

From a0244d1390b3a14245cc92cf711424e70dad2bb7 Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Mon, 23 Feb 2026 17:37:19 +0530
Subject: [PATCH 02/26] =?UTF-8?q?test(web):=20add=20tests=20for=20model-pr?=
 =?UTF-8?q?ovider-page=20files=20in=20header=20account-=E2=80=A6=20(#32360?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-badge/index.spec.tsx                |  33 ++
 .../model-icon/index.spec.tsx                 | 108 +++++
 .../model-modal/Form.spec.tsx                 | 447 ++++++++++++++++++
 .../model-modal/Input.spec.tsx                |  96 ++++
 .../model-modal/index.spec.tsx                | 353 ++++++++++++++
 .../model-name/index.spec.tsx                 | 116 +++++
 .../agent-model-trigger.spec.tsx              | 154 ++++++
 .../configuration-button.spec.tsx             |  28 ++
 .../model-parameter-modal/index.spec.tsx      | 273 +++++++++++
 .../model-display.spec.tsx                    |  20 +
 .../parameter-item.spec.tsx                   | 239 ++++++++++
 .../model-parameter-modal/parameter-item.tsx  |  16 +-
 .../presets-parameter.spec.tsx                |  32 ++
 .../status-indicators.spec.tsx                | 103 ++++
 .../model-parameter-modal/trigger.spec.tsx    |  47 ++
 web/eslint-suppressions.json                  |   5 -
 16 files changed, 2057 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-badge/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-icon/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-modal/Form.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-name/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.spec.tsx

diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.spec.tsx
new file mode 100644
index 0000000000..bc68d9a94d
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.spec.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import ModelBadge from './index'
+
+describe('ModelBadge', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering behavior for user-visible content.
+  describe('Rendering', () => {
+    it('should render provided text', () => {
+      render(<ModelBadge>Provider</ModelBadge>)
+
+      expect(screen.getByText(/provider/i)).toBeInTheDocument()
+    })
+
+    it('should render without text when children is null', () => {
+      const { container } = render(<ModelBadge>{null}</ModelBadge>)
+
+      expect(container.textContent).toBe('')
+    })
+
+    it('should render nested content', () => {
+      render(
+        <ModelBadge>
+          <span>Badge Label</span>
+        </ModelBadge>,
+      )
+
+      expect(screen.getByText(/badge label/i)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.spec.tsx
new file mode 100644
index 0000000000..d397330159
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.spec.tsx
@@ -0,0 +1,108 @@
+import type { Model } from '../declarations'
+import { render, screen } from '@testing-library/react'
+import { Theme } from '@/types/app'
+import {
+  ConfigurationMethodEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import ModelIcon from './index'
+
+type I18nText = {
+  en_US: string
+  zh_Hans: string
+}
+
+let mockTheme: Theme = Theme.light
+let mockLanguage = 'en_US'
+
+vi.mock('@/hooks/use-theme', () => ({
+  default: () => ({ theme: mockTheme }),
+}))
+
+vi.mock('../hooks', () => ({
+  useLanguage: () => mockLanguage,
+}))
+
+vi.mock('@/app/components/base/icons/src/public/llm', () => ({
+  OpenaiYellow: () => <svg data-testid="openai-yellow-icon" />,
+}))
+
+const createI18nText = (value: string): I18nText => ({
+  en_US: value,
+  zh_Hans: value,
+})
+
+const createModel = (overrides?: Partial<Model>): Model => ({
+  provider: 'test-provider',
+  icon_small: createI18nText('light.png'),
+  icon_small_dark: createI18nText('dark.png'),
+  label: createI18nText('Test Provider'),
+  models: [
+    {
+      model: 'test-model',
+      label: createI18nText('Test Model'),
+      model_type: ModelTypeEnum.textGeneration,
+      fetch_from: ConfigurationMethodEnum.predefinedModel,
+      status: ModelStatusEnum.active,
+      model_properties: {},
+      load_balancing_enabled: false,
+    },
+  ],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('ModelIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTheme = Theme.light
+    mockLanguage = 'en_US'
+  })
+
+  // Rendering
+  it('should render the light icon when icon_small is provided', () => {
+    const provider = createModel({
+      icon_small: createI18nText('light-only.png'),
+      icon_small_dark: undefined,
+    })
+
+    render(<ModelIcon provider={provider} />)
+
+    expect(screen.getByRole('img', { name: /model-icon/i })).toHaveAttribute('src', 'light-only.png')
+  })
+
+  // Theme selection
+  it('should render the dark icon when theme is dark and icon_small_dark exists', () => {
+    mockTheme = Theme.dark
+    const provider = createModel({
+      icon_small: createI18nText('light.png'),
+      icon_small_dark: createI18nText('dark.png'),
+    })
+
+    render(<ModelIcon provider={provider} />)
+
+    expect(screen.getByRole('img', { name: /model-icon/i })).toHaveAttribute('src', 'dark.png')
+  })
+
+  // Provider override
+  it('should ignore icon_small for OpenAI models starting with "o"', () => {
+    const provider = createModel({
+      provider: 'openai',
+      icon_small: createI18nText('openai.png'),
+    })
+
+    render(<ModelIcon provider={provider} modelName="o1" />)
+
+    expect(screen.queryByRole('img', { name: /model-icon/i })).not.toBeInTheDocument()
+    expect(screen.getByTestId('openai-yellow-icon')).toBeInTheDocument()
+  })
+
+  // Edge case
+  it('should render without an icon when provider is undefined', () => {
+    const { container } = render(<ModelIcon />)
+
+    expect(screen.queryByRole('img', { name: /model-icon/i })).not.toBeInTheDocument()
+    expect(container.firstChild).not.toBeNull()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.spec.tsx
new file mode 100644
index 0000000000..572a2944f8
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.spec.tsx
@@ -0,0 +1,447 @@
+import type {
+  CredentialFormSchema,
+  CredentialFormSchemaBase,
+  CredentialFormSchemaNumberInput,
+  CredentialFormSchemaRadio,
+  CredentialFormSchemaSelect,
+  CredentialFormSchemaTextInput,
+  FormValue,
+} from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FormTypeEnum } from '../declarations'
+import Form from './Form'
+
+type CustomSchema = Omit<CredentialFormSchemaBase, 'type'> & { type: 'custom-type' }
+
+type MockVarPayload = { type: string }
+
+type AnyFormSchema = CredentialFormSchema | (CredentialFormSchemaBase & { type: FormTypeEnum })
+
+vi.mock('../hooks', () => ({
+  useLanguage: () => 'en_US',
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/app-selector', () => ({
+  default: ({ onSelect }: { onSelect: (item: { id: string }) => void }) => (
+    <button type="button" onClick={() => onSelect({ id: 'app-1' })}>Select App</button>
+  ),
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/model-selector', () => ({
+  default: ({ setModel }: { setModel: (model: { model: string, model_type: string }) => void }) => (
+    <button type="button" onClick={() => setModel({ model: 'gpt-1', model_type: 'llm' })}>Select Model</button>
+  ),
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/multiple-tool-selector', () => ({
+  default: ({ onChange }: { onChange: (items: Array<{ id: string }>) => void }) => (
+    <button type="button" onClick={() => onChange([{ id: 'tool-1' }])}>Select Tools</button>
+  ),
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/tool-selector', () => ({
+  default: ({ onSelect, onDelete }: { onSelect: (item: { id: string }) => void, onDelete: () => void }) => (
+    <div>
+      <button type="button" onClick={() => onSelect({ id: 'tool-1' })}>Select Tool</button>
+      <button type="button" onClick={onDelete}>Remove Tool</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+  default: ({ filterVar, onChange }: { filterVar?: (payload: MockVarPayload) => boolean, onChange: (items: Array<{ name: string }>) => void }) => {
+    const allowed = filterVar ? filterVar({ type: 'text' }) : true
+    const blocked = filterVar ? filterVar({ type: 'image' }) : false
+    return (
+      <div>
+        <div>{allowed ? 'allowed' : 'blocked'}</div>
+        <div>{blocked ? 'allowed' : 'blocked'}</div>
+        <button type="button" onClick={() => onChange([{ name: 'var-1' }])}>Pick Variable</button>
+      </div>
+    )
+  },
+}))
+
+vi.mock('../../key-validator/ValidateStatus', () => ({
+  ValidatingTip: () => <div>Validating...</div>,
+}))
+
+const createI18n = (text: string) => ({ en_US: text, zh_Hans: text })
+
+const createBaseSchema = (
+  type: FormTypeEnum,
+  overrides: Partial<CredentialFormSchemaBase> = {},
+): CredentialFormSchemaBase => ({
+  name: overrides.variable ?? 'field',
+  variable: overrides.variable ?? 'field',
+  label: createI18n('Field'),
+  type,
+  required: false,
+  show_on: [],
+  ...overrides,
+})
+
+const createTextSchema = (overrides: Partial<CredentialFormSchemaTextInput> & { type?: FormTypeEnum }) => ({
+  ...createBaseSchema(overrides.type ?? FormTypeEnum.textInput, { variable: overrides.variable ?? 'text' }),
+  placeholder: createI18n('Input'),
+  ...overrides,
+})
+
+const createNumberSchema = (overrides: Partial<CredentialFormSchemaNumberInput>) => ({
+  ...createBaseSchema(FormTypeEnum.textNumber, { variable: overrides.variable ?? 'number' }),
+  placeholder: createI18n('Number'),
+  min: 1,
+  max: 9,
+  ...overrides,
+})
+
+const createRadioSchema = (overrides: Partial<CredentialFormSchemaRadio>) => ({
+  ...createBaseSchema(FormTypeEnum.radio, { variable: overrides.variable ?? 'radio' }),
+  options: [
+    { label: createI18n('Option A'), value: 'a', show_on: [] },
+    { label: createI18n('Option B'), value: 'b', show_on: [] },
+  ],
+  ...overrides,
+})
+
+const createSelectSchema = (overrides: Partial<CredentialFormSchemaSelect>) => ({
+  ...createBaseSchema(FormTypeEnum.select, { variable: overrides.variable ?? 'select' }),
+  placeholder: createI18n('Select one'),
+  options: [
+    { label: createI18n('Select A'), value: 'a', show_on: [] },
+    { label: createI18n('Select B'), value: 'b', show_on: [] },
+  ],
+  ...overrides,
+})
+
+describe('Form', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering basics
+  describe('Rendering', () => {
+    it('should render visible fields and apply default values', () => {
+      const formSchemas: AnyFormSchema[] = [
+        createTextSchema({
+          variable: 'api_key',
+          label: createI18n('API Key'),
+          placeholder: createI18n('API Key'),
+          required: true,
+          default: 'default-key',
+        }),
+        createTextSchema({
+          variable: 'secret',
+          type: FormTypeEnum.secretInput,
+          label: createI18n('Secret'),
+          placeholder: createI18n('Secret'),
+        }),
+        createNumberSchema({
+          variable: 'limit',
+          label: createI18n('Limit'),
+          placeholder: createI18n('Limit'),
+          default: '5',
+        }),
+        createTextSchema({
+          variable: 'hidden',
+          label: createI18n('Hidden'),
+          show_on: [{ variable: 'toggle', value: 'on' }],
+        }),
+      ]
+      const value: FormValue = {
+        api_key: '',
+        secret: 'top-secret',
+        limit: '',
+        toggle: 'off',
+      }
+
+      render(
+        <Form
+          value={value}
+          onChange={vi.fn()}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode={false}
+          isShowDefaultValue
+        />,
+      )
+
+      expect(screen.getByPlaceholderText('API Key')).toHaveValue('default-key')
+      expect(screen.getByPlaceholderText('Secret')).toHaveValue('top-secret')
+      expect(screen.getByPlaceholderText('Limit')).toHaveValue(5)
+      expect(screen.queryByText('Hidden')).not.toBeInTheDocument()
+      expect(screen.getAllByText('*')).toHaveLength(1)
+    })
+  })
+
+  // Interaction updates
+  describe('Interactions', () => {
+    it('should update values and clear dependent fields when a field changes', () => {
+      const formSchemas: AnyFormSchema[] = [
+        createTextSchema({
+          variable: 'api_key',
+          label: createI18n('API Key'),
+          placeholder: createI18n('API Key'),
+        }),
+        createTextSchema({
+          variable: 'dependent',
+          label: createI18n('Dependent'),
+          default: 'reset',
+        }),
+      ]
+      const value: FormValue = { api_key: 'old', dependent: 'keep' }
+      const onChange = vi.fn()
+
+      render(
+        <Form
+          value={value}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating
+          validatedSuccess={false}
+          showOnVariableMap={{ api_key: ['dependent'] }}
+          isEditMode={false}
+        />,
+      )
+
+      fireEvent.change(screen.getByPlaceholderText('API Key'), { target: { value: 'new-key' } })
+
+      expect(onChange).toHaveBeenCalledWith({ api_key: 'new-key', dependent: 'reset' })
+      expect(screen.getByText('Validating...')).toBeInTheDocument()
+    })
+
+    it('should render radio options based on show conditions and ignore edit-locked changes', () => {
+      const formSchemas: AnyFormSchema[] = [
+        createRadioSchema({
+          variable: 'region',
+          label: createI18n('Region'),
+          options: [
+            { label: createI18n('US'), value: 'us', show_on: [] },
+            { label: createI18n('EU'), value: 'eu', show_on: [{ variable: 'toggle', value: 'on' }] },
+          ],
+        }),
+        createRadioSchema({
+          variable: 'hidden_region',
+          label: createI18n('Hidden Region'),
+          show_on: [{ variable: 'toggle', value: 'hidden' }],
+          options: [
+            { label: createI18n('Hidden A'), value: 'a', show_on: [] },
+          ],
+        }),
+        createRadioSchema({
+          variable: '__model_name',
+          label: createI18n('Locked'),
+          options: [
+            { label: createI18n('Locked A'), value: 'a', show_on: [] },
+          ],
+        }),
+      ]
+      const value: FormValue = { region: 'us', toggle: 'on', __model_name: 'a' }
+      const onChange = vi.fn()
+
+      render(
+        <Form
+          value={value}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode
+        />,
+      )
+
+      expect(screen.getByText('EU')).toBeInTheDocument()
+      expect(screen.queryByText('Hidden Region')).not.toBeInTheDocument()
+      fireEvent.click(screen.getByText('EU'))
+      fireEvent.click(screen.getByText('Locked A'))
+
+      expect(onChange).toHaveBeenCalledWith({ region: 'eu', toggle: 'on', __model_name: 'a' })
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render select and checkbox fields and update checkbox value', () => {
+      const formSchemas: AnyFormSchema[] = [
+        createSelectSchema({
+          variable: 'model',
+          label: createI18n('Model'),
+          placeholder: createI18n('Pick model'),
+          show_on: [{ variable: 'toggle', value: 'on' }],
+          options: [
+            { label: createI18n('Select A'), value: 'a', show_on: [] },
+            { label: createI18n('Select B'), value: 'b', show_on: [{ variable: 'toggle', value: 'on' }] },
+          ],
+        }),
+        createRadioSchema({
+          variable: 'agree',
+          type: FormTypeEnum.checkbox,
+          label: createI18n('Agree'),
+          options: [],
+          show_on: [{ variable: 'toggle', value: 'on' }],
+        }),
+      ]
+      const value: FormValue = { model: 'a', agree: false, toggle: 'off' }
+      const onChange = vi.fn()
+
+      const { rerender } = render(
+        <Form
+          value={value}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode={false}
+        />,
+      )
+
+      expect(screen.queryByText('Pick model')).not.toBeInTheDocument()
+      expect(screen.queryByText('Agree')).not.toBeInTheDocument()
+
+      rerender(
+        <Form
+          value={{ model: 'a', agree: false, toggle: 'on' }}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode={false}
+        />,
+      )
+
+      expect(screen.getByText('Select A')).toBeInTheDocument()
+      fireEvent.click(screen.getByText('Select A'))
+      fireEvent.click(screen.getByText('Select B'))
+
+      fireEvent.click(screen.getByText('True'))
+
+      expect(onChange).toHaveBeenCalledWith({ model: 'b', agree: false, toggle: 'on' })
+      expect(onChange).toHaveBeenCalledWith({ model: 'a', agree: true, toggle: 'on' })
+    })
+
+    it('should pass selected items from model and tool selectors to the form value', () => {
+      const formSchemas: AnyFormSchema[] = [
+        createTextSchema({
+          variable: 'model_selector',
+          type: FormTypeEnum.modelSelector,
+          label: createI18n('Model Selector'),
+        }),
+        createTextSchema({
+          variable: 'tool_selector',
+          type: FormTypeEnum.toolSelector,
+          label: createI18n('Tool Selector'),
+        }),
+        createTextSchema({
+          variable: 'multi_tool',
+          type: FormTypeEnum.multiToolSelector,
+          label: createI18n('Multi Tool'),
+          tooltip: createI18n('Tips'),
+        }),
+        createTextSchema({
+          variable: 'app_selector',
+          type: FormTypeEnum.appSelector,
+          label: createI18n('App Selector'),
+        }),
+      ]
+      const value: FormValue = { model_selector: {}, tool_selector: null, multi_tool: [], app_selector: null }
+      const onChange = vi.fn()
+
+      render(
+        <Form
+          value={value}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode={false}
+        />,
+      )
+
+      fireEvent.click(screen.getByText('Select Model'))
+      fireEvent.click(screen.getByText('Select Tool'))
+      fireEvent.click(screen.getByText('Remove Tool'))
+      fireEvent.click(screen.getByText('Select Tools'))
+      fireEvent.click(screen.getByText('Select App'))
+
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+        model_selector: { model: 'gpt-1', model_type: 'llm', type: FormTypeEnum.modelSelector },
+      }))
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+        tool_selector: { id: 'tool-1' },
+      }))
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+        tool_selector: null,
+      }))
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+        multi_tool: [{ id: 'tool-1' }],
+      }))
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+        app_selector: { id: 'app-1', type: FormTypeEnum.appSelector },
+      }))
+    })
+
+    it('should render variable picker and custom render overrides', () => {
+      const formSchemas: Array<AnyFormSchema | CustomSchema> = [
+        createTextSchema({
+          variable: 'override',
+          label: createI18n('Override'),
+          type: FormTypeEnum.textInput,
+        }),
+        createTextSchema({
+          variable: 'any_var',
+          type: FormTypeEnum.any,
+          label: createI18n('Any Var'),
+          scope: 'text&audio',
+        }),
+        createTextSchema({
+          variable: 'any_without_scope',
+          type: FormTypeEnum.any,
+          label: createI18n('Any Without Scope'),
+        }),
+        {
+          ...createTextSchema({
+            variable: 'custom_field',
+            label: createI18n('Custom Field'),
+          }),
+          type: 'custom-type',
+        },
+      ]
+      const value: FormValue = { override: '', any_var: [], any_without_scope: [], custom_field: '' }
+      const onChange = vi.fn()
+
+      render(
+        <Form<CustomSchema>
+          value={value}
+          onChange={onChange}
+          formSchemas={formSchemas}
+          validating={false}
+          validatedSuccess={false}
+          showOnVariableMap={{}}
+          isEditMode={false}
+          fieldMoreInfo={() => <div>Extra Info</div>}
+          override={[[FormTypeEnum.textInput], () => <div>Override Field</div>]}
+          customRenderField={schema => (
+            <div>
+              Custom Render:
+              {schema.variable}
+            </div>
+          )}
+        />,
+      )
+
+      expect(screen.getByText('Override Field')).toBeInTheDocument()
+      expect(screen.getByText(/Custom Render:.*custom_field/)).toBeInTheDocument()
+      expect(screen.getAllByText('allowed')).toHaveLength(3)
+      expect(screen.getAllByText('blocked')).toHaveLength(1)
+
+      fireEvent.click(screen.getAllByText('Pick Variable')[0])
+
+      expect(onChange).toHaveBeenCalledWith({ override: '', any_var: [{ name: 'var-1' }], any_without_scope: [], custom_field: '' })
+      expect(screen.getAllByText('Extra Info')).toHaveLength(2)
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
new file mode 100644
index 0000000000..baea6732cb
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Input from './Input'
+
+describe('Input', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering basics
+  it('should render with the provided placeholder and value', () => {
+    render(
+      <Input
+        value="hello"
+        placeholder="API Key"
+        onChange={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByPlaceholderText('API Key')).toHaveValue('hello')
+  })
+
+  // User interaction
+  it('should call onChange when the user types', () => {
+    const onChange = vi.fn()
+
+    render(
+      <Input
+        placeholder="API Key"
+        onChange={onChange}
+      />,
+    )
+
+    fireEvent.change(screen.getByPlaceholderText('API Key'), { target: { value: 'next' } })
+
+    expect(onChange).toHaveBeenCalledWith('next')
+  })
+
+  // Edge cases: min/max enforcement
+  it('should clamp to the min value when the input is below min on blur', () => {
+    const onChange = vi.fn()
+
+    render(
+      <Input
+        placeholder="Limit"
+        onChange={onChange}
+        min={2}
+        max={6}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText('Limit')
+    fireEvent.change(input, { target: { value: '1' } })
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenLastCalledWith('2')
+  })
+
+  it('should clamp to the max value when the input is above max on blur', () => {
+    const onChange = vi.fn()
+
+    render(
+      <Input
+        placeholder="Limit"
+        onChange={onChange}
+        min={2}
+        max={6}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText('Limit')
+    fireEvent.change(input, { target: { value: '8' } })
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenLastCalledWith('6')
+  })
+
+  it('should keep the value when it is within the min/max range on blur', () => {
+    const onChange = vi.fn()
+
+    render(
+      <Input
+        placeholder="Limit"
+        onChange={onChange}
+        min={2}
+        max={6}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText('Limit')
+    fireEvent.change(input, { target: { value: '4' } })
+    fireEvent.blur(input)
+
+    expect(onChange).not.toHaveBeenCalledWith('2')
+    expect(onChange).not.toHaveBeenCalledWith('6')
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx
new file mode 100644
index 0000000000..376c128c89
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx
@@ -0,0 +1,353 @@
+import type { Credential, CredentialFormSchema, ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  CurrentSystemQuotaTypeEnum,
+  CustomConfigurationStatusEnum,
+  ModelModalModeEnum,
+  ModelTypeEnum,
+  PreferredProviderTypeEnum,
+  QuotaUnitEnum,
+} from '../declarations'
+import ModelModal from './index'
+
+type CredentialData = {
+  credentials: Record<string, unknown>
+  available_credentials: Credential[]
+}
+
+type ModelFormSchemas = {
+  formSchemas: CredentialFormSchema[]
+  formValues: Record<string, unknown>
+  modelNameAndTypeFormSchemas: CredentialFormSchema[]
+  modelNameAndTypeFormValues: Record<string, unknown>
+}
+
+const mockState = vi.hoisted(() => ({
+  isLoading: false,
+  credentialData: { credentials: {}, available_credentials: [] } as CredentialData,
+  doingAction: false,
+  deleteCredentialId: null as string | null,
+  isCurrentWorkspaceManager: true,
+  formSchemas: [] as CredentialFormSchema[],
+  formValues: {} as Record<string, unknown>,
+  modelNameAndTypeFormSchemas: [] as CredentialFormSchema[],
+  modelNameAndTypeFormValues: {} as Record<string, unknown>,
+}))
+
+const mockHandlers = vi.hoisted(() => ({
+  handleSaveCredential: vi.fn(),
+  handleConfirmDelete: vi.fn(),
+  closeConfirmDelete: vi.fn(),
+  openConfirmDelete: vi.fn(),
+  handleActiveCredential: vi.fn(),
+}))
+
+type FormResponse = {
+  isCheckValidated: boolean
+  values: Record<string, unknown>
+}
+const mockFormState = vi.hoisted(() => ({
+  responses: [] as FormResponse[],
+  setFieldValue: vi.fn(),
+}))
+
+vi.mock('../model-auth/hooks', () => ({
+  useCredentialData: () => ({
+    isLoading: mockState.isLoading,
+    credentialData: mockState.credentialData,
+  }),
+  useAuth: () => ({
+    handleSaveCredential: mockHandlers.handleSaveCredential,
+    handleConfirmDelete: mockHandlers.handleConfirmDelete,
+    deleteCredentialId: mockState.deleteCredentialId,
+    closeConfirmDelete: mockHandlers.closeConfirmDelete,
+    openConfirmDelete: mockHandlers.openConfirmDelete,
+    doingAction: mockState.doingAction,
+    handleActiveCredential: mockHandlers.handleActiveCredential,
+  }),
+  useModelFormSchemas: (): ModelFormSchemas => ({
+    formSchemas: mockState.formSchemas,
+    formValues: mockState.formValues,
+    modelNameAndTypeFormSchemas: mockState.modelNameAndTypeFormSchemas,
+    modelNameAndTypeFormValues: mockState.modelNameAndTypeFormValues,
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({ isCurrentWorkspaceManager: mockState.isCurrentWorkspaceManager }),
+}))
+
+vi.mock('@/hooks/use-i18n', () => ({
+  useRenderI18nObject: () => (value: { en_US: string }) => value.en_US,
+}))
+
+vi.mock('../hooks', () => ({
+  useLanguage: () => 'en_US',
+}))
+
+vi.mock('@/app/components/base/form/form-scenarios/auth', async () => {
+  const React = await import('react')
+  const AuthForm = React.forwardRef(({
+    onChange,
+  }: {
+    onChange?: (field: string, value: string) => void
+  }, ref: React.ForwardedRef<{ getFormValues: () => FormResponse, getForm: () => { setFieldValue: (field: string, value: string) => void } }>) => {
+    React.useImperativeHandle(ref, () => ({
+      getFormValues: () => mockFormState.responses.shift() || { isCheckValidated: false, values: {} },
+      getForm: () => ({ setFieldValue: mockFormState.setFieldValue }),
+    }))
+    return (
+      <div>
+        <button type="button" onClick={() => onChange?.('__model_name', 'updated-model')}>Model Name Change</button>
+      </div>
+    )
+  })
+
+  return { default: AuthForm }
+})
+
+vi.mock('../model-auth', () => ({
+  CredentialSelector: ({ onSelect }: { onSelect: (credential: Credential & { addNewCredential?: boolean }) => void }) => (
+    <div>
+      <button type="button" onClick={() => onSelect({ credential_id: 'existing' })}>Choose Existing</button>
+      <button type="button" onClick={() => onSelect({ credential_id: 'new', addNewCredential: true })}>Add New</button>
+    </div>
+  ),
+}))
+
+const createI18n = (text: string) => ({ en_US: text, zh_Hans: text })
+
+const createProvider = (overrides?: Partial<ModelProvider>): ModelProvider => ({
+  provider: 'openai',
+  label: createI18n('OpenAI'),
+  help: {
+    title: createI18n('Help'),
+    url: createI18n('https://example.com'),
+  },
+  icon_small: createI18n('icon'),
+  supported_model_types: [ModelTypeEnum.textGeneration],
+  configurate_methods: [ConfigurationMethodEnum.predefinedModel],
+  provider_credential_schema: { credential_form_schemas: [] },
+  model_credential_schema: {
+    model: { label: createI18n('Model'), placeholder: createI18n('Model') },
+    credential_form_schemas: [],
+  },
+  preferred_provider_type: PreferredProviderTypeEnum.system,
+  custom_configuration: {
+    status: CustomConfigurationStatusEnum.active,
+    available_credentials: [],
+    custom_models: [],
+    can_added_models: [],
+  },
+  system_configuration: {
+    enabled: true,
+    current_quota_type: CurrentSystemQuotaTypeEnum.trial,
+    quota_configurations: [
+      {
+        quota_type: CurrentSystemQuotaTypeEnum.trial,
+        quota_unit: QuotaUnitEnum.times,
+        quota_limit: 0,
+        quota_used: 0,
+        last_used: 0,
+        is_valid: true,
+      },
+    ],
+  },
+  allow_custom_token: true,
+  ...overrides,
+})
+
+const renderModal = (overrides?: Partial<React.ComponentProps<typeof ModelModal>>) => {
+  const provider = createProvider()
+  const props = {
+    provider,
+    configurateMethod: ConfigurationMethodEnum.predefinedModel,
+    onCancel: vi.fn(),
+    onSave: vi.fn(),
+    onRemove: vi.fn(),
+    ...overrides,
+  }
+  const view = render(<ModelModal {...props} />)
+  return {
+    ...props,
+    unmount: view.unmount,
+  }
+}
+
+describe('ModelModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockState.isLoading = false
+    mockState.credentialData = { credentials: {}, available_credentials: [] }
+    mockState.doingAction = false
+    mockState.deleteCredentialId = null
+    mockState.isCurrentWorkspaceManager = true
+    mockState.formSchemas = []
+    mockState.formValues = {}
+    mockState.modelNameAndTypeFormSchemas = []
+    mockState.modelNameAndTypeFormValues = {}
+    mockFormState.responses = []
+  })
+
+  it('should show title, description, and loading state for predefined models', () => {
+    mockState.isLoading = true
+
+    const predefined = renderModal()
+
+    expect(screen.getByText('common.modelProvider.auth.apiKeyModal.title')).toBeInTheDocument()
+    expect(screen.getByText('common.modelProvider.auth.apiKeyModal.desc')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeDisabled()
+
+    predefined.unmount()
+    const customizable = renderModal({ configurateMethod: ConfigurationMethodEnum.customizableModel })
+    expect(screen.queryByText('common.modelProvider.auth.apiKeyModal.desc')).not.toBeInTheDocument()
+    customizable.unmount()
+
+    mockState.credentialData = { credentials: {}, available_credentials: [] }
+    renderModal({ mode: ModelModalModeEnum.configModelCredential, model: { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration } })
+    expect(screen.getByText('common.modelProvider.auth.addModelCredential')).toBeInTheDocument()
+  })
+
+  it('should reveal the credential label when adding a new credential', () => {
+    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList })
+
+    expect(screen.queryByText('common.modelProvider.auth.modelCredential')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Add New'))
+
+    expect(screen.getByText('common.modelProvider.auth.modelCredential')).toBeInTheDocument()
+  })
+
+  it('should call onCancel when the cancel button is clicked', () => {
+    const { onCancel } = renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onCancel when the escape key is pressed', () => {
+    const { onCancel } = renderModal()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should confirm deletion when a delete dialog is shown', () => {
+    mockState.credentialData = { credentials: { api_key: 'secret' }, available_credentials: [] }
+    mockState.deleteCredentialId = 'delete-id'
+
+    const credential: Credential = { credential_id: 'cred-1' }
+    const { onCancel } = renderModal({ credential })
+
+    expect(screen.getByText('common.modelProvider.confirmDelete')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+    expect(mockHandlers.handleConfirmDelete).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle save flows for different modal modes', async () => {
+    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text-input' } as unknown as CredentialFormSchema]
+    mockState.formSchemas = [{ variable: 'api_key', type: 'secret-input' } as unknown as CredentialFormSchema]
+    mockFormState.responses = [
+      { isCheckValidated: true, values: { __model_name: 'custom-model', __model_type: ModelTypeEnum.textGeneration } },
+      { isCheckValidated: true, values: { __authorization_name__: 'Auth Name', api_key: 'secret' } },
+    ]
+    const configCustomModel = renderModal({ mode: ModelModalModeEnum.configCustomModel })
+    fireEvent.click(screen.getAllByText('Model Name Change')[0])
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+    expect(mockFormState.setFieldValue).toHaveBeenCalledWith('__model_name', 'updated-model')
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'secret' },
+        name: 'Auth Name',
+        model: 'custom-model',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configCustomModel.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Auth Name', api_key: 'secret' })
+    configCustomModel.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Model Auth', api_key: 'abc' } }]
+    const model = { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration }
+    const configModelCredential = renderModal({
+      mode: ModelModalModeEnum.configModelCredential,
+      model,
+      credential: { credential_id: 'cred-123' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: 'cred-123',
+        credentials: { api_key: 'abc' },
+        name: 'Model Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configModelCredential.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Model Auth', api_key: 'abc' })
+    configModelCredential.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Provider Auth', api_key: 'provider-key' } }]
+    const configProviderCredential = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'provider-key' },
+        name: 'Provider Auth',
+      })
+    })
+    configProviderCredential.unmount()
+
+    const addToModelList = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Choose Existing'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    expect(mockHandlers.handleActiveCredential).toHaveBeenCalledWith({ credential_id: 'existing' }, model)
+    expect(addToModelList.onCancel).toHaveBeenCalled()
+    addToModelList.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'New Auth', api_key: 'new-key' } }]
+    const addToModelListWithNew = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Add New'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'new-key' },
+        name: 'New Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    addToModelListWithNew.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: false, values: {} }]
+    const invalidSave = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledTimes(4)
+    })
+    invalidSave.unmount()
+
+    mockState.credentialData = { credentials: { api_key: 'value' }, available_credentials: [] }
+    mockState.formValues = { api_key: 'value' }
+    const removable = renderModal({ credential: { credential_id: 'remove-1' } })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
+    expect(mockHandlers.openConfirmDelete).toHaveBeenCalledWith({ credential_id: 'remove-1' }, undefined)
+    removable.unmount()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.spec.tsx
new file mode 100644
index 0000000000..9bc9b36653
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.spec.tsx
@@ -0,0 +1,116 @@
+import type { ModelItem } from '../declarations'
+import { render, screen } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  ModelFeatureEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import ModelName from './index'
+
+let mockLocale = 'en-US'
+
+vi.mock('#i18n', () => ({
+  useTranslation: () => ({
+    i18n: {
+      language: mockLocale,
+    },
+  }),
+}))
+
+const createModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4o',
+  label: {
+    en_US: 'English Model',
+    zh_Hans: 'Chinese Model',
+  },
+  model_type: ModelTypeEnum.textGeneration,
+  features: [],
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: {},
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+describe('ModelName', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockLocale = 'en-US'
+  })
+
+  // Rendering scenarios for the model name label.
+  describe('rendering', () => {
+    it('should render the localized model label when translation exists', () => {
+      mockLocale = 'zh-Hans'
+      const modelItem = createModelItem()
+
+      render(<ModelName modelItem={modelItem} />)
+
+      expect(screen.getByText('Chinese Model')).toBeInTheDocument()
+    })
+
+    it('should fall back to en_US label when localized label is missing', () => {
+      mockLocale = 'fr-FR'
+      const modelItem = createModelItem({
+        label: {
+          en_US: 'English Only',
+          zh_Hans: 'Chinese Model',
+        },
+      })
+
+      render(<ModelName modelItem={modelItem} />)
+
+      expect(screen.getByText('English Only')).toBeInTheDocument()
+    })
+
+    it('should render nothing when modelItem is null', () => {
+      const { container } = render(<ModelName modelItem={null as unknown as ModelItem} />)
+
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
+
+  // Badges that surface model metadata to the user.
+  describe('badges', () => {
+    it('should show model type, mode, and context size when enabled', () => {
+      const modelItem = createModelItem({
+        model_type: ModelTypeEnum.textEmbedding,
+        model_properties: {
+          mode: 'chat',
+          context_size: 2000,
+        },
+      })
+
+      render(
+        <ModelName
+          modelItem={modelItem}
+          showModelType
+          showMode
+          showContextSize
+        />,
+      )
+
+      expect(screen.getByText('TEXT EMBEDDING')).toBeInTheDocument()
+      expect(screen.getByText('CHAT')).toBeInTheDocument()
+      expect(screen.getByText('2K')).toBeInTheDocument()
+    })
+
+    it('should render feature labels when showFeaturesLabel is enabled', () => {
+      const modelItem = createModelItem({
+        features: [ModelFeatureEnum.vision, ModelFeatureEnum.audio],
+      })
+
+      render(
+        <ModelName
+          modelItem={modelItem}
+          showFeatures
+          showFeaturesLabel
+        />,
+      )
+
+      expect(screen.getByText('Vision')).toBeInTheDocument()
+      expect(screen.getByText('Audio')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.spec.tsx
new file mode 100644
index 0000000000..6b3a1724a1
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.spec.tsx
@@ -0,0 +1,154 @@
+import type { MouseEvent } from 'react'
+import type { ModelProvider } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import {
+  CurrentSystemQuotaTypeEnum,
+  CustomConfigurationStatusEnum,
+  ModelTypeEnum,
+  QuotaUnitEnum,
+} from '../declarations'
+import AgentModelTrigger from './agent-model-trigger'
+
+let modelProviders: ModelProvider[] = []
+let pluginInfo: { latest_package_identifier: string } | null = null
+let pluginLoading = false
+let inModelList = true
+const invalidateInstalledPluginList = vi.fn()
+const handleOpenModal = vi.fn()
+const updateModelProviders = vi.fn()
+const updateModelList = vi.fn()
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    modelProviders,
+  }),
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+  useInvalidateInstalledPluginList: () => invalidateInstalledPluginList,
+  useModelInList: () => ({ data: inModelList }),
+  usePluginInfo: () => ({ data: pluginInfo, isLoading: pluginLoading }),
+}))
+
+vi.mock('../hooks', () => ({
+  useModelModalHandler: () => handleOpenModal,
+  useUpdateModelList: () => updateModelList,
+  useUpdateModelProviders: () => updateModelProviders,
+}))
+
+vi.mock('../model-icon', () => ({
+  default: () => <div>Icon</div>,
+}))
+
+vi.mock('./model-display', () => ({
+  default: () => <div>ModelDisplay</div>,
+}))
+
+vi.mock('./status-indicators', () => ({
+  default: () => <div>StatusIndicators</div>,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/install-plugin-button', () => ({
+  InstallPluginButton: ({ onClick, onSuccess }: { onClick: (event: MouseEvent<HTMLButtonElement>) => void, onSuccess: () => void }) => (
+    <button
+      onClick={(event) => {
+        onClick(event)
+        onSuccess()
+      }}
+    >
+      Install Plugin
+    </button>
+  ),
+}))
+
+describe('AgentModelTrigger', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    modelProviders = []
+    pluginInfo = null
+    pluginLoading = false
+    inModelList = true
+  })
+
+  it('should render loading state when plugin info is still fetching', () => {
+    pluginLoading = true
+    render(
+      <AgentModelTrigger
+        modelId="gpt-4"
+        providerName="openai"
+      />,
+    )
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should render model actions for configured provider', () => {
+    modelProviders = [{
+      provider: 'openai',
+      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+      system_configuration: {
+        enabled: true,
+        current_quota_type: CurrentSystemQuotaTypeEnum.paid,
+        quota_configurations: [{
+          quota_type: CurrentSystemQuotaTypeEnum.paid,
+          quota_unit: QuotaUnitEnum.times,
+          quota_limit: 10,
+          quota_used: 1,
+          last_used: 1,
+          is_valid: true,
+        }],
+      },
+    }] as unknown as ModelProvider[]
+    render(
+      <AgentModelTrigger
+        modelId="gpt-4"
+        providerName="openai"
+      />,
+    )
+    expect(screen.getByText('ModelDisplay')).toBeInTheDocument()
+    expect(screen.getByText('StatusIndicators')).toBeInTheDocument()
+  })
+
+  it('should support plugin installation flow when provider is missing', () => {
+    pluginInfo = { latest_package_identifier: 'plugin/demo@1.0.0' }
+    render(
+      <AgentModelTrigger
+        modelId="gpt-4"
+        providerName="openai"
+        scope={`${ModelTypeEnum.textGeneration},${ModelTypeEnum.tts}`}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('Install Plugin'))
+    expect(updateModelList).toHaveBeenCalledWith(ModelTypeEnum.textGeneration)
+    expect(updateModelList).toHaveBeenCalledWith(ModelTypeEnum.tts)
+    expect(updateModelProviders).toHaveBeenCalledTimes(1)
+    expect(invalidateInstalledPluginList).toHaveBeenCalledTimes(1)
+  })
+
+  it('should show configuration action when provider requires setup', () => {
+    modelProviders = [{
+      provider: 'openai',
+      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+      system_configuration: {
+        enabled: false,
+        current_quota_type: CurrentSystemQuotaTypeEnum.paid,
+        quota_configurations: [],
+      },
+    }] as unknown as ModelProvider[]
+
+    render(
+      <AgentModelTrigger
+        modelId="gpt-4"
+        providerName="openai"
+      />,
+    )
+
+    expect(screen.getByText('workflow.nodes.agent.notAuthorized')).toBeInTheDocument()
+  })
+
+  it('should render unconfigured state when model is not selected', () => {
+    render(<AgentModelTrigger />)
+    expect(screen.getByText('workflow.nodes.agent.configureModel')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.spec.tsx
new file mode 100644
index 0000000000..622697c9a2
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.spec.tsx
@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { ConfigurationMethodEnum } from '../declarations'
+import ConfigurationButton from './configuration-button'
+
+describe('ConfigurationButton', () => {
+  it('should render and handle click', () => {
+    const handleOpenModal = vi.fn()
+    const modelProvider = { id: 1 }
+
+    render(
+      <ConfigurationButton
+        modelProvider={modelProvider as unknown as ComponentProps<typeof ConfigurationButton>['modelProvider']}
+        handleOpenModal={handleOpenModal}
+      />,
+    )
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(handleOpenModal).toHaveBeenCalledWith(
+      modelProvider,
+      ConfigurationMethodEnum.predefinedModel,
+      undefined,
+    )
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.spec.tsx
new file mode 100644
index 0000000000..111af0b497
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.spec.tsx
@@ -0,0 +1,273 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import ModelParameterModal from './index'
+
+let isAPIKeySet = true
+let parameterRules = [
+  {
+    name: 'temperature',
+    label: { en_US: 'Temperature' },
+    type: 'float',
+    default: 0.7,
+    min: 0,
+    max: 1,
+    help: { en_US: 'Control randomness' },
+  },
+]
+let isRulesLoading = false
+let currentProvider: Record<string, unknown> | undefined = { provider: 'openai', label: { en_US: 'OpenAI' } }
+let currentModel: Record<string, unknown> | undefined = {
+  model: 'gpt-3.5-turbo',
+  status: 'active',
+  model_properties: { mode: 'chat' },
+}
+let activeTextGenerationModelList: Array<Record<string, unknown>> = [
+  {
+    provider: 'openai',
+    models: [
+      {
+        model: 'gpt-3.5-turbo',
+        model_properties: { mode: 'chat' },
+        features: ['vision'],
+      },
+      {
+        model: 'gpt-4.1',
+        model_properties: { mode: 'chat' },
+        features: ['vision', 'tool-call'],
+      },
+    ],
+  },
+]
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    isAPIKeySet,
+  }),
+}))
+
+vi.mock('@/service/use-common', () => ({
+  useModelParameterRules: () => ({
+    data: {
+      data: parameterRules,
+    },
+    isPending: isRulesLoading,
+  }),
+}))
+
+vi.mock('../hooks', () => ({
+  useTextGenerationCurrentProviderAndModelAndModelList: () => ({
+    currentProvider,
+    currentModel,
+    activeTextGenerationModelList,
+  }),
+}))
+
+// Mock PortalToFollowElem components to control visibility and simplify testing
+vi.mock('@/app/components/base/portal-to-follow-elem', () => {
+  return {
+    PortalToFollowElem: ({ children }: { children: React.ReactNode }) => {
+      return (
+        <div>
+          <div data-testid="portal-wrapper">
+            {children}
+          </div>
+        </div>
+      )
+    },
+    PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
+      <div data-testid="portal-trigger" onClick={onClick}>
+        {children}
+      </div>
+    ),
+    PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className: string }) => (
+      <div data-testid="portal-content" className={className}>
+        {children}
+      </div>
+    ),
+  }
+})
+
+vi.mock('./parameter-item', () => ({
+  default: ({ parameterRule, value, onChange, onSwitch }: { parameterRule: { name: string, label: { en_US: string } }, value: string | number, onChange: (v: number) => void, onSwitch: (checked: boolean, val: unknown) => void }) => (
+    <div data-testid={`param-${parameterRule.name}`}>
+      {parameterRule.label.en_US}
+      <input
+        aria-label={parameterRule.name}
+        value={value || ''}
+        onChange={e => onChange(Number(e.target.value))}
+      />
+      <button onClick={() => onSwitch?.(false, undefined)}>Remove</button>
+      <button onClick={() => onSwitch?.(true, 'assigned')}>Add</button>
+    </div>
+  ),
+}))
+
+vi.mock('../model-selector', () => ({
+  default: ({ onSelect }: { onSelect: (value: { provider: string, model: string }) => void }) => (
+    <div data-testid="model-selector">
+      Model Selector
+      <button onClick={() => onSelect({ provider: 'openai', model: 'gpt-4.1' })}>Select GPT-4.1</button>
+    </div>
+  ),
+}))
+
+vi.mock('./presets-parameter', () => ({
+  default: ({ onSelect }: { onSelect: (id: number) => void }) => (
+    <button onClick={() => onSelect(1)}>Preset 1</button>
+  ),
+}))
+
+vi.mock('./trigger', () => ({
+  default: () => <button>Open Settings</button>,
+}))
+
+vi.mock('@/utils/classnames', () => ({
+  cn: (...args: (string | undefined | null | false)[]) => args.filter(Boolean).join(' '),
+}))
+
+// Mock config
+vi.mock('@/config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config')>()
+  return {
+    ...actual,
+    PROVIDER_WITH_PRESET_TONE: ['openai'], // ensure presets mock renders
+  }
+})
+
+describe('ModelParameterModal', () => {
+  const defaultProps = {
+    isAdvancedMode: false,
+    modelId: 'gpt-3.5-turbo',
+    provider: 'openai',
+    setModel: vi.fn(),
+    completionParams: { temperature: 0.7 },
+    onCompletionParamsChange: vi.fn(),
+    hideDebugWithMultipleModel: false,
+    debugWithMultipleModel: false,
+    onDebugWithMultipleModelChange: vi.fn(),
+    readonly: false,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isAPIKeySet = true
+    isRulesLoading = false
+    parameterRules = [
+      {
+        name: 'temperature',
+        label: { en_US: 'Temperature' },
+        type: 'float',
+        default: 0.7,
+        min: 0,
+        max: 1,
+        help: { en_US: 'Control randomness' },
+      },
+    ]
+    currentProvider = { provider: 'openai', label: { en_US: 'OpenAI' } }
+    currentModel = {
+      model: 'gpt-3.5-turbo',
+      status: 'active',
+      model_properties: { mode: 'chat' },
+    }
+    activeTextGenerationModelList = [
+      {
+        provider: 'openai',
+        models: [
+          {
+            model: 'gpt-3.5-turbo',
+            model_properties: { mode: 'chat' },
+            features: ['vision'],
+          },
+          {
+            model: 'gpt-4.1',
+            model_properties: { mode: 'chat' },
+            features: ['vision', 'tool-call'],
+          },
+        ],
+      },
+    ]
+  })
+
+  it('should render trigger and content', () => {
+    render(<ModelParameterModal {...defaultProps} />)
+
+    expect(screen.getByText('Open Settings')).toBeInTheDocument()
+    expect(screen.getByText('Temperature')).toBeInTheDocument()
+    expect(screen.getByTestId('model-selector')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('portal-trigger'))
+  })
+
+  it('should update params when changed and handle switch add/remove', () => {
+    render(<ModelParameterModal {...defaultProps} />)
+
+    const input = screen.getByLabelText('temperature')
+    fireEvent.change(input, { target: { value: '0.9' } })
+
+    expect(defaultProps.onCompletionParamsChange).toHaveBeenCalledWith({
+      ...defaultProps.completionParams,
+      temperature: 0.9,
+    })
+
+    fireEvent.click(screen.getByText('Remove'))
+    expect(defaultProps.onCompletionParamsChange).toHaveBeenCalledWith({})
+
+    fireEvent.click(screen.getByText('Add'))
+    expect(defaultProps.onCompletionParamsChange).toHaveBeenCalledWith({
+      ...defaultProps.completionParams,
+      temperature: 'assigned',
+    })
+  })
+
+  it('should handle preset selection', () => {
+    render(<ModelParameterModal {...defaultProps} />)
+
+    fireEvent.click(screen.getByText('Preset 1'))
+    expect(defaultProps.onCompletionParamsChange).toHaveBeenCalled()
+  })
+
+  it('should handle debug mode toggle', () => {
+    const { rerender } = render(<ModelParameterModal {...defaultProps} />)
+    const toggle = screen.getByText(/debugAsMultipleModel/i)
+    fireEvent.click(toggle)
+    expect(defaultProps.onDebugWithMultipleModelChange).toHaveBeenCalled()
+
+    rerender(<ModelParameterModal {...defaultProps} debugWithMultipleModel />)
+    expect(screen.getByText(/debugAsSingleModel/i)).toBeInTheDocument()
+  })
+  it('should handle custom renderTrigger', () => {
+    const renderTrigger = vi.fn().mockReturnValue(<div>Custom Trigger</div>)
+    render(<ModelParameterModal {...defaultProps} renderTrigger={renderTrigger} readonly />)
+
+    expect(screen.getByText('Custom Trigger')).toBeInTheDocument()
+    expect(renderTrigger).toHaveBeenCalled()
+    fireEvent.click(screen.getByTestId('portal-trigger'))
+    expect(renderTrigger).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle model selection and advanced mode parameters', () => {
+    parameterRules = [
+      {
+        name: 'temperature',
+        label: { en_US: 'Temperature' },
+        type: 'float',
+        default: 0.7,
+        min: 0,
+        max: 1,
+        help: { en_US: 'Control randomness' },
+      },
+    ]
+    const { rerender } = render(<ModelParameterModal {...defaultProps} />)
+    expect(screen.getByTestId('param-temperature')).toBeInTheDocument()
+
+    rerender(<ModelParameterModal {...defaultProps} isAdvancedMode />)
+    expect(screen.getByTestId('param-stop')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Select GPT-4.1'))
+    expect(defaultProps.setModel).toHaveBeenCalledWith({
+      modelId: 'gpt-4.1',
+      provider: 'openai',
+      mode: 'chat',
+      features: ['vision', 'tool-call'],
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.spec.tsx
new file mode 100644
index 0000000000..ecee8c84e5
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.spec.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import ModelDisplay from './model-display'
+
+vi.mock('../model-name', () => ({
+  default: ({ modelItem }: { modelItem: { model: string } }) => <div>{modelItem.model}</div>,
+}))
+
+describe('ModelDisplay', () => {
+  it('should render model name when model is present', () => {
+    const currentModel = { model: 'gpt-4' }
+    render(<ModelDisplay currentModel={currentModel} modelId="gpt-4" />)
+    expect(screen.getByText('gpt-4')).toBeInTheDocument()
+  })
+
+  it('should render modelID when currentModel is missing', () => {
+    render(<ModelDisplay currentModel={null} modelId="unknown-model" />)
+    expect(screen.getByText('unknown-model')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.spec.tsx
new file mode 100644
index 0000000000..bd4c902f54
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.spec.tsx
@@ -0,0 +1,239 @@
+import type { ModelParameterRule } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import ParameterItem from './parameter-item'
+
+vi.mock('../hooks', () => ({
+  useLanguage: () => 'en_US',
+}))
+
+vi.mock('@/app/components/base/radio', () => {
+  const Radio = ({ children, value }: { children: React.ReactNode, value: boolean }) => <button data-testid={`radio-${value}`}>{children}</button>
+  Radio.Group = ({ children, onChange }: { children: React.ReactNode, onChange: (value: boolean) => void }) => (
+    <div>
+      {children}
+      <button onClick={() => onChange(true)}>Select True</button>
+      <button onClick={() => onChange(false)}>Select False</button>
+    </div>
+  )
+  return { default: Radio }
+})
+
+vi.mock('@/app/components/base/select', () => ({
+  SimpleSelect: ({ onSelect, items }: { onSelect: (item: { value: string }) => void, items: { value: string, name: string }[] }) => (
+    <select onChange={e => onSelect({ value: e.target.value })}>
+      {items.map(item => (
+        <option key={item.value} value={item.value}>{item.name}</option>
+      ))}
+    </select>
+  ),
+}))
+
+vi.mock('@/app/components/base/slider', () => ({
+  default: ({ value, onChange }: { value: number, onChange: (val: number) => void }) => (
+    <input type="range" value={value} onChange={e => onChange(Number(e.target.value))} />
+  ),
+}))
+
+vi.mock('@/app/components/base/switch', () => ({
+  default: ({ onChange, value }: { onChange: (val: boolean) => void, value: boolean }) => (
+    <button onClick={() => onChange(!value)}>Switch</button>
+  ),
+}))
+
+vi.mock('@/app/components/base/tag-input', () => ({
+  default: ({ onChange }: { onChange: (val: string[]) => void }) => (
+    <input onChange={e => onChange(e.target.value.split(','))} />
+  ),
+}))
+
+vi.mock('@/app/components/base/tooltip', () => ({
+  default: ({ popupContent }: { popupContent: React.ReactNode }) => <div>{popupContent}</div>,
+}))
+
+describe('ParameterItem', () => {
+  const createRule = (overrides: Partial<ModelParameterRule> = {}): ModelParameterRule => ({
+    name: 'temp',
+    label: { en_US: 'Temperature', zh_Hans: 'Temperature' },
+    type: 'float',
+    min: 0,
+    max: 1,
+    help: { en_US: 'Help text', zh_Hans: 'Help text' },
+    required: false,
+    ...overrides,
+  })
+
+  const createProps = (overrides: {
+    parameterRule?: ModelParameterRule
+    value?: number | string | boolean | string[]
+  } = {}) => {
+    const onChange = vi.fn()
+    const onSwitch = vi.fn()
+    return {
+      parameterRule: createRule(),
+      value: 0.7,
+      onChange,
+      onSwitch,
+      ...overrides,
+    }
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render float input with slider', () => {
+    const props = createProps()
+    const { rerender } = render(<ParameterItem {...props} />)
+
+    expect(screen.getByText('Temperature')).toBeInTheDocument()
+    const input = screen.getByRole('spinbutton')
+    fireEvent.change(input, { target: { value: '0.8' } })
+    expect(props.onChange).toHaveBeenCalledWith(0.8)
+
+    fireEvent.change(input, { target: { value: '1.4' } })
+    expect(props.onChange).toHaveBeenCalledWith(1)
+
+    fireEvent.change(input, { target: { value: '-0.2' } })
+    expect(props.onChange).toHaveBeenCalledWith(0)
+
+    const slider = screen.getByRole('slider')
+    fireEvent.change(slider, { target: { value: '2' } })
+    expect(props.onChange).toHaveBeenCalledWith(1)
+
+    fireEvent.change(slider, { target: { value: '-1' } })
+    expect(props.onChange).toHaveBeenCalledWith(0)
+
+    fireEvent.change(slider, { target: { value: '0.4' } })
+    expect(props.onChange).toHaveBeenCalledWith(0.4)
+
+    fireEvent.blur(input)
+    expect(input).toHaveValue(0.7)
+
+    const minBoundedProps = createProps({
+      parameterRule: createRule({ type: 'float', min: 1, max: 2 }),
+      value: 1.5,
+    })
+    rerender(<ParameterItem {...minBoundedProps} />)
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '0' } })
+    expect(minBoundedProps.onChange).toHaveBeenCalledWith(1)
+  })
+
+  it('should render boolean radio', () => {
+    const props = createProps({ parameterRule: createRule({ type: 'boolean', default: false }), value: true })
+    render(<ParameterItem {...props} />)
+    expect(screen.getByText('True')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Select False'))
+    expect(props.onChange).toHaveBeenCalledWith(false)
+  })
+
+  it('should render string input and select options', () => {
+    const props = createProps({ parameterRule: createRule({ type: 'string' }), value: 'test' })
+    const { rerender } = render(<ParameterItem {...props} />)
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'new' } })
+    expect(props.onChange).toHaveBeenCalledWith('new')
+
+    const selectProps = createProps({
+      parameterRule: createRule({ type: 'string', options: ['opt1', 'opt2'] }),
+      value: 'opt1',
+    })
+    rerender(<ParameterItem {...selectProps} />)
+    const select = screen.getByRole('combobox')
+    fireEvent.change(select, { target: { value: 'opt2' } })
+    expect(selectProps.onChange).toHaveBeenCalledWith('opt2')
+  })
+
+  it('should handle switch toggle', () => {
+    const props = createProps()
+    let view = render(<ParameterItem {...props} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(props.onSwitch).toHaveBeenCalledWith(false, 0.7)
+
+    const intDefaultProps = createProps({
+      parameterRule: createRule({ type: 'int', min: 0, default: undefined }),
+      value: undefined,
+    })
+    view.unmount()
+    view = render(<ParameterItem {...intDefaultProps} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(intDefaultProps.onSwitch).toHaveBeenCalledWith(true, 0)
+
+    const stringDefaultProps = createProps({
+      parameterRule: createRule({ type: 'string', default: 'preset-value' }),
+      value: undefined,
+    })
+    view.unmount()
+    view = render(<ParameterItem {...stringDefaultProps} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(stringDefaultProps.onSwitch).toHaveBeenCalledWith(true, 'preset-value')
+
+    const booleanDefaultProps = createProps({
+      parameterRule: createRule({ type: 'boolean', default: true }),
+      value: undefined,
+    })
+    view.unmount()
+    view = render(<ParameterItem {...booleanDefaultProps} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(booleanDefaultProps.onSwitch).toHaveBeenCalledWith(true, true)
+
+    const tagDefaultProps = createProps({
+      parameterRule: createRule({ type: 'tag', default: ['one'] }),
+      value: undefined,
+    })
+    view.unmount()
+    const tagView = render(<ParameterItem {...tagDefaultProps} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(tagDefaultProps.onSwitch).toHaveBeenCalledWith(true, ['one'])
+
+    const zeroValueProps = createProps({
+      parameterRule: createRule({ type: 'float', default: 0.5 }),
+      value: 0,
+    })
+    tagView.unmount()
+    render(<ParameterItem {...zeroValueProps} />)
+    fireEvent.click(screen.getByText('Switch'))
+    expect(zeroValueProps.onSwitch).toHaveBeenCalledWith(false, 0)
+  })
+
+  it('should support text and tag parameter interactions', () => {
+    const textProps = createProps({
+      parameterRule: createRule({ type: 'text', name: 'prompt' }),
+      value: 'initial prompt',
+    })
+    const { rerender } = render(<ParameterItem {...textProps} />)
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'rewritten prompt' } })
+    expect(textProps.onChange).toHaveBeenCalledWith('rewritten prompt')
+
+    const tagProps = createProps({
+      parameterRule: createRule({
+        type: 'tag',
+        name: 'tags',
+        tagPlaceholder: { en_US: 'Tag hint', zh_Hans: 'Tag hint' },
+      }),
+      value: ['alpha'],
+    })
+    rerender(<ParameterItem {...tagProps} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'one,two' } })
+    expect(tagProps.onChange).toHaveBeenCalledWith(['one', 'two'])
+  })
+
+  it('should support int parameters and unknown type fallback', () => {
+    const intProps = createProps({
+      parameterRule: createRule({ type: 'int', min: 0, max: 500, default: 100 }),
+      value: 100,
+    })
+    const { rerender } = render(<ParameterItem {...intProps} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '350' } })
+    expect(intProps.onChange).toHaveBeenCalledWith(350)
+
+    const unknownTypeProps = createProps({
+      parameterRule: createRule({ type: 'unsupported' }),
+      value: 0.7,
+    })
+    rerender(<ParameterItem {...unknownTypeProps} />)
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument()
+  })
+})
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 f2c35c1823..8ae0b99159 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
@@ -109,7 +109,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
 
   const handleSwitch = (checked: boolean) => {
     if (onSwitch) {
-      const assignValue: ParameterValue = localValue || getDefaultValue()
+      const assignValue: ParameterValue = localValue ?? getDefaultValue()
 
       onSwitch(checked, assignValue)
     }
@@ -118,7 +118,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
   useEffect(() => {
     if ((parameterRule.type === 'int' || parameterRule.type === 'float') && numberInputRef.current)
       numberInputRef.current.value = `${renderValue}`
-  }, [value])
+  }, [value, parameterRule.type, renderValue])
 
   const renderInput = () => {
     const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
@@ -148,7 +148,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           )}
           <input
             ref={numberInputRef}
-            className="system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none"
+            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none system-sm-regular"
             type="number"
             max={parameterRule.max}
             min={parameterRule.min}
@@ -175,7 +175,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           )}
           <input
             ref={numberInputRef}
-            className="system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none"
+            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none system-sm-regular"
             type="number"
             max={parameterRule.max}
             min={parameterRule.min}
@@ -203,7 +203,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'string' && !parameterRule.options?.length) {
       return (
         <input
-          className={cn(isInWorkflow ? 'w-[150px]' : 'w-full', 'system-sm-regular ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 text-components-input-text-filled outline-none')}
+          className={cn(isInWorkflow ? 'w-[150px]' : 'w-full', 'ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 text-components-input-text-filled outline-none system-sm-regular')}
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -213,7 +213,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'text') {
       return (
         <textarea
-          className="system-sm-regular ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 text-components-input-text-filled"
+          className="ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 text-components-input-text-filled system-sm-regular"
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -265,7 +265,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
             )
           }
           <div
-            className="system-xs-regular mr-0.5 truncate text-text-secondary"
+            className="mr-0.5 truncate text-text-secondary system-xs-regular"
             title={parameterRule.label[language] || parameterRule.label.en_US}
           >
             {parameterRule.label[language] || parameterRule.label.en_US}
@@ -284,7 +284,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
         </div>
         {
           parameterRule.type === 'tag' && (
-            <div className={cn(!isInWorkflow && 'w-[150px]', 'system-xs-regular text-text-tertiary')}>
+            <div className={cn(!isInWorkflow && 'w-[150px]', 'text-text-tertiary system-xs-regular')}>
               {parameterRule?.tagPlaceholder?.[language]}
             </div>
           )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.spec.tsx
new file mode 100644
index 0000000000..04789d163e
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.spec.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import PresetsParameter from './presets-parameter'
+
+vi.mock('@/app/components/base/dropdown', () => ({
+  default: ({ renderTrigger, items, onSelect }: { renderTrigger: (open: boolean) => React.ReactNode, items: { value: number, text: string }[], onSelect: (item: { value: number }) => void }) => (
+    <div>
+      {renderTrigger(false)}
+      {items.map(item => (
+        <button key={item.value} onClick={() => onSelect(item)}>
+          {item.text}
+        </button>
+      ))}
+    </div>
+  ),
+}))
+
+describe('PresetsParameter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render presets and handle selection', () => {
+    const onSelect = vi.fn()
+    render(<PresetsParameter onSelect={onSelect} />)
+
+    expect(screen.getByText('common.modelProvider.loadPresets')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('common.model.tone.Creative'))
+    expect(onSelect).toHaveBeenCalledWith(1)
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.spec.tsx
new file mode 100644
index 0000000000..a5b6e490af
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.spec.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import StatusIndicators from './status-indicators'
+
+let installedPlugins = [{ name: 'demo-plugin', plugin_unique_identifier: 'demo@1.0.0' }]
+
+vi.mock('@/service/use-plugins', () => ({
+  useInstalledPluginList: () => ({ data: { plugins: installedPlugins } }),
+}))
+
+vi.mock('@/app/components/base/tooltip', () => ({
+  default: ({ popupContent }: { popupContent: React.ReactNode }) => <div>{popupContent}</div>,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/switch-plugin-version', () => ({
+  SwitchPluginVersion: ({ uniqueIdentifier }: { uniqueIdentifier: string }) => <div>{`SwitchVersion:${uniqueIdentifier}`}</div>,
+}))
+
+const t = (key: string) => key
+
+describe('StatusIndicators', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    installedPlugins = [{ name: 'demo-plugin', plugin_unique_identifier: 'demo@1.0.0' }]
+  })
+
+  it('should render nothing when model is available and enabled', () => {
+    const { container } = render(
+      <StatusIndicators
+        needsConfiguration={false}
+        modelProvider={true}
+        inModelList={true}
+        disabled={false}
+        pluginInfo={null}
+        t={t}
+      />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render warning states when provider model is disabled', () => {
+    const parentClick = vi.fn()
+    const { rerender } = render(
+      <div onClick={parentClick}>
+        <StatusIndicators
+          needsConfiguration={false}
+          modelProvider={true}
+          inModelList={true}
+          disabled={true}
+          pluginInfo={null}
+          t={t}
+        />
+      </div>,
+    )
+    expect(screen.getByText('nodes.agent.modelSelectorTooltips.deprecated')).toBeInTheDocument()
+
+    rerender(
+      <div onClick={parentClick}>
+        <StatusIndicators
+          needsConfiguration={false}
+          modelProvider={true}
+          inModelList={false}
+          disabled={true}
+          pluginInfo={null}
+          t={t}
+        />
+      </div>,
+    )
+    expect(screen.getByText('nodes.agent.modelNotSupport.title')).toBeInTheDocument()
+    expect(screen.getByText('nodes.agent.linkToPlugin').closest('a')).toHaveAttribute('href', '/plugins')
+    fireEvent.click(screen.getByText('nodes.agent.modelNotSupport.title'))
+    fireEvent.click(screen.getByText('nodes.agent.linkToPlugin'))
+    expect(parentClick).not.toHaveBeenCalled()
+
+    rerender(
+      <div onClick={parentClick}>
+        <StatusIndicators
+          needsConfiguration={false}
+          modelProvider={true}
+          inModelList={false}
+          disabled={true}
+          pluginInfo={{ name: 'demo-plugin' }}
+          t={t}
+        />
+      </div>,
+    )
+    expect(screen.getByText('SwitchVersion:demo@1.0.0')).toBeInTheDocument()
+  })
+
+  it('should render marketplace warning when provider is unavailable', () => {
+    render(
+      <StatusIndicators
+        needsConfiguration={false}
+        modelProvider={false}
+        inModelList={false}
+        disabled={false}
+        pluginInfo={null}
+        t={t}
+      />,
+    )
+    expect(screen.getByText('nodes.agent.modelNotInMarketplace.title')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.spec.tsx
new file mode 100644
index 0000000000..5e22309a33
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.spec.tsx
@@ -0,0 +1,47 @@
+import type { ComponentProps } from 'react'
+import { render, screen } from '@testing-library/react'
+import Trigger from './trigger'
+
+vi.mock('../hooks', () => ({
+  useLanguage: () => 'en_US',
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    modelProviders: [{ provider: 'openai', label: { en_US: 'OpenAI' } }],
+  }),
+}))
+
+vi.mock('../model-icon', () => ({
+  default: () => <div data-testid="model-icon">Icon</div>,
+}))
+
+vi.mock('../model-name', () => ({
+  default: ({ modelItem }: { modelItem: { model: string } }) => <div>{modelItem.model}</div>,
+}))
+
+describe('Trigger', () => {
+  const currentProvider = { provider: 'openai', label: { en_US: 'OpenAI' } } as unknown as ComponentProps<typeof Trigger>['currentProvider']
+  const currentModel = { model: 'gpt-4' } as unknown as ComponentProps<typeof Trigger>['currentModel']
+
+  it('should render initialized state', () => {
+    render(
+      <Trigger
+        currentProvider={currentProvider}
+        currentModel={currentModel}
+      />,
+    )
+    expect(screen.getByText('gpt-4')).toBeInTheDocument()
+    expect(screen.getByTestId('model-icon')).toBeInTheDocument()
+  })
+
+  it('should render fallback model id when current model is missing', () => {
+    render(
+      <Trigger
+        modelId="gpt-4"
+        providerName="openai"
+      />,
+    )
+    expect(screen.getByText('gpt-4')).toBeInTheDocument()
+  })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 535d9889dd..ff98c40fd5 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -4387,11 +4387,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1

From f76ee7cfa481983fcbe3b1030fa7bfe2c7e516b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E4=B9=8B=E6=9C=AC=E6=BE=AA?=
 <kinomotomiovo@gmail.com>
Date: Mon, 23 Feb 2026 21:28:40 +0800
Subject: [PATCH 03/26] fix: add return type annotation to BaseVector.create
 (#32475)

Co-authored-by: KinomotoMio <200703522+KinomotoMio@users.noreply.github.com>
---
 api/core/rag/datasource/vdb/vector_base.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/core/rag/datasource/vdb/vector_base.py b/api/core/rag/datasource/vdb/vector_base.py
index 469978224a..acf3465c5f 100644
--- a/api/core/rag/datasource/vdb/vector_base.py
+++ b/api/core/rag/datasource/vdb/vector_base.py
@@ -15,7 +15,7 @@ class BaseVector(ABC):
         raise NotImplementedError
 
     @abstractmethod
-    def create(self, texts: list[Document], embeddings: list[list[float]], **kwargs):
+    def create(self, texts: list[Document], embeddings: list[list[float]], **kwargs) -> list[str] | None:
         raise NotImplementedError
 
     @abstractmethod

From 737575d63703a5537fe15ed24d609bc066acd02b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E4=B9=8B=E6=9C=AC=E6=BE=AA?=
 <kinomotomiovo@gmail.com>
Date: Tue, 24 Feb 2026 00:23:48 +0800
Subject: [PATCH 04/26] test: migrate Dataset/Document property tests to
 testcontainers (#32487)

Co-authored-by: KinomotoMio <200703522+KinomotoMio@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 .../models/test_dataset_models.py             | 271 ++++++++++++++++++
 .../unit_tests/models/test_dataset_models.py  | 152 +---------
 2 files changed, 272 insertions(+), 151 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/models/test_dataset_models.py

diff --git a/api/tests/test_containers_integration_tests/models/test_dataset_models.py b/api/tests/test_containers_integration_tests/models/test_dataset_models.py
new file mode 100644
index 0000000000..d2c3e1e58e
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/models/test_dataset_models.py
@@ -0,0 +1,271 @@
+"""
+Integration tests for Dataset and Document model properties using testcontainers.
+
+These tests validate database-backed model properties (total_documents, word_count, etc.)
+without mocking SQLAlchemy queries, ensuring real query behavior against PostgreSQL.
+"""
+
+from collections.abc import Generator
+from uuid import uuid4
+
+import pytest
+from sqlalchemy.orm import Session
+
+from models.dataset import Dataset, Document, DocumentSegment
+
+
+class TestDatasetDocumentProperties:
+    """Integration tests for Dataset and Document model properties."""
+
+    @pytest.fixture(autouse=True)
+    def _auto_rollback(self, db_session_with_containers: Session) -> Generator[None, None, None]:
+        """Automatically rollback session changes after each test."""
+        yield
+        db_session_with_containers.rollback()
+
+    def test_dataset_with_documents_relationship(self, db_session_with_containers: Session) -> None:
+        """Test dataset can track its documents."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        for i in range(3):
+            doc = Document(
+                tenant_id=tenant_id,
+                dataset_id=dataset.id,
+                position=i + 1,
+                data_source_type="upload_file",
+                batch="batch_001",
+                name=f"doc_{i}.pdf",
+                created_from="web",
+                created_by=created_by,
+            )
+            db_session_with_containers.add(doc)
+        db_session_with_containers.flush()
+
+        assert dataset.total_documents == 3
+
+    def test_dataset_available_documents_count(self, db_session_with_containers: Session) -> None:
+        """Test dataset can count available documents."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        doc_available = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=1,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="available.pdf",
+            created_from="web",
+            created_by=created_by,
+            indexing_status="completed",
+            enabled=True,
+            archived=False,
+        )
+        doc_pending = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=2,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="pending.pdf",
+            created_from="web",
+            created_by=created_by,
+            indexing_status="waiting",
+            enabled=True,
+            archived=False,
+        )
+        doc_disabled = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=3,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="disabled.pdf",
+            created_from="web",
+            created_by=created_by,
+            indexing_status="completed",
+            enabled=False,
+            archived=False,
+        )
+        db_session_with_containers.add_all([doc_available, doc_pending, doc_disabled])
+        db_session_with_containers.flush()
+
+        assert dataset.total_available_documents == 1
+
+    def test_dataset_word_count_aggregation(self, db_session_with_containers: Session) -> None:
+        """Test dataset can aggregate word count from documents."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        for i, wc in enumerate([2000, 3000]):
+            doc = Document(
+                tenant_id=tenant_id,
+                dataset_id=dataset.id,
+                position=i + 1,
+                data_source_type="upload_file",
+                batch="batch_001",
+                name=f"doc_{i}.pdf",
+                created_from="web",
+                created_by=created_by,
+                word_count=wc,
+            )
+            db_session_with_containers.add(doc)
+        db_session_with_containers.flush()
+
+        assert dataset.word_count == 5000
+
+    def test_dataset_available_segment_count(self, db_session_with_containers: Session) -> None:
+        """Test Dataset.available_segment_count counts completed and enabled segments."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        doc = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=1,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="doc.pdf",
+            created_from="web",
+            created_by=created_by,
+        )
+        db_session_with_containers.add(doc)
+        db_session_with_containers.flush()
+
+        for i in range(2):
+            seg = DocumentSegment(
+                tenant_id=tenant_id,
+                dataset_id=dataset.id,
+                document_id=doc.id,
+                position=i + 1,
+                content=f"segment {i}",
+                word_count=100,
+                tokens=50,
+                status="completed",
+                enabled=True,
+                created_by=created_by,
+            )
+            db_session_with_containers.add(seg)
+
+        seg_waiting = DocumentSegment(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            document_id=doc.id,
+            position=3,
+            content="waiting segment",
+            word_count=100,
+            tokens=50,
+            status="waiting",
+            enabled=True,
+            created_by=created_by,
+        )
+        db_session_with_containers.add(seg_waiting)
+        db_session_with_containers.flush()
+
+        assert dataset.available_segment_count == 2
+
+    def test_document_segment_count_property(self, db_session_with_containers: Session) -> None:
+        """Test document can count its segments."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        doc = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=1,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="doc.pdf",
+            created_from="web",
+            created_by=created_by,
+        )
+        db_session_with_containers.add(doc)
+        db_session_with_containers.flush()
+
+        for i in range(3):
+            seg = DocumentSegment(
+                tenant_id=tenant_id,
+                dataset_id=dataset.id,
+                document_id=doc.id,
+                position=i + 1,
+                content=f"segment {i}",
+                word_count=100,
+                tokens=50,
+                created_by=created_by,
+            )
+            db_session_with_containers.add(seg)
+        db_session_with_containers.flush()
+
+        assert doc.segment_count == 3
+
+    def test_document_hit_count_aggregation(self, db_session_with_containers: Session) -> None:
+        """Test document can aggregate hit count from segments."""
+        tenant_id = str(uuid4())
+        created_by = str(uuid4())
+
+        dataset = Dataset(
+            tenant_id=tenant_id, name="Test Dataset", data_source_type="upload_file", created_by=created_by
+        )
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.flush()
+
+        doc = Document(
+            tenant_id=tenant_id,
+            dataset_id=dataset.id,
+            position=1,
+            data_source_type="upload_file",
+            batch="batch_001",
+            name="doc.pdf",
+            created_from="web",
+            created_by=created_by,
+        )
+        db_session_with_containers.add(doc)
+        db_session_with_containers.flush()
+
+        for i, hits in enumerate([10, 15]):
+            seg = DocumentSegment(
+                tenant_id=tenant_id,
+                dataset_id=dataset.id,
+                document_id=doc.id,
+                position=i + 1,
+                content=f"segment {i}",
+                word_count=100,
+                tokens=50,
+                hit_count=hits,
+                created_by=created_by,
+            )
+            db_session_with_containers.add(seg)
+        db_session_with_containers.flush()
+
+        assert doc.hit_count == 25
diff --git a/api/tests/unit_tests/models/test_dataset_models.py b/api/tests/unit_tests/models/test_dataset_models.py
index 2322c556e2..c0e912fa1e 100644
--- a/api/tests/unit_tests/models/test_dataset_models.py
+++ b/api/tests/unit_tests/models/test_dataset_models.py
@@ -12,7 +12,7 @@ This test suite covers:
 import json
 import pickle
 from datetime import UTC, datetime
-from unittest.mock import MagicMock, patch
+from unittest.mock import patch
 from uuid import uuid4
 
 from models.dataset import (
@@ -954,156 +954,6 @@ class TestChildChunk:
         assert child_chunk.index_node_hash == index_node_hash
 
 
-class TestDatasetDocumentCascadeDeletes:
-    """Test suite for Dataset-Document cascade delete operations."""
-
-    def test_dataset_with_documents_relationship(self):
-        """Test dataset can track its documents."""
-        # Arrange
-        dataset_id = str(uuid4())
-        dataset = Dataset(
-            tenant_id=str(uuid4()),
-            name="Test Dataset",
-            data_source_type="upload_file",
-            created_by=str(uuid4()),
-        )
-        dataset.id = dataset_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.where.return_value.scalar.return_value = 3
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            total_docs = dataset.total_documents
-
-            # Assert
-            assert total_docs == 3
-
-    def test_dataset_available_documents_count(self):
-        """Test dataset can count available documents."""
-        # Arrange
-        dataset_id = str(uuid4())
-        dataset = Dataset(
-            tenant_id=str(uuid4()),
-            name="Test Dataset",
-            data_source_type="upload_file",
-            created_by=str(uuid4()),
-        )
-        dataset.id = dataset_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.where.return_value.scalar.return_value = 2
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            available_docs = dataset.total_available_documents
-
-            # Assert
-            assert available_docs == 2
-
-    def test_dataset_word_count_aggregation(self):
-        """Test dataset can aggregate word count from documents."""
-        # Arrange
-        dataset_id = str(uuid4())
-        dataset = Dataset(
-            tenant_id=str(uuid4()),
-            name="Test Dataset",
-            data_source_type="upload_file",
-            created_by=str(uuid4()),
-        )
-        dataset.id = dataset_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.with_entities.return_value.where.return_value.scalar.return_value = 5000
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            total_words = dataset.word_count
-
-            # Assert
-            assert total_words == 5000
-
-    def test_dataset_available_segment_count(self):
-        """Test dataset can count available segments."""
-        # Arrange
-        dataset_id = str(uuid4())
-        dataset = Dataset(
-            tenant_id=str(uuid4()),
-            name="Test Dataset",
-            data_source_type="upload_file",
-            created_by=str(uuid4()),
-        )
-        dataset.id = dataset_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.where.return_value.scalar.return_value = 15
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            segment_count = dataset.available_segment_count
-
-            # Assert
-            assert segment_count == 15
-
-    def test_document_segment_count_property(self):
-        """Test document can count its segments."""
-        # Arrange
-        document_id = str(uuid4())
-        document = Document(
-            tenant_id=str(uuid4()),
-            dataset_id=str(uuid4()),
-            position=1,
-            data_source_type="upload_file",
-            batch="batch_001",
-            name="test.pdf",
-            created_from="web",
-            created_by=str(uuid4()),
-        )
-        document.id = document_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.where.return_value.count.return_value = 10
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            segment_count = document.segment_count
-
-            # Assert
-            assert segment_count == 10
-
-    def test_document_hit_count_aggregation(self):
-        """Test document can aggregate hit count from segments."""
-        # Arrange
-        document_id = str(uuid4())
-        document = Document(
-            tenant_id=str(uuid4()),
-            dataset_id=str(uuid4()),
-            position=1,
-            data_source_type="upload_file",
-            batch="batch_001",
-            name="test.pdf",
-            created_from="web",
-            created_by=str(uuid4()),
-        )
-        document.id = document_id
-
-        # Mock the database session query
-        mock_query = MagicMock()
-        mock_query.with_entities.return_value.where.return_value.scalar.return_value = 25
-
-        with patch("models.dataset.db.session.query", return_value=mock_query):
-            # Act
-            hit_count = document.hit_count
-
-            # Assert
-            assert hit_count == 25
-
-
 class TestDocumentSegmentNavigation:
     """Test suite for DocumentSegment navigation properties."""
 

From 57890eed250f952c1372ebabb3ce0036e74fb673 Mon Sep 17 00:00:00 2001
From: Stella Miyako <1908641096@qq.com>
Date: Tue, 24 Feb 2026 00:32:16 +0800
Subject: [PATCH 05/26] refactor: fix opentelemetry histogram type assignment
 error (#32490)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/core/ops/tencent_trace/client.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/api/core/ops/tencent_trace/client.py b/api/core/ops/tencent_trace/client.py
index bf1ab5e7e6..99ccf00400 100644
--- a/api/core/ops/tencent_trace/client.py
+++ b/api/core/ops/tencent_trace/client.py
@@ -18,8 +18,7 @@ except ImportError:
     from importlib_metadata import version  # type: ignore[import-not-found]
 
 if TYPE_CHECKING:
-    from opentelemetry.metrics import Meter
-    from opentelemetry.metrics._internal.instrument import Histogram
+    from opentelemetry.metrics import Histogram, Meter
     from opentelemetry.sdk.metrics.export import MetricReader
 
 from opentelemetry import trace as trace_api

From 7c60ad01d305a89e677383689b54ef0a289c455f Mon Sep 17 00:00:00 2001
From: Tyson Cung <45380903+tysoncung@users.noreply.github.com>
Date: Tue, 24 Feb 2026 01:11:43 +0800
Subject: [PATCH 06/26] fix: add return type annotation to
 Moderation.validate_config abstract method (#32491)

---
 api/core/moderation/base.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/core/moderation/base.py b/api/core/moderation/base.py
index d76b4689be..31dd0d5568 100644
--- a/api/core/moderation/base.py
+++ b/api/core/moderation/base.py
@@ -39,7 +39,7 @@ class Moderation(Extensible, ABC):
 
     @classmethod
     @abstractmethod
-    def validate_config(cls, tenant_id: str, config: dict):
+    def validate_config(cls, tenant_id: str, config: dict) -> None:
         """
         Validate the incoming form config data.
 

From 80f49367eb82d3368ee99df22f9762365ed0ddbc Mon Sep 17 00:00:00 2001
From: J0su3Code <projets2dev@gmail.com>
Date: Mon, 23 Feb 2026 18:12:43 +0000
Subject: [PATCH 07/26] fix: add return type annotation to abstract _publish
 method (#32493)

---
 api/core/app/apps/base_app_queue_manager.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/core/app/apps/base_app_queue_manager.py b/api/core/app/apps/base_app_queue_manager.py
index 971ece6214..d2f09a25c3 100644
--- a/api/core/app/apps/base_app_queue_manager.py
+++ b/api/core/app/apps/base_app_queue_manager.py
@@ -133,7 +133,7 @@ class AppQueueManager(ABC):
         self._publish(event, pub_from)
 
     @abstractmethod
-    def _publish(self, event: AppQueueEvent, pub_from: PublishFrom):
+    def _publish(self, event: AppQueueEvent, pub_from: PublishFrom) -> None:
         """
         Publish event to queue
         :param event:

From 6e531fe44fb262001e9b12fa3d1e32440357efd0 Mon Sep 17 00:00:00 2001
From: Poojan <poojan@infocusp.com>
Date: Tue, 24 Feb 2026 09:51:02 +0530
Subject: [PATCH 08/26] test: add unit tests for base-components part-3
 (#32408)

---
 .../components/base/tab-header/index.spec.tsx | 114 +++++++
 web/app/components/base/tab-header/index.tsx  |   9 +-
 .../base/tab-slider-new/index.spec.tsx        |  99 ++++++
 .../components/base/tab-slider-new/index.tsx  |   6 +-
 .../base/tab-slider-plain/index.spec.tsx      | 100 ++++++
 .../base/tab-slider-plain/index.tsx           |  21 +-
 .../components/base/tab-slider/index.spec.tsx | 107 ++++++
 web/app/components/base/tab-slider/index.tsx  |   7 +-
 .../components/base/textarea/index.spec.tsx   |  77 +++++
 web/app/components/base/textarea/index.tsx    |   7 +-
 .../base/timezone-label/index.spec.tsx        |  31 ++
 .../components/base/timezone-label/index.tsx  |   3 +-
 .../components/base/tooltip/content.spec.tsx  |  49 +++
 web/app/components/base/tooltip/content.tsx   |   8 +-
 .../base/video-gallery/VideoPlayer.spec.tsx   | 262 +++++++++++++++
 .../base/video-gallery/VideoPlayer.tsx        |  15 +-
 .../base/video-gallery/index.spec.tsx         |  23 ++
 .../components/base/video-gallery/index.tsx   |   2 +-
 .../base/voice-input/index.spec.tsx           | 310 ++++++++++++++++++
 web/app/components/base/voice-input/index.tsx |  32 +-
 .../components/base/zendesk/index.spec.tsx    | 126 +++++++
 web/app/components/base/zendesk/index.tsx     |   3 +-
 web/eslint-suppressions.json                  |  23 --
 23 files changed, 1367 insertions(+), 67 deletions(-)
 create mode 100644 web/app/components/base/tab-header/index.spec.tsx
 create mode 100644 web/app/components/base/tab-slider-new/index.spec.tsx
 create mode 100644 web/app/components/base/tab-slider-plain/index.spec.tsx
 create mode 100644 web/app/components/base/tab-slider/index.spec.tsx
 create mode 100644 web/app/components/base/textarea/index.spec.tsx
 create mode 100644 web/app/components/base/timezone-label/index.spec.tsx
 create mode 100644 web/app/components/base/tooltip/content.spec.tsx
 create mode 100644 web/app/components/base/video-gallery/VideoPlayer.spec.tsx
 create mode 100644 web/app/components/base/video-gallery/index.spec.tsx
 create mode 100644 web/app/components/base/voice-input/index.spec.tsx
 create mode 100644 web/app/components/base/zendesk/index.spec.tsx

diff --git a/web/app/components/base/tab-header/index.spec.tsx b/web/app/components/base/tab-header/index.spec.tsx
new file mode 100644
index 0000000000..df0a827e57
--- /dev/null
+++ b/web/app/components/base/tab-header/index.spec.tsx
@@ -0,0 +1,114 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import TabHeader from './index'
+
+describe('TabHeader Component', () => {
+  const mockItems = [
+    { id: 'tab1', name: 'General' },
+    { id: 'tab2', name: 'Settings' },
+    { id: 'tab3', name: 'Profile', isRight: true },
+    { id: 'tab4', name: 'Disabled Tab', disabled: true },
+  ]
+
+  it('should render all items with correct names', () => {
+    render(<TabHeader items={mockItems} value="tab1" onChange={() => { }} />)
+
+    expect(screen.getByText('General')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+    expect(screen.getByText('Profile')).toBeInTheDocument()
+    expect(screen.getByText('Disabled Tab')).toBeInTheDocument()
+  })
+
+  it('should separate items into left and right containers correctly', () => {
+    render(<TabHeader items={mockItems} value="tab1" onChange={() => { }} />)
+
+    const leftContainer = screen.getByTestId('tab-header-left')
+    const rightContainer = screen.getByTestId('tab-header-right')
+
+    // Verify children count
+    expect(leftContainer.children.length).toBe(3)
+    expect(rightContainer.children.length).toBe(1)
+
+    // Verify specific item placement using within and toContainElement
+    const profileTab = screen.getByTestId('tab-header-item-tab3')
+    expect(rightContainer).toContainElement(profileTab)
+
+    const disabledTab = screen.getByTestId('tab-header-item-tab4')
+    expect(leftContainer).toContainElement(disabledTab)
+  })
+
+  it('should apply active styles to the selected tab', () => {
+    const activeClass = 'custom-active-style'
+    render(
+      <TabHeader
+        items={mockItems}
+        value="tab2"
+        activeItemClassName={activeClass}
+        onChange={() => { }}
+      />,
+    )
+
+    const activeTab = screen.getByTestId('tab-header-item-tab2')
+    expect(activeTab).toHaveClass('border-components-tab-active')
+    expect(activeTab).toHaveClass(activeClass)
+
+    const inactiveTab = screen.getByTestId('tab-header-item-tab1')
+    expect(inactiveTab).toHaveClass('text-text-tertiary')
+  })
+
+  it('should call onChange when a non-disabled tab is clicked', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<TabHeader items={mockItems} value="tab1" onChange={handleChange} />)
+
+    await user.click(screen.getByText('Settings'))
+    expect(handleChange).toHaveBeenCalledWith('tab2')
+  })
+
+  it('should not call onChange when a disabled tab is clicked', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<TabHeader items={mockItems} value="tab1" onChange={handleChange} />)
+
+    const disabledTab = screen.getByTestId('tab-header-item-tab4')
+    expect(disabledTab).toHaveClass('cursor-not-allowed')
+
+    await user.click(disabledTab)
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it('should render icon and extra content when provided', () => {
+    const itemsWithExtras = [
+      {
+        id: 'extra',
+        name: 'Extra',
+        icon: <span data-testid="tab-icon">🚀</span>,
+        extra: <span data-testid="tab-extra">New</span>,
+      },
+    ]
+    render(<TabHeader items={itemsWithExtras} value="extra" onChange={() => { }} />)
+
+    expect(screen.getByTestId('tab-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('tab-extra')).toBeInTheDocument()
+  })
+
+  it('should apply custom class names for items and wrappers', () => {
+    render(
+      <TabHeader
+        items={mockItems}
+        value="tab1"
+        itemClassName="my-text-class"
+        itemWrapClassName="my-wrap-class"
+        onChange={() => { }}
+      />,
+    )
+
+    const tabWrap = screen.getByTestId('tab-header-item-tab1')
+    // We target the inner div for the name class check
+    const tabText = within(tabWrap).getByText('General')
+
+    expect(tabWrap).toHaveClass('my-wrap-class')
+    expect(tabText).toHaveClass('my-text-class')
+  })
+})
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index 6ba6a354a3..e5f0556644 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -32,8 +32,9 @@ const TabHeader: FC<ITabHeaderProps> = ({
   const renderItem = ({ id, name, icon, extra, disabled }: Item) => (
     <div
       key={id}
+      data-testid={`tab-header-item-${id}`}
       className={cn(
-        'system-md-semibold relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5',
+        'relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5 system-md-semibold',
         id === value ? cn('border-components-tab-active text-text-primary', activeItemClassName) : 'text-text-tertiary',
         disabled && 'cursor-not-allowed opacity-30',
         itemWrapClassName,
@@ -46,11 +47,11 @@ const TabHeader: FC<ITabHeaderProps> = ({
     </div>
   )
   return (
-    <div className="flex justify-between">
-      <div className="flex space-x-4">
+    <div data-testid="tab-header" className="flex justify-between">
+      <div data-testid="tab-header-left" className="flex space-x-4">
         {items.filter(item => !item.isRight).map(renderItem)}
       </div>
-      <div className="flex space-x-4">
+      <div data-testid="tab-header-right" className="flex space-x-4">
         {items.filter(item => item.isRight).map(renderItem)}
       </div>
     </div>
diff --git a/web/app/components/base/tab-slider-new/index.spec.tsx b/web/app/components/base/tab-slider-new/index.spec.tsx
new file mode 100644
index 0000000000..d47afb2aed
--- /dev/null
+++ b/web/app/components/base/tab-slider-new/index.spec.tsx
@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import TabSliderNew from './index'
+
+describe('TabSliderNew Component', () => {
+  const mockOptions = [
+    { value: 'all', text: 'All' },
+    { value: 'active', text: 'Active' },
+    { value: 'inactive', text: 'Inactive', icon: <span data-testid="tab-icon">ico</span> },
+  ]
+
+  it('should render all options with text and icons', () => {
+    render(
+      <TabSliderNew
+        value="all"
+        options={mockOptions}
+        onChange={() => { }}
+      />,
+    )
+
+    expect(screen.getByText('All')).toBeInTheDocument()
+    expect(screen.getByText('Active')).toBeInTheDocument()
+    expect(screen.getByText('Inactive')).toBeInTheDocument()
+    expect(screen.getByTestId('tab-icon')).toBeInTheDocument()
+  })
+
+  it('should apply active classes when the value matches the option', () => {
+    render(
+      <TabSliderNew
+        value="active"
+        options={mockOptions}
+        onChange={() => { }}
+      />,
+    )
+
+    const activeTab = screen.getByTestId('tab-item-active')
+    const inactiveTab = screen.getByTestId('tab-item-all')
+
+    // Check active styles
+    expect(activeTab).toHaveClass('border-components-main-nav-nav-button-border')
+    expect(activeTab).toHaveClass('text-components-main-nav-nav-button-text-active')
+
+    // Check inactive styles
+    expect(inactiveTab).toHaveClass('text-text-tertiary')
+    expect(inactiveTab).not.toHaveClass('border-components-main-nav-nav-button-border')
+  })
+
+  it('should call onChange with the correct value when a tab is clicked', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <TabSliderNew
+        value="all"
+        options={mockOptions}
+        onChange={handleChange}
+      />,
+    )
+
+    const inactiveTab = screen.getByTestId('tab-item-inactive')
+    await user.click(inactiveTab)
+
+    expect(handleChange).toHaveBeenCalledWith('inactive')
+    expect(handleChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should apply custom container className', () => {
+    const customClass = 'custom-container-style'
+    render(
+      <TabSliderNew
+        value="all"
+        options={mockOptions}
+        onChange={() => { }}
+        className={customClass}
+      />,
+    )
+
+    expect(screen.getByTestId('tab-slider-new')).toHaveClass(customClass)
+  })
+
+  it('should call onChange even if clicking an already active tab', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <TabSliderNew
+        value="all"
+        options={mockOptions}
+        onChange={handleChange}
+      />,
+    )
+
+    const activeTab = screen.getByTestId('tab-item-all')
+    await user.click(activeTab)
+
+    expect(handleChange).toHaveBeenCalledWith('all')
+  })
+})
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index 464226ee02..96b97a55f6 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -19,10 +19,14 @@ const TabSliderNew: FC<TabSliderProps> = ({
   options,
 }) => {
   return (
-    <div className={cn(className, 'relative flex')}>
+    <div
+      data-testid="tab-slider-new"
+      className={cn(className, 'relative flex')}
+    >
       {options.map(option => (
         <div
           key={option.value}
+          data-testid={`tab-item-${option.value}`}
           onClick={() => onChange(option.value)}
           className={cn(
             'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover',
diff --git a/web/app/components/base/tab-slider-plain/index.spec.tsx b/web/app/components/base/tab-slider-plain/index.spec.tsx
new file mode 100644
index 0000000000..40c5b8c329
--- /dev/null
+++ b/web/app/components/base/tab-slider-plain/index.spec.tsx
@@ -0,0 +1,100 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import TabSlider from './index'
+
+describe('TabSlider Component', () => {
+  const mockOptions = [
+    { value: 'tab1', text: 'Overview' },
+    { value: 'tab2', text: 'Settings' },
+    { value: 'tab3', text: <span data-testid="custom-jsx">Advanced</span> },
+  ]
+
+  it('should render all options correctly', () => {
+    render(<TabSlider value="tab1" options={mockOptions} onChange={() => { }} />)
+
+    expect(screen.getByText('Overview')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+    expect(screen.getByTestId('custom-jsx')).toBeInTheDocument()
+  })
+
+  it('should call onChange when an inactive tab is clicked', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<TabSlider value="tab1" options={mockOptions} onChange={handleChange} />)
+
+    const settingsTab = screen.getByTestId('tab-slider-item-tab2')
+    await user.click(settingsTab)
+
+    expect(handleChange).toHaveBeenCalledWith('tab2')
+  })
+
+  it('should not call onChange when the active tab is clicked', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    render(<TabSlider value="tab1" options={mockOptions} onChange={handleChange} />)
+
+    const activeTab = screen.getByTestId('tab-slider-item-tab1')
+    await user.click(activeTab)
+
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it('should apply active styles and render indicator for the active tab', () => {
+    render(<TabSlider value="tab2" options={mockOptions} onChange={() => { }} />)
+
+    const activeTab = screen.getByTestId('tab-slider-item-tab2')
+    const activeText = within(activeTab).getByTestId('tab-slider-item-text')
+    const indicator = within(activeTab).getByTestId('tab-active-indicator')
+
+    expect(activeText).toHaveClass('text-text-primary')
+    expect(indicator).toBeInTheDocument()
+
+    const inactiveTab = screen.getByTestId('tab-slider-item-tab1')
+    const inactiveText = within(inactiveTab).getByTestId('tab-slider-item-text')
+    expect(inactiveText).toHaveClass('text-text-tertiary')
+    expect(within(inactiveTab).queryByTestId('tab-active-indicator')).not.toBeInTheDocument()
+  })
+
+  it('should apply smallItem styles when smallItem prop is true', () => {
+    render(<TabSlider value="tab1" options={mockOptions} onChange={() => { }} smallItem />)
+
+    const item = screen.getByTestId('tab-slider-item-tab1')
+    expect(item).toHaveClass('system-sm-semibold-uppercase')
+    expect(item).not.toHaveClass('system-xl-semibold')
+  })
+
+  it('should apply standard sizing when smallItem prop is false', () => {
+    render(<TabSlider value="tab1" options={mockOptions} onChange={() => { }} />)
+
+    const item = screen.getByTestId('tab-slider-item-tab1')
+    expect(item).toHaveClass('system-xl-semibold')
+  })
+
+  it('should handle border styles based on noBorderBottom prop', () => {
+    const { rerender } = render(
+      <TabSlider value="tab1" options={mockOptions} onChange={() => { }} />,
+    )
+    expect(screen.getByTestId('tab-slider')).toHaveClass('border-b')
+
+    rerender(
+      <TabSlider value="tab1" options={mockOptions} onChange={() => { }} noBorderBottom />,
+    )
+    expect(screen.getByTestId('tab-slider')).not.toHaveClass('border-b')
+  })
+
+  it('should apply custom itemClassName to all items', () => {
+    const customClass = 'my-custom-item'
+    render(
+      <TabSlider
+        value="tab1"
+        options={mockOptions}
+        onChange={() => { }}
+        itemClassName={customClass}
+      />,
+    )
+
+    expect(screen.getByTestId('tab-slider-item-tab1')).toHaveClass(customClass)
+    expect(screen.getByTestId('tab-slider-item-tab2')).toHaveClass(customClass)
+  })
+})
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index 5b8eb270ee..106d234016 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -25,17 +25,27 @@ const Item: FC<ItemProps> = ({
   return (
     <div
       key={option.value}
+      data-testid={`tab-slider-item-${option.value}`}
       className={cn(
-        'relative pb-2.5 ',
+        'relative pb-2.5',
         !isActive && 'cursor-pointer',
         smallItem ? 'system-sm-semibold-uppercase' : 'system-xl-semibold',
         className,
       )}
       onClick={() => !isActive && onClick(option.value)}
     >
-      <div className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}>{option.text}</div>
+      <div
+        data-testid="tab-slider-item-text"
+        className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}
+      >
+        {option.text}
+      </div>
       {isActive && (
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"></div>
+        <div
+          data-testid="tab-active-indicator"
+          className="absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"
+        >
+        </div>
       )}
     </div>
   )
@@ -61,7 +71,10 @@ const TabSlider: FC<Props> = ({
   smallItem,
 }) => {
   return (
-    <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex  space-x-6')}>
+    <div
+      data-testid="tab-slider"
+      className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex space-x-6')}
+    >
       {options.map(option => (
         <Item
           isActive={option.value === value}
diff --git a/web/app/components/base/tab-slider/index.spec.tsx b/web/app/components/base/tab-slider/index.spec.tsx
new file mode 100644
index 0000000000..373c984d59
--- /dev/null
+++ b/web/app/components/base/tab-slider/index.spec.tsx
@@ -0,0 +1,107 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useInstalledPluginList } from '@/service/use-plugins'
+import TabSlider from './index'
+
+// Mock the service hook
+vi.mock('@/service/use-plugins', () => ({
+  useInstalledPluginList: vi.fn(),
+}))
+
+const mockOptions = [
+  { value: 'all', text: 'All' },
+  { value: 'plugins', text: 'Plugins' },
+  { value: 'settings', text: 'Settings' },
+]
+
+describe('TabSlider Component', () => {
+  const onChangeMock = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useInstalledPluginList).mockReturnValue({
+      data: { total: 0 },
+      isLoading: false,
+    } as ReturnType<typeof useInstalledPluginList>)
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  // Helper to inject layout values into JSDOM
+  const setElementLayout = (id: string, left: number, width: number) => {
+    const el = document.getElementById(id)
+    if (el) {
+      Object.defineProperty(el, 'offsetLeft', { configurable: true, value: left })
+      Object.defineProperty(el, 'offsetWidth', { configurable: true, value: width })
+    }
+  }
+
+  it('renders all options correctly', () => {
+    render(<TabSlider value="all" options={mockOptions} onChange={onChangeMock} />)
+    mockOptions.forEach((option) => {
+      expect(screen.getByText(option.text as string)).toBeInTheDocument()
+    })
+  })
+
+  it('calls onChange when a new tab is clicked', () => {
+    render(<TabSlider value="all" options={mockOptions} onChange={onChangeMock} />)
+    const pluginTab = screen.getByTestId('tab-item-plugins')
+    fireEvent.click(pluginTab)
+    expect(onChangeMock).toHaveBeenCalledWith('plugins')
+  })
+
+  it('applies the correct active classes to the selected tab', () => {
+    render(<TabSlider value="plugins" options={mockOptions} onChange={onChangeMock} />)
+    const activeTab = screen.getByTestId('tab-item-plugins')
+    expect(activeTab).toHaveClass('text-text-primary')
+
+    const inactiveTab = screen.getByTestId('tab-item-all')
+    expect(inactiveTab).toHaveClass('text-text-tertiary')
+  })
+
+  it('renders the Badge when plugins exist and value is "plugins"', () => {
+    vi.mocked(useInstalledPluginList).mockReturnValue({
+      data: { total: 5 },
+      isLoading: false,
+    } as ReturnType<typeof useInstalledPluginList>)
+
+    render(<TabSlider value="all" options={mockOptions} onChange={onChangeMock} />)
+    expect(screen.getByText('5')).toBeInTheDocument()
+  })
+
+  it('supports functional itemClassName based on active state', () => {
+    render(
+      <TabSlider
+        value="all"
+        options={mockOptions}
+        onChange={onChangeMock}
+        itemClassName={active => (active ? 'is-active-custom' : 'is-inactive-custom')}
+      />,
+    )
+    expect(screen.getByTestId('tab-item-all')).toHaveClass('is-active-custom')
+    expect(screen.getByTestId('tab-item-settings')).toHaveClass('is-inactive-custom')
+  })
+
+  it('updates slider styles based on element dimensions', () => {
+    // 1. Initial Render
+    const { rerender } = render(
+      <TabSlider value="all" options={mockOptions} onChange={onChangeMock} />,
+    )
+
+    // 2. Mock layout properties for the elements now that they are in the DOM
+    setElementLayout('tab-0', 0, 100)
+    setElementLayout('tab-1', 120, 80)
+
+    // 3. Rerender with the same or new value to trigger the useEffect
+    // This forces updateSliderStyle to run while the mocked values exist
+    rerender(<TabSlider value="plugins" options={mockOptions} onChange={onChangeMock} />)
+
+    const slider = screen.getByTestId('tab-slider-bg')
+
+    // Assert the transform matches the "tab-1" (plugins) layout we mocked
+    expect(slider.style.transform).toBe('translateX(120px)')
+    expect(slider.style.width).toBe('80px')
+  })
+})
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index ceb4322045..c7a8fba1d1 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -46,8 +46,12 @@ const TabSlider: FC<TabSliderProps> = ({
   }, [value, options, pluginList?.total])
 
   return (
-    <div className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}>
+    <div
+      data-testid="tab-slider-container"
+      className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}
+    >
       <div
+        data-testid="tab-slider-bg"
         className="shadows-shadow-xs absolute bottom-0.5 left-0 right-0 top-0.5 rounded-[10px] bg-components-panel-bg transition-transform duration-300 ease-in-out"
         style={sliderStyle}
       />
@@ -55,6 +59,7 @@ const TabSlider: FC<TabSliderProps> = ({
         <div
           id={`tab-${index}`}
           key={option.value}
+          data-testid={`tab-item-${option.value}`}
           className={cn(
             'relative z-10 flex cursor-pointer items-center justify-center gap-1 rounded-[10px] px-2.5 py-1.5 transition-colors duration-300 ease-in-out',
             'system-md-semibold',
diff --git a/web/app/components/base/textarea/index.spec.tsx b/web/app/components/base/textarea/index.spec.tsx
new file mode 100644
index 0000000000..404785d2e4
--- /dev/null
+++ b/web/app/components/base/textarea/index.spec.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import TextArea from './index'
+
+describe('TextArea', () => {
+  it('should render correctly with default props', () => {
+    render(<TextArea value="" onChange={vi.fn()} />)
+    const textarea = screen.getByTestId('text-area')
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveValue('')
+  })
+
+  it('should handle value and onChange correctly', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+    const { rerender } = render(<TextArea value="initial" onChange={handleChange} />)
+    const textarea = screen.getByTestId('text-area')
+    expect(textarea).toHaveValue('initial')
+
+    await user.type(textarea, ' updated')
+    expect(handleChange).toHaveBeenCalled()
+
+    rerender(<TextArea value="initial updated" onChange={handleChange} />)
+    expect(textarea).toHaveValue('initial updated')
+  })
+
+  it('should handle autoFocus correctly', () => {
+    render(<TextArea value="" onChange={vi.fn()} autoFocus />)
+    const textarea = screen.getByTestId('text-area')
+    expect(textarea).toHaveFocus()
+  })
+
+  it('should handle disabled state', () => {
+    render(<TextArea value="" onChange={vi.fn()} disabled />)
+    const textarea = screen.getByTestId('text-area')
+    expect(textarea).toBeDisabled()
+    expect(textarea).toHaveClass('cursor-not-allowed')
+  })
+
+  it('should handle placeholder', () => {
+    render(<TextArea value="" onChange={vi.fn()} placeholder="Enter text here" />)
+    expect(screen.getByPlaceholderText('Enter text here')).toBeInTheDocument()
+  })
+
+  it('should handle className', () => {
+    render(<TextArea value="" onChange={vi.fn()} className="custom-class" />)
+    expect(screen.getByTestId('text-area')).toHaveClass('custom-class')
+  })
+
+  it('should handle size variants', () => {
+    const { rerender } = render(<TextArea value="" onChange={vi.fn()} size="small" />)
+    expect(screen.getByTestId('text-area')).toHaveClass('py-1')
+
+    rerender(<TextArea value="" onChange={vi.fn()} size="large" />)
+    expect(screen.getByTestId('text-area')).toHaveClass('px-4')
+  })
+
+  it('should handle destructive state', () => {
+    render(<TextArea value="" onChange={vi.fn()} destructive />)
+    expect(screen.getByTestId('text-area')).toHaveClass('border-components-input-border-destructive')
+  })
+
+  it('should handle onFocus and onBlur', async () => {
+    const user = userEvent.setup()
+    const handleFocus = vi.fn()
+    const handleBlur = vi.fn()
+    render(<TextArea value="" onChange={vi.fn()} onFocus={handleFocus} onBlur={handleBlur} />)
+    const textarea = screen.getByTestId('text-area')
+
+    await user.click(textarea)
+    expect(handleFocus).toHaveBeenCalled()
+
+    await user.tab()
+    expect(handleBlur).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index bea9a7bd41..0bf052ef52 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -9,9 +9,9 @@ const textareaVariants = cva(
   {
     variants: {
       size: {
-        small: 'py-1 rounded-md system-xs-regular',
-        regular: 'px-3 rounded-md system-sm-regular',
-        large: 'px-4 rounded-lg system-md-regular',
+        small: 'rounded-md py-1 system-xs-regular',
+        regular: 'rounded-md px-3 system-sm-regular',
+        large: 'rounded-lg px-4 system-md-regular',
       },
     },
     defaultVariants: {
@@ -48,6 +48,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         value={value ?? ''}
         onChange={onChange}
         disabled={disabled}
+        data-testid="text-area"
         {...props}
       >
       </textarea>
diff --git a/web/app/components/base/timezone-label/index.spec.tsx b/web/app/components/base/timezone-label/index.spec.tsx
new file mode 100644
index 0000000000..c43aa61936
--- /dev/null
+++ b/web/app/components/base/timezone-label/index.spec.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import TimezoneLabel from './index'
+
+describe('TimezoneLabel', () => {
+  it('should render correctly with various timezones', () => {
+    const { rerender } = render(<TimezoneLabel timezone="UTC" />)
+    const label = screen.getByTestId('timezone-label')
+    expect(label).toHaveTextContent('UTC+0')
+    expect(label).toHaveAttribute('title', 'Timezone: UTC (UTC+0)')
+
+    rerender(<TimezoneLabel timezone="Asia/Shanghai" />)
+    expect(label).toHaveTextContent('UTC+8')
+    expect(label).toHaveAttribute('title', 'Timezone: Asia/Shanghai (UTC+8)')
+
+    rerender(<TimezoneLabel timezone="America/New_York" />)
+    // New York is UTC-5 or UTC-4 depending on DST.
+    // dayjs handles this, we just check it renders some offset.
+    expect(label.textContent).toMatch(/UTC[-+]\d+/)
+  })
+
+  it('should apply correct styling for inline prop', () => {
+    render(<TimezoneLabel timezone="UTC" inline />)
+    expect(screen.getByTestId('timezone-label')).toHaveClass('text-text-quaternary')
+  })
+
+  it('should apply custom className', () => {
+    render(<TimezoneLabel timezone="UTC" className="custom-test-class" />)
+    expect(screen.getByTestId('timezone-label')).toHaveClass('custom-test-class')
+  })
+})
diff --git a/web/app/components/base/timezone-label/index.tsx b/web/app/components/base/timezone-label/index.tsx
index f614280b3e..bb4355f338 100644
--- a/web/app/components/base/timezone-label/index.tsx
+++ b/web/app/components/base/timezone-label/index.tsx
@@ -43,11 +43,12 @@ const TimezoneLabel: React.FC<TimezoneLabelProps> = ({
   return (
     <span
       className={cn(
-        'system-sm-regular text-text-tertiary',
+        'text-text-tertiary system-sm-regular',
         inline && 'text-text-quaternary',
         className,
       )}
       title={`Timezone: ${timezone} (${offsetStr})`}
+      data-testid="timezone-label"
     >
       {offsetStr}
     </span>
diff --git a/web/app/components/base/tooltip/content.spec.tsx b/web/app/components/base/tooltip/content.spec.tsx
new file mode 100644
index 0000000000..314c773ce1
--- /dev/null
+++ b/web/app/components/base/tooltip/content.spec.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { ToolTipContent } from './content'
+
+describe('ToolTipContent', () => {
+  it('should render children correctly', () => {
+    render(
+      <ToolTipContent>
+        <span>Tooltip body text</span>
+      </ToolTipContent>,
+    )
+    expect(screen.getByTestId('tooltip-content')).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-content-body')).toHaveTextContent('Tooltip body text')
+    expect(screen.queryByTestId('tooltip-content-title')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('tooltip-content-action')).not.toBeInTheDocument()
+  })
+
+  it('should render title when provided', () => {
+    render(
+      <ToolTipContent title="Tooltip Title">
+        <span>Tooltip body text</span>
+      </ToolTipContent>,
+    )
+    expect(screen.getByTestId('tooltip-content-title')).toHaveTextContent('Tooltip Title')
+  })
+
+  it('should render action when provided', () => {
+    render(
+      <ToolTipContent action={<span>Action Text</span>}>
+        <span>Tooltip body text</span>
+      </ToolTipContent>,
+    )
+    expect(screen.getByTestId('tooltip-content-action')).toHaveTextContent('Action Text')
+  })
+
+  it('should handle action click', async () => {
+    const user = userEvent.setup()
+    const handleActionClick = vi.fn()
+    render(
+      <ToolTipContent action={<span onClick={handleActionClick}>Action Text</span>}>
+        <span>Tooltip body text</span>
+      </ToolTipContent>,
+    )
+
+    await user.click(screen.getByText('Action Text'))
+    expect(handleActionClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/base/tooltip/content.tsx b/web/app/components/base/tooltip/content.tsx
index 1879e077e5..a5a31a2a5c 100644
--- a/web/app/components/base/tooltip/content.tsx
+++ b/web/app/components/base/tooltip/content.tsx
@@ -11,12 +11,12 @@ export const ToolTipContent: FC<ToolTipContentProps> = ({
   children,
 }) => {
   return (
-    <div className="w-[180px]">
+    <div className="w-[180px]" data-testid="tooltip-content">
       {!!title && (
-        <div className="mb-1.5 font-semibold text-text-secondary">{title}</div>
+        <div className="mb-1.5 font-semibold text-text-secondary" data-testid="tooltip-content-title">{title}</div>
       )}
-      <div className="mb-1.5 text-text-tertiary">{children}</div>
-      {!!action && <div className="cursor-pointer text-text-accent">{action}</div>}
+      <div className="mb-1.5 text-text-tertiary" data-testid="tooltip-content-body">{children}</div>
+      {!!action && <div className="cursor-pointer text-text-accent" data-testid="tooltip-content-action">{action}</div>}
     </div>
   )
 }
diff --git a/web/app/components/base/video-gallery/VideoPlayer.spec.tsx b/web/app/components/base/video-gallery/VideoPlayer.spec.tsx
new file mode 100644
index 0000000000..04d9ccc4c8
--- /dev/null
+++ b/web/app/components/base/video-gallery/VideoPlayer.spec.tsx
@@ -0,0 +1,262 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import VideoPlayer from './VideoPlayer'
+
+describe('VideoPlayer', () => {
+  const mockSrc = 'video.mp4'
+  const mockSrcs = ['video1.mp4', 'video2.mp4']
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+
+    // Mock HTMLVideoElement methods
+    window.HTMLVideoElement.prototype.play = vi.fn().mockResolvedValue(undefined)
+    window.HTMLVideoElement.prototype.pause = vi.fn()
+    window.HTMLVideoElement.prototype.load = vi.fn()
+    window.HTMLVideoElement.prototype.requestFullscreen = vi.fn().mockResolvedValue(undefined)
+
+    // Mock document methods
+    document.exitFullscreen = vi.fn().mockResolvedValue(undefined)
+
+    // Mock offsetWidth to avoid smallSize mode by default
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 500,
+    })
+
+    // Define properties on HTMLVideoElement prototype
+    Object.defineProperty(window.HTMLVideoElement.prototype, 'duration', {
+      configurable: true,
+      get() { return 100 },
+    })
+
+    // Use a descriptor check to avoid re-defining if it exists
+    if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'currentTime')) {
+      Object.defineProperty(window.HTMLVideoElement.prototype, 'currentTime', {
+        configurable: true,
+        // eslint-disable-next-line ts/no-explicit-any
+        get() { return (this as any)._currentTime || 0 },
+        // eslint-disable-next-line ts/no-explicit-any
+        set(v) { (this as any)._currentTime = v },
+      })
+    }
+
+    if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'volume')) {
+      Object.defineProperty(window.HTMLVideoElement.prototype, 'volume', {
+        configurable: true,
+        // eslint-disable-next-line ts/no-explicit-any
+        get() { return (this as any)._volume || 1 },
+        // eslint-disable-next-line ts/no-explicit-any
+        set(v) { (this as any)._volume = v },
+      })
+    }
+
+    if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'muted')) {
+      Object.defineProperty(window.HTMLVideoElement.prototype, 'muted', {
+        configurable: true,
+        // eslint-disable-next-line ts/no-explicit-any
+        get() { return (this as any)._muted || false },
+        // eslint-disable-next-line ts/no-explicit-any
+        set(v) { (this as any)._muted = v },
+      })
+    }
+  })
+
+  describe('Rendering', () => {
+    it('should render with single src', () => {
+      render(<VideoPlayer src={mockSrc} />)
+      const video = screen.getByTestId('video-element') as HTMLVideoElement
+      expect(video.src).toContain(mockSrc)
+    })
+
+    it('should render with multiple srcs', () => {
+      render(<VideoPlayer srcs={mockSrcs} />)
+      const sources = screen.getByTestId('video-element').querySelectorAll('source')
+      expect(sources).toHaveLength(2)
+      expect(sources[0].src).toContain(mockSrcs[0])
+      expect(sources[1].src).toContain(mockSrcs[1])
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should toggle play/pause on button click', async () => {
+      const user = userEvent.setup()
+      render(<VideoPlayer src={mockSrc} />)
+      const playPauseBtn = screen.getByTestId('video-play-pause-button')
+
+      await user.click(playPauseBtn)
+      expect(window.HTMLVideoElement.prototype.play).toHaveBeenCalled()
+
+      await user.click(playPauseBtn)
+      expect(window.HTMLVideoElement.prototype.pause).toHaveBeenCalled()
+    })
+
+    it('should toggle mute on button click', async () => {
+      const user = userEvent.setup()
+      render(<VideoPlayer src={mockSrc} />)
+      const muteBtn = screen.getByTestId('video-mute-button')
+
+      await user.click(muteBtn)
+      expect(muteBtn).toBeInTheDocument()
+    })
+
+    it('should toggle fullscreen on button click', async () => {
+      const user = userEvent.setup()
+      render(<VideoPlayer src={mockSrc} />)
+      const fullscreenBtn = screen.getByTestId('video-fullscreen-button')
+
+      await user.click(fullscreenBtn)
+      expect(window.HTMLVideoElement.prototype.requestFullscreen).toHaveBeenCalled()
+
+      Object.defineProperty(document, 'fullscreenElement', {
+        configurable: true,
+        get() { return {} },
+      })
+      await user.click(fullscreenBtn)
+      expect(document.exitFullscreen).toHaveBeenCalled()
+
+      Object.defineProperty(document, 'fullscreenElement', {
+        configurable: true,
+        get() { return null },
+      })
+    })
+
+    it('should handle video metadata and time updates', () => {
+      render(<VideoPlayer src={mockSrc} />)
+      const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+      fireEvent(video, new Event('loadedmetadata'))
+      expect(screen.getByTestId('video-time-display')).toHaveTextContent('00:00 / 01:40')
+
+      Object.defineProperty(video, 'currentTime', { value: 30, configurable: true })
+      fireEvent(video, new Event('timeupdate'))
+      expect(screen.getByTestId('video-time-display')).toHaveTextContent('00:30 / 01:40')
+    })
+
+    it('should handle video end', async () => {
+      const user = userEvent.setup()
+      render(<VideoPlayer src={mockSrc} />)
+      const video = screen.getByTestId('video-element')
+      const playPauseBtn = screen.getByTestId('video-play-pause-button')
+
+      await user.click(playPauseBtn)
+      fireEvent(video, new Event('ended'))
+
+      expect(playPauseBtn).toBeInTheDocument()
+    })
+
+    it('should show/hide controls on mouse move and timeout', () => {
+      vi.useFakeTimers()
+      render(<VideoPlayer src={mockSrc} />)
+      const container = screen.getByTestId('video-player-container')
+
+      fireEvent.mouseMove(container)
+      fireEvent.mouseMove(container) // Trigger clearTimeout
+
+      act(() => {
+        vi.advanceTimersByTime(3001)
+      })
+      vi.useRealTimers()
+    })
+
+    it('should handle progress bar interactions', async () => {
+      const user = userEvent.setup()
+      render(<VideoPlayer src={mockSrc} />)
+      const progressBar = screen.getByTestId('video-progress-bar')
+      const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+      vi.spyOn(progressBar, 'getBoundingClientRect').mockReturnValue({
+        left: 0,
+        width: 100,
+        top: 0,
+        right: 100,
+        bottom: 10,
+        height: 10,
+        x: 0,
+        y: 0,
+        toJSON: () => { },
+      } as DOMRect)
+
+      // Hover
+      fireEvent.mouseMove(progressBar, { clientX: 50 })
+      expect(screen.getByTestId('video-hover-time')).toHaveTextContent('00:50')
+      fireEvent.mouseLeave(progressBar)
+      expect(screen.queryByTestId('video-hover-time')).not.toBeInTheDocument()
+
+      // Click
+      await user.click(progressBar)
+      // Note: user.click calculates clientX based on element position, but we mocked getBoundingClientRect
+      // RTL fireEvent is more direct for coordinate-based tests
+      fireEvent.click(progressBar, { clientX: 75 })
+      expect(video.currentTime).toBe(75)
+
+      // Drag
+      fireEvent.mouseDown(progressBar, { clientX: 20 })
+      expect(video.currentTime).toBe(20)
+      fireEvent.mouseMove(document, { clientX: 40 })
+      expect(video.currentTime).toBe(40)
+      fireEvent.mouseUp(document)
+      fireEvent.mouseMove(document, { clientX: 60 })
+      expect(video.currentTime).toBe(40)
+    })
+
+    it('should handle volume slider change', () => {
+      render(<VideoPlayer src={mockSrc} />)
+      const volumeSlider = screen.getByTestId('video-volume-slider')
+      const video = screen.getByTestId('video-element') as HTMLVideoElement
+
+      vi.spyOn(volumeSlider, 'getBoundingClientRect').mockReturnValue({
+        left: 0,
+        width: 100,
+        top: 0,
+        right: 100,
+        bottom: 10,
+        height: 10,
+        x: 0,
+        y: 0,
+        toJSON: () => { },
+      } as DOMRect)
+
+      // Click
+      fireEvent.click(volumeSlider, { clientX: 50 })
+      expect(video.volume).toBe(0.5)
+
+      // MouseDown and Drag
+      fireEvent.mouseDown(volumeSlider, { clientX: 80 })
+      expect(video.volume).toBe(0.8)
+
+      fireEvent.mouseMove(document, { clientX: 90 })
+      expect(video.volume).toBe(0.9)
+
+      fireEvent.mouseUp(document) // Trigger cleanup
+      fireEvent.mouseMove(document, { clientX: 100 })
+      expect(video.volume).toBe(0.9) // No change after mouseUp
+    })
+
+    it('should handle small size class based on offsetWidth', async () => {
+      render(<VideoPlayer src={mockSrc} />)
+      const playerContainer = screen.getByTestId('video-player-container')
+
+      Object.defineProperty(playerContainer, 'offsetWidth', { value: 300, configurable: true })
+
+      act(() => {
+        window.dispatchEvent(new Event('resize'))
+      })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('video-time-display')).not.toBeInTheDocument()
+      })
+
+      Object.defineProperty(playerContainer, 'offsetWidth', { value: 500, configurable: true })
+      act(() => {
+        window.dispatchEvent(new Event('resize'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('video-time-display')).toBeInTheDocument()
+      })
+    })
+  })
+})
diff --git a/web/app/components/base/video-gallery/VideoPlayer.tsx b/web/app/components/base/video-gallery/VideoPlayer.tsx
index 8adaf71f58..6b2d802863 100644
--- a/web/app/components/base/video-gallery/VideoPlayer.tsx
+++ b/web/app/components/base/video-gallery/VideoPlayer.tsx
@@ -215,8 +215,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
   }, [])
 
   return (
-    <div ref={containerRef} className={styles.videoPlayer} onMouseMove={showControls} onMouseEnter={showControls}>
-      <video ref={videoRef} src={src} className={styles.video}>
+    <div ref={containerRef} className={styles.videoPlayer} onMouseMove={showControls} onMouseEnter={showControls} data-testid="video-player-container">
+      <video ref={videoRef} src={src} className={styles.video} data-testid="video-element">
         {/* If srcs array is provided, render multiple source elements */}
         {srcs && srcs.map((srcUrl, index) => (
           <source key={index} src={srcUrl} />
@@ -232,12 +232,14 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
               onMouseMove={handleMouseMove}
               onMouseLeave={handleMouseLeave}
               onMouseDown={handleMouseDown}
+              data-testid="video-progress-bar"
             >
               <div className={styles.progress} style={{ width: `${(currentTime / duration) * 100}%` }} />
               {hoverTime !== null && (
                 <div
                   className={styles.hoverTimeIndicator}
                   style={{ left: `${(hoverTime / duration) * 100}%` }}
+                  data-testid="video-hover-time"
                 >
                   {formatTime(hoverTime)}
                 </div>
@@ -246,11 +248,11 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
           </div>
           <div className={styles.controlsContent}>
             <div className={styles.leftControls}>
-              <button type="button" className={styles.playPauseButton} onClick={togglePlayPause}>
+              <button type="button" className={styles.playPauseButton} onClick={togglePlayPause} data-testid="video-play-pause-button">
                 {isPlaying ? <PauseIcon /> : <PlayIcon />}
               </button>
               {!isSmallSize && (
-                <span className={styles.time}>
+                <span className={styles.time} data-testid="video-time-display">
                   {formatTime(currentTime)}
                   {' '}
                   /
@@ -260,7 +262,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
               )}
             </div>
             <div className={styles.rightControls}>
-              <button type="button" className={styles.muteButton} onClick={toggleMute}>
+              <button type="button" className={styles.muteButton} onClick={toggleMute} data-testid="video-mute-button">
                 {isMuted ? <UnmuteIcon /> : <MuteIcon />}
               </button>
               {!isSmallSize && (
@@ -279,12 +281,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
                       document.addEventListener('mousemove', handleMouseMove)
                       document.addEventListener('mouseup', handleMouseUp)
                     }}
+                    data-testid="video-volume-slider"
                   >
                     <div className={styles.volumeLevel} style={{ width: `${volume * 100}%` }} />
                   </div>
                 </div>
               )}
-              <button type="button" className={styles.fullscreenButton} onClick={toggleFullscreen}>
+              <button type="button" className={styles.fullscreenButton} onClick={toggleFullscreen} data-testid="video-fullscreen-button">
                 <FullscreenIcon />
               </button>
             </div>
diff --git a/web/app/components/base/video-gallery/index.spec.tsx b/web/app/components/base/video-gallery/index.spec.tsx
new file mode 100644
index 0000000000..717e57e1ff
--- /dev/null
+++ b/web/app/components/base/video-gallery/index.spec.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import VideoGallery from './index'
+
+describe('VideoGallery', () => {
+  const mockSrcs = ['video1.mp4', 'video2.mp4']
+
+  it('should render nothing when srcs is empty', () => {
+    const { container } = render(<VideoGallery srcs={[]} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render nothing when all srcs are empty strings', () => {
+    const { container } = render(<VideoGallery srcs={['', '']} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render VideoPlayer when valid srcs are provided', () => {
+    render(<VideoGallery srcs={mockSrcs} />)
+    expect(screen.getByTestId('video-gallery-container')).toBeInTheDocument()
+    expect(screen.getByTestId('video-element')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/video-gallery/index.tsx b/web/app/components/base/video-gallery/index.tsx
index b058b0b08a..31390989b6 100644
--- a/web/app/components/base/video-gallery/index.tsx
+++ b/web/app/components/base/video-gallery/index.tsx
@@ -11,7 +11,7 @@ const VideoGallery: React.FC<Props> = ({ srcs }) => {
     return null
 
   return (
-    <div className="my-3">
+    <div className="my-3" data-testid="video-gallery-container">
       <VideoPlayer srcs={validSrcs} />
     </div>
   )
diff --git a/web/app/components/base/voice-input/index.spec.tsx b/web/app/components/base/voice-input/index.spec.tsx
new file mode 100644
index 0000000000..959665cd97
--- /dev/null
+++ b/web/app/components/base/voice-input/index.spec.tsx
@@ -0,0 +1,310 @@
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { audioToText } from '@/service/share'
+import VoiceInput from './index'
+
+const { mockState, MockRecorder } = vi.hoisted(() => {
+  const state = {
+    params: {} as Record<string, string>,
+    pathname: '/test',
+    rafCallback: undefined as (() => void) | undefined,
+    recorderInstances: [] as unknown[],
+    startOverride: null as (() => Promise<void>) | null,
+    analyseData: new Uint8Array(1024).fill(150) as Uint8Array,
+  }
+
+  class MockRecorderClass {
+    start = vi.fn((..._args: unknown[]) => {
+      if (state.startOverride)
+        return state.startOverride()
+      return Promise.resolve()
+    })
+
+    stop = vi.fn()
+    getRecordAnalyseData = vi.fn(() => state.analyseData)
+    getWAV = vi.fn(() => new ArrayBuffer(0))
+    getChannelData = vi.fn(() => ({
+      left: { buffer: new ArrayBuffer(2048), byteLength: 2048 },
+      right: { buffer: new ArrayBuffer(2048), byteLength: 2048 },
+    }))
+
+    constructor() {
+      state.recorderInstances.push(this)
+    }
+  }
+
+  return { mockState: state, MockRecorder: MockRecorderClass }
+})
+
+vi.mock('js-audio-recorder', () => ({
+  default: MockRecorder,
+}))
+
+vi.mock('@/service/share', () => ({
+  AppSourceType: { webApp: 'webApp', installedApp: 'installedApp' },
+  audioToText: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: vi.fn(() => mockState.params),
+  usePathname: vi.fn(() => mockState.pathname),
+}))
+
+vi.mock('./utils', () => ({
+  convertToMp3: vi.fn(() => new Blob(['test'], { type: 'audio/mp3' })),
+}))
+
+vi.mock('ahooks', () => ({
+  useRafInterval: vi.fn((fn: () => void) => {
+    mockState.rafCallback = fn
+    return vi.fn()
+  }),
+}))
+
+describe('VoiceInput', () => {
+  const onConverted = vi.fn()
+  const onCancel = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockState.params = {}
+    mockState.pathname = '/test'
+    mockState.rafCallback = undefined
+    mockState.recorderInstances = []
+    mockState.startOverride = null
+
+    // Ensure canvas has non-zero dimensions for initCanvas()
+    HTMLCanvasElement.prototype.getBoundingClientRect = vi.fn(() => ({
+      width: 300,
+      height: 32,
+      top: 0,
+      left: 0,
+      right: 300,
+      bottom: 32,
+      x: 0,
+      y: 0,
+      toJSON: vi.fn(),
+    }))
+
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(() => 1)
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => { })
+  })
+
+  it('should start recording on mount and show speaking state', async () => {
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    // eslint-disable-next-line ts/no-explicit-any
+    const recorder = mockState.recorderInstances[0] as any
+    expect(recorder.start).toHaveBeenCalled()
+    expect(await screen.findByText('common.voiceInput.speaking')).toBeInTheDocument()
+    expect(screen.getByTestId('voice-input-stop')).toBeInTheDocument()
+    expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:00')
+  })
+
+  it('should increment timer via useRafInterval callback', async () => {
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await screen.findByText('common.voiceInput.speaking')
+
+    act(() => {
+      mockState.rafCallback?.()
+    })
+    expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:01')
+
+    act(() => {
+      mockState.rafCallback?.()
+    })
+    expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:02')
+  })
+
+  it('should call onCancel when recording start fails', async () => {
+    mockState.startOverride = () => Promise.reject(new Error('Permission denied'))
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await waitFor(() => {
+      expect(onCancel).toHaveBeenCalled()
+    })
+  })
+
+  it('should stop recording and convert audio on stop click', async () => {
+    const user = userEvent.setup()
+    vi.mocked(audioToText).mockResolvedValueOnce({ text: 'hello world' })
+    mockState.params = { token: 'abc' }
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    const stopBtn = await screen.findByTestId('voice-input-stop')
+    await user.click(stopBtn)
+
+    // eslint-disable-next-line ts/no-explicit-any
+    const recorder = mockState.recorderInstances[0] as any
+    expect(await screen.findByTestId('voice-input-converting-text')).toBeInTheDocument()
+    expect(screen.getByText('common.voiceInput.converting')).toBeInTheDocument()
+    expect(screen.getByTestId('voice-input-loader')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(recorder.stop).toHaveBeenCalled()
+      expect(onConverted).toHaveBeenCalledWith('hello world')
+      expect(onCancel).toHaveBeenCalled()
+    })
+  })
+
+  it('should call onConverted with empty string on conversion failure', async () => {
+    const user = userEvent.setup()
+    vi.mocked(audioToText).mockRejectedValueOnce(new Error('API error'))
+    mockState.params = { token: 'abc' }
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    const stopBtn = await screen.findByTestId('voice-input-stop')
+    await user.click(stopBtn)
+
+    await waitFor(() => {
+      expect(onConverted).toHaveBeenCalledWith('')
+      expect(onCancel).toHaveBeenCalled()
+    })
+  })
+
+  it('should show cancel button during conversion and cancel on click', async () => {
+    const user = userEvent.setup()
+    vi.mocked(audioToText).mockImplementation(() => new Promise(() => { }))
+    mockState.params = { token: 'abc' }
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    const stopBtn = await screen.findByTestId('voice-input-stop')
+    await user.click(stopBtn)
+
+    const cancelBtn = await screen.findByTestId('voice-input-cancel')
+    await user.click(cancelBtn)
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should automatically stop recording after 600 seconds', async () => {
+    vi.mocked(audioToText).mockResolvedValueOnce({ text: 'auto stopped' })
+    mockState.params = { token: 'abc' }
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await screen.findByTestId('voice-input-stop')
+
+    for (let i = 0; i < 600; i++)
+      act(() => { mockState.rafCallback?.() })
+
+    await waitFor(() => {
+      expect(onConverted).toHaveBeenCalledWith('auto stopped')
+    })
+  })
+
+  it('should show red timer text after 500 seconds', async () => {
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await screen.findByTestId('voice-input-stop')
+
+    for (let i = 0; i < 501; i++)
+      act(() => { mockState.rafCallback?.() })
+
+    const timer = screen.getByTestId('voice-input-timer')
+    expect(timer.className).toContain('text-[#F04438]')
+  })
+
+  it('should draw on canvas with low data values triggering v < 128 clamp', async () => {
+    mockState.analyseData = new Uint8Array(1024).fill(50)
+
+    let rafCalls = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      rafCalls++
+      if (rafCalls <= 2)
+        cb(0)
+      return rafCalls
+    })
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await screen.findByTestId('voice-input-stop')
+
+    // eslint-disable-next-line ts/no-explicit-any
+    const firstRecorder = mockState.recorderInstances[0] as any
+    expect(firstRecorder.getRecordAnalyseData).toHaveBeenCalled()
+  })
+
+  it('should draw on canvas with high data values triggering v > 178 clamp', async () => {
+    mockState.analyseData = new Uint8Array(1024).fill(250)
+
+    let rafCalls = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      rafCalls++
+      if (rafCalls <= 2)
+        cb(0)
+      return rafCalls
+    })
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+    await screen.findByTestId('voice-input-stop')
+
+    // eslint-disable-next-line ts/no-explicit-any
+    const firstRecorder = mockState.recorderInstances[0] as any
+    expect(firstRecorder.getRecordAnalyseData).toHaveBeenCalled()
+  })
+
+  it('should pass wordTimestamps in form data', async () => {
+    const user = userEvent.setup()
+    vi.mocked(audioToText).mockResolvedValueOnce({ text: 'test' })
+    mockState.params = { token: 'abc' }
+
+    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} wordTimestamps="enabled" />)
+    const stopBtn = await screen.findByTestId('voice-input-stop')
+    await user.click(stopBtn)
+
+    await waitFor(() => {
+      expect(audioToText).toHaveBeenCalled()
+      const formData = vi.mocked(audioToText).mock.calls[0][2] as FormData
+      expect(formData.get('word_timestamps')).toBe('enabled')
+    })
+  })
+
+  describe('URL patterns', () => {
+    it('should use webApp source with /audio-to-text for token-based URL', async () => {
+      const user = userEvent.setup()
+      vi.mocked(audioToText).mockResolvedValueOnce({ text: 'test' })
+      mockState.params = { token: 'my-token' }
+
+      render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+      await user.click(await screen.findByTestId('voice-input-stop'))
+
+      await waitFor(() => {
+        expect(audioToText).toHaveBeenCalledWith('/audio-to-text', 'webApp', expect.any(FormData))
+      })
+    })
+
+    it('should use installed-apps URL when pathname includes explore/installed', async () => {
+      const user = userEvent.setup()
+      vi.mocked(audioToText).mockResolvedValueOnce({ text: 'test' })
+      mockState.params = { appId: 'app-123' }
+      mockState.pathname = '/explore/installed'
+
+      render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+      await user.click(await screen.findByTestId('voice-input-stop'))
+
+      await waitFor(() => {
+        expect(audioToText).toHaveBeenCalledWith(
+          '/installed-apps/app-123/audio-to-text',
+          'installedApp',
+          expect.any(FormData),
+        )
+      })
+    })
+
+    it('should use /apps URL for non-explore paths with appId', async () => {
+      const user = userEvent.setup()
+      vi.mocked(audioToText).mockResolvedValueOnce({ text: 'test' })
+      mockState.params = { appId: 'app-456' }
+      mockState.pathname = '/dashboard/apps'
+
+      render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
+      await user.click(await screen.findByTestId('voice-input-stop'))
+
+      await waitFor(() => {
+        expect(audioToText).toHaveBeenCalledWith(
+          '/apps/app-456/audio-to-text',
+          'installedApp',
+          expect.any(FormData),
+        )
+      })
+    })
+  })
+})
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 52e3c754f8..8e26bbc895 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -1,13 +1,8 @@
-import {
-  RiCloseLine,
-  RiLoader2Line,
-} from '@remixicon/react'
 import { useRafInterval } from 'ahooks'
 import Recorder from 'js-audio-recorder'
 import { useParams, usePathname } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { AppSourceType, audioToText } from '@/service/share'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
@@ -117,7 +112,7 @@ const VoiceInput = ({
       onCancel()
     }
   }, [clearInterval, onCancel, onConverted, params.appId, params.token, pathname, wordTimestamps])
-  const handleStartRecord = async () => {
+  const handleStartRecord = useCallback(async () => {
     try {
       await recorder.current.start()
       setStartRecord(true)
@@ -129,9 +124,8 @@ const VoiceInput = ({
     catch {
       onCancel()
     }
-  }
-
-  const initCanvas = () => {
+  }, [drawRecord, onCancel, setStartRecord, setStartConvert])
+  const initCanvas = useCallback(() => {
     const dpr = window.devicePixelRatio || 1
     const canvas = document.getElementById('voice-input-record') as HTMLCanvasElement
 
@@ -149,7 +143,7 @@ const VoiceInput = ({
         ctxRef.current = ctx
       }
     }
-  }
+  }, [])
   if (originDuration >= 600 && startRecord)
     handleStopRecorder()
 
@@ -160,7 +154,7 @@ const VoiceInput = ({
     return () => {
       recorderRef?.stop()
     }
-  }, [])
+  }, [handleStartRecord, initCanvas])
 
   const minutes = Number.parseInt(`${Number.parseInt(`${originDuration}`) / 60}`)
   const seconds = Number.parseInt(`${originDuration}`) % 60
@@ -170,7 +164,7 @@ const VoiceInput = ({
       <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pl-[14.5px] pr-[6.5px]">
         <canvas id="voice-input-record" className="absolute bottom-0 left-0 h-4 w-full" />
         {
-          startConvert && <RiLoader2Line className="mr-2 h-4 w-4 animate-spin text-primary-700" />
+          startConvert && <div className="i-ri-loader-2-line mr-2 h-4 w-4 animate-spin text-primary-700" data-testid="voice-input-loader" />
         }
         <div className="grow">
           {
@@ -182,7 +176,7 @@ const VoiceInput = ({
           }
           {
             startConvert && (
-              <div className={cn(s.convert, 'text-sm')}>
+              <div className={cn(s.convert, 'text-sm')} data-testid="voice-input-converting-text">
                 {t('voiceInput.converting', { ns: 'common' })}
               </div>
             )
@@ -191,24 +185,26 @@ const VoiceInput = ({
         {
           startRecord && (
             <div
-              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg  hover:bg-primary-100"
+              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-primary-100"
               onClick={handleStopRecorder}
+              data-testid="voice-input-stop"
             >
-              <StopCircle className="h-5 w-5 text-primary-600" />
+              <div className="i-ri-stop-circle-line h-5 w-5 text-primary-600" />
             </div>
           )
         }
         {
           startConvert && (
             <div
-              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg  hover:bg-gray-200"
+              className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-200"
               onClick={onCancel}
+              data-testid="voice-input-cancel"
             >
-              <RiCloseLine className="h-4 w-4 text-gray-500" />
+              <div className="i-ri-close-line h-4 w-4 text-gray-500" />
             </div>
           )
         }
-        <div className={`w-[45px] pl-1 text-xs font-medium ${originDuration > 500 ? 'text-[#F04438]' : 'text-gray-700'}`}>{`0${minutes.toFixed(0)}:${seconds >= 10 ? seconds : `0${seconds}`}`}</div>
+        <div className={`w-[45px] pl-1 text-xs font-medium ${originDuration > 500 ? 'text-[#F04438]' : 'text-gray-700'}`} data-testid="voice-input-timer">{`0${minutes.toFixed(0)}:${seconds >= 10 ? seconds : `0${seconds}`}`}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/base/zendesk/index.spec.tsx b/web/app/components/base/zendesk/index.spec.tsx
new file mode 100644
index 0000000000..abf0210f37
--- /dev/null
+++ b/web/app/components/base/zendesk/index.spec.tsx
@@ -0,0 +1,126 @@
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Zendesk from './index'
+
+// Shared state for mocks
+let mockIsCeEdition = false
+let mockZendeskWidgetKey: string | undefined = 'test-key'
+let mockIsProd = false
+let mockNonce: string | null = 'test-nonce'
+
+// Mock react's memo to just return the function
+vi.mock('react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react')>()
+  return {
+    ...actual,
+    memo: vi.fn(fn => fn),
+  }
+})
+
+// Mock config
+vi.mock('@/config', () => ({
+  get IS_CE_EDITION() { return mockIsCeEdition },
+  get ZENDESK_WIDGET_KEY() { return mockZendeskWidgetKey },
+  get IS_PROD() { return mockIsProd },
+}))
+
+// Mock next/headers
+vi.mock('next/headers', () => ({
+  headers: vi.fn(() => ({
+    get: vi.fn((name: string) => {
+      if (name === 'x-nonce')
+        return mockNonce
+      return null
+    }),
+  })),
+}))
+
+// Mock next/script
+type ScriptProps = {
+  'children'?: ReactNode
+  'id'?: string
+  'src'?: string
+  'nonce'?: string
+  'data-testid'?: string
+}
+vi.mock('next/script', () => ({
+  __esModule: true,
+  default: vi.fn(({ children, id, src, nonce, 'data-testid': testId }: ScriptProps) => (
+    <div data-testid={testId} id={id} data-src={src} data-nonce={nonce}>
+      {children}
+    </div>
+  )),
+}))
+
+describe('Zendesk', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCeEdition = false
+    mockZendeskWidgetKey = 'test-key'
+    mockIsProd = false
+    mockNonce = 'test-nonce'
+  })
+
+  // Helper to call the async component
+  const renderZendesk = async () => {
+    const Component = Zendesk as unknown as () => Promise<ReactNode>
+    return await Component()
+  }
+
+  it('should render nothing when IS_CE_EDITION is true', async () => {
+    mockIsCeEdition = true
+    const result = await renderZendesk()
+    expect(result).toBeNull()
+  })
+
+  it('should render nothing when ZENDESK_WIDGET_KEY is missing', async () => {
+    mockZendeskWidgetKey = undefined
+    const result = await renderZendesk()
+    expect(result).toBeNull()
+  })
+
+  it('should render scripts correctly in non-production environment', async () => {
+    mockIsProd = false
+    const result = await renderZendesk()
+    render(result as React.ReactElement) // result is ReactNode, which render accepts but types might be picky
+
+    const snippet = screen.getByTestId('ze-snippet')
+    expect(snippet).toBeInTheDocument()
+    expect(snippet).toHaveAttribute('id', 'ze-snippet')
+    expect(snippet).toHaveAttribute('data-src', 'https://static.zdassets.com/ekr/snippet.js?key=test-key')
+    expect(snippet).toHaveAttribute('data-nonce', '')
+
+    const init = screen.getByTestId('ze-init')
+    expect(init).toBeInTheDocument()
+    expect(init).toHaveAttribute('id', 'ze-init')
+    expect(init).toHaveTextContent('window.zE(\'messenger\', \'hide\')')
+    expect(init).toHaveAttribute('data-nonce', '')
+  })
+
+  it('should render scripts with nonce in production environment', async () => {
+    mockIsProd = true
+    mockNonce = 'prod-nonce'
+    const result = await renderZendesk()
+    render(result as React.ReactElement)
+
+    const snippet = screen.getByTestId('ze-snippet')
+    expect(snippet).toHaveAttribute('data-nonce', 'prod-nonce')
+
+    const init = screen.getByTestId('ze-init')
+    expect(init).toHaveAttribute('data-nonce', 'prod-nonce')
+  })
+
+  it('should render scripts with empty nonce in production when header is missing', async () => {
+    mockIsProd = true
+    mockNonce = null
+    const result = await renderZendesk()
+    render(result as React.ReactElement)
+
+    const snippet = screen.getByTestId('ze-snippet')
+    expect(snippet).toHaveAttribute('data-nonce', '')
+
+    const init = screen.getByTestId('ze-init')
+    expect(init).toHaveAttribute('data-nonce', '')
+  })
+})
diff --git a/web/app/components/base/zendesk/index.tsx b/web/app/components/base/zendesk/index.tsx
index e12a128a02..d1fac9ff1e 100644
--- a/web/app/components/base/zendesk/index.tsx
+++ b/web/app/components/base/zendesk/index.tsx
@@ -15,8 +15,9 @@ const Zendesk = async () => {
         nonce={nonce ?? undefined}
         id="ze-snippet"
         src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+        data-testid="ze-snippet"
       />
-      <Script nonce={nonce ?? undefined} id="ze-init">
+      <Script nonce={nonce ?? undefined} id="ze-init" data-testid="ze-init">
         {`
         (function () {
           window.addEventListener('load', function () {
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index ff98c40fd5..4bc0ce7e99 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -2722,16 +2722,6 @@
       "count": 1
     }
   },
-  "app/components/base/tab-header/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/tab-slider-plain/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/base/tab-slider/index.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 2
@@ -2781,14 +2771,6 @@
   "app/components/base/textarea/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/timezone-label/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/toast/index.tsx": {
@@ -2817,11 +2799,6 @@
       "count": 1
     }
   },
-  "app/components/base/voice-input/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/base/voice-input/utils.ts": {
     "ts/no-explicit-any": {
       "count": 4

From 00708911142d0b2a5d36bda3e811ad532ec03b1c Mon Sep 17 00:00:00 2001
From: mahammadasim <135003320+mahammadasim@users.noreply.github.com>
Date: Tue, 24 Feb 2026 10:12:57 +0530
Subject: [PATCH 09/26] test: add unit tests for prompt editor's component
 picker block plugin. (#32412)

---
 .../component-picker-block/hooks.spec.tsx     | 1162 +++++++++++++++++
 .../component-picker-block/index.spec.tsx     |  633 +++++++++
 .../component-picker-block/menu.spec.tsx      |  123 ++
 .../prompt-option.spec.tsx                    |  131 ++
 .../variable-option.spec.tsx                  |  124 ++
 5 files changed, 2173 insertions(+)
 create mode 100644 web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.spec.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/component-picker-block/index.spec.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/component-picker-block/menu.spec.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.spec.tsx
 create mode 100644 web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.spec.tsx

diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.spec.tsx
new file mode 100644
index 0000000000..3ed5d12a86
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.spec.tsx
@@ -0,0 +1,1162 @@
+import type { LexicalEditor } from 'lexical'
+import type {
+  ContextBlockType,
+  CurrentBlockType,
+  ErrorMessageBlockType,
+  ExternalToolBlockType,
+  ExternalToolOption,
+  HistoryBlockType,
+  LastRunBlockType,
+  Option,
+  QueryBlockType,
+  RequestURLBlockType,
+  VariableBlockType,
+  WorkflowVariableBlockType,
+} from '../../types'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { renderHook } from '@testing-library/react'
+import * as React from 'react'
+import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { VarType } from '@/app/components/workflow/types'
+import { CustomTextNode } from '../custom-text/node'
+import {
+  useExternalToolOptions,
+  useOptions,
+  usePromptOptions,
+  useVariableOptions,
+} from './hooks'
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Minimal LexicalComposer wrapper required by useLexicalComposerContext().
+ * The actual editor nodes registered here are empty – hooks only need the
+ * context to call dispatchCommand / update.
+ *
+ * Note: A new wrapper is created per describe block so each describe block has
+ * its own isolated Lexical instance.
+ */
+function makeLexicalWrapper() {
+  const initialConfig = {
+    namespace: 'hooks-test',
+    onError: (err: Error) => { throw err },
+    // CustomTextNode must be registered so editor.update() in addOption's onSelect can create it
+    nodes: [CustomTextNode],
+  }
+  return function LexicalWrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <LexicalComposer initialConfig={initialConfig}>
+        {children}
+      </LexicalComposer>
+    )
+  }
+}
+
+// ─── Factory helpers (typed, no `any` / `never`) ─────────────────────────────
+
+function makeContextBlock(overrides: Partial<ContextBlockType> = {}): ContextBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeQueryBlock(overrides: Partial<QueryBlockType> = {}): QueryBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeHistoryBlock(overrides: Partial<HistoryBlockType> = {}): HistoryBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeRequestURLBlock(overrides: Partial<RequestURLBlockType> = {}): RequestURLBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeVariableBlock(variables: Option[] = [], overrides: Partial<VariableBlockType> = {}): VariableBlockType {
+  return { show: true, variables, ...overrides }
+}
+
+function makeExternalToolBlock(
+  overrides: Partial<ExternalToolBlockType> = {},
+  tools: ExternalToolOption[] = [],
+): ExternalToolBlockType {
+  return { show: true, externalTools: tools, ...overrides }
+}
+
+function makeWorkflowVariableBlock(
+  variables: NodeOutPutVar[] = [],
+  overrides: Partial<WorkflowVariableBlockType> = {},
+): WorkflowVariableBlockType {
+  return { show: true, variables, ...overrides }
+}
+
+function makeVar(variable: string, type: VarType = VarType.string) {
+  return { variable, type }
+}
+
+function makeNodeOutPutVar(nodeId: string, title: string, vars: ReturnType<typeof makeVar>[] = []): NodeOutPutVar {
+  return { nodeId, title, vars }
+}
+
+// ─── Shared mock render-prop arguments ───────────────────────────────────────
+// These are the props passed to renderMenuOption() in option objects
+const renderProps = {
+  isSelected: false,
+  onSelect: vi.fn(),
+  onSetHighlight: vi.fn(),
+  queryString: null as string | null,
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// usePromptOptions
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('usePromptOptions', () => {
+  // Ensure clean spy state before every test
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const wrapper = makeLexicalWrapper()
+
+  /**
+   * When all blocks are undefined (not passed) the hook should return an empty array.
+   * This is the "no blocks configured" base case.
+   */
+  describe('when no blocks are provided', () => {
+    it('should return an empty array', () => {
+      const { result } = renderHook(() => usePromptOptions(), { wrapper })
+      expect(result.current).toHaveLength(0)
+    })
+  })
+
+  /**
+   * contextBlock has two states: show=false (hidden) and show=true (visible).
+   * When show=false the option must NOT be included.
+   */
+  describe('contextBlock', () => {
+    it('should NOT include context option when show is false', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(makeContextBlock({ show: false })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+
+    it('should include context option when show is true', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(makeContextBlock({ show: true })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('prompt context')
+    })
+
+    it('should render the context PromptMenuItem without crashing', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(makeContextBlock()),
+        { wrapper },
+      )
+      // renderMenuOption returns a React element – just verify it's truthy
+      const el = result.current[0].renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_CONTEXT_BLOCK_COMMAND when selectable and onSelectMenuOption is called', () => {
+      // Capture the editor from within the same renderHook callback so we can spy on it
+      let capturedEditor: LexicalEditor | null = null
+
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(makeContextBlock({ selectable: true }))
+        },
+        { wrapper },
+      )
+
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT dispatch any command when selectable is false', () => {
+      let capturedEditor: LexicalEditor | null = null
+
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(makeContextBlock({ selectable: false }))
+        },
+        { wrapper },
+      )
+
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).not.toHaveBeenCalled()
+    })
+  })
+
+  /**
+   * queryBlock mirrors contextBlock: hidden when show=false, visible and dispatching when show=true.
+   */
+  describe('queryBlock', () => {
+    it('should NOT include query option when show is false', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, makeQueryBlock({ show: false })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+
+    it('should include query option when show is true', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, makeQueryBlock()),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('prompt query')
+    })
+
+    it('should render the query PromptMenuItem without crashing', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, makeQueryBlock()),
+        { wrapper },
+      )
+      const el = result.current[0].renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_QUERY_BLOCK_COMMAND when selectable', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, makeQueryBlock({ selectable: true }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT dispatch command when selectable is false', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, makeQueryBlock({ selectable: false }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).not.toHaveBeenCalled()
+    })
+  })
+
+  /**
+   * requestURLBlock – added in third position when show=true.
+   */
+  describe('requestURLBlock', () => {
+    it('should NOT include request URL option when show is false', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, undefined, makeRequestURLBlock({ show: false })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+
+    it('should include request URL option when show is true', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, undefined, makeRequestURLBlock()),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('request URL')
+    })
+
+    it('should render the requestURL PromptMenuItem without crashing', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, undefined, makeRequestURLBlock()),
+        { wrapper },
+      )
+      const el = result.current[0].renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_REQUEST_URL_BLOCK_COMMAND when selectable', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, undefined, undefined, makeRequestURLBlock({ selectable: true }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT dispatch command when selectable is false', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, undefined, undefined, makeRequestURLBlock({ selectable: false }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).not.toHaveBeenCalled()
+    })
+  })
+
+  /**
+   * historyBlock – added last when show=true.
+   */
+  describe('historyBlock', () => {
+    it('should NOT include history option when show is false', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, makeHistoryBlock({ show: false })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+
+    it('should include history option when show is true', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, makeHistoryBlock()),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('prompt history')
+    })
+
+    it('should render the history PromptMenuItem without crashing', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(undefined, undefined, makeHistoryBlock()),
+        { wrapper },
+      )
+      const el = result.current[0].renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_HISTORY_BLOCK_COMMAND when selectable', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, undefined, makeHistoryBlock({ selectable: true }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT dispatch command when selectable is false', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return usePromptOptions(undefined, undefined, makeHistoryBlock({ selectable: false }))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      expect(spy).not.toHaveBeenCalled()
+    })
+  })
+
+  /**
+   * All four blocks shown simultaneously – verify all four options are produced
+   * in the correct order: context → query → requestURL → history.
+   * (requestURL is pushed after query but BEFORE history because the source pushes
+   * requestURLBlock before historyBlock.)
+   */
+  describe('all blocks visible', () => {
+    it('should return all four options in correct order', () => {
+      const { result } = renderHook(
+        () => usePromptOptions(
+          makeContextBlock(),
+          makeQueryBlock(),
+          makeHistoryBlock(),
+          makeRequestURLBlock(),
+        ),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(4)
+      expect(result.current[0].group).toBe('prompt context')
+      expect(result.current[1].group).toBe('prompt query')
+      // requestURL is pushed 3rd – before historyBlock
+      expect(result.current[2].group).toBe('request URL')
+      expect(result.current[3].group).toBe('prompt history')
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// useVariableOptions
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('useVariableOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const wrapper = makeLexicalWrapper()
+
+  /**
+   * Show=false edge case: the hook must return [] even when variables are present.
+   */
+  describe('when variableBlock.show is false', () => {
+    it('should return an empty array', () => {
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock([{ value: 'foo', name: 'foo' }], { show: false })),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+  })
+
+  /**
+   * Undefined variableBlock – hook should return [].
+   */
+  describe('when variableBlock is undefined', () => {
+    it('should return an empty array', () => {
+      const { result } = renderHook(
+        () => useVariableOptions(undefined),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+  })
+
+  /**
+   * variableBlock.variables is undefined while show=true – only addOption is returned
+   * because the inner `options` memo short-circuits to [] when `variableBlock.variables`
+   * is falsy, and the final memo includes addOption when show=true.
+   */
+  describe('when variableBlock.variables is undefined', () => {
+    it('should return only the addOption', () => {
+      const { result } = renderHook(
+        () => useVariableOptions({ show: true, variables: undefined }),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('prompt variable')
+    })
+  })
+
+  /**
+   * No queryString – all variables are returned plus the addOption.
+   */
+  describe('with variables and no queryString', () => {
+    it('should return all variables + addOption', () => {
+      const vars: Option[] = [
+        { value: 'alpha', name: 'Alpha' },
+        { value: 'beta', name: 'Beta' },
+      ]
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock(vars)),
+        { wrapper },
+      )
+      // 2 variable options + 1 addOption = 3
+      expect(result.current).toHaveLength(3)
+      expect(result.current[0].key).toBe('alpha')
+      expect(result.current[1].key).toBe('beta')
+    })
+
+    it('should render variable VariableMenuItems without crashing', () => {
+      const vars: Option[] = [{ value: 'myvar', name: 'My Var' }]
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock(vars)),
+        { wrapper },
+      )
+      // Pass a queryString so we exercise the highlight splitting code path in VariableMenuItem
+      const el = result.current[0].renderMenuOption({ ...renderProps, queryString: 'my' })
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_VARIABLE_VALUE_BLOCK_COMMAND with correct payload when variable is selected', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const vars: Option[] = [{ value: 'myvar', name: 'My Var' }]
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return useVariableOptions(makeVariableBlock(vars))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      // The command payload wraps the value in {{ }}
+      expect(spy).toHaveBeenCalledWith(expect.anything(), '{{myvar}}')
+    })
+  })
+
+  /**
+   * queryString filtering: only variable keys that match the regex survive.
+   */
+  describe('with queryString filtering', () => {
+    it('should filter variables by queryString (case-insensitive)', () => {
+      const vars: Option[] = [
+        { value: 'alpha', name: 'Alpha' },
+        { value: 'beta', name: 'Beta' },
+        { value: 'ALPHA_UPPER', name: 'ALPHA_UPPER' },
+      ]
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock(vars), 'alpha'),
+        { wrapper },
+      )
+      // 'alpha' regex (case-insensitive) matches 'alpha' and 'ALPHA_UPPER'; addOption is always appended
+      expect(result.current).toHaveLength(3)
+      expect(result.current[0].key).toBe('alpha')
+      expect(result.current[1].key).toBe('ALPHA_UPPER')
+    })
+
+    it('should return only addOption when no variables match the queryString', () => {
+      const vars: Option[] = [
+        { value: 'alpha', name: 'Alpha' },
+        { value: 'beta', name: 'Beta' },
+      ]
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock(vars), 'zzz'),
+        { wrapper },
+      )
+      // No match → filtered options=[] + addOption = 1
+      expect(result.current).toHaveLength(1)
+    })
+  })
+
+  /**
+   * addOption – calling onSelectMenuOption triggers editor.update() which
+   * in turn calls $insertNodes with {{ and }} custom text nodes.
+   * We only verify update() was invoked since the full DOM mutation requires
+   * a real Lexical document with registered nodes.
+   */
+  describe('addOption (the last element)', () => {
+    it('should render addOption VariableMenuItem without crashing', () => {
+      const { result } = renderHook(
+        () => useVariableOptions(makeVariableBlock([])),
+        { wrapper },
+      )
+      const lastOption = result.current[result.current.length - 1]
+      const el = lastOption.renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should call editor.update() when addOption is selected', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return useVariableOptions(makeVariableBlock([]))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'update')
+      const lastOption = result.current[result.current.length - 1]
+      lastOption.onSelectMenuOption()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// useExternalToolOptions
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('useExternalToolOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const wrapper = makeLexicalWrapper()
+
+  const sampleTool: ExternalToolOption = {
+    name: 'weather',
+    variableName: 'weather_tool',
+    icon: 'cloud',
+    icon_background: '#fff',
+  }
+
+  /**
+   * Show=false: must always return [].
+   */
+  describe('when externalToolBlockType.show is false', () => {
+    it('should return an empty array', () => {
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({ show: false }, [sampleTool])),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+  })
+
+  /**
+   * Undefined block: return [].
+   */
+  describe('when externalToolBlockType is undefined', () => {
+    it('should return an empty array', () => {
+      const { result } = renderHook(
+        () => useExternalToolOptions(undefined),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(0)
+    })
+  })
+
+  /**
+   * externalTools is undefined while show=true – inner options memo returns [] because
+   * `externalToolBlockType?.externalTools` is falsy. Only addOption is in the result.
+   */
+  describe('when externalTools is undefined', () => {
+    it('should return only the addOption', () => {
+      const { result } = renderHook(
+        () => useExternalToolOptions({ show: true, externalTools: undefined }),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].group).toBe('external tool')
+    })
+  })
+
+  /**
+   * Tools with no queryString – all tools + addOption.
+   */
+  describe('with tools and no queryString', () => {
+    it('should return all tools + addOption', () => {
+      const tools: ExternalToolOption[] = [
+        { name: 'tool-a', variableName: 'tool_a' },
+        { name: 'tool-b', variableName: 'tool_b' },
+      ]
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({}, tools)),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(3)
+      expect(result.current[0].key).toBe('tool-a')
+      expect(result.current[1].key).toBe('tool-b')
+    })
+
+    it('should render tool VariableMenuItem (with AppIcon and variableName extra element) without crashing', () => {
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({}, [sampleTool])),
+        { wrapper },
+      )
+      // pass a queryString to also exercise the highlighting code path
+      const el = result.current[0].renderMenuOption({ ...renderProps, queryString: 'wea' })
+      expect(el).toBeTruthy()
+    })
+
+    it('should dispatch INSERT_VARIABLE_VALUE_BLOCK_COMMAND with variableName when tool is selected', () => {
+      let capturedEditor: LexicalEditor | null = null
+      const { result } = renderHook(
+        () => {
+          const [editor] = useLexicalComposerContext()
+          capturedEditor = editor
+          return useExternalToolOptions(makeExternalToolBlock({}, [sampleTool]))
+        },
+        { wrapper },
+      )
+      const spy = vi.spyOn(capturedEditor!, 'dispatchCommand')
+      result.current[0].onSelectMenuOption()
+      // variableName is 'weather_tool', wrapped in {{ }}
+      expect(spy).toHaveBeenCalledWith(expect.anything(), '{{weather_tool}}')
+    })
+  })
+
+  /**
+   * queryString filtering – case-insensitive match against the tool's `name` key.
+   */
+  describe('with queryString filtering', () => {
+    it('should filter tools by queryString (case-insensitive)', () => {
+      const tools: ExternalToolOption[] = [
+        { name: 'WeatherTool', variableName: 'weather' },
+        { name: 'SearchTool', variableName: 'search' },
+      ]
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({}, tools), 'weather'),
+        { wrapper },
+      )
+      // 'weather' regex matches 'WeatherTool'; addOption is always appended
+      expect(result.current).toHaveLength(2)
+      expect(result.current[0].key).toBe('WeatherTool')
+    })
+
+    it('should return only addOption when no tools match', () => {
+      const tools: ExternalToolOption[] = [{ name: 'Alpha', variableName: 'alpha' }]
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({}, tools), 'zzz'),
+        { wrapper },
+      )
+      expect(result.current).toHaveLength(1)
+    })
+  })
+
+  /**
+   * addOption – last element in the array.
+   * Its onSelect calls externalToolBlockType.onAddExternalTool() if provided.
+   */
+  describe('addOption (the last element)', () => {
+    it('should render addOption VariableMenuItem (with Tool03/ArrowUpRight icons) without crashing', () => {
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({}, [])),
+        { wrapper },
+      )
+      const lastOption = result.current[result.current.length - 1]
+      const el = lastOption.renderMenuOption(renderProps)
+      expect(el).toBeTruthy()
+    })
+
+    it('should call onAddExternalTool when addOption is selected and callback provided', () => {
+      const onAddExternalTool = vi.fn()
+      const { result } = renderHook(
+        () => useExternalToolOptions(makeExternalToolBlock({ onAddExternalTool }, [])),
+        { wrapper },
+      )
+      const lastOption = result.current[result.current.length - 1]
+      lastOption.onSelectMenuOption()
+      expect(onAddExternalTool).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT throw when onAddExternalTool is undefined and addOption is selected', () => {
+      // Covers the optional-chaining branch: externalToolBlockType?.onAddExternalTool?.()
+      const block = makeExternalToolBlock({}, [])
+      delete block.onAddExternalTool
+      const { result } = renderHook(
+        () => useExternalToolOptions(block),
+        { wrapper },
+      )
+      const lastOption = result.current[result.current.length - 1]
+      expect(() => lastOption.onSelectMenuOption()).not.toThrow()
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// useOptions
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('useOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const wrapper = makeLexicalWrapper()
+
+  /**
+   * Base case: no arguments → both arrays empty.
+   */
+  describe('with no arguments', () => {
+    it('should return empty workflowVariableOptions and allFlattenOptions', () => {
+      const { result } = renderHook(() => useOptions(), { wrapper })
+      expect(result.current.workflowVariableOptions).toHaveLength(0)
+      expect(result.current.allFlattenOptions).toHaveLength(0)
+    })
+  })
+
+  /**
+   * allFlattenOptions = promptOptions + variableOptions + externalToolOptions.
+   */
+  describe('allFlattenOptions aggregation', () => {
+    it('should combine prompt, variable, and external tool options', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          makeContextBlock(), // 1 prompt option
+          undefined,
+          undefined,
+          makeVariableBlock([{ value: 'v1', name: 'v1' }]), // 1 var + 1 addOption = 2
+          makeExternalToolBlock({}, [{ name: 't1', variableName: 'tv1' }]), // 1 tool + 1 addOption = 2
+        ),
+        { wrapper },
+      )
+      // 1 + 2 + 2 = 5
+      expect(result.current.allFlattenOptions).toHaveLength(5)
+    })
+  })
+
+  /**
+   * workflowVariableOptions – show=false must return [].
+   */
+  describe('workflowVariableOptions when show is false', () => {
+    it('should return empty array', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([], { show: false }),
+        ),
+        { wrapper },
+      )
+      expect(result.current.workflowVariableOptions).toHaveLength(0)
+    })
+  })
+
+  /**
+   * workflowVariableOptions with existing variables but no synthetic node injection.
+   */
+  describe('workflowVariableOptions with plain variables', () => {
+    it('should return variables as-is when no special blocks are shown', () => {
+      const vars: NodeOutPutVar[] = [
+        makeNodeOutPutVar('node-1', 'Node One', [makeVar('out', VarType.string)]),
+      ]
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock(vars),
+        ),
+        { wrapper },
+      )
+      expect(result.current.workflowVariableOptions).toHaveLength(1)
+      expect(result.current.workflowVariableOptions[0].nodeId).toBe('node-1')
+    })
+  })
+
+  /**
+   * workflowVariableBlockType.variables is undefined → defaults to [] via `|| []`.
+   */
+  describe('workflowVariableOptions when variables is undefined', () => {
+    it('should default to empty array', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          { show: true, variables: undefined },
+        ),
+        { wrapper },
+      )
+      // No special block injections and no variables → empty array
+      expect(result.current.workflowVariableOptions).toHaveLength(0)
+    })
+  })
+
+  /**
+   * errorMessageBlockType.show=true and 'error_message' NOT already in the list
+   * → a synthetic error_message node is prepended via Array.unshift().
+   */
+  describe('errorMessageBlockType injection', () => {
+    it('should prepend error_message node when show is true and not already present', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          undefined,
+                    { show: true } satisfies ErrorMessageBlockType,
+        ),
+        { wrapper },
+      )
+      expect(result.current.workflowVariableOptions[0].nodeId).toBe('error_message')
+      expect(result.current.workflowVariableOptions[0].vars[0].variable).toBe('error_message')
+      expect(result.current.workflowVariableOptions[0].vars[0].type).toBe(VarType.string)
+    })
+
+    it('should NOT inject error_message when already present in variables', () => {
+      // The findIndex check ensures deduplication
+      const existingVars: NodeOutPutVar[] = [
+        makeNodeOutPutVar('error_message', 'error_message', [makeVar('error_message', VarType.string)]),
+      ]
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock(existingVars),
+          undefined,
+          undefined,
+                    { show: true } satisfies ErrorMessageBlockType,
+        ),
+        { wrapper },
+      )
+      // Should still be 1, not 2
+      const errorNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'error_message')
+      expect(errorNodes).toHaveLength(1)
+    })
+
+    it('should NOT inject error_message when errorMessageBlockType.show is false', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          undefined,
+                    { show: false } satisfies ErrorMessageBlockType,
+        ),
+        { wrapper },
+      )
+      const errorNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'error_message')
+      expect(errorNodes).toHaveLength(0)
+    })
+  })
+
+  /**
+   * lastRunBlockType.show=true → prepends a 'last_run' synthetic node with VarType.object.
+   */
+  describe('lastRunBlockType injection', () => {
+    it('should prepend last_run node when show is true and not already present', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          undefined,
+          undefined,
+                    { show: true } satisfies LastRunBlockType,
+        ),
+        { wrapper },
+      )
+      expect(result.current.workflowVariableOptions[0].nodeId).toBe('last_run')
+      expect(result.current.workflowVariableOptions[0].vars[0].type).toBe(VarType.object)
+    })
+
+    it('should NOT inject last_run when already present in variables', () => {
+      const existingVars: NodeOutPutVar[] = [
+        makeNodeOutPutVar('last_run', 'last_run', [makeVar('last_run', VarType.object)]),
+      ]
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock(existingVars),
+          undefined,
+          undefined,
+          undefined,
+                    { show: true } satisfies LastRunBlockType,
+        ),
+        { wrapper },
+      )
+      const lastRunNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'last_run')
+      expect(lastRunNodes).toHaveLength(1)
+    })
+
+    it('should NOT inject last_run when lastRunBlockType.show is false', () => {
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          undefined,
+          undefined,
+                    { show: false } satisfies LastRunBlockType,
+        ),
+        { wrapper },
+      )
+      const lastRunNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'last_run')
+      expect(lastRunNodes).toHaveLength(0)
+    })
+  })
+
+  /**
+   * currentBlockType injection:
+   *  - When generatorType === 'prompt' the title should be 'current_prompt'.
+   *  - Otherwise the title should be 'current_code'.
+   */
+  describe('currentBlockType injection', () => {
+    it('should prepend current node with title "current_prompt" when generatorType is prompt', () => {
+      const currentBlock: CurrentBlockType = { show: true, generatorType: GeneratorType.prompt }
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          currentBlock,
+        ),
+        { wrapper },
+      )
+      const currentNode = result.current.workflowVariableOptions.find(v => v.nodeId === 'current')
+      expect(currentNode).toBeDefined()
+      expect(currentNode!.title).toBe('current_prompt')
+      expect(currentNode!.vars[0].type).toBe(VarType.string)
+    })
+
+    it('should prepend current node with title "current_code" when generatorType is not prompt', () => {
+      // Any generatorType value other than 'prompt' results in 'current_code'
+      const currentBlock: CurrentBlockType = { show: true, generatorType: GeneratorType.code }
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          currentBlock,
+        ),
+        { wrapper },
+      )
+      const currentNode = result.current.workflowVariableOptions.find(v => v.nodeId === 'current')
+      expect(currentNode).toBeDefined()
+      expect(currentNode!.title).toBe('current_code')
+    })
+
+    it('should NOT inject current node when already present', () => {
+      // The findIndex guard prevents double-injection
+      const existingVars: NodeOutPutVar[] = [
+        makeNodeOutPutVar('current', 'current_prompt', [makeVar('current', VarType.string)]),
+      ]
+      const currentBlock: CurrentBlockType = { show: true, generatorType: GeneratorType.prompt }
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock(existingVars),
+          undefined,
+          currentBlock,
+        ),
+        { wrapper },
+      )
+      const currentNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'current')
+      expect(currentNodes).toHaveLength(1)
+    })
+
+    it('should NOT inject current node when currentBlockType.show is false', () => {
+      const currentBlock: CurrentBlockType = { show: false, generatorType: GeneratorType.prompt }
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock([]),
+          undefined,
+          currentBlock,
+        ),
+        { wrapper },
+      )
+      const currentNodes = result.current.workflowVariableOptions.filter(v => v.nodeId === 'current')
+      expect(currentNodes).toHaveLength(0)
+    })
+  })
+
+  /**
+   * Stacking order: when all three special blocks (error_message, last_run, current)
+   * are shown, they are prepended with Array.unshift() in the order:
+   *   1. unshift(error_message)  → [error_message, ...base]
+   *   2. unshift(last_run)       → [last_run, error_message, ...base]
+   *   3. unshift(current)        → [current, last_run, error_message, ...base]
+   */
+  describe('stacking order of injected nodes', () => {
+    it('should place current first, then last_run, then error_message, then base vars', () => {
+      const baseVars: NodeOutPutVar[] = [makeNodeOutPutVar('base-node', 'Base', [])]
+      const currentBlock: CurrentBlockType = { show: true, generatorType: GeneratorType.prompt }
+      const errorBlock: ErrorMessageBlockType = { show: true }
+      const lastRunBlock: LastRunBlockType = { show: true }
+
+      const { result } = renderHook(
+        () => useOptions(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          makeWorkflowVariableBlock(baseVars),
+          undefined,
+          currentBlock,
+          errorBlock,
+          lastRunBlock,
+        ),
+        { wrapper },
+      )
+
+      const ids = result.current.workflowVariableOptions.map(v => v.nodeId)
+      // current is unshifted last, so it ends up at index 0
+      expect(ids[0]).toBe('current')
+      expect(ids[1]).toBe('last_run')
+      expect(ids[2]).toBe('error_message')
+      expect(ids[3]).toBe('base-node')
+    })
+  })
+
+  /**
+   * Full integration: all prompt blocks visible + variables + tools + workflow vars +
+   * all three special injections active.
+   */
+  describe('full integration scenario', () => {
+    it('should return correct combined options when all block types are configured', () => {
+      const vars: Option[] = [{ value: 'v1', name: 'v1' }]
+      const tools: ExternalToolOption[] = [{ name: 'tool1', variableName: 'tv1' }]
+      const wfVars: NodeOutPutVar[] = [makeNodeOutPutVar('node-x', 'NodeX', [])]
+
+      const { result } = renderHook(
+        () => useOptions(
+          makeContextBlock(),
+          makeQueryBlock(),
+          makeHistoryBlock(),
+          makeVariableBlock(vars),
+          makeExternalToolBlock({}, tools),
+          makeWorkflowVariableBlock(wfVars),
+          makeRequestURLBlock(),
+                    { show: true, generatorType: GeneratorType.prompt } satisfies CurrentBlockType,
+                    { show: true } satisfies ErrorMessageBlockType,
+                    { show: true } satisfies LastRunBlockType,
+                    'v1',
+        ),
+        { wrapper },
+      )
+
+      // allFlattenOptions: 4 prompt + variable options (v1 matches, + addOption) + tool options (tool1 does NOT match 'v1' → 0 + addOption)
+      // = 4 + 2 + 1 = 7
+      expect(result.current.allFlattenOptions).toHaveLength(7)
+
+      // workflowVariableOptions: current + last_run + error_message + node-x = 4
+      expect(result.current.workflowVariableOptions).toHaveLength(4)
+      expect(result.current.workflowVariableOptions[0].nodeId).toBe('current')
+      expect(result.current.workflowVariableOptions[1].nodeId).toBe('last_run')
+      expect(result.current.workflowVariableOptions[2].nodeId).toBe('error_message')
+      expect(result.current.workflowVariableOptions[3].nodeId).toBe('node-x')
+    })
+  })
+})
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.spec.tsx
new file mode 100644
index 0000000000..fd623d39ad
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.spec.tsx
@@ -0,0 +1,633 @@
+import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
+import type { LexicalEditor } from 'lexical'
+import type {
+  ContextBlockType,
+  CurrentBlockType,
+  ErrorMessageBlockType,
+  LastRunBlockType,
+  QueryBlockType,
+  VariableBlockType,
+  WorkflowVariableBlockType,
+} from '../../types'
+import type { NodeOutPutVar, Var } from '@/app/components/workflow/types'
+import type { EventEmitterValue } from '@/context/event-emitter'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $setSelection,
+  KEY_ESCAPE_COMMAND,
+} from 'lexical'
+import * as React from 'react'
+import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { VarType } from '@/app/components/workflow/types'
+import { EventEmitterContextProvider, useEventEmitterContextContext } from '@/context/event-emitter'
+import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
+import { INSERT_CURRENT_BLOCK_COMMAND } from '../current-block'
+import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../error-message-block'
+import { INSERT_LAST_RUN_BLOCK_COMMAND } from '../last-run-block'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
+import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
+import ComponentPicker from './index'
+
+// Mock Range.getClientRects / getBoundingClientRect for Lexical menu positioning in JSDOM.
+// This mirrors the pattern used by other prompt-editor plugin tests in this repo.
+const mockDOMRect = {
+  x: 100,
+  y: 100,
+  width: 100,
+  height: 20,
+  top: 100,
+  right: 200,
+  bottom: 120,
+  left: 100,
+  toJSON: () => ({}),
+}
+
+beforeAll(() => {
+  Range.prototype.getClientRects = vi.fn(() => {
+    const rectList = [mockDOMRect] as unknown as DOMRectList
+    Object.defineProperty(rectList, 'length', { value: 1 })
+    Object.defineProperty(rectList, 'item', { value: (index: number) => (index === 0 ? mockDOMRect : null) })
+    return rectList
+  })
+  Range.prototype.getBoundingClientRect = vi.fn(() => mockDOMRect as DOMRect)
+})
+
+// ─── Typed factories (no `any` / `never`) ────────────────────────────────────
+
+function makeContextBlock(overrides: Partial<ContextBlockType> = {}): ContextBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeQueryBlock(overrides: Partial<QueryBlockType> = {}): QueryBlockType {
+  return { show: true, selectable: true, ...overrides }
+}
+
+function makeVariableBlock(overrides: Partial<VariableBlockType> = {}): VariableBlockType {
+  return { show: true, variables: [], ...overrides }
+}
+
+function makeCurrentBlock(overrides: Partial<CurrentBlockType> = {}): CurrentBlockType {
+  return { show: true, generatorType: GeneratorType.prompt, ...overrides }
+}
+
+function makeErrorMessageBlock(overrides: Partial<ErrorMessageBlockType> = {}): ErrorMessageBlockType {
+  return { show: true, ...overrides }
+}
+
+function makeLastRunBlock(overrides: Partial<LastRunBlockType> = {}): LastRunBlockType {
+  return { show: true, ...overrides }
+}
+
+function makeWorkflowNodeVar(variable: string, type: VarType, children?: Var['children']): Var {
+  return { variable, type, children }
+}
+
+function makeWorkflowVarNode(nodeId: string, title: string, vars: Var[]): NodeOutPutVar {
+  return { nodeId, title, vars }
+}
+
+function makeWorkflowVariableBlock(
+  overrides: Partial<WorkflowVariableBlockType> = {},
+  variables: NodeOutPutVar[] = [],
+): WorkflowVariableBlockType {
+  return { show: true, variables, ...overrides }
+}
+
+// ─── Test harness ────────────────────────────────────────────────────────────
+
+type Captures = {
+  editor: LexicalEditor | null
+  eventEmitter: EventEmitter<EventEmitterValue> | null
+}
+
+type ReactFiber = {
+  child: ReactFiber | null
+  sibling: ReactFiber | null
+  return: ReactFiber | null
+  memoizedState?: unknown
+}
+
+type ReactHook = {
+  memoizedState?: unknown
+  next?: ReactHook | null
+}
+
+const CaptureEditorAndEmitter: React.FC<{ captures: Captures }> = ({ captures }) => {
+  const [editor] = useLexicalComposerContext()
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  React.useEffect(() => {
+    captures.editor = editor
+  }, [captures, editor])
+
+  React.useEffect(() => {
+    captures.eventEmitter = eventEmitter
+  }, [captures, eventEmitter])
+
+  return null
+}
+
+const CONTENT_EDITABLE_TEST_ID = 'component-picker-ce'
+
+const MinimalEditor: React.FC<{
+  triggerString: string
+  contextBlock?: ContextBlockType
+  queryBlock?: QueryBlockType
+  variableBlock?: VariableBlockType
+  workflowVariableBlock?: WorkflowVariableBlockType
+  currentBlock?: CurrentBlockType
+  errorMessageBlock?: ErrorMessageBlockType
+  lastRunBlock?: LastRunBlockType
+  captures: Captures
+}> = ({
+  triggerString,
+  contextBlock,
+  queryBlock,
+  variableBlock,
+  workflowVariableBlock,
+  currentBlock,
+  errorMessageBlock,
+  lastRunBlock,
+  captures,
+}) => {
+  const initialConfig = React.useMemo(() => ({
+    namespace: `component-picker-test-${Math.random().toString(16).slice(2)}`,
+    onError: (e: Error) => {
+      throw e
+    },
+  }), [])
+
+  return (
+    <EventEmitterContextProvider>
+      <LexicalComposer initialConfig={initialConfig}>
+        <RichTextPlugin
+          contentEditable={<ContentEditable data-testid={CONTENT_EDITABLE_TEST_ID} />}
+          placeholder={null}
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+
+        <CaptureEditorAndEmitter captures={captures} />
+
+        <ComponentPicker
+          triggerString={triggerString}
+          contextBlock={contextBlock}
+          queryBlock={queryBlock}
+          variableBlock={variableBlock}
+          workflowVariableBlock={workflowVariableBlock}
+          currentBlock={currentBlock}
+          errorMessageBlock={errorMessageBlock}
+          lastRunBlock={lastRunBlock}
+        />
+      </LexicalComposer>
+    </EventEmitterContextProvider>
+  )
+}
+
+async function waitForEditor(captures: Captures): Promise<LexicalEditor> {
+  await waitFor(() => {
+    expect(captures.editor).not.toBeNull()
+  })
+  return captures.editor as LexicalEditor
+}
+
+async function waitForEventEmitter(captures: Captures): Promise<NonNullable<Captures['eventEmitter']>> {
+  await waitFor(() => {
+    expect(captures.eventEmitter).not.toBeNull()
+  })
+  return captures.eventEmitter as NonNullable<Captures['eventEmitter']>
+}
+
+async function setEditorText(editor: LexicalEditor, text: string, selectEnd: boolean): Promise<void> {
+  await act(async () => {
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      const paragraph = $createParagraphNode()
+      const textNode = $createTextNode(text)
+      paragraph.append(textNode)
+      root.append(paragraph)
+      if (selectEnd)
+        textNode.selectEnd()
+    })
+  })
+}
+
+function readEditorText(editor: LexicalEditor): string {
+  return editor.getEditorState().read(() => $getRoot().getTextContent())
+}
+
+function getReactFiberFromDom(dom: Element): ReactFiber | null {
+  const key = Object.keys(dom).find(k => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'))
+  if (!key)
+    return null
+  return (dom as unknown as Record<string, unknown>)[key] as ReactFiber
+}
+
+function findHookRefPointingToElement(root: ReactFiber, element: Element): { current: unknown } | null {
+  const visit = (fiber: ReactFiber | null): { current: unknown } | null => {
+    if (!fiber)
+      return null
+
+    let hook = fiber.memoizedState as ReactHook | null | undefined
+    while (hook) {
+      const state = hook.memoizedState
+      if (state && typeof state === 'object' && 'current' in state) {
+        const ref = state as { current: unknown }
+        if (ref.current === element)
+          return ref
+      }
+      hook = hook.next
+    }
+
+    return visit(fiber.child) || visit(fiber.sibling)
+  }
+  return visit(root)
+}
+
+async function flushNextTick(): Promise<void> {
+  // Used to flush 0ms setTimeout work scheduled by renderMenu (refs.setReference guard).
+  await act(async () => {
+    await new Promise<void>(resolve => setTimeout(resolve, 0))
+  })
+}
+
+// ─── Tests ───────────────────────────────────────────────────────────────────
+
+describe('ComponentPicker (component-picker-block/index.tsx)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+  })
+
+  it('does not render a menu when there are no options and workflowVariableBlock is not shown (renderMenu returns null)', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+    render(<MinimalEditor triggerString="{" captures={captures} />)
+
+    const editor = await waitForEditor(captures)
+    await setEditorText(editor, '{', true)
+
+    // Menu should not appear because renderMenu exits early without an anchor + content.
+    await waitFor(() => {
+      expect(screen.queryByText('common.promptEditor.context.item.title')).not.toBeInTheDocument()
+      expect(screen.queryByPlaceholderText('workflow.common.searchVar')).not.toBeInTheDocument()
+    })
+  })
+
+  it('renders prompt options in a portal and removes the trigger TextNode when selecting a normal option (nodeToRemove && key truthy)', async () => {
+    const user = userEvent.setup()
+
+    const captures: Captures = { editor: null, eventEmitter: null }
+    render((
+      <MinimalEditor
+        triggerString="{"
+        contextBlock={makeContextBlock()}
+        queryBlock={makeQueryBlock()}
+        captures={captures}
+      />
+    ))
+    const editor = await waitForEditor(captures)
+    const dispatchSpy = vi.spyOn(editor, 'dispatchCommand')
+
+    // Open the typeahead menu by inserting the trigger character at the caret.
+    await setEditorText(editor, '{', true)
+
+    // The i18n mock returns "common.<key>" for { ns: 'common' }.
+    const contextTitle = await screen.findByText('common.promptEditor.context.item.title')
+    expect(contextTitle).toBeInTheDocument()
+
+    // Hover over another menu item to trigger `onSetHighlight` -> `setHighlightedIndex(index)`.
+    const queryTitle = await screen.findByText('common.promptEditor.query.item.title')
+    const queryItem = queryTitle.closest('[tabindex="-1"]')
+    expect(queryItem).not.toBeNull()
+    await user.hover(queryItem as HTMLElement)
+
+    // Flush the 0ms timer in renderMenu that calls refs.setReference(anchor).
+    await flushNextTick()
+
+    fireEvent.click(contextTitle)
+
+    // Selecting an option should dispatch a command (from the real option implementation).
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
+
+    // The trigger character should be removed from editor content via `nodeToRemove.remove()`.
+    await waitFor(() => {
+      expect(readEditorText(editor)).not.toContain('{')
+    })
+  })
+
+  it('does not remove the trigger when selecting an option with an empty key (nodeToRemove && key falsy)', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+    render((
+      <MinimalEditor
+        triggerString="{"
+        variableBlock={makeVariableBlock({
+          show: true,
+          // Edge case: an empty variable name produces a MenuOption key of '' (falsy),
+          // which drives the `nodeToRemove && selectedOption?.key` condition to false.
+          variables: [{ name: 'empty', value: '' }],
+        })}
+        captures={captures}
+      />
+    ))
+    const editor = await waitForEditor(captures)
+
+    await setEditorText(editor, '{', true)
+
+    // There is no accessible "option" role here (menu items are plain divs).
+    // We locate menu items by `tabindex="-1"` inside the listbox.
+    const listbox = await screen.findByRole('listbox', { name: /typeahead menu/i })
+    const menuItems = Array.from(listbox.querySelectorAll('[tabindex="-1"]'))
+
+    // Expect at least: (1) our empty variable option, (2) the "add variable" option.
+    expect(menuItems.length).toBeGreaterThanOrEqual(2)
+    expect(within(listbox).getByText('common.promptEditor.variable.modal.add')).toBeInTheDocument()
+
+    fireEvent.click(menuItems[0] as HTMLElement)
+
+    // Since the key is falsy, ComponentPicker should NOT call nodeToRemove.remove().
+    // The trigger remains in editor content.
+    await waitFor(() => {
+      expect(readEditorText(editor)).toContain('{')
+    })
+  })
+
+  it('subscribes to EventEmitter and dispatches INSERT_VARIABLE_VALUE_BLOCK_COMMAND only for matching messages', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+    render((
+      <MinimalEditor
+        triggerString="{"
+        contextBlock={makeContextBlock()}
+        captures={captures}
+      />
+    ))
+
+    const editor = await waitForEditor(captures)
+    const eventEmitter = await waitForEventEmitter(captures)
+    const dispatchSpy = vi.spyOn(editor, 'dispatchCommand')
+
+    // Non-object emissions (string) should be ignored by the subscription callback.
+    eventEmitter.emit('some-string')
+    expect(dispatchSpy).not.toHaveBeenCalledWith(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, expect.any(String))
+
+    // Mismatched type should be ignored.
+    eventEmitter.emit({ type: 'OTHER', payload: 'x' })
+    expect(dispatchSpy).not.toHaveBeenCalledWith(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, '{{x}}')
+
+    // Matching type should dispatch with {{payload}} wrapping.
+    eventEmitter.emit({ type: INSERT_VARIABLE_VALUE_BLOCK_COMMAND as unknown as string, payload: 'foo' })
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, '{{foo}}')
+  })
+
+  it('handles workflow variable selection: flat vars (current/error_message/last_run) and closes on Escape from search input', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+
+    const workflowVariableBlock = makeWorkflowVariableBlock({}, [
+      { nodeId: 'custom-flat', title: 'custom-flat', isFlat: true, vars: [makeWorkflowNodeVar('custom_flat', VarType.string)] },
+      makeWorkflowVarNode('node-output', 'Node Output', [
+        makeWorkflowNodeVar('output', VarType.string),
+      ]),
+    ])
+
+    render((
+      <MinimalEditor
+        triggerString="{"
+        workflowVariableBlock={workflowVariableBlock}
+        currentBlock={makeCurrentBlock({ generatorType: GeneratorType.prompt })}
+        errorMessageBlock={makeErrorMessageBlock()}
+        lastRunBlock={makeLastRunBlock()}
+        captures={captures}
+      />
+    ))
+
+    const editor = await waitForEditor(captures)
+    const dispatchSpy = vi.spyOn(editor, 'dispatchCommand')
+
+    // Open menu and select current (flat).
+    await setEditorText(editor, '{', true)
+    await flushNextTick()
+    const currentLabel = await screen.findByText('current_prompt')
+    await act(async () => {
+      fireEvent.click(currentLabel)
+    })
+    await flushNextTick()
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_CURRENT_BLOCK_COMMAND, GeneratorType.prompt)
+
+    // Re-open menu and select error_message (flat).
+    await setEditorText(editor, '{', true)
+    await flushNextTick()
+    const errorMessageLabel = await screen.findByText('error_message')
+    await act(async () => {
+      fireEvent.click(errorMessageLabel)
+    })
+    await flushNextTick()
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_ERROR_MESSAGE_BLOCK_COMMAND, null)
+
+    // Re-open menu and select last_run (flat).
+    await setEditorText(editor, '{', true)
+    await flushNextTick()
+    const lastRunLabel = await screen.findByText('last_run')
+    await act(async () => {
+      fireEvent.click(lastRunLabel)
+    })
+    await flushNextTick()
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_LAST_RUN_BLOCK_COMMAND, null)
+
+    // Re-open menu and press Escape in the VarReferenceVars search input to exercise handleClose().
+    await setEditorText(editor, '{', true)
+    await flushNextTick()
+    const searchInput = await screen.findByPlaceholderText('workflow.common.searchVar')
+    await act(async () => {
+      fireEvent.keyDown(searchInput, { key: 'Escape' })
+    })
+    await flushNextTick()
+    expect(dispatchSpy).toHaveBeenCalledWith(KEY_ESCAPE_COMMAND, expect.any(KeyboardEvent))
+
+    // Re-open menu and select a flat var that is not handled by the special-case list.
+    // This covers the "no-op" path in the `isFlat` branch.
+    dispatchSpy.mockClear()
+    await setEditorText(editor, '{', true)
+    await flushNextTick()
+    const customFlatLabel = await screen.findByText('custom_flat')
+    await act(async () => {
+      fireEvent.click(customFlatLabel)
+    })
+    await flushNextTick()
+    expect(dispatchSpy).not.toHaveBeenCalled()
+  })
+
+  it('handles workflow variable selection for nested fields: sys.query, sys.files, and normal paths', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+    const user = userEvent.setup()
+
+    const workflowVariableBlock = makeWorkflowVariableBlock({}, [
+      makeWorkflowVarNode('node-1', 'Node 1', [
+        makeWorkflowNodeVar('sys.query', VarType.object, [makeWorkflowNodeVar('q', VarType.string)]),
+        makeWorkflowNodeVar('sys.files', VarType.object, [makeWorkflowNodeVar('f', VarType.string)]),
+        makeWorkflowNodeVar('output', VarType.object, [makeWorkflowNodeVar('x', VarType.string)]),
+      ]),
+    ])
+
+    render((
+      <MinimalEditor
+        triggerString="{"
+        workflowVariableBlock={workflowVariableBlock}
+        captures={captures}
+      />
+    ))
+
+    const editor = await waitForEditor(captures)
+    const dispatchSpy = vi.spyOn(editor, 'dispatchCommand')
+
+    const openPickerAndSelectField = async (variableTitle: string, fieldName: string) => {
+      await setEditorText(editor, '{', true)
+      await screen.findByPlaceholderText('workflow.common.searchVar')
+      await act(async () => { /* flush effects */ })
+
+      const label = document.querySelector(`[title="${variableTitle}"]`)
+      expect(label).not.toBeNull()
+      const row = (label as HTMLElement).parentElement?.parentElement
+      expect(row).not.toBeNull()
+
+      // `ahooks/useHover` listens for native `mouseenter` / `mouseleave`. `user.hover` triggers
+      // a realistic event sequence that reliably hits those listeners in JSDOM.
+      await user.hover(row as HTMLElement)
+      const field = await screen.findByText(fieldName)
+      fireEvent.mouseDown(field)
+      await user.unhover(row as HTMLElement)
+    }
+
+    await openPickerAndSelectField('sys.query', 'q')
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, ['sys.query'])
+    await waitFor(() => expect(readEditorText(editor)).not.toContain('{'))
+
+    await openPickerAndSelectField('sys.files', 'f')
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, ['sys.files'])
+    await waitFor(() => expect(readEditorText(editor)).not.toContain('{'))
+
+    await openPickerAndSelectField('output', 'x')
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, ['node-1', 'output', 'x'])
+    await waitFor(() => expect(readEditorText(editor)).not.toContain('{'))
+  })
+
+  it('skips removing the trigger when selection is null (needRemove is null) and still dispatches', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+
+    const workflowVariableBlock = makeWorkflowVariableBlock({}, [
+      { nodeId: 'current', title: 'current_prompt', isFlat: true, vars: [makeWorkflowNodeVar('current', VarType.string)] },
+    ])
+
+    render((
+      <MinimalEditor
+        triggerString="{"
+        workflowVariableBlock={workflowVariableBlock}
+        captures={captures}
+      />
+    ))
+
+    const editor = await waitForEditor(captures)
+    const dispatchSpy = vi.spyOn(editor, 'dispatchCommand')
+
+    await setEditorText(editor, '{', true)
+    const currentLabel = await screen.findByText('current_prompt')
+
+    // Force selection to null and click within the same act() to avoid the typeahead UI unmounting
+    // before the click handler fires.
+    await act(async () => {
+      editor.update(() => {
+        $setSelection(null)
+      })
+      currentLabel.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(dispatchSpy).toHaveBeenCalledWith(INSERT_CURRENT_BLOCK_COMMAND, undefined)
+    await waitFor(() => expect(readEditorText(editor)).toContain('{'))
+  })
+
+  it('covers the anchor-ref guard when anchorElementRef.current becomes null before the scheduled callback runs', async () => {
+    // `@lexical/react` keeps `anchorElementRef.current` as a stable element reference, which means the
+    // "anchor is null" path is hard to reach through normal interactions in JSDOM.
+    //
+    // To reach 100% branch coverage for `index.tsx`, we:
+    // 1) Pause timers so the scheduled callback doesn't run immediately.
+    // 2) Find the `useRef` hook object used by LexicalTypeaheadMenuPlugin that points at `#typeahead-menu`.
+    // 3) Set that ref's `.current = null` before advancing timers.
+    //
+    // This avoids mocking third-party modules while still exercising the guard.
+    vi.useFakeTimers()
+
+    const captures: Captures = { editor: null, eventEmitter: null }
+    render((
+      <MinimalEditor
+        triggerString="{"
+        contextBlock={makeContextBlock()}
+        captures={captures}
+      />
+    ))
+
+    await act(async () => { /* flush effects */ })
+    expect(captures.editor).not.toBeNull()
+    const editor = captures.editor as LexicalEditor
+
+    await setEditorText(editor, '{', true)
+    const typeaheadMenu = document.getElementById('typeahead-menu')
+    expect(typeaheadMenu).not.toBeNull()
+
+    const ce = screen.getByTestId(CONTENT_EDITABLE_TEST_ID)
+    const fiber = getReactFiberFromDom(ce)
+    expect(fiber).not.toBeNull()
+    const root = (() => {
+      let cur = fiber as ReactFiber
+      while (cur.return)
+        cur = cur.return
+      return cur
+    })()
+
+    const anchorRef = findHookRefPointingToElement(root, typeaheadMenu as Element)
+    expect(anchorRef).not.toBeNull()
+    anchorRef!.current = null
+
+    await act(async () => {
+      vi.runOnlyPendingTimers()
+    })
+
+    vi.useRealTimers()
+  })
+
+  it('renders the workflow-variable divider when workflowVariableBlock is shown and options are non-empty', async () => {
+    const captures: Captures = { editor: null, eventEmitter: null }
+
+    const workflowVariableBlock = makeWorkflowVariableBlock({}, [
+      makeWorkflowVarNode('node-1', 'Node 1', [
+        makeWorkflowNodeVar('output', VarType.string),
+      ]),
+    ])
+
+    render((
+      <MinimalEditor
+        triggerString="{"
+        workflowVariableBlock={workflowVariableBlock}
+        contextBlock={makeContextBlock()}
+        captures={captures}
+      />
+    ))
+
+    const editor = await waitForEditor(captures)
+    await setEditorText(editor, '{', true)
+
+    // Both sections are present.
+    expect(await screen.findByPlaceholderText('workflow.common.searchVar')).toBeInTheDocument()
+    expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
+
+    // With a single option group, the only divider should be the workflow-var/options separator.
+    expect(document.querySelectorAll('.bg-divider-subtle')).toHaveLength(1)
+  })
+})
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/menu.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/menu.spec.tsx
new file mode 100644
index 0000000000..2ee4fb7e0b
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/menu.spec.tsx
@@ -0,0 +1,123 @@
+import { render } from '@testing-library/react'
+import { Fragment } from 'react'
+import { PickerBlockMenuOption } from './menu'
+
+describe('PickerBlockMenuOption', () => {
+  // Define the render props type locally to match the component's internal type accurately
+  type MenuOptionRenderProps = {
+    isSelected: boolean
+    onSelect: () => void
+    onSetHighlight: () => void
+    queryString: string | null
+  }
+
+  const mockRender = vi.fn((props: MenuOptionRenderProps) => (
+    <div data-testid="menu-item">
+      {props.isSelected ? 'Selected' : 'Not Selected'}
+      {props.queryString && ` Query: ${props.queryString}`}
+    </div>
+  ))
+  const mockOnSelect = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Constructor and Initialization', () => {
+    it('should correctly initialize with provided key and group', () => {
+      const option = new PickerBlockMenuOption({
+        key: 'test-key',
+        group: 'test-group',
+        render: mockRender,
+      })
+
+      // Check inheritance from MenuOption (key)
+      expect(option.key).toBe('test-key')
+      // Check custom property (group)
+      expect(option.group).toBe('test-group')
+    })
+
+    it('should initialize without group when not provided', () => {
+      const option = new PickerBlockMenuOption({
+        key: 'test-key-no-group',
+        render: mockRender,
+      })
+
+      expect(option.key).toBe('test-key-no-group')
+      expect(option.group).toBeUndefined()
+    })
+  })
+
+  describe('onSelectMenuOption', () => {
+    it('should call the provided onSelect callback', () => {
+      const option = new PickerBlockMenuOption({
+        key: 'test-key',
+        onSelect: mockOnSelect,
+        render: mockRender,
+      })
+
+      option.onSelectMenuOption()
+      expect(mockOnSelect).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle cases where onSelect is not provided (optional chaining)', () => {
+      const option = new PickerBlockMenuOption({
+        key: 'test-key',
+        render: mockRender,
+      })
+
+      // This covers the branch where this.data.onSelect is undefined
+      expect(() => option.onSelectMenuOption()).not.toThrow()
+    })
+  })
+
+  describe('renderMenuOption', () => {
+    it('should call the render function with correct props and return the element', () => {
+      const option = new PickerBlockMenuOption({
+        key: 'test-key',
+        render: mockRender,
+      })
+
+      const renderProps: MenuOptionRenderProps = {
+        isSelected: true,
+        onSelect: vi.fn(),
+        onSetHighlight: vi.fn(),
+        queryString: 'search-string',
+      }
+
+      // Execute renderMenuOption
+      const renderedElement = option.renderMenuOption(renderProps)
+
+      // Use RTL to verify the rendered output
+      const { getByTestId, getByText } = render(renderedElement)
+
+      // Assertions
+      expect(mockRender).toHaveBeenCalledWith(renderProps)
+      expect(getByTestId('menu-item')).toBeInTheDocument()
+      expect(getByText('Selected Query: search-string')).toBeInTheDocument()
+    })
+
+    it('should use Fragment with the correct key as the wrapper', () => {
+      // In React testing, verifying the key of a Fragment directly from the element can be tricky,
+      // but we can verify the structure and that it renders correctly.
+      const option = new PickerBlockMenuOption({
+        key: 'fragment-key',
+        render: mockRender,
+      })
+
+      const renderProps: MenuOptionRenderProps = {
+        isSelected: false,
+        onSelect: vi.fn(),
+        onSetHighlight: vi.fn(),
+        queryString: null,
+      }
+
+      const element = option.renderMenuOption(renderProps)
+
+      // Verify the element type is Fragment (rendered output doesn't show Fragment in DOM)
+      // but we can check the JSX structure if needed.
+      expect(element.type).toBe(Fragment)
+      expect(element.key).toBe('fragment-key')
+    })
+  })
+})
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.spec.tsx
new file mode 100644
index 0000000000..c48c52a0b7
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.spec.tsx
@@ -0,0 +1,131 @@
+import { createEvent, fireEvent, render, screen } from '@testing-library/react'
+import { PromptMenuItem } from './prompt-option'
+
+describe('PromptMenuItem', () => {
+  const defaultProps = {
+    icon: <span data-testid="test-icon">icon</span>,
+    title: 'Test Option',
+    isSelected: false,
+    onClick: vi.fn(),
+    onMouseEnter: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the icon and title correctly', () => {
+      render(<PromptMenuItem {...defaultProps} />)
+
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+      expect(screen.getByText('Test Option')).toBeInTheDocument()
+    })
+
+    it('should have the correct display name', () => {
+      expect(PromptMenuItem.displayName).toBe('PromptMenuItem')
+    })
+  })
+
+  describe('Styling and States', () => {
+    it('should apply selected styles when isSelected is true and not disabled', () => {
+      const { container } = render(<PromptMenuItem {...defaultProps} isSelected={true} />)
+      const menuDiv = container.firstChild as HTMLElement
+
+      expect(menuDiv.className).toContain('!bg-state-base-hover')
+      expect(menuDiv.className).toContain('cursor-pointer')
+      expect(menuDiv.className).not.toContain('cursor-not-allowed')
+    })
+
+    it('should apply disabled styles and ignore isSelected when disabled is true', () => {
+      const { container } = render(
+        <PromptMenuItem {...defaultProps} isSelected={true} disabled={true} />,
+      )
+      const menuDiv = container.firstChild as HTMLElement
+
+      expect(menuDiv.className).toContain('cursor-not-allowed')
+      expect(menuDiv.className).toContain('opacity-30')
+      expect(menuDiv.className).not.toContain('!bg-state-base-hover')
+    })
+
+    it('should render with default styles when not selected and not disabled', () => {
+      const { container } = render(<PromptMenuItem {...defaultProps} />)
+      const menuDiv = container.firstChild as HTMLElement
+
+      expect(menuDiv.className).toContain('cursor-pointer')
+      expect(menuDiv.className).not.toContain('!bg-state-base-hover')
+      expect(menuDiv.className).not.toContain('cursor-not-allowed')
+    })
+  })
+
+  describe('Interactions', () => {
+    describe('onClick', () => {
+      it('should call onClick when not disabled', () => {
+        render(<PromptMenuItem {...defaultProps} />)
+
+        fireEvent.click(screen.getByText('Test Option'))
+
+        expect(defaultProps.onClick).toHaveBeenCalledTimes(1)
+      })
+
+      it('should NOT call onClick when disabled', () => {
+        render(<PromptMenuItem {...defaultProps} disabled={true} />)
+
+        fireEvent.click(screen.getByText('Test Option'))
+
+        expect(defaultProps.onClick).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('onMouseEnter', () => {
+      it('should call onMouseEnter when not disabled', () => {
+        render(<PromptMenuItem {...defaultProps} />)
+
+        fireEvent.mouseEnter(screen.getByText('Test Option'))
+
+        expect(defaultProps.onMouseEnter).toHaveBeenCalledTimes(1)
+      })
+
+      it('should NOT call onMouseEnter when disabled', () => {
+        render(<PromptMenuItem {...defaultProps} disabled={true} />)
+
+        fireEvent.mouseEnter(screen.getByText('Test Option'))
+
+        expect(defaultProps.onMouseEnter).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('onMouseDown', () => {
+      it('should prevent default and stop propagation', () => {
+        render(<PromptMenuItem {...defaultProps} />)
+
+        const element = screen.getByText('Test Option').parentElement!
+
+        // Use createEvent to properly spy on preventDefault and stopPropagation
+        const mouseDownEvent = createEvent.mouseDown(element)
+        const preventDefault = vi.fn()
+        const stopPropagation = vi.fn()
+
+        mouseDownEvent.preventDefault = preventDefault
+        mouseDownEvent.stopPropagation = stopPropagation
+
+        fireEvent(element, mouseDownEvent)
+
+        expect(preventDefault).toHaveBeenCalled()
+        expect(stopPropagation).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Reference Management', () => {
+    it('should call setRefElement with the div element if provided', () => {
+      const setRefElement = vi.fn()
+      const { container } = render(
+        <PromptMenuItem {...defaultProps} setRefElement={setRefElement} />,
+      )
+
+      const menuDiv = container.firstChild
+      expect(setRefElement).toHaveBeenCalledWith(menuDiv)
+    })
+  })
+})
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.spec.tsx
new file mode 100644
index 0000000000..228f2ac657
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.spec.tsx
@@ -0,0 +1,124 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { VariableMenuItem } from './variable-option'
+
+describe('VariableMenuItem', () => {
+  const defaultProps = {
+    title: 'Variable Name',
+    isSelected: false,
+    queryString: null,
+    onClick: vi.fn(),
+    onMouseEnter: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the title correctly', () => {
+      render(<VariableMenuItem {...defaultProps} />)
+      expect(screen.getByText('Variable Name')).toBeInTheDocument()
+      expect(screen.getByTitle('Variable Name')).toBeInTheDocument()
+    })
+
+    it('should render the icon when provided', () => {
+      render(
+        <VariableMenuItem
+          {...defaultProps}
+          icon={<span data-testid="test-icon">icon</span>}
+        />,
+      )
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+    })
+
+    it('should render the extra element when provided', () => {
+      render(
+        <VariableMenuItem
+          {...defaultProps}
+          extraElement={<span data-testid="extra">extra</span>}
+        />,
+      )
+      expect(screen.getByTestId('extra')).toBeInTheDocument()
+    })
+
+    it('should apply selection styles when isSelected is true', () => {
+      const { container } = render(<VariableMenuItem {...defaultProps} isSelected={true} />)
+      const item = container.firstChild as HTMLElement
+      expect(item).toHaveClass('bg-state-base-hover')
+    })
+  })
+
+  describe('Highlighting Logic (queryString)', () => {
+    it('should not highlight anything when queryString is null', () => {
+      render(<VariableMenuItem {...defaultProps} queryString={null} />)
+      const titleContainer = screen.getByTitle('Variable Name')
+      // Ensure no highlighted span with text exists
+      expect(titleContainer.querySelector('.text-text-accent')?.textContent).toBe('')
+    })
+
+    it('should highlight matching text case-insensitively', () => {
+      render(<VariableMenuItem {...defaultProps} title="User Name" queryString="user" />)
+      const highlighted = screen.getByText('User')
+      expect(highlighted).toHaveClass('text-text-accent')
+
+      const titleContainer = screen.getByTitle('User Name')
+      expect(titleContainer.textContent).toBe('User Name')
+    })
+
+    it('should handle partial match in the middle of the string', () => {
+      render(<VariableMenuItem {...defaultProps} title="System Variable" queryString="tem" />)
+      const highlighted = screen.getByText('tem')
+      expect(highlighted).toHaveClass('text-text-accent')
+
+      const titleContainer = screen.getByTitle('System Variable')
+      expect(titleContainer.textContent).toBe('System Variable')
+      expect(titleContainer.innerHTML).toContain('Sys')
+      expect(titleContainer.innerHTML).toContain(' Variable')
+    })
+
+    it('should handle no match gracefully', () => {
+      render(<VariableMenuItem {...defaultProps} title="Variable" queryString="xyz" />)
+      expect(screen.getByText('Variable')).toBeInTheDocument()
+      const titleContainer = screen.getByTitle('Variable')
+      expect(titleContainer.querySelector('.text-text-accent')?.textContent).toBe('')
+    })
+  })
+
+  describe('Events', () => {
+    it('should trigger onClick when clicked', () => {
+      render(<VariableMenuItem {...defaultProps} />)
+      fireEvent.click(screen.getByTitle('Variable Name'))
+      expect(defaultProps.onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should trigger onMouseEnter when mouse enters', () => {
+      render(<VariableMenuItem {...defaultProps} />)
+      fireEvent.mouseEnter(screen.getByTitle('Variable Name'))
+      expect(defaultProps.onMouseEnter).toHaveBeenCalledTimes(1)
+    })
+
+    it('should prevent default and stop propagation onMouseDown', () => {
+      render(<VariableMenuItem {...defaultProps} />)
+      const mousedownEvent = new MouseEvent('mousedown', {
+        bubbles: true,
+        cancelable: true,
+      })
+      const preventDefaultSpy = vi.spyOn(mousedownEvent, 'preventDefault')
+      const stopPropagationSpy = vi.spyOn(mousedownEvent, 'stopPropagation')
+
+      fireEvent(screen.getByTitle('Variable Name'), mousedownEvent)
+
+      expect(preventDefaultSpy).toHaveBeenCalled()
+      expect(stopPropagationSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('Ref handling', () => {
+    it('should call setRefElement with the element', () => {
+      const setRefElement = vi.fn()
+      render(<VariableMenuItem {...defaultProps} setRefElement={setRefElement} />)
+
+      expect(setRefElement).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+    })
+  })
+})

From 2162cd1a69babf9f7a78c81d3e5e9de7f34f3d42 Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Tue, 24 Feb 2026 10:14:10 +0530
Subject: [PATCH 10/26] test(web): increase test coverage for components inside
 header folder (#32392)

---
 .../header/ maintenance-notice.spec.tsx       | 120 ++++++
 .../components/header/app-back/index.spec.tsx |  36 ++
 .../components/header/app-nav/index.spec.tsx  | 267 +++++++++++++
 .../header/app-selector/index.spec.tsx        | 171 ++++++++
 .../header/dataset-nav/index.spec.tsx         | 268 +++++++++++++
 .../components/header/env-nav/index.spec.tsx  |  52 +++
 .../header/explore-nav/index.spec.tsx         |  45 +++
 .../components/header/header-wrapper.spec.tsx | 112 ++++++
 web/app/components/header/index.spec.tsx      | 191 +++++++++
 .../header/indicator/index.spec.tsx           |  79 ++++
 .../header/license-env/index.spec.tsx         |  92 +++++
 web/app/components/header/nav/index.spec.tsx  | 376 ++++++++++++++++++
 .../header/nav/nav-selector/index.spec.tsx    | 308 ++++++++++++++
 .../header/plan-badge/index.spec.tsx          | 104 +++++
 .../header/plugins-nav/index.spec.tsx         | 112 ++++++
 .../header/tools-nav/index.spec.tsx           |  71 ++++
 16 files changed, 2404 insertions(+)
 create mode 100644 web/app/components/header/ maintenance-notice.spec.tsx
 create mode 100644 web/app/components/header/app-back/index.spec.tsx
 create mode 100644 web/app/components/header/app-nav/index.spec.tsx
 create mode 100644 web/app/components/header/app-selector/index.spec.tsx
 create mode 100644 web/app/components/header/dataset-nav/index.spec.tsx
 create mode 100644 web/app/components/header/env-nav/index.spec.tsx
 create mode 100644 web/app/components/header/explore-nav/index.spec.tsx
 create mode 100644 web/app/components/header/header-wrapper.spec.tsx
 create mode 100644 web/app/components/header/index.spec.tsx
 create mode 100644 web/app/components/header/indicator/index.spec.tsx
 create mode 100644 web/app/components/header/license-env/index.spec.tsx
 create mode 100644 web/app/components/header/nav/index.spec.tsx
 create mode 100644 web/app/components/header/nav/nav-selector/index.spec.tsx
 create mode 100644 web/app/components/header/plan-badge/index.spec.tsx
 create mode 100644 web/app/components/header/plugins-nav/index.spec.tsx
 create mode 100644 web/app/components/header/tools-nav/index.spec.tsx

diff --git a/web/app/components/header/ maintenance-notice.spec.tsx b/web/app/components/header/ maintenance-notice.spec.tsx
new file mode 100644
index 0000000000..157b03eb17
--- /dev/null
+++ b/web/app/components/header/ maintenance-notice.spec.tsx	
@@ -0,0 +1,120 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { NOTICE_I18N } from '@/i18n-config/language'
+import MaintenanceNotice from './maintenance-notice'
+
+vi.mock('@/app/components/base/icons/src/vender/line/general', () => ({
+  X: ({ onClick }: { onClick?: () => void }) => <button type="button" aria-label="close notice" onClick={onClick} />,
+}))
+
+vi.mock(
+  '@/app/components/header/account-setting/model-provider-page/hooks',
+  () => ({
+    useLanguage: vi.fn(),
+  }),
+)
+
+vi.mock('@/i18n-config/language', async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>
+  return {
+    ...actual,
+    NOTICE_I18N: {
+      title: {
+        en_US: 'Notice Title',
+        zh_Hans: '提示标题',
+      },
+      desc: {
+        en_US: 'Notice Description',
+        zh_Hans: '提示描述',
+      },
+      href: '#',
+    },
+  }
+})
+
+describe('MaintenanceNotice', () => {
+  const windowOpenSpy = vi
+    .spyOn(window, 'open')
+    .mockImplementation(() => null)
+  const setNoticeHref = (href: string) => {
+    NOTICE_I18N.href = href
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+    vi.mocked(useLanguage).mockReturnValue('en_US')
+    setNoticeHref('#')
+  })
+
+  afterAll(() => {
+    windowOpenSpy.mockRestore()
+  })
+
+  describe('Rendering', () => {
+    it('should render localized content correctly (English)', () => {
+      render(<MaintenanceNotice />)
+      expect(screen.getByText('Notice Title')).toBeInTheDocument()
+      expect(screen.getByText('Notice Description')).toBeInTheDocument()
+    })
+
+    it('should render localized content correctly (Chinese)', () => {
+      vi.mocked(useLanguage).mockReturnValue('zh_Hans')
+      render(<MaintenanceNotice />)
+      expect(screen.getByText('提示标题')).toBeInTheDocument()
+      expect(screen.getByText('提示描述')).toBeInTheDocument()
+    })
+
+    it('should not render when hidden in localStorage', () => {
+      localStorage.setItem('hide-maintenance-notice', '1')
+      const { container } = render(<MaintenanceNotice />)
+      expect(container.firstChild).toBeNull()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should close the notice when X is clicked', () => {
+      render(<MaintenanceNotice />)
+      expect(screen.getByText('Notice Title')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: /close notice/i }))
+
+      expect(screen.queryByText('Notice Title')).not.toBeInTheDocument()
+      expect(localStorage.getItem('hide-maintenance-notice')).toBe('1')
+    })
+
+    it('should jump to notice when description is clicked and href is valid', () => {
+      setNoticeHref('https://dify.ai/notice')
+      render(<MaintenanceNotice />)
+
+      const desc = screen.getByText('Notice Description')
+      fireEvent.click(desc)
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        'https://dify.ai/notice',
+        '_blank',
+      )
+    })
+
+    it('should not jump when href is #', () => {
+      setNoticeHref('#')
+      render(<MaintenanceNotice />)
+
+      const desc = screen.getByText('Notice Description')
+      fireEvent.click(desc)
+
+      expect(windowOpenSpy).not.toHaveBeenCalled()
+    })
+
+    it('should not jump when href is empty', () => {
+      setNoticeHref('')
+      render(<MaintenanceNotice />)
+
+      const desc = screen.getByText('Notice Description')
+      fireEvent.click(desc)
+
+      expect(windowOpenSpy).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/header/app-back/index.spec.tsx b/web/app/components/header/app-back/index.spec.tsx
new file mode 100644
index 0000000000..d80ae1240c
--- /dev/null
+++ b/web/app/components/header/app-back/index.spec.tsx
@@ -0,0 +1,36 @@
+import type { App } from '@/types/app'
+import { fireEvent, render, screen } from '@testing-library/react'
+import AppBack from './index'
+
+describe('AppBack', () => {
+  const mockApp = {
+    id: 'test-app',
+    name: 'Test App',
+  } as App
+
+  it('should render apps label', () => {
+    render(<AppBack curApp={mockApp} />)
+    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
+  })
+
+  it('should keep apps label visible while hovering', () => {
+    render(<AppBack curApp={mockApp} />)
+    const label = screen.getByText('common.menus.apps')
+
+    fireEvent.mouseEnter(label)
+    expect(label).toBeInTheDocument()
+    fireEvent.mouseLeave(label)
+    expect(label).toBeInTheDocument()
+  })
+
+  it('should render with different apps', () => {
+    const app1 = { id: 'app-1' } as App
+    const app2 = { id: 'app-2' } as App
+
+    const { rerender } = render(<AppBack curApp={app1} />)
+    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
+
+    rerender(<AppBack curApp={app2} />)
+    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/app-nav/index.spec.tsx b/web/app/components/header/app-nav/index.spec.tsx
new file mode 100644
index 0000000000..7dead323b5
--- /dev/null
+++ b/web/app/components/header/app-nav/index.spec.tsx
@@ -0,0 +1,267 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useParams } from 'next/navigation'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useAppContext } from '@/context/app-context'
+import { useInfiniteAppList } from '@/service/use-apps'
+import { AppModeEnum } from '@/types/app'
+import AppNav from './index'
+
+vi.mock('next/navigation', () => ({
+  useParams: vi.fn(),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: vi.fn(),
+}))
+
+vi.mock('@/service/use-apps', () => ({
+  useInfiniteAppList: vi.fn(),
+}))
+
+vi.mock('@/app/components/app/create-app-dialog', () => ({
+  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
+    show
+      ? (
+          <button
+            type="button"
+            data-testid="create-app-template-dialog"
+            onClick={() => {
+              onClose()
+              onSuccess()
+            }}
+          >
+            Create Template
+          </button>
+        )
+      : null,
+}))
+
+vi.mock('@/app/components/app/create-app-modal', () => ({
+  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
+    show
+      ? (
+          <button
+            type="button"
+            data-testid="create-app-modal"
+            onClick={() => {
+              onClose()
+              onSuccess()
+            }}
+          >
+            Create App
+          </button>
+        )
+      : null,
+}))
+
+vi.mock('@/app/components/app/create-from-dsl-modal', () => ({
+  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
+    show
+      ? (
+          <button
+            type="button"
+            data-testid="create-from-dsl-modal"
+            onClick={() => {
+              onClose()
+              onSuccess()
+            }}
+          >
+            Create from DSL
+          </button>
+        )
+      : null,
+}))
+
+vi.mock('../nav', () => ({
+  default: ({
+    onCreate,
+    onLoadMore,
+    navigationItems,
+  }: {
+    onCreate: (state: string) => void
+    onLoadMore?: () => void
+    navigationItems?: Array<{ id: string, name: string, link: string }>
+  }) => (
+    <div data-testid="nav">
+      <ul data-testid="nav-items">
+        {(navigationItems ?? []).map(item => (
+          <li key={item.id}>{`${item.name} -> ${item.link}`}</li>
+        ))}
+      </ul>
+      <button type="button" onClick={() => onCreate('blank')} data-testid="create-blank">
+        Create Blank
+      </button>
+      <button type="button" onClick={() => onCreate('template')} data-testid="create-template">
+        Create Template
+      </button>
+      <button type="button" onClick={() => onCreate('dsl')} data-testid="create-dsl">
+        Create DSL
+      </button>
+      <button type="button" onClick={onLoadMore} data-testid="load-more">
+        Load More
+      </button>
+    </div>
+  ),
+}))
+
+const mockAppData = [
+  {
+    id: 'app-1',
+    name: 'App 1',
+    mode: AppModeEnum.AGENT_CHAT,
+    icon_type: 'emoji',
+    icon: '🤖',
+    icon_background: null,
+    icon_url: null,
+  },
+]
+
+const mockUseParams = vi.mocked(useParams)
+const mockUseAppContext = vi.mocked(useAppContext)
+const mockUseAppStore = vi.mocked(useAppStore)
+const mockUseInfiniteAppList = vi.mocked(useInfiniteAppList)
+let mockAppDetail: { id: string, name: string } | null = null
+
+const setupDefaultMocks = (options?: {
+  hasNextPage?: boolean
+  refetch?: () => void
+  fetchNextPage?: () => void
+  isEditor?: boolean
+  appData?: typeof mockAppData
+}) => {
+  const refetch = options?.refetch ?? vi.fn()
+  const fetchNextPage = options?.fetchNextPage ?? vi.fn()
+
+  mockUseParams.mockReturnValue({ appId: 'app-1' } as ReturnType<typeof useParams>)
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceEditor: options?.isEditor ?? false } as ReturnType<typeof useAppContext>)
+  mockUseAppStore.mockImplementation((selector: unknown) => (selector as (state: { appDetail: { id: string, name: string } | null }) => unknown)({ appDetail: mockAppDetail }))
+  mockUseInfiniteAppList.mockReturnValue({
+    data: { pages: [{ data: options?.appData ?? mockAppData }] },
+    fetchNextPage,
+    hasNextPage: options?.hasNextPage ?? false,
+    isFetchingNextPage: false,
+    refetch,
+  } as ReturnType<typeof useInfiniteAppList>)
+
+  return { refetch, fetchNextPage }
+}
+
+describe('AppNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockAppDetail = null
+    setupDefaultMocks()
+  })
+
+  it('should build editor links and update app name when app detail changes', async () => {
+    setupDefaultMocks({
+      isEditor: true,
+      appData: [
+        {
+          id: 'app-1',
+          name: 'App 1',
+          mode: AppModeEnum.AGENT_CHAT,
+          icon_type: 'emoji',
+          icon: '🤖',
+          icon_background: null,
+          icon_url: null,
+        },
+        {
+          id: 'app-2',
+          name: 'App 2',
+          mode: AppModeEnum.WORKFLOW,
+          icon_type: 'emoji',
+          icon: '⚙️',
+          icon_background: null,
+          icon_url: null,
+        },
+      ],
+    })
+
+    const { rerender } = render(<AppNav />)
+
+    expect(screen.getByText('App 1 -> /app/app-1/configuration')).toBeInTheDocument()
+    expect(screen.getByText('App 2 -> /app/app-2/workflow')).toBeInTheDocument()
+
+    mockAppDetail = { id: 'app-1', name: 'Updated App Name' }
+    rerender(<AppNav />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Updated App Name -> /app/app-1/configuration')).toBeInTheDocument()
+    })
+  })
+
+  it('should open and close create app modal, then refetch', async () => {
+    const user = userEvent.setup()
+    const { refetch } = setupDefaultMocks()
+    render(<AppNav />)
+
+    await user.click(screen.getByTestId('create-blank'))
+    expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+    await user.click(screen.getByTestId('create-app-modal'))
+    await waitFor(() => {
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(refetch).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should open and close template modal, then refetch', async () => {
+    const user = userEvent.setup()
+    const { refetch } = setupDefaultMocks()
+    render(<AppNav />)
+
+    await user.click(screen.getByTestId('create-template'))
+    expect(screen.getByTestId('create-app-template-dialog')).toBeInTheDocument()
+
+    await user.click(screen.getByTestId('create-app-template-dialog'))
+    await waitFor(() => {
+      expect(screen.queryByTestId('create-app-template-dialog')).not.toBeInTheDocument()
+      expect(refetch).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should open and close DSL modal, then refetch', async () => {
+    const user = userEvent.setup()
+    const { refetch } = setupDefaultMocks()
+    render(<AppNav />)
+
+    await user.click(screen.getByTestId('create-dsl'))
+    expect(screen.getByTestId('create-from-dsl-modal')).toBeInTheDocument()
+
+    await user.click(screen.getByTestId('create-from-dsl-modal'))
+    await waitFor(() => {
+      expect(screen.queryByTestId('create-from-dsl-modal')).not.toBeInTheDocument()
+      expect(refetch).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should load more when user clicks load more and more data is available', async () => {
+    const user = userEvent.setup()
+    const { fetchNextPage } = setupDefaultMocks({ hasNextPage: true })
+    render(<AppNav />)
+
+    await user.click(screen.getByTestId('load-more'))
+    expect(fetchNextPage).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not load more when user clicks load more and no data is available', async () => {
+    const user = userEvent.setup()
+    const { fetchNextPage } = setupDefaultMocks({ hasNextPage: false })
+    render(<AppNav />)
+
+    await user.click(screen.getByTestId('load-more'))
+    expect(fetchNextPage).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/header/app-selector/index.spec.tsx b/web/app/components/header/app-selector/index.spec.tsx
new file mode 100644
index 0000000000..f301de4580
--- /dev/null
+++ b/web/app/components/header/app-selector/index.spec.tsx
@@ -0,0 +1,171 @@
+import type { AppDetailResponse } from '@/models/app'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import { vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
+import AppSelector from './index'
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+}))
+
+// Mock app context
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+// Mock CreateAppDialog to avoid complex dependencies
+vi.mock('@/app/components/app/create-app-dialog', () => ({
+  default: ({ show, onClose }: { show: boolean, onClose: () => void }) => show
+    ? (
+        <div data-testid="create-app-dialog">
+          <button onClick={onClose}>Close</button>
+        </div>
+      )
+    : null,
+}))
+
+describe('AppSelector Component', () => {
+  const mockPush = vi.fn()
+  const mockAppItems = [
+    { id: '1', name: 'App 1' },
+    { id: '2', name: 'App 2' },
+  ] as unknown as AppDetailResponse[]
+  const mockCurApp = mockAppItems[0]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useRouter).mockReturnValue({
+      push: mockPush,
+    } as unknown as ReturnType<typeof useRouter>)
+    vi.mocked(useAppContext).mockReturnValue({
+      isCurrentWorkspaceEditor: true,
+    } as unknown as ReturnType<typeof useAppContext>)
+  })
+
+  describe('Rendering', () => {
+    it('should render current app name', () => {
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+      expect(screen.getByText('App 1')).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should open menu and show app items', async () => {
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      expect(screen.getByText('App 2')).toBeInTheDocument()
+    })
+
+    it('should navigate to configuration when an app is clicked and user is editor', async () => {
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const app2Item = screen.getByText('App 2')
+      await act(async () => {
+        fireEvent.click(app2Item)
+      })
+
+      expect(mockPush).toHaveBeenCalledWith('/app/2/configuration')
+    })
+
+    it('should navigate to overview when an app is clicked and user is not editor', async () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        isCurrentWorkspaceEditor: false,
+      } as unknown as ReturnType<typeof useAppContext>)
+
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const app2Item = screen.getByText('App 2')
+      await act(async () => {
+        fireEvent.click(app2Item)
+      })
+
+      expect(mockPush).toHaveBeenCalledWith('/app/2/overview')
+    })
+  })
+
+  describe('New App Dialog', () => {
+    it('should show "New App" button for editor and open dialog', async () => {
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const newAppBtn = screen.getByText('common.menus.newApp')
+      await act(async () => {
+        fireEvent.click(newAppBtn)
+      })
+
+      expect(screen.getByTestId('create-app-dialog')).toBeInTheDocument()
+    })
+
+    it('should not show "New App" button for non-editor', async () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        isCurrentWorkspaceEditor: false,
+      } as unknown as ReturnType<typeof useAppContext>)
+
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      expect(screen.queryByText('common.menus.newApp')).not.toBeInTheDocument()
+    })
+
+    it('should close dialog when onClose is called', async () => {
+      render(<AppSelector appItems={mockAppItems} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const newAppBtn = screen.getByText('common.menus.newApp')
+      await act(async () => {
+        fireEvent.click(newAppBtn)
+      })
+
+      const closeBtn = screen.getByText('Close')
+      await act(async () => {
+        fireEvent.click(closeBtn)
+      })
+
+      expect(screen.queryByTestId('create-app-dialog')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render nothing in menu if appItems is empty', async () => {
+      render(<AppSelector appItems={[]} curApp={mockCurApp} />)
+
+      const button = screen.getByRole('button', { name: /App 1/i })
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      expect(screen.queryByText('App 2')).not.toBeInTheDocument()
+      // "New App" should still be there if editor
+      expect(screen.getByText('common.menus.newApp')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/header/dataset-nav/index.spec.tsx b/web/app/components/header/dataset-nav/index.spec.tsx
new file mode 100644
index 0000000000..8c1b5952a7
--- /dev/null
+++ b/web/app/components/header/dataset-nav/index.spec.tsx
@@ -0,0 +1,268 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react'
+import {
+  useParams,
+  useRouter,
+  useSelectedLayoutSegment,
+} from 'next/navigation'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
+import {
+  useDatasetDetail,
+  useDatasetList,
+} from '@/service/knowledge/use-dataset'
+import DatasetNav from './index'
+
+vi.mock('next/navigation', () => ({
+  useParams: vi.fn(),
+  useRouter: vi.fn(),
+  useSelectedLayoutSegment: vi.fn(),
+}))
+
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useDatasetDetail: vi.fn(),
+  useDatasetList: vi.fn(),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+vi.mock('@remixicon/react', () => ({
+  RiBook2Fill: () => <div data-testid="active-icon" />,
+  RiBook2Line: () => <div data-testid="inactive-icon" />,
+  RiArrowDownSLine: () => <div data-testid="arrow-down-icon" />,
+  RiArrowRightSLine: () => <div data-testid="arrow-right-icon" />,
+  RiAddLine: () => <div data-testid="add-icon" />,
+}))
+
+vi.mock('@/app/components/base/loading', () => ({
+  default: () => <div data-testid="loading" />,
+}))
+
+vi.mock('@/app/components/base/app-icon', () => ({
+  default: () => <div data-testid="app-icon" />,
+}))
+
+vi.mock('@/app/components/app/type-selector', () => ({
+  AppTypeIcon: () => <div data-testid="app-type-icon" />,
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/line/arrows', () => ({
+  ArrowNarrowLeft: () => <div data-testid="arrow-left-icon" />,
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/line/files', () => ({
+  FileArrow01: () => <div data-testid="file-arrow-icon" />,
+  FilePlus01: () => <div data-testid="file-plus-1-icon" />,
+  FilePlus02: () => <div data-testid="file-plus-2-icon" />,
+}))
+
+describe('DatasetNav', () => {
+  const mockPush = vi.fn()
+  const mockFetchNextPage = vi.fn()
+
+  const mockDataset = {
+    id: 'dataset-1',
+    name: 'Test Dataset',
+    runtime_mode: 'general',
+    icon_info: {
+      icon: 'book',
+      icon_type: 'image',
+      icon_background: '#fff',
+      icon_url: '/url',
+    },
+    provider: 'vendor',
+  }
+
+  const mockDatasetList = {
+    pages: [
+      {
+        data: [
+          mockDataset,
+          {
+            id: 'dataset-2',
+            name: 'Pipeline Dataset',
+            runtime_mode: 'rag_pipeline',
+            is_published: false,
+            icon_info: { icon: 'pipeline' },
+            provider: 'vendor',
+          },
+          {
+            id: 'dataset-3',
+            name: 'External Dataset',
+            runtime_mode: 'general',
+            icon_info: { icon: 'external' },
+            provider: 'external',
+          },
+          {
+            id: 'dataset-4',
+            name: 'Published Pipeline',
+            runtime_mode: 'rag_pipeline',
+            is_published: true,
+            icon_info: { icon: 'pipeline' },
+            provider: 'vendor',
+          },
+        ],
+      },
+    ],
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useRouter).mockReturnValue({
+      push: mockPush,
+    } as unknown as ReturnType<typeof useRouter>)
+    vi.mocked(useParams).mockReturnValue({ datasetId: 'dataset-1' })
+    vi.mocked(useSelectedLayoutSegment).mockReturnValue('datasets')
+    vi.mocked(useDatasetDetail).mockReturnValue({
+      data: mockDataset,
+    } as unknown as ReturnType<typeof useDatasetDetail>)
+    vi.mocked(useDatasetList).mockReturnValue({
+      data: mockDatasetList,
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+    } as unknown as ReturnType<typeof useDatasetList>)
+    vi.mocked(useAppContext).mockReturnValue({
+      isCurrentWorkspaceEditor: true,
+    } as unknown as ReturnType<typeof useAppContext>)
+  })
+
+  describe('Rendering', () => {
+    it('should render the navigation component', () => {
+      render(<DatasetNav />)
+      expect(screen.getByText('common.menus.datasets')).toBeInTheDocument()
+    })
+
+    it('should render without current dataset correctly', () => {
+      vi.mocked(useDatasetDetail).mockReturnValue({
+        data: undefined,
+      } as unknown as ReturnType<typeof useDatasetDetail>)
+      render(<DatasetNav />)
+      expect(screen.getByText('common.menus.datasets')).toBeInTheDocument()
+    })
+  })
+
+  describe('Navigation Items logic', () => {
+    it('should generate correct links for different dataset types', () => {
+      render(<DatasetNav />)
+
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      expect(within(menu).getByText('Test Dataset')).toBeInTheDocument()
+      expect(within(menu).getByText('Pipeline Dataset')).toBeInTheDocument()
+      expect(within(menu).getByText('External Dataset')).toBeInTheDocument()
+    })
+
+    it('should navigate to correct link when an item is clicked', () => {
+      render(<DatasetNav />)
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      const pipelineItem = within(menu).getByText('Pipeline Dataset')
+      fireEvent.click(pipelineItem)
+
+      // dataset-2 is rag_pipeline and not published -> /datasets/dataset-2/pipeline
+      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-2/pipeline')
+
+      fireEvent.click(selector)
+      const menu2 = screen.getByRole('menu')
+      const externalItem = within(menu2).getByText('External Dataset')
+      fireEvent.click(externalItem)
+      // dataset-3 is provider external -> /datasets/dataset-3/hitTesting
+      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-3/hitTesting')
+
+      fireEvent.click(selector)
+      const menu3 = screen.getByRole('menu')
+      const publishedItem = within(menu3).getByText('Published Pipeline')
+      fireEvent.click(publishedItem)
+      // dataset-4 is rag_pipeline and published -> /datasets/dataset-4/documents
+      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-4/documents')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call router.push with correct path when creating a general dataset', () => {
+      render(<DatasetNav />)
+
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      const createBtn = within(menu).getByText('common.menus.newDataset')
+      fireEvent.click(createBtn)
+
+      expect(mockPush).toHaveBeenCalledWith('/datasets/create')
+    })
+
+    it('should call router.push with correct path when creating a pipeline dataset', () => {
+      vi.mocked(useDatasetDetail).mockReturnValue({
+        data: { ...mockDataset, runtime_mode: 'rag_pipeline' },
+      } as unknown as ReturnType<typeof useDatasetDetail>)
+
+      render(<DatasetNav />)
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      const createBtn = within(menu).getByText('common.menus.newDataset')
+      fireEvent.click(createBtn)
+
+      expect(mockPush).toHaveBeenCalledWith('/datasets/create-from-pipeline')
+    })
+
+    it('should trigger fetchNextPage when loading more', () => {
+      vi.useFakeTimers()
+      render(<DatasetNav />)
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      const scrollContainer = menu.querySelector('.overflow-auto')
+      if (scrollContainer) {
+        Object.defineProperty(scrollContainer, 'scrollHeight', { value: 1000 })
+        Object.defineProperty(scrollContainer, 'clientHeight', { value: 500 })
+        Object.defineProperty(scrollContainer, 'scrollTop', { value: 500 })
+
+        fireEvent.scroll(scrollContainer)
+        act(() => {
+          vi.advanceTimersByTime(100)
+        })
+        expect(mockFetchNextPage).toHaveBeenCalled()
+      }
+      vi.useRealTimers()
+    })
+
+    it('should not trigger fetchNextPage if hasNextPage is false', () => {
+      vi.useFakeTimers()
+      vi.mocked(useDatasetList).mockReturnValue({
+        data: mockDatasetList,
+        fetchNextPage: mockFetchNextPage,
+        hasNextPage: false,
+        isFetchingNextPage: false,
+      } as unknown as ReturnType<typeof useDatasetList>)
+
+      render(<DatasetNav />)
+      const selector = screen.getByRole('button', { name: /Test Dataset/i })
+      fireEvent.click(selector)
+
+      const menu = screen.getByRole('menu')
+      const scrollContainer = menu.querySelector('.overflow-auto')
+      if (scrollContainer) {
+        Object.defineProperty(scrollContainer, 'scrollHeight', { value: 1000 })
+        Object.defineProperty(scrollContainer, 'clientHeight', { value: 500 })
+        Object.defineProperty(scrollContainer, 'scrollTop', { value: 500 })
+
+        fireEvent.scroll(scrollContainer)
+        act(() => {
+          vi.advanceTimersByTime(100)
+        })
+        expect(mockFetchNextPage).not.toHaveBeenCalled()
+      }
+      vi.useRealTimers()
+    })
+  })
+})
diff --git a/web/app/components/header/env-nav/index.spec.tsx b/web/app/components/header/env-nav/index.spec.tsx
new file mode 100644
index 0000000000..2b13af1016
--- /dev/null
+++ b/web/app/components/header/env-nav/index.spec.tsx
@@ -0,0 +1,52 @@
+import type { AppContextValue } from '@/context/app-context'
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
+import EnvNav from './index'
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+describe('EnvNav', () => {
+  const mockUseAppContext = vi.mocked(useAppContext)
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render null when environment is PRODUCTION', () => {
+    mockUseAppContext.mockReturnValue({
+      langGeniusVersionInfo: {
+        current_env: 'PRODUCTION',
+      },
+    } as unknown as AppContextValue)
+
+    const { container } = render(<EnvNav />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render TESTING tag and icon when environment is TESTING', () => {
+    mockUseAppContext.mockReturnValue({
+      langGeniusVersionInfo: {
+        current_env: 'TESTING',
+      },
+    } as unknown as AppContextValue)
+
+    render(<EnvNav />)
+    expect(screen.getByText('common.environment.testing')).toBeInTheDocument()
+  })
+
+  it('should render DEVELOPMENT tag and icon when environment is DEVELOPMENT', () => {
+    mockUseAppContext.mockReturnValue({
+      langGeniusVersionInfo: {
+        current_env: 'DEVELOPMENT',
+      },
+    } as unknown as AppContextValue)
+
+    render(<EnvNav />)
+    expect(
+      screen.getByText('common.environment.development'),
+    ).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/explore-nav/index.spec.tsx b/web/app/components/header/explore-nav/index.spec.tsx
new file mode 100644
index 0000000000..65a3f88f5e
--- /dev/null
+++ b/web/app/components/header/explore-nav/index.spec.tsx
@@ -0,0 +1,45 @@
+import type { Mock } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import ExploreNav from './index'
+
+vi.mock('next/navigation', () => ({
+  useSelectedLayoutSegment: vi.fn(),
+}))
+
+describe('ExploreNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render correctly when not active', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
+    render(<ExploreNav />)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/explore/apps')
+    expect(link).toHaveClass('text-components-main-nav-nav-button-text')
+    expect(link).not.toHaveClass('bg-components-main-nav-nav-button-bg-active')
+    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
+  })
+
+  it('should render correctly when active', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('explore')
+    render(<ExploreNav />)
+
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveClass('bg-components-main-nav-nav-button-bg-active')
+    expect(link).toHaveClass('text-components-main-nav-nav-button-text-active')
+    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
+  })
+
+  it('should apply custom className', () => {
+    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
+    render(<ExploreNav className="custom-test-class" />)
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('custom-test-class')
+  })
+})
diff --git a/web/app/components/header/header-wrapper.spec.tsx b/web/app/components/header/header-wrapper.spec.tsx
new file mode 100644
index 0000000000..80ddb14965
--- /dev/null
+++ b/web/app/components/header/header-wrapper.spec.tsx
@@ -0,0 +1,112 @@
+import { act, render, screen } from '@testing-library/react'
+import { usePathname } from 'next/navigation'
+import { vi } from 'vitest'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import HeaderWrapper from './header-wrapper'
+
+vi.mock('next/navigation', () => ({
+  usePathname: vi.fn(),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: vi.fn(),
+}))
+
+describe('HeaderWrapper', () => {
+  type CanvasEvent = { type: string, payload: boolean }
+  let subscriptionCallback: ((event: CanvasEvent) => void) | null = null
+  const mockUseSubscription = vi.fn<(callback: (event: CanvasEvent) => void) => void>((callback) => {
+    subscriptionCallback = callback
+  })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+    subscriptionCallback = null
+    vi.mocked(usePathname).mockReturnValue('/test')
+    vi.mocked(useEventEmitterContextContext).mockReturnValue({
+      eventEmitter: { useSubscription: mockUseSubscription },
+    } as never)
+  })
+
+  it('should render children correctly', () => {
+    render(
+      <HeaderWrapper>
+        <div data-testid="child">Test Child</div>
+      </HeaderWrapper>,
+    )
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+    expect(screen.getByText('Test Child')).toBeInTheDocument()
+  })
+
+  it('should keep children mounted when workflow maximize events are emitted', () => {
+    vi.mocked(usePathname).mockReturnValue('/some/path/workflow')
+    render(
+      <HeaderWrapper>
+        <div>Workflow Content</div>
+      </HeaderWrapper>,
+    )
+
+    act(() => {
+      subscriptionCallback?.({ type: 'workflow-canvas-maximize', payload: true })
+      subscriptionCallback?.({ type: 'workflow-canvas-maximize', payload: false })
+    })
+
+    expect(screen.getByText('Workflow Content')).toBeInTheDocument()
+  })
+
+  it('should keep children mounted on pipeline routes when maximize is enabled from storage', () => {
+    vi.mocked(usePathname).mockReturnValue('/some/path/pipeline')
+    localStorage.setItem('workflow-canvas-maximize', 'true')
+
+    render(
+      <HeaderWrapper>
+        <div>Pipeline Content</div>
+      </HeaderWrapper>,
+    )
+
+    expect(screen.getByText('Pipeline Content')).toBeInTheDocument()
+  })
+
+  it('should keep children mounted on non-canvas routes when maximize is enabled from storage', () => {
+    vi.mocked(usePathname).mockReturnValue('/apps')
+    localStorage.setItem('workflow-canvas-maximize', 'true')
+
+    render(
+      <HeaderWrapper>
+        <div>App Content</div>
+      </HeaderWrapper>,
+    )
+
+    expect(screen.getByText('App Content')).toBeInTheDocument()
+  })
+
+  it('should keep children mounted when unrelated events are emitted', () => {
+    vi.mocked(usePathname).mockReturnValue('/some/path/workflow')
+    render(
+      <HeaderWrapper>
+        <div>Workflow Content</div>
+      </HeaderWrapper>,
+    )
+
+    act(() => {
+      subscriptionCallback?.({ type: 'other-event', payload: true })
+    })
+
+    expect(screen.getByText('Workflow Content')).toBeInTheDocument()
+  })
+
+  it('should render children when eventEmitter is unavailable', () => {
+    vi.mocked(useEventEmitterContextContext).mockReturnValue({
+      eventEmitter: undefined,
+    } as never)
+
+    render(
+      <HeaderWrapper>
+        <div>Content Without Emitter</div>
+      </HeaderWrapper>,
+    )
+
+    expect(screen.getByText('Content Without Emitter')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/index.spec.tsx b/web/app/components/header/index.spec.tsx
new file mode 100644
index 0000000000..2d5ce50fb8
--- /dev/null
+++ b/web/app/components/header/index.spec.tsx
@@ -0,0 +1,191 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import Header from './index'
+
+function createMockComponent(testId: string) {
+  return () => <div data-testid={testId} />
+}
+
+vi.mock('@/app/components/base/logo/dify-logo', () => ({
+  default: createMockComponent('dify-logo'),
+}))
+
+vi.mock('@/app/components/header/account-dropdown/workplace-selector', () => ({
+  default: createMockComponent('workplace-selector'),
+}))
+
+vi.mock('@/app/components/header/account-dropdown', () => ({
+  default: createMockComponent('account-dropdown'),
+}))
+
+vi.mock('@/app/components/header/app-nav', () => ({
+  default: createMockComponent('app-nav'),
+}))
+
+vi.mock('@/app/components/header/dataset-nav', () => ({
+  default: createMockComponent('dataset-nav'),
+}))
+
+vi.mock('@/app/components/header/env-nav', () => ({
+  default: createMockComponent('env-nav'),
+}))
+
+vi.mock('@/app/components/header/explore-nav', () => ({
+  default: createMockComponent('explore-nav'),
+}))
+
+vi.mock('@/app/components/header/license-env', () => ({
+  default: createMockComponent('license-nav'),
+}))
+
+vi.mock('@/app/components/header/plugins-nav', () => ({
+  default: createMockComponent('plugins-nav'),
+}))
+
+vi.mock('@/app/components/header/tools-nav', () => ({
+  default: createMockComponent('tools-nav'),
+}))
+
+vi.mock('@/app/components/header/plan-badge', () => ({
+  default: ({ onClick, plan }: { onClick?: () => void, plan?: string }) => (
+    <button data-testid="plan-badge" onClick={onClick} data-plan={plan} />
+  ),
+}))
+
+vi.mock('@/context/workspace-context', () => ({
+  WorkspaceProvider: ({ children }: { children?: React.ReactNode }) => children,
+}))
+
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children?: React.ReactNode, href?: string }) => <a href={href}>{children}</a>,
+}))
+
+let mockIsWorkspaceEditor = false
+let mockIsDatasetOperator = false
+let mockMedia = 'desktop'
+let mockEnableBilling = false
+let mockPlanType = 'sandbox'
+let mockBrandingEnabled = false
+let mockBrandingTitle: string | null = null
+let mockBrandingLogo: string | null = null
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: mockIsWorkspaceEditor,
+    isCurrentWorkspaceDatasetOperator: mockIsDatasetOperator,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => mockMedia,
+  MediaType: { mobile: 'mobile', tablet: 'tablet', desktop: 'desktop' },
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    enableBilling: mockEnableBilling,
+    plan: { type: mockPlanType },
+  }),
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+vi.mock('@/context/global-public-context', () => {
+  type SystemFeatures = { branding: { enabled: boolean, application_title: string | null, workspace_logo: string | null } }
+  return {
+    useGlobalPublicStore: (selector: (s: { systemFeatures: SystemFeatures }) => SystemFeatures) =>
+      selector({
+        systemFeatures: {
+          branding: {
+            enabled: mockBrandingEnabled,
+            application_title: mockBrandingTitle,
+            workspace_logo: mockBrandingLogo,
+          },
+        },
+      }),
+  }
+})
+
+describe('Header', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsWorkspaceEditor = false
+    mockIsDatasetOperator = false
+    mockMedia = 'desktop'
+    mockEnableBilling = false
+    mockPlanType = 'sandbox'
+    mockBrandingEnabled = false
+    mockBrandingTitle = null
+    mockBrandingLogo = null
+  })
+
+  it('should render header with main nav components', () => {
+    render(<Header />)
+
+    expect(screen.getByTestId('dify-logo')).toBeInTheDocument()
+    expect(screen.getByTestId('workplace-selector')).toBeInTheDocument()
+    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
+    expect(screen.getByTestId('account-dropdown')).toBeInTheDocument()
+  })
+
+  it('should show license nav when billing disabled, plan badge when enabled', () => {
+    mockEnableBilling = false
+    const { rerender } = render(<Header />)
+    expect(screen.getByTestId('license-nav')).toBeInTheDocument()
+    expect(screen.queryByTestId('plan-badge')).not.toBeInTheDocument()
+
+    mockEnableBilling = true
+    rerender(<Header />)
+    expect(screen.queryByTestId('license-nav')).not.toBeInTheDocument()
+    expect(screen.getByTestId('plan-badge')).toBeInTheDocument()
+  })
+
+  it('should hide explore nav when user is dataset operator', () => {
+    mockIsDatasetOperator = true
+    render(<Header />)
+
+    expect(screen.queryByTestId('explore-nav')).not.toBeInTheDocument()
+    expect(screen.getByTestId('dataset-nav')).toBeInTheDocument()
+  })
+
+  it('should call pricing modal for free plan, settings modal for paid plan', () => {
+    mockEnableBilling = true
+    mockPlanType = 'sandbox'
+    const { rerender } = render(<Header />)
+
+    fireEvent.click(screen.getByTestId('plan-badge'))
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+
+    mockPlanType = 'professional'
+    rerender(<Header />)
+    fireEvent.click(screen.getByTestId('plan-badge'))
+    expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should render mobile layout without env nav', () => {
+    mockMedia = 'mobile'
+    render(<Header />)
+
+    expect(screen.getByTestId('dify-logo')).toBeInTheDocument()
+    expect(screen.queryByTestId('env-nav')).not.toBeInTheDocument()
+  })
+
+  it('should render branded title and logo when branding is enabled', () => {
+    mockBrandingEnabled = true
+    mockBrandingTitle = 'Acme Workspace'
+    mockBrandingLogo = '/logo.png'
+
+    render(<Header />)
+
+    expect(screen.getByText('Acme Workspace')).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: /logo/i })).toBeInTheDocument()
+    expect(screen.queryByTestId('dify-logo')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/indicator/index.spec.tsx b/web/app/components/header/indicator/index.spec.tsx
new file mode 100644
index 0000000000..b5921d8fc0
--- /dev/null
+++ b/web/app/components/header/indicator/index.spec.tsx
@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import Indicator from './index'
+
+describe('Indicator', () => {
+  it('should render with default props', () => {
+    render(<Indicator />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toBeInTheDocument()
+    expect(indicator).toHaveClass(
+      'bg-components-badge-status-light-success-bg',
+    )
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-success-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-green-shadow')
+  })
+
+  it('should render with orange color', () => {
+    render(<Indicator color="orange" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass(
+      'bg-components-badge-status-light-warning-bg',
+    )
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-warning-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-warning-shadow')
+  })
+
+  it('should render with red color', () => {
+    render(<Indicator color="red" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass('bg-components-badge-status-light-error-bg')
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-error-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-red-shadow')
+  })
+
+  it('should render with blue color', () => {
+    render(<Indicator color="blue" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass('bg-components-badge-status-light-normal-bg')
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-normal-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-blue-shadow')
+  })
+
+  it('should render with yellow color', () => {
+    render(<Indicator color="yellow" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass(
+      'bg-components-badge-status-light-warning-bg',
+    )
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-warning-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-warning-shadow')
+  })
+
+  it('should render with gray color', () => {
+    render(<Indicator color="gray" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass(
+      'bg-components-badge-status-light-disabled-bg',
+    )
+    expect(indicator).toHaveClass(
+      'border-components-badge-status-light-disabled-border-inner',
+    )
+    expect(indicator).toHaveClass('shadow-status-indicator-gray-shadow')
+  })
+
+  it('should apply custom className', () => {
+    render(<Indicator className="custom-class" />)
+    const indicator = screen.getByTestId('status-indicator')
+    expect(indicator).toHaveClass('custom-class')
+  })
+})
diff --git a/web/app/components/header/license-env/index.spec.tsx b/web/app/components/header/license-env/index.spec.tsx
new file mode 100644
index 0000000000..df3559909b
--- /dev/null
+++ b/web/app/components/header/license-env/index.spec.tsx
@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react'
+import dayjs from 'dayjs'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { defaultSystemFeatures, LicenseStatus } from '@/types/feature'
+import LicenseNav from './index'
+
+describe('LicenseNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    const now = new Date('2024-01-01T12:00:00Z')
+    vi.setSystemTime(now)
+    useGlobalPublicStore.setState({
+      systemFeatures: defaultSystemFeatures,
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should render null when license status is NONE', () => {
+    const { container } = render(<LicenseNav />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render Enterprise badge when license status is ACTIVE', () => {
+    useGlobalPublicStore.setState({
+      systemFeatures: {
+        ...defaultSystemFeatures,
+        license: {
+          status: LicenseStatus.ACTIVE,
+          expired_at: null,
+        },
+      },
+    })
+
+    render(<LicenseNav />)
+    expect(screen.getByText('Enterprise')).toBeInTheDocument()
+  })
+
+  it('should render singular expiring message when license expires in 0 days', () => {
+    const expiredAt = dayjs().add(2, 'hours').toISOString()
+    useGlobalPublicStore.setState({
+      systemFeatures: {
+        ...defaultSystemFeatures,
+        license: {
+          status: LicenseStatus.EXPIRING,
+          expired_at: expiredAt,
+        },
+      },
+    })
+
+    render(<LicenseNav />)
+    expect(screen.getByText(/license\.expiring/)).toBeInTheDocument()
+    expect(screen.getByText(/count":0/)).toBeInTheDocument()
+  })
+
+  it('should render singular expiring message when license expires in 1 day', () => {
+    const tomorrow = dayjs().add(1, 'day').add(1, 'hour').toISOString()
+    useGlobalPublicStore.setState({
+      systemFeatures: {
+        ...defaultSystemFeatures,
+        license: {
+          status: LicenseStatus.EXPIRING,
+          expired_at: tomorrow,
+        },
+      },
+    })
+
+    render(<LicenseNav />)
+    expect(screen.getByText(/license\.expiring/)).toBeInTheDocument()
+    expect(screen.getByText(/count":1/)).toBeInTheDocument()
+  })
+
+  it('should render plural expiring message when license expires in 5 days', () => {
+    const fiveDaysLater = dayjs().add(5, 'day').add(1, 'hour').toISOString()
+    useGlobalPublicStore.setState({
+      systemFeatures: {
+        ...defaultSystemFeatures,
+        license: {
+          status: LicenseStatus.EXPIRING,
+          expired_at: fiveDaysLater,
+        },
+      },
+    })
+
+    render(<LicenseNav />)
+    expect(screen.getByText(/license\.expiring_plural/)).toBeInTheDocument()
+    expect(screen.getByText(/count":5/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/nav/index.spec.tsx b/web/app/components/header/nav/index.spec.tsx
new file mode 100644
index 0000000000..ab530a4a86
--- /dev/null
+++ b/web/app/components/header/nav/index.spec.tsx
@@ -0,0 +1,376 @@
+import type { NavItem } from './nav-selector'
+import type { AppContextValue } from '@/context/app-context'
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
+import { useRouter, useSelectedLayoutSegment } from 'next/navigation'
+import * as React from 'react'
+import { vi } from 'vitest'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useAppContext } from '@/context/app-context'
+import { AppModeEnum } from '@/types/app'
+import Nav from './index'
+
+vi.mock('@headlessui/react', () => {
+  type MenuContextValue = { open: boolean, setOpen: (open: boolean) => void }
+  const MenuContext = React.createContext<MenuContextValue | null>(null)
+
+  const Menu = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
+    const [open, setOpen] = React.useState(false)
+    const value = React.useMemo(() => ({ open, setOpen }), [open])
+    return (
+      <MenuContext.Provider value={value}>
+        {typeof children === 'function' ? children({ open }) : 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 = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => {
+    const context = React.useContext(MenuContext)
+    if (!context?.open)
+      return null
+    return (
+      <Component role={role ?? 'menu'} {...props}>
+        {children}
+      </Component>
+    )
+  }
+
+  const MenuItem = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => (
+    <Component role={role ?? 'menuitem'} {...props}>
+      {children}
+    </Component>
+  )
+
+  return {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    Transition: ({ show = true, children }: { show?: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
+  }
+})
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useSelectedLayoutSegment: vi.fn(),
+  useRouter: vi.fn(),
+}))
+
+// Mock app store
+vi.mock('@/app/components/app/store', () => ({
+  useStore: vi.fn(),
+}))
+
+// Mock app context
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+describe('Nav Component', () => {
+  const mockSetAppDetail = vi.fn()
+  const mockOnCreate = vi.fn()
+  const mockOnLoadMore = vi.fn()
+  const mockPush = vi.fn()
+
+  const navigationItems: NavItem[] = [
+    {
+      id: '1',
+      name: 'Item 1',
+      link: '/item1',
+      icon_type: 'image',
+      icon: 'icon1',
+      icon_background: '#fff',
+      icon_url: '/url1',
+      mode: AppModeEnum.CHAT,
+    },
+    {
+      id: '2',
+      name: 'Item 2',
+      link: '/item2',
+      icon_type: 'image',
+      icon: 'icon2',
+      icon_background: '#000',
+      icon_url: '/url2',
+    },
+  ]
+
+  const defaultProps = {
+    icon: <span data-testid="default-icon">Icon</span>,
+    activeIcon: <span data-testid="active-icon">Active Icon</span>,
+    text: 'Nav Text',
+    activeSegment: 'explore',
+    link: '/explore',
+    isApp: false,
+    navigationItems,
+    createText: 'Create New',
+    onCreate: mockOnCreate,
+    onLoadMore: mockOnLoadMore,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useSelectedLayoutSegment).mockReturnValue('explore')
+    vi.mocked(useAppStore).mockReturnValue(mockSetAppDetail)
+    vi.mocked(useAppContext).mockReturnValue({
+      isCurrentWorkspaceEditor: true,
+    } as unknown as AppContextValue)
+    vi.mocked(useRouter).mockReturnValue({
+      push: mockPush,
+    } as unknown as ReturnType<typeof useRouter>)
+  })
+
+  describe('Rendering', () => {
+    it('should render correctly when activated', () => {
+      render(<Nav {...defaultProps} />)
+      expect(screen.getByText('Nav Text')).toBeInTheDocument()
+      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
+    })
+
+    it('should render correctly when not activated', () => {
+      vi.mocked(useSelectedLayoutSegment).mockReturnValue('other')
+      render(<Nav {...defaultProps} />)
+      expect(screen.getByTestId('default-icon')).toBeInTheDocument()
+    })
+
+    it('should handle array activeSegment', () => {
+      render(<Nav {...defaultProps} activeSegment={['explore', 'apps']} />)
+      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
+    })
+
+    it('should not show hover background if not activated', () => {
+      vi.mocked(useSelectedLayoutSegment).mockReturnValue('other')
+      const { container } = render(<Nav {...defaultProps} />)
+      const navDiv = container.firstChild as HTMLElement
+      expect(navDiv.className).toContain(
+        'hover:bg-components-main-nav-nav-button-bg-hover',
+      )
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setAppDetail when clicked', () => {
+      render(<Nav {...defaultProps} />)
+      const link = screen.getByRole('link')
+      fireEvent.click(link.firstChild!)
+      expect(mockSetAppDetail).toHaveBeenCalled()
+    })
+
+    it('should not call setAppDetail when clicked with modifier keys', () => {
+      render(<Nav {...defaultProps} />)
+      const link = screen.getByRole('link')
+      fireEvent.click(link.firstChild!, { metaKey: true })
+      expect(mockSetAppDetail).not.toHaveBeenCalled()
+    })
+
+    it('should show ArrowNarrowLeft on hover when curNav is provided and activated', () => {
+      const curNav = navigationItems[0]
+      render(<Nav {...defaultProps} curNav={curNav} />)
+
+      const navItem = screen.getByText('Nav Text').parentElement!
+      fireEvent.mouseEnter(navItem)
+
+      expect(screen.queryByTestId('active-icon')).not.toBeInTheDocument()
+
+      fireEvent.mouseLeave(navItem)
+      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('NavSelector', () => {
+    const curNav = navigationItems[0]
+
+    it('should render NavSelector when activated and curNav is provided', () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      expect(screen.getByText('/')).toBeInTheDocument()
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+    })
+
+    it('should open menu and show items when clicked', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Item 2')).toBeInTheDocument()
+      })
+    })
+
+    it('should navigate when an item is selected', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const item2 = await screen.findByText('Item 2')
+      await act(async () => {
+        fireEvent.click(item2)
+      })
+
+      expect(mockSetAppDetail).toHaveBeenCalled()
+      expect(mockPush).toHaveBeenCalledWith('/item2')
+    })
+
+    it('should not navigate if selecting current nav item', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const listItems = await screen.findAllByText('Item 1')
+      const listItem = listItems.find(el => el.closest('[role="menuitem"]'))
+
+      if (listItem) {
+        await act(async () => {
+          fireEvent.click(listItem)
+        })
+      }
+
+      expect(mockPush).not.toHaveBeenCalled()
+    })
+
+    it('should call onCreate when create button is clicked', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const createButton = await screen.findByText('Create New')
+      await act(async () => {
+        fireEvent.click(createButton)
+      })
+
+      expect(mockOnCreate).toHaveBeenCalledWith('')
+    })
+
+    it('should show sub-menu and call onCreate with types when isApp is true', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} isApp />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const createButton = await screen.findByText('Create New')
+      await act(async () => {
+        fireEvent.click(createButton)
+      })
+
+      const blankOption = await screen.findByText(
+        /app\.newApp\.startFromBlank/i,
+      )
+      await act(async () => {
+        fireEvent.click(blankOption)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('blank')
+
+      const templateOption = await screen.findByText(
+        /app\.newApp\.startFromTemplate/i,
+      )
+      await act(async () => {
+        fireEvent.click(templateOption)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('template')
+
+      const dslOption = await screen.findByText(/app\.importDSL/i)
+      await act(async () => {
+        fireEvent.click(dslOption)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('dsl')
+    })
+
+    it('should not show create button if NOT an editor', async () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        isCurrentWorkspaceEditor: false,
+      } as unknown as AppContextValue)
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.queryByText('Create New')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should show loading state in selector when isLoadingMore is true', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} isLoadingMore />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const status = await screen.findByRole('status')
+      expect(status).toBeInTheDocument()
+    })
+
+    it('should call onLoadMore when scrolling reaches bottom', async () => {
+      render(<Nav {...defaultProps} curNav={curNav} />)
+      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
+
+      await act(async () => {
+        fireEvent.click(selectorButton)
+      })
+
+      const scrollContainer = await screen.findByRole('menu').then((menu) => {
+        const container = menu.querySelector('.overflow-auto')
+        if (!container)
+          throw new Error('Not found')
+        return container as HTMLElement
+      })
+
+      vi.useFakeTimers()
+
+      Object.defineProperty(scrollContainer, 'scrollHeight', {
+        value: 600,
+        configurable: true,
+      })
+      Object.defineProperty(scrollContainer, 'clientHeight', {
+        value: 150,
+        configurable: true,
+      })
+      Object.defineProperty(scrollContainer, 'scrollTop', {
+        value: 500,
+        configurable: true,
+      })
+
+      fireEvent.scroll(scrollContainer)
+
+      act(() => {
+        vi.runAllTimers()
+      })
+
+      expect(mockOnLoadMore).toHaveBeenCalled()
+      vi.useRealTimers()
+    })
+  })
+})
diff --git a/web/app/components/header/nav/nav-selector/index.spec.tsx b/web/app/components/header/nav/nav-selector/index.spec.tsx
new file mode 100644
index 0000000000..d613d4bf73
--- /dev/null
+++ b/web/app/components/header/nav/nav-selector/index.spec.tsx
@@ -0,0 +1,308 @@
+import type { INavSelectorProps, NavItem } from './index'
+import type { AppContextValue } from '@/context/app-context'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import * as React from 'react'
+import { vi } from 'vitest'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useAppContext } from '@/context/app-context'
+import { AppModeEnum } from '@/types/app'
+import NavSelector from './index'
+
+vi.mock('@headlessui/react', () => {
+  type MenuContextValue = { open: boolean, setOpen: (open: boolean) => void }
+  const MenuContext = React.createContext<MenuContextValue | null>(null)
+
+  const Menu = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
+    const [open, setOpen] = React.useState(false)
+    const value = React.useMemo(() => ({ open, setOpen }), [open])
+    return (
+      <MenuContext.Provider value={value}>
+        {typeof children === 'function' ? children({ open }) : 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 = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => {
+    const context = React.useContext(MenuContext)
+    if (!context?.open)
+      return null
+    return (
+      <Component role={role ?? 'menu'} {...props}>
+        {children}
+      </Component>
+    )
+  }
+
+  const MenuItem = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => (
+    <Component role={role ?? 'menuitem'} {...props}>
+      {children}
+    </Component>
+  )
+
+  return {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    Transition: ({ show = true, children }: { show?: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
+  }
+})
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+}))
+
+// Mock app store
+vi.mock('@/app/components/app/store', () => ({
+  useStore: vi.fn(),
+}))
+
+// Mock app context
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+describe('NavSelector Component', () => {
+  const mockSetAppDetail = vi.fn()
+  const mockOnCreate = vi.fn()
+  const mockOnLoadMore = vi.fn()
+  const mockPush = vi.fn()
+
+  const navigationItems: NavItem[] = [
+    {
+      id: '1',
+      name: 'Item 1',
+      link: '/item1',
+      icon_type: 'image',
+      icon: 'icon1',
+      icon_background: '#fff',
+      icon_url: '/url1',
+      mode: AppModeEnum.CHAT,
+    },
+    {
+      id: '2',
+      name: 'Item 2',
+      link: '/item2',
+      icon_type: 'image',
+      icon: 'icon2',
+      icon_background: '#000',
+      icon_url: '/url2',
+    },
+  ]
+
+  const { link: _link, ...curNavWithoutLink } = navigationItems[0]
+
+  const defaultProps: INavSelectorProps = {
+    curNav: curNavWithoutLink,
+    navigationItems,
+    createText: 'Create New',
+    onCreate: mockOnCreate,
+    onLoadMore: mockOnLoadMore,
+    isApp: false,
+    isLoadingMore: false,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useAppStore).mockReturnValue(mockSetAppDetail)
+    vi.mocked(useAppContext).mockReturnValue({
+      isCurrentWorkspaceEditor: true,
+    } as unknown as AppContextValue)
+    vi.mocked(useRouter).mockReturnValue({
+      push: mockPush,
+    } as unknown as ReturnType<typeof useRouter>)
+  })
+
+  describe('Rendering', () => {
+    it('should render current nav name', () => {
+      render(<NavSelector {...defaultProps} />)
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+    })
+
+    it('should show loading indicator when isLoadingMore is true', async () => {
+      render(<NavSelector {...defaultProps} isLoadingMore />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      expect(screen.getByRole('status')).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should open menu and show items', async () => {
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      expect(screen.getByText('Item 2')).toBeInTheDocument()
+    })
+
+    it('should navigate and call setAppDetail when an item is clicked', async () => {
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      const item2 = screen.getByText('Item 2')
+      await act(async () => {
+        fireEvent.click(item2)
+      })
+      expect(mockSetAppDetail).toHaveBeenCalled()
+      expect(mockPush).toHaveBeenCalledWith('/item2')
+    })
+
+    it('should not navigate if current item is clicked', async () => {
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      const items = screen.getAllByText('Item 1')
+      const listItem = items.find(el => el.closest('[role="menuitem"]'))
+      if (listItem) {
+        await act(async () => {
+          fireEvent.click(listItem)
+        })
+      }
+      expect(mockPush).not.toHaveBeenCalled()
+    })
+
+    it('should call onCreate when create button is clicked (non-app mode)', async () => {
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      const createBtn = screen.getByText('Create New')
+      await act(async () => {
+        fireEvent.click(createBtn)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('')
+    })
+
+    it('should show extended create menu in app mode', async () => {
+      render(<NavSelector {...defaultProps} isApp />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      const createBtn = screen.getByText('Create New')
+      await act(async () => {
+        fireEvent.click(createBtn)
+      })
+
+      const blank = await screen.findByText(/app\.newApp\.startFromBlank/i)
+      await act(async () => {
+        fireEvent.click(blank)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('blank')
+
+      const template = await screen.findByText(/app\.newApp\.startFromTemplate/i)
+      await act(async () => {
+        fireEvent.click(template)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('template')
+
+      const dsl = await screen.findByText(/app\.importDSL/i)
+      await act(async () => {
+        fireEvent.click(dsl)
+      })
+      expect(mockOnCreate).toHaveBeenCalledWith('dsl')
+    })
+
+    it('should not show create button for non-editors', async () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        isCurrentWorkspaceEditor: false,
+      } as unknown as AppContextValue)
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+      expect(screen.queryByText('Create New')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Scroll behavior', () => {
+    it('should call onLoadMore when scrolled to bottom', async () => {
+      render(<NavSelector {...defaultProps} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const menu = screen.getByRole('menu')
+      const scrollable = menu.querySelector('.overflow-auto') as HTMLElement
+
+      vi.useFakeTimers()
+
+      // Trigger scroll
+      Object.defineProperty(scrollable, 'scrollHeight', {
+        value: 600,
+        configurable: true,
+      })
+      Object.defineProperty(scrollable, 'clientHeight', {
+        value: 150,
+        configurable: true,
+      })
+      Object.defineProperty(scrollable, 'scrollTop', {
+        value: 500,
+        configurable: true,
+      })
+
+      fireEvent.scroll(scrollable)
+
+      act(() => {
+        vi.runAllTimers()
+      })
+
+      expect(mockOnLoadMore).toHaveBeenCalled()
+
+      // Check that it's NOT called if not at bottom
+      mockOnLoadMore.mockClear()
+      Object.defineProperty(scrollable, 'scrollTop', {
+        value: 100,
+        configurable: true,
+      })
+      fireEvent.scroll(scrollable)
+      act(() => {
+        vi.runAllTimers()
+      })
+      expect(mockOnLoadMore).not.toHaveBeenCalled()
+
+      vi.useRealTimers()
+    })
+
+    it('should not throw if onLoadMore is undefined', async () => {
+      const { onLoadMore: _o, ...propsWithoutOnLoadMore } = defaultProps
+      render(<NavSelector {...propsWithoutOnLoadMore} />)
+      const button = screen.getByRole('button')
+      await act(async () => {
+        fireEvent.click(button)
+      })
+
+      const menu = screen.getByRole('menu')
+      const scrollable = menu.querySelector('.overflow-auto') as HTMLElement
+
+      fireEvent.scroll(scrollable)
+      // No error should be thrown
+    })
+  })
+})
diff --git a/web/app/components/header/plan-badge/index.spec.tsx b/web/app/components/header/plan-badge/index.spec.tsx
new file mode 100644
index 0000000000..80159588f5
--- /dev/null
+++ b/web/app/components/header/plan-badge/index.spec.tsx
@@ -0,0 +1,104 @@
+import type { Mock } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '../../billing/type'
+import PlanBadge from './index'
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+  baseProviderContextValue: {},
+}))
+
+describe('PlanBadge', () => {
+  const mockUseProviderContext = useProviderContext as Mock
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return null if isFetchedPlan is false', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: false }),
+    )
+    const { container } = render(<PlanBadge plan={Plan.sandbox} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render upgrade badge when plan is sandbox and sandboxAsUpgrade is true', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    render(<PlanBadge plan={Plan.sandbox} sandboxAsUpgrade={true} />)
+    expect(
+      screen.getByText('billing.upgradeBtn.encourageShort'),
+    ).toBeInTheDocument()
+  })
+
+  it('should render sandbox badge when plan is sandbox and sandboxAsUpgrade is false', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    render(<PlanBadge plan={Plan.sandbox} sandboxAsUpgrade={false} />)
+    expect(screen.getByText(Plan.sandbox)).toBeInTheDocument()
+  })
+
+  it('should render professional badge when plan is professional', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    render(<PlanBadge plan={Plan.professional} />)
+    expect(screen.getByText('pro')).toBeInTheDocument()
+  })
+
+  it('should render graduation icon when isEducationWorkspace is true and plan is professional', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({
+        isFetchedPlan: true,
+        isEducationWorkspace: true,
+      }),
+    )
+    const { container } = render(<PlanBadge plan={Plan.professional} />)
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(screen.getByText('pro')).toBeInTheDocument()
+  })
+
+  it('should render team badge when plan is team', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    render(<PlanBadge plan={Plan.team} />)
+    expect(screen.getByText(Plan.team)).toBeInTheDocument()
+  })
+
+  it('should return null when plan is enterprise', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    const { container } = render(<PlanBadge plan={Plan.enterprise} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should trigger onClick when clicked', () => {
+    const handleClick = vi.fn()
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    render(<PlanBadge plan={Plan.team} onClick={handleClick} />)
+    fireEvent.click(screen.getByText(Plan.team))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle allowHover prop', () => {
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+    const { container } = render(
+      <PlanBadge plan={Plan.team} allowHover={true} />,
+    )
+
+    expect(container.firstChild).not.toBeNull()
+  })
+})
diff --git a/web/app/components/header/plugins-nav/index.spec.tsx b/web/app/components/header/plugins-nav/index.spec.tsx
new file mode 100644
index 0000000000..f76f579aa9
--- /dev/null
+++ b/web/app/components/header/plugins-nav/index.spec.tsx
@@ -0,0 +1,112 @@
+import type { Mock } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
+
+import PluginsNav from './index'
+
+vi.mock('next/navigation', () => ({
+  useSelectedLayoutSegment: vi.fn(),
+}))
+
+vi.mock('@/app/components/plugins/plugin-page/plugin-tasks/hooks', () => ({
+  usePluginTaskStatus: vi.fn(),
+}))
+
+describe('PluginsNav', () => {
+  const mockUseSelectedLayoutSegment = useSelectedLayoutSegment as Mock
+  const mockUsePluginTaskStatus = usePluginTaskStatus as Mock
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockUseSelectedLayoutSegment.mockReturnValue(null)
+    mockUsePluginTaskStatus.mockReturnValue({
+      isInstalling: false,
+      isInstallingWithError: false,
+      isFailed: false,
+    })
+  })
+
+  it('renders correctly (Default)', () => {
+    render(<PluginsNav />)
+
+    const linkElement = screen.getByRole('link')
+    expect(linkElement).toHaveAttribute('href', '/plugins')
+    expect(screen.getByText('common.menus.plugins')).toBeInTheDocument()
+
+    const svg = linkElement.querySelector('svg')
+    expect(svg).toBeInTheDocument()
+
+    expect(screen.queryByTestId('status-indicator')).not.toBeInTheDocument()
+  })
+
+  describe('Active State', () => {
+    it('should have active styling when segment is "plugins"', () => {
+      mockUseSelectedLayoutSegment.mockReturnValue('plugins')
+
+      render(<PluginsNav />)
+
+      const container = screen.getByText('common.menus.plugins').closest('div')
+      expect(container).toHaveClass(
+        'border-components-main-nav-nav-button-border',
+      )
+      expect(container).toHaveClass(
+        'bg-components-main-nav-nav-button-bg-active',
+      )
+    })
+  })
+
+  describe('Task Status Indicators', () => {
+    it('renders Installing state (Inactive)', () => {
+      mockUsePluginTaskStatus.mockReturnValue({ isInstalling: true })
+
+      const { container } = render(<PluginsNav />)
+
+      const downloadingIcon = container.querySelector('.install-icon')
+      expect(downloadingIcon).toBeInTheDocument()
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs.length).toBe(1)
+      expect(svgs[0]).toHaveClass('install-icon')
+
+      expect(screen.queryByTestId('status-indicator')).not.toBeInTheDocument()
+    })
+
+    it('renders Installing With Error state (Inactive)', () => {
+      mockUsePluginTaskStatus.mockReturnValue({ isInstallingWithError: true })
+
+      const { container } = render(<PluginsNav />)
+
+      const downloadingIcon = container.querySelector('.install-icon')
+      expect(downloadingIcon).toBeInTheDocument()
+
+      expect(screen.getByTestId('status-indicator')).toBeInTheDocument()
+    })
+
+    it('renders Failed state (Inactive)', () => {
+      mockUsePluginTaskStatus.mockReturnValue({ isFailed: true })
+
+      const { container } = render(<PluginsNav />)
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg).not.toHaveClass('install-icon')
+
+      expect(screen.getByTestId('status-indicator')).toBeInTheDocument()
+    })
+
+    it('renders Default icon when Active even if installing', () => {
+      mockUseSelectedLayoutSegment.mockReturnValue('plugins')
+      mockUsePluginTaskStatus.mockReturnValue({ isInstalling: true })
+
+      const { container } = render(<PluginsNav />)
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg).not.toHaveClass('install-icon')
+
+      expect(container.querySelector('.install-icon')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/header/tools-nav/index.spec.tsx b/web/app/components/header/tools-nav/index.spec.tsx
new file mode 100644
index 0000000000..dadb55eac5
--- /dev/null
+++ b/web/app/components/header/tools-nav/index.spec.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ToolsNav from './index'
+
+const mockUseSelectedLayoutSegment = vi.fn()
+vi.mock('next/navigation', () => ({
+  useSelectedLayoutSegment: () => mockUseSelectedLayoutSegment(),
+}))
+
+vi.mock('@remixicon/react', () => ({
+  RiHammerFill: (props: React.ComponentProps<'svg'>) => (
+    <svg data-testid="icon-hammer-fill" {...props} />
+  ),
+  RiHammerLine: (props: React.ComponentProps<'svg'>) => (
+    <svg data-testid="icon-hammer-line" {...props} />
+  ),
+}))
+
+describe('ToolsNav', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render standard inactive state correctly', () => {
+      mockUseSelectedLayoutSegment.mockReturnValue(null)
+
+      render(<ToolsNav />)
+
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', '/tools')
+      expect(screen.getByText('common.menus.tools')).toBeInTheDocument()
+
+      expect(screen.getByTestId('icon-hammer-line')).toBeInTheDocument()
+      expect(screen.queryByTestId('icon-hammer-fill')).not.toBeInTheDocument()
+
+      expect(link).toHaveClass('text-components-main-nav-nav-button-text')
+      expect(link).toHaveClass(
+        'hover:bg-components-main-nav-nav-button-bg-hover',
+      )
+    })
+
+    it('should render active state correctly', () => {
+      mockUseSelectedLayoutSegment.mockReturnValue('tools')
+
+      render(<ToolsNav />)
+
+      const link = screen.getByRole('link')
+
+      expect(link).toHaveClass('bg-components-main-nav-nav-button-bg-active')
+      expect(link).toHaveClass(
+        'text-components-main-nav-nav-button-text-active',
+      )
+      expect(link).toHaveClass('font-semibold')
+      expect(link).toHaveClass('shadow-md')
+
+      expect(screen.getByTestId('icon-hammer-fill')).toBeInTheDocument()
+      expect(screen.queryByTestId('icon-hammer-line')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should merge additional classNames', () => {
+      mockUseSelectedLayoutSegment.mockReturnValue(null)
+      render(<ToolsNav className="custom-test-class" />)
+
+      const link = screen.getByRole('link')
+      expect(link).toHaveClass('custom-test-class')
+    })
+  })
+})

From a0ddaed6d3c02069b83f154c35c2492204374d6c Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Tue, 24 Feb 2026 10:31:30 +0530
Subject: [PATCH 11/26] test(web): Fix failing web test in 'Web Tests' GitHub
 Action (#32481)

---
 .../app/configuration/config-var/index.spec.tsx        |  5 +++--
 .../components/app/overview/customize/index.spec.tsx   | 10 ++--------
 .../create/__tests__/common-modal.spec.tsx             |  7 ++-----
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/index.spec.tsx b/web/app/components/app/configuration/config-var/index.spec.tsx
index 490d7b4410..096358c805 100644
--- a/web/app/components/app/configuration/config-var/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/index.spec.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import type { IConfigVarProps } from './index'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import * as React from 'react'
 import { vi } from 'vitest'
 import Toast from '@/app/components/base/toast'
@@ -237,7 +237,8 @@ describe('ConfigVar', () => {
       expect(actionButtons).toHaveLength(2)
       fireEvent.click(actionButtons[0])
 
-      const saveButton = await screen.findByRole('button', { name: 'common.operation.save' })
+      const editDialog = await screen.findByRole('dialog')
+      const saveButton = within(editDialog).getByRole('button', { name: 'common.operation.save' })
       fireEvent.click(saveButton)
 
       await waitFor(() => {
diff --git a/web/app/components/app/overview/customize/index.spec.tsx b/web/app/components/app/overview/customize/index.spec.tsx
index e1bb7e938d..fab78347d0 100644
--- a/web/app/components/app/overview/customize/index.spec.tsx
+++ b/web/app/components/app/overview/customize/index.spec.tsx
@@ -323,14 +323,8 @@ describe('CustomizeModal', () => {
         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!)
+      const closeButton = screen.getByTestId('modal-close-button')
+      fireEvent.click(closeButton)
       expect(onClose).toHaveBeenCalledTimes(1)
     })
   })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
index 20eac10903..b9953bd249 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
@@ -714,6 +714,7 @@ describe('CommonCreateModal', () => {
 
   describe('Manual Properties Change', () => {
     it('should call updateBuilder when manual properties change', async () => {
+      const builder = createMockSubscriptionBuilder()
       const detailWithManualSchema = createMockPluginDetail({
         declaration: {
           trigger: {
@@ -729,11 +730,7 @@ describe('CommonCreateModal', () => {
       })
       mockUsePluginStore.mockReturnValue(detailWithManualSchema)
 
-      render(<CommonCreateModal {...defaultProps} createType={SupportedCreationMethods.MANUAL} />)
-
-      await waitFor(() => {
-        expect(mockCreateBuilder).toHaveBeenCalled()
-      })
+      render(<CommonCreateModal {...defaultProps} createType={SupportedCreationMethods.MANUAL} builder={builder} />)
 
       const input = screen.getByTestId('form-field-webhook_url')
       fireEvent.change(input, { target: { value: 'https://example.com/webhook' } })

From f923901d3f998b5d4ea8b6628cfc4e9d7f153383 Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 10:31:45 +0530
Subject: [PATCH 12/26] test: add tests for base > features (#32397)

Co-authored-by: sahil <sahil@infocusp.com>
---
 .../components/base/features/context.spec.tsx |  69 ++
 .../components/base/features/hooks.spec.ts    |  63 ++
 .../annotation-ctrl-button.spec.tsx           | 149 ++++
 .../config-param-modal.spec.tsx               | 415 +++++++++
 .../annotation-reply/config-param.spec.tsx    |  37 +
 .../annotation-reply/index.spec.tsx           | 420 ++++++++++
 .../score-slider/base-slider/index.spec.tsx   |  50 ++
 .../score-slider/index.spec.tsx               |  50 ++
 .../annotation-reply/type.spec.ts             |   8 +
 .../use-annotation-config.spec.ts             | 241 ++++++
 .../new-feature-panel/citation.spec.tsx       |  48 ++
 .../conversation-opener/index.spec.tsx        | 187 +++++
 .../conversation-opener/modal.spec.tsx        | 510 ++++++++++++
 .../conversation-opener/modal.tsx             |  31 +-
 .../new-feature-panel/dialog-wrapper.spec.tsx | 105 +++
 .../new-feature-panel/dialog-wrapper.tsx      |   4 +-
 .../new-feature-panel/feature-bar.spec.tsx    | 172 ++++
 .../new-feature-panel/feature-card.spec.tsx   | 103 +++
 .../file-upload/index.spec.tsx                | 191 +++++
 .../file-upload/setting-content.spec.tsx      | 204 +++++
 .../file-upload/setting-content.tsx           |  19 +-
 .../file-upload/setting-modal.spec.tsx        | 140 ++++
 .../new-feature-panel/follow-up.spec.tsx      |  48 ++
 .../image-upload/index.spec.tsx               | 194 +++++
 .../features/new-feature-panel/index.spec.tsx | 215 +++++
 .../moderation/form-generation.spec.tsx       | 133 +++
 .../moderation/index.spec.tsx                 | 427 ++++++++++
 .../moderation/moderation-content.spec.tsx    | 127 +++
 .../moderation-setting-modal.spec.tsx         | 787 ++++++++++++++++++
 .../moderation/moderation-setting-modal.tsx   |  28 +-
 .../new-feature-panel/more-like-this.spec.tsx |  55 ++
 .../new-feature-panel/speech-to-text.spec.tsx |  48 ++
 .../text-to-speech/index.spec.tsx             | 115 +++
 .../param-config-content.spec.tsx             | 349 ++++++++
 .../text-to-speech/param-config-content.tsx   |  42 +-
 .../text-to-speech/voice-settings.spec.tsx    | 105 +++
 .../components/base/features/store.spec.ts    | 180 ++++
 web/eslint-suppressions.json                  |  24 -
 38 files changed, 6028 insertions(+), 65 deletions(-)
 create mode 100644 web/app/components/base/features/context.spec.tsx
 create mode 100644 web/app/components/base/features/hooks.spec.ts
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/config-param.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/type.spec.ts
 create mode 100644 web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.spec.ts
 create mode 100644 web/app/components/base/features/new-feature-panel/citation.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/conversation-opener/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/conversation-opener/modal.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/dialog-wrapper.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/feature-bar.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/feature-card.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/file-upload/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/file-upload/setting-content.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/file-upload/setting-modal.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/follow-up.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/image-upload/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/moderation/form-generation.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/moderation/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/moderation/moderation-content.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/more-like-this.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/speech-to-text.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/text-to-speech/index.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.spec.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.spec.tsx
 create mode 100644 web/app/components/base/features/store.spec.ts

diff --git a/web/app/components/base/features/context.spec.tsx b/web/app/components/base/features/context.spec.tsx
new file mode 100644
index 0000000000..e57cbd82c2
--- /dev/null
+++ b/web/app/components/base/features/context.spec.tsx
@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { useContext } from 'react'
+import { FeaturesContext, FeaturesProvider } from './context'
+
+const TestConsumer = () => {
+  const store = useContext(FeaturesContext)
+  if (!store)
+    return <div>no store</div>
+
+  const { features } = store.getState()
+  return <div role="status">{features.moreLikeThis?.enabled ? 'enabled' : 'disabled'}</div>
+}
+
+describe('FeaturesProvider', () => {
+  it('should provide store to children when FeaturesProvider wraps them', () => {
+    render(
+      <FeaturesProvider>
+        <TestConsumer />
+      </FeaturesProvider>,
+    )
+
+    expect(screen.getByRole('status')).toHaveTextContent('disabled')
+  })
+
+  it('should provide initial features state when features prop is provided', () => {
+    render(
+      <FeaturesProvider features={{ moreLikeThis: { enabled: true } }}>
+        <TestConsumer />
+      </FeaturesProvider>,
+    )
+
+    expect(screen.getByRole('status')).toHaveTextContent('enabled')
+  })
+
+  it('should maintain the same store reference across re-renders', () => {
+    const storeRefs: Array<ReturnType<typeof useContext>> = []
+
+    const StoreRefCollector = () => {
+      const store = useContext(FeaturesContext)
+      storeRefs.push(store)
+      return null
+    }
+
+    const { rerender } = render(
+      <FeaturesProvider>
+        <StoreRefCollector />
+      </FeaturesProvider>,
+    )
+
+    rerender(
+      <FeaturesProvider>
+        <StoreRefCollector />
+      </FeaturesProvider>,
+    )
+
+    expect(storeRefs[0]).toBe(storeRefs[1])
+  })
+
+  it('should handle empty features object', () => {
+    render(
+      <FeaturesProvider features={{}}>
+        <TestConsumer />
+      </FeaturesProvider>,
+    )
+
+    expect(screen.getByRole('status')).toHaveTextContent('disabled')
+  })
+})
diff --git a/web/app/components/base/features/hooks.spec.ts b/web/app/components/base/features/hooks.spec.ts
new file mode 100644
index 0000000000..aa0aa1e85e
--- /dev/null
+++ b/web/app/components/base/features/hooks.spec.ts
@@ -0,0 +1,63 @@
+import { renderHook } from '@testing-library/react'
+import * as React from 'react'
+import { FeaturesContext } from './context'
+import { useFeatures, useFeaturesStore } from './hooks'
+import { createFeaturesStore } from './store'
+
+describe('useFeatures', () => {
+  it('should return selected state from the store when useFeatures is called with selector', () => {
+    const store = createFeaturesStore({
+      features: { moreLikeThis: { enabled: true } },
+    })
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(FeaturesContext.Provider, { value: store }, children)
+
+    const { result } = renderHook(
+      () => useFeatures(s => s.features.moreLikeThis?.enabled),
+      { wrapper },
+    )
+
+    expect(result.current).toBe(true)
+  })
+
+  it('should throw error when used outside FeaturesContext.Provider', () => {
+    // Act & Assert
+    expect(() => {
+      renderHook(() => useFeatures(s => s.features))
+    }).toThrow('Missing FeaturesContext.Provider in the tree')
+  })
+
+  it('should return undefined when feature does not exist', () => {
+    const store = createFeaturesStore({ features: {} })
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(FeaturesContext.Provider, { value: store }, children)
+
+    const { result } = renderHook(
+      () => useFeatures(s => (s.features as Record<string, unknown>).nonexistent as boolean | undefined),
+      { wrapper },
+    )
+
+    expect(result.current).toBeUndefined()
+  })
+})
+
+describe('useFeaturesStore', () => {
+  it('should return the store from context when used within provider', () => {
+    const store = createFeaturesStore()
+
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(FeaturesContext.Provider, { value: store }, children)
+
+    const { result } = renderHook(() => useFeaturesStore(), { wrapper })
+
+    expect(result.current).toBe(store)
+  })
+
+  it('should return null when used outside provider', () => {
+    const { result } = renderHook(() => useFeaturesStore())
+
+    expect(result.current).toBeNull()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.spec.tsx
new file mode 100644
index 0000000000..65f45d10de
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.spec.tsx
@@ -0,0 +1,149 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import AnnotationCtrlButton from './annotation-ctrl-button'
+
+const mockSetShowAnnotationFullModal = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAnnotationFullModal: mockSetShowAnnotationFullModal,
+  }),
+}))
+
+let mockAnnotatedResponseUsage = 5
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: {
+      usage: { get annotatedResponse() { return mockAnnotatedResponseUsage } },
+      total: { annotatedResponse: 100 },
+    },
+    enableBilling: true,
+  }),
+}))
+
+const mockAddAnnotation = vi.fn().mockResolvedValue({
+  id: 'annotation-1',
+  account: { name: 'Test User' },
+})
+
+vi.mock('@/service/annotation', () => ({
+  addAnnotation: (...args: unknown[]) => mockAddAnnotation(...args),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: vi.fn() },
+}))
+
+describe('AnnotationCtrlButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockAnnotatedResponseUsage = 5
+  })
+
+  it('should render edit button when cached', () => {
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        cached={true}
+        query="test query"
+        answer="test answer"
+        onAdded={vi.fn()}
+        onEdit={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('should call onEdit when edit button is clicked', () => {
+    const onEdit = vi.fn()
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        cached={true}
+        query="test query"
+        answer="test answer"
+        onAdded={vi.fn()}
+        onEdit={onEdit}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(onEdit).toHaveBeenCalled()
+  })
+
+  it('should render add button when not cached and has answer', () => {
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        cached={false}
+        query="test query"
+        answer="test answer"
+        onAdded={vi.fn()}
+        onEdit={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('should not render any button when not cached and no answer', () => {
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        cached={false}
+        query="test query"
+        answer=""
+        onAdded={vi.fn()}
+        onEdit={vi.fn()}
+      />,
+    )
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('should call addAnnotation and onAdded when add button is clicked', async () => {
+    const onAdded = vi.fn()
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        messageId="msg-1"
+        cached={false}
+        query="test query"
+        answer="test answer"
+        onAdded={onAdded}
+        onEdit={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+
+    await waitFor(() => {
+      expect(mockAddAnnotation).toHaveBeenCalledWith('test-app', {
+        message_id: 'msg-1',
+        question: 'test query',
+        answer: 'test answer',
+      })
+      expect(onAdded).toHaveBeenCalledWith('annotation-1', 'Test User')
+    })
+  })
+
+  it('should show annotation full modal when annotation limit is reached', () => {
+    mockAnnotatedResponseUsage = 100
+
+    render(
+      <AnnotationCtrlButton
+        appId="test-app"
+        cached={false}
+        query="test query"
+        answer="test answer"
+        onAdded={vi.fn()}
+        onEdit={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(mockSetShowAnnotationFullModal).toHaveBeenCalled()
+    expect(mockAddAnnotation).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.spec.tsx
new file mode 100644
index 0000000000..d541c006f6
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.spec.tsx
@@ -0,0 +1,415 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Toast from '@/app/components/base/toast'
+import ConfigParamModal from './config-param-modal'
+
+let mockHooksReturn: {
+  modelList: { provider: { provider: string }, models: { model: string }[] }[]
+  defaultModel: { provider: { provider: string }, model: string } | undefined
+  currentModel: boolean | undefined
+} = {
+  modelList: [{ provider: { provider: 'openai' }, models: [{ model: 'text-embedding-ada-002' }] }],
+  defaultModel: { provider: { provider: 'openai' }, model: 'text-embedding-ada-002' },
+  currentModel: true,
+}
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => mockHooksReturn,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/declarations', () => ({
+  ModelTypeEnum: {
+    textEmbedding: 'text-embedding',
+  },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: ({ defaultModel, onSelect }: { defaultModel?: { provider: string, model: string }, onSelect: (val: { provider: string, model: string }) => void }) => (
+    <div data-testid="model-selector" data-provider={defaultModel?.provider} data-model={defaultModel?.model}>
+      Model Selector
+      <button data-testid="select-model" onClick={() => onSelect({ provider: 'cohere', model: 'embed-english' })}>Select</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: vi.fn() },
+}))
+
+vi.mock('@/config', () => ({
+  ANNOTATION_DEFAULT: { score_threshold: 0.9 },
+}))
+
+const defaultAnnotationConfig = {
+  id: 'test-id',
+  enabled: false,
+  score_threshold: 0.9,
+  embedding_model: {
+    embedding_provider_name: 'openai',
+    embedding_model_name: 'text-embedding-ada-002',
+  },
+}
+
+describe('ConfigParamModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockHooksReturn = {
+      modelList: [{ provider: { provider: 'openai' }, models: [{ model: 'text-embedding-ada-002' }] }],
+      defaultModel: { provider: { provider: 'openai' }, model: 'text-embedding-ada-002' },
+      currentModel: true,
+    }
+  })
+
+  it('should not render when isShow is false', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={false}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.queryByText(/initSetup/)).not.toBeInTheDocument()
+  })
+
+  it('should render init title when isInit is true', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        isInit={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByText(/initSetup\.title/)).toBeInTheDocument()
+  })
+
+  it('should render config title when isInit is false', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        isInit={false}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByText(/initSetup\.configTitle/)).toBeInTheDocument()
+  })
+
+  it('should render score slider', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByRole('slider')).toBeInTheDocument()
+  })
+
+  it('should render model selector', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByTestId('model-selector')).toBeInTheDocument()
+  })
+
+  it('should render cancel and confirm buttons', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        isInit={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByText(/operation\.cancel/)).toBeInTheDocument()
+    expect(screen.getByText(/initSetup\.confirmBtn/)).toBeInTheDocument()
+  })
+
+  it('should display score threshold value', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByText('0.90')).toBeInTheDocument()
+  })
+
+  it('should render configConfirmBtn when isInit is false', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        isInit={false}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    expect(screen.getByText(/initSetup\.configConfirmBtn/)).toBeInTheDocument()
+  })
+
+  it('should call onSave with embedding model and score when save is clicked', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined)
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={onSave}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    // Click the confirm/save button
+    const buttons = screen.getAllByRole('button')
+    const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
+    fireEvent.click(saveBtn!)
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        { embedding_provider_name: 'openai', embedding_model_name: 'text-embedding-ada-002' },
+        0.9,
+      )
+    })
+  })
+
+  it('should show error toast when embedding model is not set', () => {
+    const configWithoutModel = {
+      ...defaultAnnotationConfig,
+      embedding_model: undefined as unknown as typeof defaultAnnotationConfig.embedding_model,
+    }
+
+    // Override hooks to return no default model and no valid current model
+    mockHooksReturn = {
+      modelList: [],
+      defaultModel: undefined,
+      currentModel: undefined,
+    }
+
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={configWithoutModel}
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
+    fireEvent.click(saveBtn!)
+
+    expect(Toast.notify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should call onHide when cancel is clicked and not loading', () => {
+    const onHide = vi.fn()
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={onHide}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.cancel/))
+
+    expect(onHide).toHaveBeenCalled()
+  })
+
+  it('should render slider with expected bounds and current value', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    expect(slider).toHaveAttribute('aria-valuemin', '80')
+    expect(slider).toHaveAttribute('aria-valuemax', '100')
+    expect(slider).toHaveAttribute('aria-valuenow', '90')
+  })
+
+  it('should update embedding model when model selector is used', () => {
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    // Click the select model button in mock
+    fireEvent.click(screen.getByTestId('select-model'))
+
+    // Model selector should now show the new provider/model
+    expect(screen.getByTestId('model-selector')).toHaveAttribute('data-provider', 'cohere')
+    expect(screen.getByTestId('model-selector')).toHaveAttribute('data-model', 'embed-english')
+  })
+
+  it('should call onSave with updated score from annotation config', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined)
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={onSave}
+        annotationConfig={{
+          ...defaultAnnotationConfig,
+          score_threshold: 0.95,
+        }}
+      />,
+    )
+
+    // Save
+    const buttons = screen.getAllByRole('button')
+    const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
+    fireEvent.click(saveBtn!)
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({ embedding_provider_name: 'openai' }),
+        0.95,
+      )
+    })
+  })
+
+  it('should call onSave with updated model after model selector change', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined)
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={onSave}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    // Change model
+    fireEvent.click(screen.getByTestId('select-model'))
+
+    // Save
+    const buttons = screen.getAllByRole('button')
+    const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
+    fireEvent.click(saveBtn!)
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        { embedding_provider_name: 'cohere', embedding_model_name: 'embed-english' },
+        0.9,
+      )
+    })
+  })
+
+  it('should use default model when annotation config has no embedding model', () => {
+    const configWithoutModel = {
+      ...defaultAnnotationConfig,
+      embedding_model: undefined as unknown as typeof defaultAnnotationConfig.embedding_model,
+    }
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={configWithoutModel}
+      />,
+    )
+
+    // Model selector should be initialized with the default model
+    expect(screen.getByTestId('model-selector')).toHaveAttribute('data-provider', 'openai')
+    expect(screen.getByTestId('model-selector')).toHaveAttribute('data-model', 'text-embedding-ada-002')
+  })
+
+  it('should use ANNOTATION_DEFAULT score_threshold when config has no score_threshold', () => {
+    const configWithoutThreshold = {
+      ...defaultAnnotationConfig,
+      score_threshold: 0,
+    }
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={vi.fn()}
+        onSave={vi.fn()}
+        annotationConfig={configWithoutThreshold}
+      />,
+    )
+
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '90')
+  })
+
+  it('should set loading state while saving', async () => {
+    let resolveOnSave: () => void
+    const onSave = vi.fn().mockImplementation(() => new Promise<void>((resolve) => {
+      resolveOnSave = resolve
+    }))
+    const onHide = vi.fn()
+
+    render(
+      <ConfigParamModal
+        appId="test-app"
+        isShow={true}
+        onHide={onHide}
+        onSave={onSave}
+        annotationConfig={defaultAnnotationConfig}
+      />,
+    )
+
+    // Click save
+    const buttons = screen.getAllByRole('button')
+    const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
+    fireEvent.click(saveBtn!)
+
+    // While loading, clicking cancel should not call onHide
+    fireEvent.click(screen.getByText(/operation\.cancel/))
+    expect(onHide).not.toHaveBeenCalled()
+
+    // Resolve the save
+    resolveOnSave!()
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.spec.tsx
new file mode 100644
index 0000000000..8d8a8e55cb
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.spec.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react'
+import { Item } from './config-param'
+
+describe('ConfigParam Item', () => {
+  it('should render title text', () => {
+    render(
+      <Item title="Score Threshold" tooltip="Tooltip text">
+        <div>children</div>
+      </Item>,
+    )
+
+    expect(screen.getByText('Score Threshold')).toBeInTheDocument()
+  })
+
+  it('should render children', () => {
+    render(
+      <Item title="Title" tooltip="Tooltip">
+        <div data-testid="child-content">Child</div>
+      </Item>,
+    )
+
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+  })
+
+  it('should render tooltip icon', () => {
+    render(
+      <Item title="Title" tooltip="Tooltip text">
+        <div>children</div>
+      </Item>,
+    )
+
+    // Tooltip component renders an icon next to the title
+    expect(screen.getByText(/Title/)).toBeInTheDocument()
+    // The Tooltip component is rendered as a sibling, confirming the tooltip prop is used
+    expect(screen.getByText(/Title/).closest('div')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.spec.tsx
new file mode 100644
index 0000000000..ce9e2f7cf2
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.spec.tsx
@@ -0,0 +1,420 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import AnnotationReply from './index'
+
+const mockPush = vi.fn()
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+  usePathname: () => '/app/test-app-id/configuration',
+}))
+
+let mockIsShowAnnotationConfigInit = false
+let mockIsShowAnnotationFullModal = false
+const mockHandleEnableAnnotation = vi.fn().mockResolvedValue(undefined)
+const mockHandleDisableAnnotation = vi.fn().mockResolvedValue(undefined)
+const mockSetIsShowAnnotationConfigInit = vi.fn((v: boolean) => {
+  mockIsShowAnnotationConfigInit = v
+})
+const mockSetIsShowAnnotationFullModal = vi.fn((v: boolean) => {
+  mockIsShowAnnotationFullModal = v
+})
+
+let capturedSetAnnotationConfig: ((config: Record<string, unknown>) => void) | null = null
+
+vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config', () => ({
+  default: ({ setAnnotationConfig }: { setAnnotationConfig: (config: Record<string, unknown>) => void }) => {
+    capturedSetAnnotationConfig = setAnnotationConfig
+    return {
+      handleEnableAnnotation: mockHandleEnableAnnotation,
+      handleDisableAnnotation: mockHandleDisableAnnotation,
+      get isShowAnnotationConfigInit() { return mockIsShowAnnotationConfigInit },
+      setIsShowAnnotationConfigInit: mockSetIsShowAnnotationConfigInit,
+      get isShowAnnotationFullModal() { return mockIsShowAnnotationFullModal },
+      setIsShowAnnotationFullModal: mockSetIsShowAnnotationFullModal,
+    }
+  },
+}))
+
+vi.mock('@/app/components/billing/annotation-full/modal', () => ({
+  default: ({ show, onHide }: { show: boolean, onHide: () => void }) => (
+    show
+      ? (
+          <div data-testid="annotation-full-modal">
+            <button data-testid="full-hide" onClick={onHide}>Hide</button>
+          </div>
+        )
+      : null
+  ),
+}))
+
+vi.mock('@/config', () => ({
+  ANNOTATION_DEFAULT: { score_threshold: 0.9 },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
+    modelList: [{ provider: { provider: 'openai' }, models: [{ model: 'text-embedding-ada-002' }] }],
+    defaultModel: { provider: { provider: 'openai' }, model: 'text-embedding-ada-002' },
+    currentModel: true,
+  }),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/declarations', () => ({
+  ModelTypeEnum: {
+    textEmbedding: 'text-embedding',
+  },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: () => (
+    <div data-testid="model-selector">Model Selector</div>
+  ),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <AnnotationReply disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('AnnotationReply', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsShowAnnotationConfigInit = false
+    mockIsShowAnnotationFullModal = false
+    capturedSetAnnotationConfig = null
+  })
+
+  it('should render the annotation reply title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.annotation\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description when not enabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.annotation\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call setIsShowAnnotationConfigInit when switch is toggled on', () => {
+    renderWithProvider()
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(mockSetIsShowAnnotationConfigInit).toHaveBeenCalledWith(true)
+  })
+
+  it('should call handleDisableAnnotation when switch is toggled off', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(mockHandleDisableAnnotation).toHaveBeenCalled()
+  })
+
+  it('should show score threshold and embedding model when enabled', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    expect(screen.getByText('0.9')).toBeInTheDocument()
+    expect(screen.getByText('text-embedding-ada-002')).toBeInTheDocument()
+  })
+
+  it('should show dash when score threshold is not set', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('should show buttons when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.annotation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/operation\.params/)).toBeInTheDocument()
+    expect(screen.getByText(/feature\.annotation\.cacheManagement/)).toBeInTheDocument()
+  })
+
+  it('should call setIsShowAnnotationConfigInit when params button is clicked', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.annotation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.params/))
+
+    expect(mockSetIsShowAnnotationConfigInit).toHaveBeenCalledWith(true)
+  })
+
+  it('should navigate to annotations page when cache management is clicked', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.annotation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/feature\.annotation\.cacheManagement/))
+
+    expect(mockPush).toHaveBeenCalledWith('/app/test-app-id/annotations')
+  })
+
+  it('should show config param modal when isShowAnnotationConfigInit is true', () => {
+    mockIsShowAnnotationConfigInit = true
+    renderWithProvider()
+
+    expect(screen.getByText(/initSetup\.title/)).toBeInTheDocument()
+  })
+
+  it('should hide config modal when hide is clicked', () => {
+    mockIsShowAnnotationConfigInit = true
+    renderWithProvider()
+
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/ }))
+
+    expect(mockSetIsShowAnnotationConfigInit).toHaveBeenCalledWith(false)
+  })
+
+  it('should call handleEnableAnnotation when config save is clicked', async () => {
+    mockIsShowAnnotationConfigInit = true
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByText(/initSetup\.confirmBtn/))
+
+    expect(mockHandleEnableAnnotation).toHaveBeenCalled()
+  })
+
+  it('should show annotation full modal when isShowAnnotationFullModal is true', () => {
+    mockIsShowAnnotationFullModal = true
+    renderWithProvider()
+
+    expect(screen.getByTestId('annotation-full-modal')).toBeInTheDocument()
+  })
+
+  it('should hide annotation full modal when hide is clicked', () => {
+    mockIsShowAnnotationFullModal = true
+    renderWithProvider()
+
+    fireEvent.click(screen.getByTestId('full-hide'))
+
+    expect(mockSetIsShowAnnotationFullModal).toHaveBeenCalledWith(false)
+  })
+
+  it('should call handleEnableAnnotation and hide config modal on save', async () => {
+    mockIsShowAnnotationConfigInit = true
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByText(/initSetup\.confirmBtn/))
+
+    // handleEnableAnnotation should be called with embedding model and score
+    expect(mockHandleEnableAnnotation).toHaveBeenCalledWith(
+      { embedding_provider_name: 'openai', embedding_model_name: 'text-embedding-ada-002' },
+      0.9,
+    )
+
+    // After save resolves, config init should be hidden
+    await vi.waitFor(() => {
+      expect(mockSetIsShowAnnotationConfigInit).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it('should update features and call onChange when updateAnnotationReply is invoked', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    // The captured setAnnotationConfig is the component's updateAnnotationReply callback
+    expect(capturedSetAnnotationConfig).not.toBeNull()
+    capturedSetAnnotationConfig!({
+      enabled: true,
+      score_threshold: 0.8,
+      embedding_model: {
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'new-model',
+      },
+    })
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should update features without calling onChange when onChange is not provided', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    // Should not throw when onChange is not provided
+    expect(capturedSetAnnotationConfig).not.toBeNull()
+    expect(() => {
+      capturedSetAnnotationConfig!({
+        enabled: true,
+        score_threshold: 0.7,
+      })
+    }).not.toThrow()
+  })
+
+  it('should hide info display when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    // Before hover, info is visible
+    expect(screen.getByText('0.9')).toBeInTheDocument()
+
+    const card = screen.getByText(/feature\.annotation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    // After hover, buttons shown instead of info
+    expect(screen.getByText(/operation\.params/)).toBeInTheDocument()
+    expect(screen.queryByText('0.9')).not.toBeInTheDocument()
+  })
+
+  it('should show info display again when mouse leaves', () => {
+    renderWithProvider({}, {
+      annotationReply: {
+        enabled: true,
+        score_threshold: 0.9,
+        embedding_model: {
+          embedding_provider_name: 'openai',
+          embedding_model_name: 'text-embedding-ada-002',
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.annotation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.mouseLeave(card)
+
+    expect(screen.getByText('0.9')).toBeInTheDocument()
+  })
+
+  it('should pass isInit prop to ConfigParamModal', () => {
+    mockIsShowAnnotationConfigInit = true
+    renderWithProvider()
+
+    expect(screen.getByText(/initSetup\.confirmBtn/)).toBeInTheDocument()
+    expect(screen.queryByText(/initSetup\.configConfirmBtn/)).not.toBeInTheDocument()
+  })
+
+  it('should not show annotation full modal when isShowAnnotationFullModal is false', () => {
+    mockIsShowAnnotationFullModal = false
+    renderWithProvider()
+
+    expect(screen.queryByTestId('annotation-full-modal')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.spec.tsx
new file mode 100644
index 0000000000..21e187091c
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.spec.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import Slider from './index'
+
+describe('BaseSlider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the slider component', () => {
+    render(<Slider value={50} onChange={vi.fn()} />)
+
+    expect(screen.getByRole('slider')).toBeInTheDocument()
+  })
+
+  it('should display the formatted value in the thumb', () => {
+    render(<Slider value={85} onChange={vi.fn()} />)
+
+    expect(screen.getByText('0.85')).toBeInTheDocument()
+  })
+
+  it('should use default min/max/step when not provided', () => {
+    render(<Slider value={50} onChange={vi.fn()} />)
+
+    const slider = screen.getByRole('slider')
+    expect(slider).toHaveAttribute('aria-valuemin', '0')
+    expect(slider).toHaveAttribute('aria-valuemax', '100')
+    expect(slider).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('should use custom min/max/step when provided', () => {
+    render(<Slider value={90} min={80} max={100} step={5} onChange={vi.fn()} />)
+
+    const slider = screen.getByRole('slider')
+    expect(slider).toHaveAttribute('aria-valuemin', '80')
+    expect(slider).toHaveAttribute('aria-valuemax', '100')
+    expect(slider).toHaveAttribute('aria-valuenow', '90')
+  })
+
+  it('should handle NaN value as 0', () => {
+    render(<Slider value={Number.NaN} onChange={vi.fn()} />)
+
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0')
+  })
+
+  it('should pass disabled prop', () => {
+    render(<Slider value={50} disabled onChange={vi.fn()} />)
+
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.spec.tsx
new file mode 100644
index 0000000000..008c6369e1
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.spec.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import ScoreSlider from './index'
+
+vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider', () => ({
+  default: ({ value, onChange, min, max }: { value: number, onChange: (v: number) => void, min: number, max: number }) => (
+    <input
+      type="range"
+      data-testid="slider"
+      value={value}
+      min={min}
+      max={max}
+      onChange={e => onChange(Number(e.target.value))}
+    />
+  ),
+}))
+
+describe('ScoreSlider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the slider', () => {
+    render(<ScoreSlider value={90} onChange={vi.fn()} />)
+
+    expect(screen.getByTestId('slider')).toBeInTheDocument()
+  })
+
+  it('should display easy match and accurate match labels', () => {
+    render(<ScoreSlider value={90} onChange={vi.fn()} />)
+
+    expect(screen.getByText('0.8')).toBeInTheDocument()
+    expect(screen.getByText('1.0')).toBeInTheDocument()
+    expect(screen.getByText(/feature\.annotation\.scoreThreshold\.easyMatch/)).toBeInTheDocument()
+    expect(screen.getByText(/feature\.annotation\.scoreThreshold\.accurateMatch/)).toBeInTheDocument()
+  })
+
+  it('should render with custom className', () => {
+    const { container } = render(<ScoreSlider className="custom-class" value={90} onChange={vi.fn()} />)
+
+    // Verifying the component renders successfully with a custom className
+    expect(screen.getByTestId('slider')).toBeInTheDocument()
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('should pass value to the slider', () => {
+    render(<ScoreSlider value={95} onChange={vi.fn()} />)
+
+    expect(screen.getByTestId('slider')).toHaveValue('95')
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/type.spec.ts b/web/app/components/base/features/new-feature-panel/annotation-reply/type.spec.ts
new file mode 100644
index 0000000000..0bbb6d695b
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/type.spec.ts
@@ -0,0 +1,8 @@
+import { PageType } from './type'
+
+describe('PageType', () => {
+  it('should have log and annotation values', () => {
+    expect(PageType.log).toBe('log')
+    expect(PageType.annotation).toBe('annotation')
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.spec.ts b/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.spec.ts
new file mode 100644
index 0000000000..f7ea3a0117
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.spec.ts
@@ -0,0 +1,241 @@
+import type { AnnotationReplyConfig } from '@/models/debug'
+import { act, renderHook } from '@testing-library/react'
+import useAnnotationConfig from './use-annotation-config'
+
+let mockIsAnnotationFull = false
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: {
+      usage: { annotatedResponse: mockIsAnnotationFull ? 100 : 5 },
+      total: { annotatedResponse: 100 },
+    },
+    enableBilling: true,
+  }),
+}))
+
+vi.mock('@/service/annotation', () => ({
+  updateAnnotationStatus: vi.fn().mockResolvedValue({ job_id: 'test-job-id' }),
+  queryAnnotationJobStatus: vi.fn().mockResolvedValue({ job_status: 'completed' }),
+}))
+
+vi.mock('@/utils', () => ({
+  sleep: vi.fn().mockResolvedValue(undefined),
+}))
+
+describe('useAnnotationConfig', () => {
+  const defaultConfig: AnnotationReplyConfig = {
+    id: 'test-id',
+    enabled: false,
+    score_threshold: 0.9,
+    embedding_model: {
+      embedding_provider_name: 'openai',
+      embedding_model_name: 'text-embedding-ada-002',
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsAnnotationFull = false
+  })
+
+  it('should initialize with annotation config init hidden', () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    expect(result.current.isShowAnnotationConfigInit).toBe(false)
+    expect(result.current.isShowAnnotationFullModal).toBe(false)
+  })
+
+  it('should show annotation config init modal', () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    act(() => {
+      result.current.setIsShowAnnotationConfigInit(true)
+    })
+
+    expect(result.current.isShowAnnotationConfigInit).toBe(true)
+  })
+
+  it('should hide annotation config init modal', () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    act(() => {
+      result.current.setIsShowAnnotationConfigInit(true)
+    })
+    act(() => {
+      result.current.setIsShowAnnotationConfigInit(false)
+    })
+
+    expect(result.current.isShowAnnotationConfigInit).toBe(false)
+  })
+
+  it('should enable annotation and update config', async () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    await act(async () => {
+      await result.current.handleEnableAnnotation({
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding-3-small',
+      }, 0.95)
+    })
+
+    expect(setAnnotationConfig).toHaveBeenCalled()
+    const updatedConfig = setAnnotationConfig.mock.calls[0][0]
+    expect(updatedConfig.enabled).toBe(true)
+    expect(updatedConfig.embedding_model.embedding_model_name).toBe('text-embedding-3-small')
+  })
+
+  it('should disable annotation and update config', async () => {
+    const enabledConfig = { ...defaultConfig, enabled: true }
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: enabledConfig,
+      setAnnotationConfig,
+    }))
+
+    await act(async () => {
+      await result.current.handleDisableAnnotation({
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding-ada-002',
+      })
+    })
+
+    expect(setAnnotationConfig).toHaveBeenCalled()
+    const updatedConfig = setAnnotationConfig.mock.calls[0][0]
+    expect(updatedConfig.enabled).toBe(false)
+  })
+
+  it('should not disable when already disabled', async () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    await act(async () => {
+      await result.current.handleDisableAnnotation({
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding-ada-002',
+      })
+    })
+
+    expect(setAnnotationConfig).not.toHaveBeenCalled()
+  })
+
+  it('should set score threshold', () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    act(() => {
+      result.current.setScore(0.85)
+    })
+
+    expect(setAnnotationConfig).toHaveBeenCalled()
+    const updatedConfig = setAnnotationConfig.mock.calls[0][0]
+    expect(updatedConfig.score_threshold).toBe(0.85)
+  })
+
+  it('should set score and embedding model together', () => {
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    act(() => {
+      result.current.setScore(0.95, {
+        embedding_provider_name: 'cohere',
+        embedding_model_name: 'embed-english',
+      })
+    })
+
+    expect(setAnnotationConfig).toHaveBeenCalled()
+    const updatedConfig = setAnnotationConfig.mock.calls[0][0]
+    expect(updatedConfig.score_threshold).toBe(0.95)
+    expect(updatedConfig.embedding_model.embedding_provider_name).toBe('cohere')
+  })
+
+  it('should show annotation full modal instead of config init when annotation is full', () => {
+    mockIsAnnotationFull = true
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    act(() => {
+      result.current.setIsShowAnnotationConfigInit(true)
+    })
+
+    expect(result.current.isShowAnnotationFullModal).toBe(true)
+    expect(result.current.isShowAnnotationConfigInit).toBe(false)
+  })
+
+  it('should not enable annotation when annotation is full', async () => {
+    mockIsAnnotationFull = true
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: defaultConfig,
+      setAnnotationConfig,
+    }))
+
+    await act(async () => {
+      await result.current.handleEnableAnnotation({
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding-3-small',
+      })
+    })
+
+    expect(setAnnotationConfig).not.toHaveBeenCalled()
+  })
+
+  it('should set default score_threshold when enabling without one', async () => {
+    const configWithoutThreshold = { ...defaultConfig, score_threshold: undefined as unknown as number }
+    const setAnnotationConfig = vi.fn()
+    const { result } = renderHook(() => useAnnotationConfig({
+      appId: 'test-app',
+      annotationConfig: configWithoutThreshold,
+      setAnnotationConfig,
+    }))
+
+    await act(async () => {
+      await result.current.handleEnableAnnotation({
+        embedding_provider_name: 'openai',
+        embedding_model_name: 'text-embedding-3-small',
+      }, 0.95)
+    })
+
+    expect(setAnnotationConfig).toHaveBeenCalled()
+    const updatedConfig = setAnnotationConfig.mock.calls[0][0]
+    expect(updatedConfig.enabled).toBe(true)
+    expect(updatedConfig.score_threshold).toBeDefined()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/citation.spec.tsx b/web/app/components/base/features/new-feature-panel/citation.spec.tsx
new file mode 100644
index 0000000000..ed50ea9337
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/citation.spec.tsx
@@ -0,0 +1,48 @@
+import type { OnFeaturesChange } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { FeaturesProvider } from '../context'
+import Citation from './citation'
+
+const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
+  return render(
+    <FeaturesProvider>
+      <Citation disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('Citation', () => {
+  it('should render the citation feature card', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.citation\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description text', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.citation\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not throw when onChange is not provided', () => {
+    renderWithProvider()
+
+    expect(() => fireEvent.click(screen.getByRole('switch'))).not.toThrow()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.spec.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.spec.tsx
new file mode 100644
index 0000000000..20e85c9378
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.spec.tsx
@@ -0,0 +1,187 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import ConversationOpener from './index'
+
+const mockSetShowOpeningModal = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowOpeningModal: mockSetShowOpeningModal,
+  }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <ConversationOpener disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('ConversationOpener', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the conversation opener title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.conversationOpener\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description when not enabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.conversationOpener\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show opening statement when enabled and not hovering', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: 'Welcome to the app!' },
+    })
+
+    expect(screen.getByText('Welcome to the app!')).toBeInTheDocument()
+  })
+
+  it('should show placeholder when enabled but no opening statement', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: '' },
+    })
+
+    expect(screen.getByText(/openingStatement\.placeholder/)).toBeInTheDocument()
+  })
+
+  it('should show edit button when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/openingStatement\.writeOpener/)).toBeInTheDocument()
+  })
+
+  it('should open modal when edit button is clicked', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
+
+    expect(mockSetShowOpeningModal).toHaveBeenCalled()
+  })
+
+  it('should not open modal when disabled', () => {
+    renderWithProvider({ disabled: true }, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
+
+    expect(mockSetShowOpeningModal).not.toHaveBeenCalled()
+  })
+
+  it('should pass opening data to modal', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
+
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
+    expect(modalCall.payload).toBeDefined()
+    expect(modalCall.onSaveCallback).toBeDefined()
+    expect(modalCall.onCancelCallback).toBeDefined()
+  })
+
+  it('should invoke onSaveCallback and update features', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
+
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
+    modalCall.onSaveCallback({ enabled: true, opening_statement: 'Updated' })
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should invoke onCancelCallback', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      opening: { enabled: true, opening_statement: 'Hello' },
+    })
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
+
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
+    modalCall.onCancelCallback()
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show info and hide when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      opening: { enabled: true, opening_statement: 'Welcome!' },
+    })
+
+    // Before hover, opening statement visible
+    expect(screen.getByText('Welcome!')).toBeInTheDocument()
+
+    const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    // After hover, button visible, statement hidden
+    expect(screen.getByText(/openingStatement\.writeOpener/)).toBeInTheDocument()
+
+    fireEvent.mouseLeave(card)
+
+    // After leave, statement visible again
+    expect(screen.getByText('Welcome!')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.spec.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.spec.tsx
new file mode 100644
index 0000000000..c5acda4bd5
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.spec.tsx
@@ -0,0 +1,510 @@
+import type { OpeningStatement } from '@/app/components/base/features/types'
+import type { InputVar } from '@/app/components/workflow/types'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InputVarType } from '@/app/components/workflow/types'
+import OpeningSettingModal from './modal'
+
+const getPromptEditor = () => {
+  const editor = document.querySelector('[data-lexical-editor="true"]')
+  expect(editor).toBeInTheDocument()
+  return editor as HTMLElement
+}
+
+vi.mock('@/utils/var', () => ({
+  checkKeys: (_keys: string[]) => ({ isValid: true }),
+  getNewVar: (key: string, type: string) => ({ key, name: key, type, required: true }),
+}))
+
+vi.mock('@/app/components/app/configuration/config-prompt/confirm-add-var', () => ({
+  default: ({ varNameArr, onConfirm, onCancel }: {
+    varNameArr: string[]
+    onConfirm: () => void
+    onCancel: () => void
+  }) => (
+    <div data-testid="confirm-add-var">
+      <span>{varNameArr.join(',')}</span>
+      <button data-testid="confirm-add" onClick={onConfirm}>Confirm</button>
+      <button data-testid="cancel-add" onClick={onCancel}>Cancel</button>
+    </div>
+  ),
+}))
+
+vi.mock('react-sortablejs', () => ({
+  ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+const defaultData: OpeningStatement = {
+  enabled: true,
+  opening_statement: 'Hello, how can I help?',
+  suggested_questions: ['Question 1', 'Question 2'],
+}
+
+const createMockInputVar = (overrides: Partial<InputVar> = {}): InputVar => ({
+  variable: 'name',
+  label: 'Name',
+  type: InputVarType.textInput,
+  required: true,
+  ...overrides,
+})
+
+describe('OpeningSettingModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the modal title', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText(/feature\.conversationOpener\.title/)).toBeInTheDocument()
+  })
+
+  it('should render the opening statement in the editor', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(getPromptEditor()).toHaveTextContent('Hello, how can I help?')
+  })
+
+  it('should render suggested questions', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByDisplayValue('Question 1')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Question 2')).toBeInTheDocument()
+  })
+
+  it('should render cancel and save buttons', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText(/operation\.cancel/)).toBeInTheDocument()
+    expect(screen.getByText(/operation\.save/)).toBeInTheDocument()
+  })
+
+  it('should call onCancel when cancel is clicked', async () => {
+    const onCancel = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.cancel/))
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should call onCancel when close icon is clicked', async () => {
+    const onCancel = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    const closeButton = screen.getByTestId('close-modal')
+    await userEvent.click(closeButton)
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should call onCancel when close icon receives Enter key', async () => {
+    const onCancel = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    const closeButton = screen.getByTestId('close-modal')
+    closeButton.focus()
+    await userEvent.keyboard('{Enter}')
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onCancel when close icon receives Space key', async () => {
+    const onCancel = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    const closeButton = screen.getByTestId('close-modal')
+    closeButton.focus()
+    fireEvent.keyDown(closeButton, { key: ' ' })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onSave with updated data when save is clicked', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      opening_statement: 'Hello, how can I help?',
+      suggested_questions: ['Question 1', 'Question 2'],
+    }))
+  })
+
+  it('should disable save when opening statement is empty', async () => {
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: '' }}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    const saveButton = screen.getByText(/operation\.save/).closest('button')
+    expect(saveButton).toBeDisabled()
+  })
+
+  it('should add a new suggested question', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    // Before adding: 2 existing questions
+    expect(screen.getByDisplayValue('Question 1')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Question 2')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByText(/variableConfig\.addOption/))
+
+    // After adding: the 2 existing questions still present plus 1 new empty one
+    expect(screen.getByDisplayValue('Question 1')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Question 2')).toBeInTheDocument()
+    // The new empty question renders as an input with empty value
+    const allInputs = screen.getAllByDisplayValue('')
+    expect(allInputs.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should delete a suggested question via save verification', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, suggested_questions: ['Question 1'] }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    // Question should be present initially
+    expect(screen.getByDisplayValue('Question 1')).toBeInTheDocument()
+
+    const deleteIconWrapper = screen.getByTestId('delete-question-Question 1').parentElement
+    expect(deleteIconWrapper).toBeTruthy()
+    await userEvent.click(deleteIconWrapper!)
+
+    // After deletion, Question 1 should be gone
+    expect(screen.queryByDisplayValue('Question 1')).not.toBeInTheDocument()
+  })
+
+  it('should update a suggested question value', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    const input = screen.getByDisplayValue('Question 1')
+    await userEvent.clear(input)
+    await userEvent.type(input, 'Updated Question')
+
+    expect(input).toHaveValue('Updated Question')
+  })
+
+  it('should show confirm dialog when variables are not in prompt', async () => {
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{name}}' }}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    expect(screen.getByTestId('confirm-add-var')).toBeInTheDocument()
+  })
+
+  it('should save without variable check when confirm cancel is clicked', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{name}}' }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+    await userEvent.click(screen.getByTestId('cancel-add'))
+
+    expect(onSave).toHaveBeenCalled()
+  })
+
+  it('should show question count', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    // Count is displayed as "2/10" across child elements
+    expect(screen.getByText(/openingStatement\.openingQuestion/)).toBeInTheDocument()
+  })
+
+  it('should call onAutoAddPromptVariable when confirm add is clicked', async () => {
+    const onAutoAddPromptVariable = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{name}}' }}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+        onAutoAddPromptVariable={onAutoAddPromptVariable}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+    // Confirm add var dialog should appear
+    await userEvent.click(screen.getByTestId('confirm-add'))
+
+    expect(onAutoAddPromptVariable).toHaveBeenCalled()
+  })
+
+  it('should not show add button when max questions reached', async () => {
+    const questionsAtMax: OpeningStatement = {
+      enabled: true,
+      opening_statement: 'Hello',
+      suggested_questions: Array.from({ length: 10 }, (_, i) => `Q${i + 1}`),
+    }
+    await render(
+      <OpeningSettingModal
+        data={questionsAtMax}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(screen.queryByText(/variableConfig\.addOption/)).not.toBeInTheDocument()
+  })
+
+  it('should apply and remove focused styling on question input focus/blur', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    const input = screen.getByDisplayValue('Question 1') as HTMLInputElement
+    const questionRow = input.parentElement
+
+    expect(input).toBeInTheDocument()
+    expect(questionRow).not.toHaveClass('border-components-input-border-active')
+
+    await userEvent.click(input)
+    expect(questionRow).toHaveClass('border-components-input-border-active')
+
+    // Tab press to blur
+    await userEvent.tab()
+    expect(questionRow).not.toHaveClass('border-components-input-border-active')
+  })
+
+  it('should apply and remove deleting styling on delete icon hover', async () => {
+    await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    const questionInput = screen.getByDisplayValue('Question 1') as HTMLInputElement
+    const questionRow = questionInput.parentElement
+    const deleteIconWrapper = screen.getByTestId('delete-question-Question 1').parentElement
+
+    expect(questionRow).not.toHaveClass('border-components-input-border-destructive')
+    expect(deleteIconWrapper).toBeTruthy()
+
+    await userEvent.hover(deleteIconWrapper!)
+    expect(questionRow).toHaveClass('border-components-input-border-destructive')
+
+    await userEvent.unhover(deleteIconWrapper!)
+    expect(questionRow).not.toHaveClass('border-components-input-border-destructive')
+  })
+
+  it('should handle save with empty suggested questions', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, suggested_questions: [] }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      suggested_questions: [],
+    }))
+  })
+
+  it('should not save when opening statement is only whitespace', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: '   ' }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  it('should skip variable check when variables match prompt variables', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{name}}' }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+        promptVariables={[{ key: 'name', name: 'Name', type: 'string', required: true }]}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    // Variable is in promptVariables, so no confirm dialog
+    expect(screen.queryByTestId('confirm-add-var')).not.toBeInTheDocument()
+    expect(onSave).toHaveBeenCalled()
+  })
+
+  it('should skip variable check when variables match workflow variables', async () => {
+    const onSave = vi.fn()
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{name}}' }}
+        onSave={onSave}
+        onCancel={vi.fn()}
+        workflowVariables={[createMockInputVar()]}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    // Variable matches workflow variables, so no confirm dialog
+    expect(screen.queryByTestId('confirm-add-var')).not.toBeInTheDocument()
+    expect(onSave).toHaveBeenCalled()
+  })
+
+  it('should show confirm dialog when variables not in workflow variables', async () => {
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: 'Hello {{unknown}}' }}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+        workflowVariables={[createMockInputVar()]}
+      />,
+    )
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+
+    expect(screen.getByTestId('confirm-add-var')).toBeInTheDocument()
+  })
+
+  it('should use updated opening statement after prop changes', async () => {
+    const onSave = vi.fn()
+    const view = await render(
+      <OpeningSettingModal
+        data={defaultData}
+        onSave={onSave}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await act(async () => {
+      view.rerender(
+        <OpeningSettingModal
+          data={{ ...defaultData, opening_statement: 'New greeting!' }}
+          onSave={onSave}
+          onCancel={vi.fn()}
+        />,
+      )
+      await Promise.resolve()
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+
+    await userEvent.click(screen.getByText(/operation\.save/))
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      opening_statement: 'New greeting!',
+    }))
+  })
+
+  it('should render empty opening statement with placeholder in editor', async () => {
+    await render(
+      <OpeningSettingModal
+        data={{ ...defaultData, opening_statement: '' }}
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    const editor = getPromptEditor()
+    expect(editor.textContent?.trim()).toBe('')
+    expect(screen.getByText('appDebug.openingStatement.placeholder')).toBeInTheDocument()
+  })
+})
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 79520134a4..a7f1e013f5 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -1,7 +1,6 @@
 import type { OpeningStatement } from '@/app/components/base/features/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
-import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -139,7 +138,7 @@ const OpeningSettingModal = ({
                 )}
                 key={index}
               >
-                <RiDraggable className="handle h-4 w-4 cursor-grab text-text-quaternary" />
+                <span className="handle i-ri-draggable h-4 w-4 cursor-grab text-text-quaternary" />
                 <input
                   type="input"
                   value={question || ''}
@@ -166,7 +165,7 @@ const OpeningSettingModal = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className="h-3.5 w-3.5" />
+                  <span className="i-ri-delete-bin-line h-3.5 w-3.5" data-testid={`delete-question-${question}`} />
                 </div>
               </div>
             )
@@ -175,10 +174,10 @@ const OpeningSettingModal = ({
         {tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
           <div
             onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
-            className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3  text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
+            className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
           >
-            <RiAddLine className="h-4 w-4" />
-            <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
+            <span className="i-ri-add-line h-4 w-4" />
+            <div className="text-[13px] system-sm-medium">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
           </div>
         )}
       </div>
@@ -192,12 +191,26 @@ const OpeningSettingModal = ({
       className="!mt-14 !w-[640px] !max-w-none !bg-components-panel-bg-blur !p-6"
     >
       <div className="mb-6 flex items-center justify-between">
-        <div className="title-2xl-semi-bold text-text-primary">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
-        <div className="cursor-pointer p-1" onClick={onCancel}><RiCloseLine className="h-4 w-4 text-text-tertiary" /></div>
+        <div className="text-text-primary title-2xl-semi-bold">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
+        <div
+          className="cursor-pointer p-1"
+          onClick={onCancel}
+          data-testid="close-modal"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onCancel()
+            }
+          }}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
       </div>
       <div className="mb-8 flex gap-2">
         <div className="mt-1.5 h-8 w-8 shrink-0 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500 p-1.5">
-          <RiAsterisk className="h-5 w-5 text-text-primary-on-surface" />
+          <span className="i-ri-asterisk h-5 w-5 text-text-primary-on-surface" />
         </div>
         <div className="grow rounded-2xl border-t border-divider-subtle bg-chat-bubble-bg p-3 shadow-xs">
           <PromptEditor
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.spec.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.spec.tsx
new file mode 100644
index 0000000000..b5f8f71d60
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.spec.tsx
@@ -0,0 +1,105 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import DialogWrapper from './dialog-wrapper'
+
+describe('DialogWrapper', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render children when show is true', () => {
+      render(
+        <DialogWrapper show>
+          <div data-testid="content">Content</div>
+        </DialogWrapper>,
+      )
+
+      expect(screen.getByTestId('content')).toBeInTheDocument()
+    })
+
+    it('should not render children when show is false', () => {
+      render(
+        <DialogWrapper show={false}>
+          <div data-testid="content">Content</div>
+        </DialogWrapper>,
+      )
+
+      expect(screen.queryByTestId('content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply workflow styles by default', () => {
+      render(
+        <DialogWrapper show>
+          <div data-testid="content">Content</div>
+        </DialogWrapper>,
+      )
+
+      const wrapper = screen.getByTestId('content').parentElement
+      expect(wrapper).toHaveClass('rounded-l-2xl')
+      expect(wrapper).not.toHaveClass('rounded-2xl')
+    })
+
+    it('should apply non-workflow styles when inWorkflow is false', () => {
+      render(
+        <DialogWrapper show inWorkflow={false}>
+          <div data-testid="content">Content</div>
+        </DialogWrapper>,
+      )
+
+      const content = screen.getByTestId('content')
+      const panel = content.parentElement
+      const layoutContainer = screen.getByTestId('dialog-layout-container')
+
+      expect(layoutContainer).toHaveClass('pr-2')
+      expect(layoutContainer).toHaveClass('pt-[64px]')
+      expect(layoutContainer).not.toHaveClass('pt-[112px]')
+
+      expect(panel).toHaveClass('rounded-2xl')
+      expect(panel).toHaveClass('border-[0.5px]')
+      expect(panel).not.toHaveClass('rounded-l-2xl')
+    })
+
+    it('should accept custom className', () => {
+      render(
+        <DialogWrapper show className="custom-class">
+          <div data-testid="content">Content</div>
+        </DialogWrapper>,
+      )
+
+      const wrapper = screen.getByTestId('content').parentElement
+      expect(wrapper).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Close behavior', () => {
+    it('should call onClose when escape is pressed', async () => {
+      const onClose = vi.fn()
+
+      render(
+        <DialogWrapper show onClose={onClose}>
+          <div>Content</div>
+        </DialogWrapper>,
+      )
+
+      fireEvent.keyDown(document, { key: 'Escape' })
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('should not throw when escape is pressed without onClose', () => {
+      render(
+        <DialogWrapper show>
+          <div>Content</div>
+        </DialogWrapper>,
+      )
+
+      expect(() => {
+        fireEvent.keyDown(document, { key: 'Escape' })
+      }).not.toThrow()
+    })
+  })
+})
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 5a312d1b64..c052b27136 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
@@ -33,12 +33,12 @@ const DialogWrapper = ({
         </TransitionChild>
 
         <div className="fixed inset-0">
-          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')}>
+          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')} data-testid="dialog-layout-container">
             <TransitionChild>
               <DialogPanel className={cn(
                 'relative flex h-0 w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle shadow-xl transition-all',
                 inWorkflow ? 'rounded-l-2xl border-b-[0.5px] border-l-[0.5px] border-t-[0.5px]' : 'rounded-2xl border-[0.5px]',
-                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                'data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
                 'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
                 className,
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.spec.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.spec.tsx
new file mode 100644
index 0000000000..a02b70c01e
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.spec.tsx
@@ -0,0 +1,172 @@
+import type { Features } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../context'
+import FeatureBar from './feature-bar'
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: {
+    isChatMode?: boolean
+    showFileUpload?: boolean
+    disabled?: boolean
+    onFeatureBarClick?: (state: boolean) => void
+    hideEditEntrance?: boolean
+  } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <FeatureBar {...props} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('FeatureBar', () => {
+  describe('Empty State', () => {
+    it('should render empty state when no features are enabled', () => {
+      renderWithProvider()
+
+      expect(screen.getByText(/feature\.bar\.empty/)).toBeInTheDocument()
+    })
+
+    it('should call onFeatureBarClick when empty state is clicked', () => {
+      const onFeatureBarClick = vi.fn()
+
+      renderWithProvider({ onFeatureBarClick })
+      fireEvent.click(screen.getByText(/feature\.bar\.empty/))
+
+      expect(onFeatureBarClick).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('Enabled Features', () => {
+    it('should show enabled text when moreLikeThis is enabled', () => {
+      renderWithProvider({}, {
+        moreLikeThis: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show manage button when features are enabled', () => {
+      renderWithProvider({}, {
+        moreLikeThis: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.manage/)).toBeInTheDocument()
+    })
+
+    it('should hide manage button when hideEditEntrance is true', () => {
+      renderWithProvider({ hideEditEntrance: true }, {
+        moreLikeThis: { enabled: true },
+      })
+
+      expect(screen.queryByText(/feature\.bar\.manage/)).not.toBeInTheDocument()
+    })
+
+    it('should call onFeatureBarClick when manage button is clicked', () => {
+      const onFeatureBarClick = vi.fn()
+
+      renderWithProvider({ onFeatureBarClick }, {
+        moreLikeThis: { enabled: true },
+      })
+      fireEvent.click(screen.getByText(/feature\.bar\.manage/))
+
+      expect(onFeatureBarClick).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('Chat Mode Features', () => {
+    it('should show enabled text when citation is enabled in chat mode', () => {
+      renderWithProvider({ isChatMode: true }, {
+        citation: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show empty state when citation is enabled but not in chat mode', () => {
+      renderWithProvider({ isChatMode: false }, {
+        citation: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.empty/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when opening is enabled in chat mode', () => {
+      renderWithProvider({ isChatMode: true }, {
+        opening: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when file is enabled with showFileUpload', () => {
+      renderWithProvider({ showFileUpload: true }, {
+        file: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show empty state when file is enabled but showFileUpload is false', () => {
+      renderWithProvider({ showFileUpload: false }, {
+        file: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.empty/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when speech2text is enabled in chat mode', () => {
+      renderWithProvider({ isChatMode: true }, {
+        speech2text: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when text2speech is enabled', () => {
+      renderWithProvider({ isChatMode: true }, {
+        text2speech: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when moderation is enabled', () => {
+      renderWithProvider({ isChatMode: true }, {
+        moderation: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when suggested is enabled', () => {
+      renderWithProvider({ isChatMode: true }, {
+        suggested: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+
+    it('should show enabled text when annotationReply is enabled in chat mode', () => {
+      renderWithProvider({ isChatMode: true }, {
+        annotationReply: { enabled: true },
+      })
+
+      expect(screen.getByText(/feature\.bar\.enableText/)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.spec.tsx b/web/app/components/base/features/new-feature-panel/feature-card.spec.tsx
new file mode 100644
index 0000000000..1f4f1b9fad
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/feature-card.spec.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import FeatureCard from './feature-card'
+
+describe('FeatureCard', () => {
+  const defaultProps = {
+    icon: <div data-testid="icon">icon</div>,
+    title: 'Test Feature',
+    value: false,
+  }
+
+  it('should render icon and title', () => {
+    render(<FeatureCard {...defaultProps} />)
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+    expect(screen.getByText(/Test Feature/)).toBeInTheDocument()
+  })
+
+  it('should render description when provided', () => {
+    render(<FeatureCard {...defaultProps} description="A test description" />)
+
+    expect(screen.getByText(/A test description/)).toBeInTheDocument()
+  })
+
+  it('should not render description when not provided', () => {
+    render(<FeatureCard {...defaultProps} />)
+
+    expect(screen.queryByText(/description/i)).not.toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    render(<FeatureCard {...defaultProps} />)
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when switch is toggled', () => {
+    const onChange = vi.fn()
+    render(<FeatureCard {...defaultProps} onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should render tooltip when provided', () => {
+    render(<FeatureCard {...defaultProps} tooltip="Helpful tip" />)
+
+    // Tooltip text is passed as prop, verifying the component renders with it
+    expect(screen.getByText(/Test Feature/)).toBeInTheDocument()
+  })
+
+  it('should not render tooltip when not provided', () => {
+    render(<FeatureCard {...defaultProps} />)
+
+    // Without tooltip, the title should still render
+    expect(screen.getByText(/Test Feature/)).toBeInTheDocument()
+  })
+
+  it('should render children when provided', () => {
+    render(
+      <FeatureCard {...defaultProps}>
+        <div data-testid="child-content">Child</div>
+      </FeatureCard>,
+    )
+
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+  })
+
+  it('should call onMouseEnter when hovering', () => {
+    const onMouseEnter = vi.fn()
+    render(<FeatureCard {...defaultProps} onMouseEnter={onMouseEnter} />)
+
+    const card = screen.getByText(/Test Feature/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(onMouseEnter).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onMouseLeave when mouse leaves', () => {
+    const onMouseLeave = vi.fn()
+    render(<FeatureCard {...defaultProps} onMouseLeave={onMouseLeave} />)
+
+    const card = screen.getByText(/Test Feature/).closest('[class]')!
+    fireEvent.mouseLeave(card)
+
+    expect(onMouseLeave).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle disabled state', () => {
+    render(<FeatureCard {...defaultProps} disabled={true} />)
+
+    const switchElement = screen.getByRole('switch')
+    expect(switchElement).toBeInTheDocument()
+  })
+
+  it('should not call onChange when onChange is not provided', () => {
+    render(<FeatureCard {...defaultProps} />)
+
+    // Should not throw when switch is clicked without onChange
+    expect(() => fireEvent.click(screen.getByRole('switch'))).not.toThrow()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.spec.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.spec.tsx
new file mode 100644
index 0000000000..b39156c196
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.spec.tsx
@@ -0,0 +1,191 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import FileUpload from './index'
+
+vi.mock('@/service/use-common', () => ({
+  useFileUploadConfig: () => ({ data: undefined }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <FileUpload disabled={props.disabled ?? false} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('FileUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the file upload title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.fileUpload\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description when disabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.fileUpload\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show supported types when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image', 'document'],
+        number_limits: 5,
+      },
+    })
+
+    expect(screen.getByText('image,document')).toBeInTheDocument()
+  })
+
+  it('should show number limits when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('should show dash when no allowed file types', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+      },
+    })
+
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('should show settings button when hovering', () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.fileUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should open setting modal when settings is clicked', async () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.fileUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.fileUpload\.modalTitle/)).toBeInTheDocument()
+    })
+  })
+
+  it('should show supported types label when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    expect(screen.getByText(/feature\.fileUpload\.supportedTypes/)).toBeInTheDocument()
+    expect(screen.getByText(/feature\.fileUpload\.numberLimit/)).toBeInTheDocument()
+  })
+
+  it('should hide info display when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    const card = screen.getByText(/feature\.fileUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    // Info display should be hidden, settings button should appear
+    expect(screen.queryByText(/feature\.fileUpload\.supportedTypes/)).not.toBeInTheDocument()
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should show info display again when mouse leaves', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    const card = screen.getByText(/feature\.fileUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.mouseLeave(card)
+
+    expect(screen.getByText(/feature\.fileUpload\.supportedTypes/)).toBeInTheDocument()
+  })
+
+  it('should close setting modal when cancel is clicked', async () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.fileUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.fileUpload\.modalTitle/)).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/ }))
+
+    await waitFor(() => {
+      expect(screen.queryByText(/feature\.fileUpload\.modalTitle/)).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.spec.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.spec.tsx
new file mode 100644
index 0000000000..ca5b4677bf
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.spec.tsx
@@ -0,0 +1,204 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TransferMethod } from '@/types/app'
+import { FeaturesProvider } from '../../context'
+import SettingContent from './setting-content'
+
+vi.mock('@/app/components/workflow/nodes/_base/components/file-upload-setting', () => ({
+  default: ({ payload, onChange }: { payload: Record<string, unknown>, onChange: (p: Record<string, unknown>) => void }) => (
+    <div data-testid="file-upload-setting">
+      <span data-testid="payload">{JSON.stringify(payload)}</span>
+      <button
+        data-testid="change-setting"
+        onClick={() => onChange({
+          ...payload,
+          allowed_file_types: ['document'],
+        })}
+      >
+        Change
+      </button>
+      <button
+        data-testid="clear-file-types"
+        onClick={() => onChange({
+          ...payload,
+          allowed_file_types: [],
+        })}
+      >
+        Clear
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/types', () => ({
+  SupportUploadFileTypes: {
+    image: 'image',
+  },
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: {
+    enabled: true,
+    allowed_file_upload_methods: [TransferMethod.local_file],
+    allowed_file_types: ['image'],
+    allowed_file_extensions: ['.jpg'],
+    number_limits: 5,
+  },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { imageUpload?: boolean, onClose?: () => void, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <SettingContent
+        imageUpload={props.imageUpload}
+        onClose={props.onClose ?? vi.fn()}
+        onChange={props.onChange}
+      />
+    </FeaturesProvider>,
+  )
+}
+
+describe('SettingContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render file upload modal title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.fileUpload\.modalTitle/)).toBeInTheDocument()
+  })
+
+  it('should render image upload modal title when imageUpload is true', () => {
+    renderWithProvider({ imageUpload: true })
+
+    expect(screen.getByText(/feature\.imageUpload\.modalTitle/)).toBeInTheDocument()
+  })
+
+  it('should render FileUploadSetting component with payload from file feature', () => {
+    renderWithProvider()
+
+    expect(screen.getByTestId('file-upload-setting')).toBeInTheDocument()
+    const payload = screen.getByTestId('payload')
+    expect(payload.textContent).toContain('"allowed_file_upload_methods":["local_file"]')
+    expect(payload.textContent).toContain('"allowed_file_types":["image"]')
+    expect(payload.textContent).toContain('"allowed_file_extensions":[".jpg"]')
+    expect(payload.textContent).toContain('"max_length":5')
+  })
+
+  it('should use fallback payload values when file feature is undefined', () => {
+    renderWithProvider({}, { file: undefined })
+
+    const payload = screen.getByTestId('payload')
+    expect(payload.textContent).toContain('"allowed_file_upload_methods":["local_file","remote_url"]')
+    expect(payload.textContent).toContain('"allowed_file_types":["image"]')
+    expect(payload.textContent).toContain('"max_length":3')
+  })
+
+  it('should render cancel and save buttons', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/operation\.cancel/)).toBeInTheDocument()
+    expect(screen.getByText(/operation\.save/)).toBeInTheDocument()
+  })
+
+  it('should call onClose when close icon is clicked', () => {
+    const onClose = vi.fn()
+    renderWithProvider({ onClose })
+
+    const closeIconButton = screen.getByTestId('close-setting-modal')
+    expect(closeIconButton).toBeInTheDocument()
+    if (!closeIconButton)
+      throw new Error('Close icon button should exist')
+
+    fireEvent.click(closeIconButton)
+
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('should call onClose when close icon receives Enter key', async () => {
+    const onClose = vi.fn()
+    renderWithProvider({ onClose })
+
+    const closeIconButton = screen.getByTestId('close-setting-modal')
+    closeIconButton.focus()
+    await userEvent.keyboard('{Enter}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onClose when close icon receives Space key', async () => {
+    const onClose = vi.fn()
+    renderWithProvider({ onClose })
+
+    const closeIconButton = screen.getByTestId('close-setting-modal')
+    closeIconButton.focus()
+    fireEvent.keyDown(closeIconButton, { key: ' ' })
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onClose when cancel button is clicked to close', () => {
+    const onClose = vi.fn()
+    renderWithProvider({ onClose })
+
+    // Use the cancel button to test the close behavior
+    fireEvent.click(screen.getByText(/operation\.cancel/))
+
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('should call onChange when save is clicked', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should not throw when save is clicked without onChange', () => {
+    renderWithProvider()
+
+    expect(() => {
+      fireEvent.click(screen.getByText(/operation\.save/))
+    }).not.toThrow()
+  })
+
+  it('should disable save button when allowed file types are empty', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByTestId('clear-file-types'))
+
+    const saveButton = screen.getByRole('button', { name: /operation\.save/ })
+    expect(saveButton).toBeDisabled()
+
+    fireEvent.click(saveButton)
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('should update temp payload when FileUploadSetting onChange is called', () => {
+    renderWithProvider()
+
+    // Click the change button in mock FileUploadSetting to trigger setTempPayload
+    fireEvent.click(screen.getByTestId('change-setting'))
+
+    // The payload should be updated with the new allowed_file_types
+    const payload = screen.getByTestId('payload')
+    expect(payload.textContent).toContain('document')
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index f871cb6b02..b6674abf07 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -1,6 +1,5 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { UploadFileSetting } from '@/app/components/workflow/types'
-import { RiCloseLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
@@ -58,8 +57,22 @@ const SettingContent = ({
   return (
     <>
       <div className="mb-4 flex items-center justify-between">
-        <div className="system-xl-semibold text-text-primary">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
-        <div className="cursor-pointer p-1" onClick={onClose}><RiCloseLine className="h-4 w-4 text-text-tertiary" /></div>
+        <div className="text-text-primary system-xl-semibold">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
+        <div
+          className="cursor-pointer p-1"
+          onClick={onClose}
+          data-testid="close-setting-modal"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose()
+            }
+          }}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
       </div>
       <FileUploadSetting
         isMultiple
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.spec.tsx
new file mode 100644
index 0000000000..b3a78c438f
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.spec.tsx
@@ -0,0 +1,140 @@
+import type { Features } from '../../types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import { FeaturesProvider } from '../../context'
+import FileUploadSettings from './setting-modal'
+
+vi.mock('@/service/use-common', () => ({
+  useFileUploadConfig: () => ({ data: undefined }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: {
+    enabled: true,
+    allowed_file_upload_methods: [TransferMethod.local_file],
+    allowed_file_types: ['image'],
+    allowed_file_extensions: ['.jpg'],
+    number_limits: 5,
+  },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (ui: React.ReactNode) => {
+  return render(
+    <FeaturesProvider features={defaultFeatures}>
+      {ui}
+    </FeaturesProvider>,
+  )
+}
+
+describe('FileUploadSettings (setting-modal)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render children in trigger', () => {
+    renderWithProvider(
+      <FileUploadSettings open={false} onOpen={vi.fn()}>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    expect(screen.getByText('Upload Settings')).toBeInTheDocument()
+  })
+
+  it('should render SettingContent in portal', async () => {
+    renderWithProvider(
+      <FileUploadSettings open={true} onOpen={vi.fn()}>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.fileUpload\.modalTitle/)).toBeInTheDocument()
+    })
+  })
+
+  it('should call onOpen with toggle function when trigger is clicked', () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <FileUploadSettings open={false} onOpen={onOpen}>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    fireEvent.click(screen.getByText('Upload Settings'))
+
+    expect(onOpen).toHaveBeenCalled()
+    // The toggle function should flip the open state
+    const toggleFn = onOpen.mock.calls[0][0]
+    expect(typeof toggleFn).toBe('function')
+    expect(toggleFn(false)).toBe(true)
+    expect(toggleFn(true)).toBe(false)
+  })
+
+  it('should not call onOpen when disabled', () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <FileUploadSettings open={false} onOpen={onOpen} disabled>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    fireEvent.click(screen.getByText('Upload Settings'))
+
+    expect(onOpen).not.toHaveBeenCalled()
+  })
+
+  it('should call onOpen with false when cancel is clicked', async () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <FileUploadSettings open={true} onOpen={onOpen}>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/operation\.cancel/)).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/ }))
+
+    expect(onOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('should call onChange and close when save is clicked', async () => {
+    const onChange = vi.fn()
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <FileUploadSettings open={true} onOpen={onOpen} onChange={onChange}>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/operation\.save/)).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByRole('button', { name: /operation\.save/ }))
+
+    expect(onChange).toHaveBeenCalled()
+    expect(onOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('should pass imageUpload prop to SettingContent', async () => {
+    renderWithProvider(
+      <FileUploadSettings open={true} onOpen={vi.fn()} imageUpload>
+        <button>Upload Settings</button>
+      </FileUploadSettings>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.imageUpload\.modalTitle/)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.spec.tsx b/web/app/components/base/features/new-feature-panel/follow-up.spec.tsx
new file mode 100644
index 0000000000..56df44df8f
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/follow-up.spec.tsx
@@ -0,0 +1,48 @@
+import type { OnFeaturesChange } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { FeaturesProvider } from '../context'
+import FollowUp from './follow-up'
+
+const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
+  return render(
+    <FeaturesProvider>
+      <FollowUp disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('FollowUp', () => {
+  it('should render the follow-up feature card', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.suggestedQuestionsAfterAnswer\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description text', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.suggestedQuestionsAfterAnswer\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not throw when onChange is not provided', () => {
+    renderWithProvider()
+
+    expect(() => fireEvent.click(screen.getByRole('switch'))).not.toThrow()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.spec.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.spec.tsx
new file mode 100644
index 0000000000..1590efdd75
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.spec.tsx
@@ -0,0 +1,194 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import ImageUpload from './index'
+
+vi.mock('@/service/use-common', () => ({
+  useFileUploadConfig: () => ({ data: undefined }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <ImageUpload disabled={props.disabled ?? false} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('ImageUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the image upload title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.imageUpload\.title/)).toBeInTheDocument()
+  })
+
+  it('should render LEGACY badge', () => {
+    renderWithProvider()
+
+    expect(screen.getByText('LEGACY')).toBeInTheDocument()
+  })
+
+  it('should render description when disabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.imageUpload\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show supported types when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    expect(screen.getByText('image')).toBeInTheDocument()
+  })
+
+  it('should show number limits when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('should show settings button when hovering', () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.imageUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should open image upload setting modal when settings is clicked', async () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.imageUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.imageUpload\.modalTitle/)).toBeInTheDocument()
+    })
+  })
+
+  it('should show supported types and number limit labels when enabled', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    expect(screen.getByText(/feature\.imageUpload\.supportedTypes/)).toBeInTheDocument()
+    expect(screen.getByText(/feature\.imageUpload\.numberLimit/)).toBeInTheDocument()
+  })
+
+  it('should hide info display when hovering', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    const card = screen.getByText(/feature\.imageUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.queryByText(/feature\.imageUpload\.supportedTypes/)).not.toBeInTheDocument()
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should show info display again when mouse leaves', () => {
+    renderWithProvider({}, {
+      file: {
+        enabled: true,
+        allowed_file_types: ['image'],
+        number_limits: 3,
+      },
+    })
+
+    const card = screen.getByText(/feature\.imageUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.mouseLeave(card)
+
+    expect(screen.getByText(/feature\.imageUpload\.supportedTypes/)).toBeInTheDocument()
+  })
+
+  it('should show dash when no file types configured', () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('should close setting modal when cancel is clicked', async () => {
+    renderWithProvider({}, {
+      file: { enabled: true },
+    })
+
+    const card = screen.getByText(/feature\.imageUpload\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    await waitFor(() => {
+      expect(screen.getByText(/feature\.imageUpload\.modalTitle/)).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/ }))
+
+    await waitFor(() => {
+      expect(screen.queryByText(/feature\.imageUpload\.modalTitle/)).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/index.spec.tsx b/web/app/components/base/features/new-feature-panel/index.spec.tsx
new file mode 100644
index 0000000000..0122a148d3
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/index.spec.tsx
@@ -0,0 +1,215 @@
+import type { Features } from '../types'
+import { render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../context'
+import NewFeaturePanel from './index'
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/app/test-app-id/configuration',
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useDefaultModel: (type: string) => {
+    if (type === 'speech2text' || type === 'tts')
+      return { data: { provider: 'openai', model: 'whisper-1' } }
+    return { data: null }
+  },
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
+    modelList: [{ provider: { provider: 'openai' }, models: [{ model: 'text-embedding-ada-002' }] }],
+    defaultModel: { provider: { provider: 'openai' }, model: 'text-embedding-ada-002' },
+    currentModel: true,
+  }),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/declarations', () => ({
+  ModelTypeEnum: {
+    speech2text: 'speech2text',
+    tts: 'tts',
+    textEmbedding: 'text-embedding',
+  },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: () => <div data-testid="model-selector">Model Selector</div>,
+}))
+
+vi.mock('@/service/use-common', () => ({
+  useCodeBasedExtensions: () => ({ data: undefined }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderPanel = (props: Partial<{
+  show: boolean
+  isChatMode: boolean
+  disabled: boolean
+  onChange: () => void
+  onClose: () => void
+  inWorkflow: boolean
+  showFileUpload: boolean
+}> = {}) => {
+  return render(
+    <FeaturesProvider features={defaultFeatures}>
+      <NewFeaturePanel
+        show={props.show ?? true}
+        isChatMode={props.isChatMode ?? true}
+        disabled={props.disabled ?? false}
+        onChange={props.onChange}
+        onClose={props.onClose ?? vi.fn()}
+        inWorkflow={props.inWorkflow}
+        showFileUpload={props.showFileUpload}
+      />
+    </FeaturesProvider>,
+  )
+}
+
+describe('NewFeaturePanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should not render when show is false', () => {
+      renderPanel({ show: false })
+
+      expect(screen.queryByText(/common\.features/)).not.toBeInTheDocument()
+    })
+
+    it('should render header with title and description when show is true', () => {
+      renderPanel({ show: true })
+
+      expect(screen.getByText(/common\.featuresDescription/)).toBeInTheDocument()
+      expect(screen.getAllByText(/common\.features/).length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  describe('Chat Mode Features', () => {
+    it('should render conversation opener in chat mode', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.conversationOpener\.title/)).toBeInTheDocument()
+    })
+
+    it('should render follow-up in chat mode', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.suggestedQuestionsAfterAnswer\.title/)).toBeInTheDocument()
+    })
+
+    it('should render citation in chat mode', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.citation\.title/)).toBeInTheDocument()
+    })
+
+    it('should render speech-to-text in chat mode when model is available', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.speechToText\.title/)).toBeInTheDocument()
+    })
+
+    it('should render text-to-speech in chat mode when model is available', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.textToSpeech\.title/)).toBeInTheDocument()
+    })
+
+    it('should render moderation in chat mode', () => {
+      renderPanel({ isChatMode: true })
+
+      expect(screen.getByText(/feature\.moderation\.title/)).toBeInTheDocument()
+    })
+  })
+
+  describe('File Upload', () => {
+    it('should render file upload in chat mode with showFileUpload', () => {
+      renderPanel({ isChatMode: true, showFileUpload: true })
+
+      expect(screen.getByText(/feature\.fileUpload\.title/)).toBeInTheDocument()
+    })
+
+    it('should not render image upload in chat mode', () => {
+      renderPanel({ isChatMode: true, showFileUpload: true })
+
+      expect(screen.queryByText(/feature\.imageUpload\.title/)).not.toBeInTheDocument()
+    })
+
+    it('should render image upload in non-chat mode with showFileUpload', () => {
+      renderPanel({ isChatMode: false, showFileUpload: true })
+
+      expect(screen.queryByText(/feature\.fileUpload\.title/)).not.toBeInTheDocument()
+      expect(screen.getByText(/feature\.imageUpload\.title/)).toBeInTheDocument()
+    })
+
+    it('should not render file upload when showFileUpload is false', () => {
+      renderPanel({ isChatMode: true, showFileUpload: false })
+
+      expect(screen.queryByText(/feature\.fileUpload\.title/)).not.toBeInTheDocument()
+      expect(screen.queryByText(/feature\.imageUpload\.title/)).not.toBeInTheDocument()
+    })
+
+    it('should show file upload tip in chat mode with showFileUpload', () => {
+      renderPanel({ isChatMode: true, showFileUpload: true })
+
+      expect(screen.getByText(/common\.fileUploadTip/)).toBeInTheDocument()
+    })
+
+    it('should show image upload legacy tip in non-chat mode with showFileUpload', () => {
+      renderPanel({ isChatMode: false, showFileUpload: true })
+
+      expect(screen.getByText(/common\.ImageUploadLegacyTip/)).toBeInTheDocument()
+    })
+  })
+
+  describe('MoreLikeThis Feature', () => {
+    it('should render MoreLikeThis in non-chat, non-workflow mode', () => {
+      renderPanel({ isChatMode: false, inWorkflow: false })
+
+      expect(screen.getByText(/feature\.moreLikeThis\.title/)).toBeInTheDocument()
+    })
+
+    it('should not render MoreLikeThis in chat mode', () => {
+      renderPanel({ isChatMode: true, inWorkflow: false })
+
+      expect(screen.queryByText(/feature\.moreLikeThis\.title/)).not.toBeInTheDocument()
+    })
+
+    it('should not render MoreLikeThis in workflow mode', () => {
+      renderPanel({ isChatMode: false, inWorkflow: true })
+
+      expect(screen.queryByText(/feature\.moreLikeThis\.title/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Annotation Reply Feature', () => {
+    it('should render AnnotationReply in chat mode when not in workflow', () => {
+      renderPanel({ isChatMode: true, inWorkflow: false })
+
+      expect(screen.getByText(/feature\.annotation\.title/)).toBeInTheDocument()
+    })
+
+    it('should not render AnnotationReply in workflow mode', () => {
+      renderPanel({ isChatMode: true, inWorkflow: true })
+
+      expect(screen.queryByText(/feature\.annotation\.title/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should not show file upload tip when showFileUpload is false', () => {
+      renderPanel({ isChatMode: true, showFileUpload: false })
+
+      expect(screen.queryByText(/common\.fileUploadTip/)).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/moderation/form-generation.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/form-generation.spec.tsx
new file mode 100644
index 0000000000..14f35dc6b4
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/moderation/form-generation.spec.tsx
@@ -0,0 +1,133 @@
+import type { I18nText } from '@/i18n-config/language'
+import type { CodeBasedExtensionForm } from '@/models/common'
+import { fireEvent, render, screen } from '@testing-library/react'
+import FormGeneration from './form-generation'
+
+const i18n = (en: string, zh = en): I18nText =>
+  ({ 'en-US': en, 'zh-Hans': zh }) as unknown as I18nText
+
+const createForm = (overrides: Partial<CodeBasedExtensionForm> = {}): CodeBasedExtensionForm => ({
+  type: 'text-input',
+  variable: 'api_key',
+  label: i18n('API Key', 'API 密钥'),
+  placeholder: 'Enter API key',
+  required: true,
+  options: [],
+  default: '',
+  max_length: 100,
+  ...overrides,
+})
+
+describe('FormGeneration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render text-input form fields', () => {
+    const form = createForm()
+    render(<FormGeneration forms={[form]} value={{}} onChange={vi.fn()} />)
+
+    expect(screen.getByText('API Key')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Enter API key')).toBeInTheDocument()
+  })
+
+  it('should call onChange when text input value changes', () => {
+    const onChange = vi.fn()
+    const form = createForm()
+    render(<FormGeneration forms={[form]} value={{}} onChange={onChange} />)
+
+    fireEvent.change(screen.getByPlaceholderText('Enter API key'), {
+      target: { value: 'my-key' },
+    })
+
+    expect(onChange).toHaveBeenCalledWith({ api_key: 'my-key' })
+  })
+
+  it('should render paragraph form fields', () => {
+    const form = createForm({
+      type: 'paragraph',
+      variable: 'description',
+      label: i18n('Description', '描述'),
+      placeholder: 'Enter description',
+    })
+    render(<FormGeneration forms={[form]} value={{}} onChange={vi.fn()} />)
+
+    expect(screen.getByText('Description')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Enter description')).toBeInTheDocument()
+  })
+
+  it('should render select form fields', () => {
+    const form = createForm({
+      type: 'select',
+      variable: 'model',
+      label: i18n('Model', '模型'),
+      options: [
+        { label: i18n('GPT-4'), value: 'gpt-4' },
+        { label: i18n('GPT-3.5'), value: 'gpt-3.5' },
+      ],
+    })
+    render(<FormGeneration forms={[form]} value={{}} onChange={vi.fn()} />)
+
+    expect(screen.getByText('Model')).toBeInTheDocument()
+  })
+
+  it('should render multiple forms', () => {
+    const forms = [
+      createForm({ variable: 'key1', label: i18n('Field 1', '字段1') }),
+      createForm({ variable: 'key2', label: i18n('Field 2', '字段2'), type: 'paragraph' }),
+    ]
+    render(<FormGeneration forms={forms} value={{}} onChange={vi.fn()} />)
+
+    expect(screen.getByText('Field 1')).toBeInTheDocument()
+    expect(screen.getByText('Field 2')).toBeInTheDocument()
+  })
+
+  it('should display existing values', () => {
+    const form = createForm()
+    render(
+      <FormGeneration
+        forms={[form]}
+        value={{ api_key: 'existing-key' }}
+        onChange={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByDisplayValue('existing-key')).toBeInTheDocument()
+  })
+
+  it('should call onChange when paragraph textarea value changes', () => {
+    const onChange = vi.fn()
+    const form = createForm({
+      type: 'paragraph',
+      variable: 'description',
+      label: i18n('Description', '描述'),
+      placeholder: 'Enter description',
+    })
+    render(<FormGeneration forms={[form]} value={{}} onChange={onChange} />)
+
+    fireEvent.change(screen.getByPlaceholderText('Enter description'), {
+      target: { value: 'my description' },
+    })
+
+    expect(onChange).toHaveBeenCalledWith({ description: 'my description' })
+  })
+
+  it('should call onChange when select option is chosen', () => {
+    const onChange = vi.fn()
+    const form = createForm({
+      type: 'select',
+      variable: 'model',
+      label: i18n('Model', '模型'),
+      options: [
+        { label: i18n('GPT-4'), value: 'gpt-4' },
+        { label: i18n('GPT-3.5'), value: 'gpt-3.5' },
+      ],
+    })
+    render(<FormGeneration forms={[form]} value={{}} onChange={onChange} />)
+
+    fireEvent.click(screen.getByText(/placeholder\.select/))
+    fireEvent.click(screen.getByText('GPT-4'))
+
+    expect(onChange).toHaveBeenCalledWith({ model: 'gpt-4' })
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.spec.tsx
new file mode 100644
index 0000000000..5c829f3560
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.spec.tsx
@@ -0,0 +1,427 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import Moderation from './index'
+
+const mockSetShowModerationSettingModal = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowModerationSettingModal: mockSetShowModerationSettingModal,
+  }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useLocale: () => 'en-US',
+}))
+
+vi.mock('@/service/use-common', () => ({
+  useCodeBasedExtensions: () => ({ data: { data: [] } }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <Moderation disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('Moderation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the moderation title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.moderation\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description when not enabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.moderation\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should open moderation setting modal when enabled without type', () => {
+    renderWithProvider()
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(mockSetShowModerationSettingModal).toHaveBeenCalled()
+  })
+
+  it('should show provider info when enabled with openai_moderation type', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'openai_moderation',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: false, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/feature\.moderation\.modal\.provider\.openai/)).toBeInTheDocument()
+  })
+
+  it('should show provider info when enabled with keywords type', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: false, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/feature\.moderation\.modal\.provider\.keywords/)).toBeInTheDocument()
+  })
+
+  it('should show allEnabled when both inputs and outputs are enabled', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/feature\.moderation\.allEnabled/)).toBeInTheDocument()
+  })
+
+  it('should show inputEnabled when only inputs are enabled', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: false, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/feature\.moderation\.inputEnabled/)).toBeInTheDocument()
+  })
+
+  it('should show outputEnabled when only outputs are enabled', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: false, preset_response: '' },
+          outputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/feature\.moderation\.outputEnabled/)).toBeInTheDocument()
+  })
+
+  it('should show settings button when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should open moderation modal when settings button is clicked', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    expect(mockSetShowModerationSettingModal).toHaveBeenCalled()
+  })
+
+  it('should not open modal when disabled', () => {
+    renderWithProvider({ disabled: true }, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    expect(mockSetShowModerationSettingModal).not.toHaveBeenCalled()
+  })
+
+  it('should show api provider label when type is api', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'api',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    expect(screen.getByText(/apiBasedExtension\.selector\.title/)).toBeInTheDocument()
+  })
+
+  it('should disable moderation and call onChange when switch is toggled off', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should open modal with default config when enabling without existing type', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(mockSetShowModerationSettingModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        payload: expect.objectContaining({
+          enabled: true,
+          type: 'keywords',
+        }),
+      }),
+    )
+  })
+
+  it('should invoke onSaveCallback from modal and update features', () => {
+    renderWithProvider()
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    // Extract the onSaveCallback from the modal call
+    const modalCall = mockSetShowModerationSettingModal.mock.calls[0][0]
+    expect(modalCall.onSaveCallback).toBeDefined()
+    expect(modalCall.onCancelCallback).toBeDefined()
+  })
+
+  it('should invoke onCancelCallback from settings modal', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    const modalCall = mockSetShowModerationSettingModal.mock.calls[0][0]
+    modalCall.onCancelCallback()
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should invoke onSaveCallback from settings modal', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange }, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    const modalCall = mockSetShowModerationSettingModal.mock.calls[0][0]
+    modalCall.onSaveCallback({ enabled: true, type: 'keywords', config: {} })
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show code-based extension label for custom type', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'custom-ext',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    // For unknown types, falls back to codeBasedExtensionList label or '-'
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('should not open setting modal when clicking settings button while disabled', () => {
+    renderWithProvider({ disabled: true }, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.click(screen.getByText(/operation\.settings/))
+
+    // disabled check in handleOpenModerationSettingModal should prevent call
+    expect(mockSetShowModerationSettingModal).not.toHaveBeenCalled()
+  })
+
+  it('should invoke onSaveCallback from enable modal and update features', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    const modalCall = mockSetShowModerationSettingModal.mock.calls[0][0]
+    // Execute the onSaveCallback
+    modalCall.onSaveCallback({ enabled: true, type: 'keywords', config: {} })
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should invoke onCancelCallback from enable modal and set enabled false', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    const modalCall = mockSetShowModerationSettingModal.mock.calls[0][0]
+    // Execute the onCancelCallback
+    modalCall.onCancelCallback()
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should not show modal when enabling with existing type', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: false,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    // When type already exists, handleChange's first if-branch is skipped
+    // because features.moderation.type is already 'keywords'
+    // It should NOT call setShowModerationSettingModal for init
+    expect(mockSetShowModerationSettingModal).not.toHaveBeenCalled()
+  })
+
+  it('should hide info display when hovering over enabled feature', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: false, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+
+    // Info is visible before hover
+    expect(screen.getByText(/feature\.moderation\.modal\.provider\.keywords/)).toBeInTheDocument()
+
+    fireEvent.mouseEnter(card)
+
+    // Info hidden, settings button shown
+    expect(screen.getByText(/operation\.settings/)).toBeInTheDocument()
+  })
+
+  it('should show info display again when mouse leaves', () => {
+    renderWithProvider({}, {
+      moderation: {
+        enabled: true,
+        type: 'keywords',
+        config: {
+          inputs_config: { enabled: true, preset_response: '' },
+          outputs_config: { enabled: false, preset_response: '' },
+        },
+      },
+    })
+
+    const card = screen.getByText(/feature\.moderation\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+    fireEvent.mouseLeave(card)
+
+    expect(screen.getByText(/feature\.moderation\.modal\.provider\.keywords/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.spec.tsx
new file mode 100644
index 0000000000..ef9bb8ebd4
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.spec.tsx
@@ -0,0 +1,127 @@
+import type { ModerationContentConfig } from '@/models/debug'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ModerationContent from './moderation-content'
+
+const defaultConfig: ModerationContentConfig = {
+  enabled: false,
+  preset_response: '',
+}
+
+const renderComponent = (props: Partial<{
+  title: string
+  info: string
+  showPreset: boolean
+  config: ModerationContentConfig
+  onConfigChange: (config: ModerationContentConfig) => void
+}> = {}) => {
+  const onConfigChange = props.onConfigChange ?? vi.fn()
+  return render(
+    <ModerationContent
+      title={props.title ?? 'Test Title'}
+      info={props.info}
+      showPreset={props.showPreset}
+      config={props.config ?? defaultConfig}
+      onConfigChange={onConfigChange}
+    />,
+  )
+}
+
+describe('ModerationContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the title', () => {
+    renderComponent({ title: 'Input Content' })
+
+    expect(screen.getByText('Input Content')).toBeInTheDocument()
+  })
+
+  it('should render info text when provided', () => {
+    renderComponent({ info: 'Some info text' })
+
+    expect(screen.getByText('Some info text')).toBeInTheDocument()
+  })
+
+  it('should not render info when not provided', () => {
+    renderComponent()
+
+    // When info is not provided, only the title "Test Title" should be shown
+    expect(screen.getByText(/Test Title/)).toBeInTheDocument()
+    expect(screen.queryByText(/Some info text/)).not.toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderComponent()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onConfigChange with enabled true when switch is toggled on', () => {
+    const onConfigChange = vi.fn()
+    renderComponent({ onConfigChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onConfigChange).toHaveBeenCalledWith({ ...defaultConfig, enabled: true })
+  })
+
+  it('should show preset textarea when enabled and showPreset is true', () => {
+    renderComponent({
+      config: { enabled: true, preset_response: '' },
+      showPreset: true,
+    })
+
+    expect(screen.getByText(/feature\.moderation\.modal\.content\.preset/)).toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+
+  it('should not show preset textarea when showPreset is false', () => {
+    renderComponent({
+      config: { enabled: true, preset_response: '' },
+      showPreset: false,
+    })
+
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+
+  it('should call onConfigChange when preset_response is changed', () => {
+    const onConfigChange = vi.fn()
+    renderComponent({
+      config: { enabled: true, preset_response: '' },
+      onConfigChange,
+    })
+
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test response' } })
+
+    expect(onConfigChange).toHaveBeenCalledWith({
+      enabled: true,
+      preset_response: 'test response',
+    })
+  })
+
+  it('should truncate preset_response to 100 characters', () => {
+    const onConfigChange = vi.fn()
+    const longText = 'a'.repeat(150)
+    renderComponent({
+      config: { enabled: true, preset_response: '' },
+      onConfigChange,
+    })
+
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: longText } })
+
+    expect(onConfigChange).toHaveBeenCalledWith({
+      enabled: true,
+      preset_response: 'a'.repeat(100),
+    })
+  })
+
+  it('should display character count', () => {
+    renderComponent({
+      config: { enabled: true, preset_response: 'hello' },
+    })
+
+    expect(screen.getByText('5')).toBeInTheDocument()
+    expect(screen.getByText('100')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.spec.tsx
new file mode 100644
index 0000000000..79098f6816
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.spec.tsx
@@ -0,0 +1,787 @@
+import type { ModerationConfig } from '@/models/debug'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ModerationSettingModal from './moderation-setting-modal'
+
+const mockNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({ notify: mockNotify }),
+}))
+
+const mockSetShowAccountSettingModal = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+let mockCodeBasedExtensions: { data: { data: Record<string, unknown>[] } } = { data: { data: [] } }
+let mockModelProvidersData: {
+  data: { data: Record<string, unknown>[] }
+  isPending: boolean
+  refetch: ReturnType<typeof vi.fn>
+} = {
+  data: {
+    data: [{
+      provider: 'langgenius/openai/openai',
+      system_configuration: {
+        enabled: true,
+        current_quota_type: 'paid',
+        quota_configurations: [{ quota_type: 'paid', is_valid: true }],
+      },
+      custom_configuration: { status: 'active' },
+    }],
+  },
+  isPending: false,
+  refetch: vi.fn(),
+}
+
+vi.mock('@/service/use-common', () => ({
+  useCodeBasedExtensions: () => mockCodeBasedExtensions,
+  useModelProviders: () => mockModelProvidersData,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/declarations', () => ({
+  CustomConfigurationStatusEnum: { active: 'active' },
+}))
+
+vi.mock('@/app/components/header/account-setting/constants', () => ({
+  ACCOUNT_SETTING_TAB: { PROVIDER: 'provider' },
+}))
+
+vi.mock('@/app/components/header/account-setting/api-based-extension-page/selector', () => ({
+  default: ({ onChange }: { value: string, onChange: (v: string) => void }) => (
+    <div data-testid="api-selector">
+      <button data-testid="select-api" onClick={() => onChange('api-ext-1')}>Select API</button>
+    </div>
+  ),
+}))
+
+const defaultData: ModerationConfig = {
+  enabled: true,
+  type: 'keywords',
+  config: {
+    keywords: 'bad\nword',
+    inputs_config: { enabled: true, preset_response: 'Input blocked' },
+    outputs_config: { enabled: false, preset_response: '' },
+  },
+}
+
+describe('ModerationSettingModal', () => {
+  const onSave = vi.fn()
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCodeBasedExtensions = { data: { data: [] } }
+    mockModelProvidersData = {
+      data: {
+        data: [{
+          provider: 'langgenius/openai/openai',
+          system_configuration: {
+            enabled: true,
+            current_quota_type: 'paid',
+            quota_configurations: [{ quota_type: 'paid', is_valid: true }],
+          },
+          custom_configuration: { status: 'active' },
+        }],
+      },
+      isPending: false,
+      refetch: vi.fn(),
+    }
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should render the modal title', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/feature\.moderation\.modal\.title/)).toBeInTheDocument()
+  })
+
+  it('should render provider options', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/feature\.moderation\.modal\.provider\.openai/)).toBeInTheDocument()
+    // Keywords text appears both as provider option and section label
+    expect(screen.getAllByText(/feature\.moderation\.modal\.provider\.keywords/).length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText(/apiBasedExtension\.selector\.title/)).toBeInTheDocument()
+  })
+
+  it('should show keywords textarea when keywords type is selected', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/) as HTMLTextAreaElement
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveValue('bad\nword')
+  })
+
+  it('should render cancel and save buttons', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/operation\.cancel/)).toBeInTheDocument()
+    expect(screen.getByText(/operation\.save/)).toBeInTheDocument()
+  })
+
+  it('should call onCancel when cancel is clicked', async () => {
+    const onCancel = vi.fn()
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={onCancel}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.cancel/))
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should show error when saving without inputs or outputs enabled', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: 'test',
+        inputs_config: { enabled: false, preset_response: '' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should show error when keywords type has no keywords', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: '',
+        inputs_config: { enabled: true, preset_response: 'blocked' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should call onSave with formatted data when valid', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: 'bad\nword',
+        inputs_config: { enabled: true, preset_response: 'blocked' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'keywords',
+      enabled: true,
+      config: expect.objectContaining({
+        keywords: 'bad\nword',
+        inputs_config: expect.objectContaining({ enabled: true }),
+      }),
+    }))
+  })
+
+  it('should show api selector when api type is selected', async () => {
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'api', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByTestId('api-selector')).toBeInTheDocument()
+  })
+
+  it('should switch provider type when clicked', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    // Click on openai_moderation provider
+    fireEvent.click(screen.getByText(/feature\.moderation\.modal\.provider\.openai/))
+
+    // The keywords textarea should no longer be visible since type changed
+    expect(screen.queryByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/)).not.toBeInTheDocument()
+  })
+
+  it('should update keywords on textarea change', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/) as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'new\nkeywords' } })
+
+    expect(textarea).toHaveValue('new\nkeywords')
+  })
+
+  it('should render moderation content sections', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/feature\.moderation\.modal\.content\.input/)).toBeInTheDocument()
+    expect(screen.getByText(/feature\.moderation\.modal\.content\.output/)).toBeInTheDocument()
+  })
+
+  it('should show error when inputs enabled but no preset_response for keywords type', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: 'test',
+        inputs_config: { enabled: true, preset_response: '' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should show error when api type has no api_based_extension_id', async () => {
+    const data: ModerationConfig = {
+      enabled: true,
+      type: 'api',
+      config: {
+        inputs_config: { enabled: true, preset_response: '' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should save with api_based_extension_id in formatted data for api type', async () => {
+    const data: ModerationConfig = {
+      enabled: true,
+      type: 'api',
+      config: {
+        api_based_extension_id: 'ext-1',
+        inputs_config: { enabled: true, preset_response: '' },
+        outputs_config: { enabled: false, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    // api type doesn't require preset_response, so save should succeed
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'api',
+      config: expect.objectContaining({
+        api_based_extension_id: 'ext-1',
+      }),
+    }))
+  })
+
+  it('should show error when outputs enabled but no preset_response for keywords type', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: 'test',
+        inputs_config: { enabled: false, preset_response: '' },
+        outputs_config: { enabled: true, preset_response: '' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should toggle input moderation content', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const switches = screen.getAllByRole('switch')
+    expect(screen.getAllByPlaceholderText(/feature\.moderation\.modal\.content\.placeholder/)).toHaveLength(1)
+
+    fireEvent.click(switches[0])
+
+    expect(screen.queryAllByPlaceholderText(/feature\.moderation\.modal\.content\.placeholder/)).toHaveLength(0)
+  })
+
+  it('should toggle output moderation content', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const switches = screen.getAllByRole('switch')
+    expect(screen.getAllByPlaceholderText(/feature\.moderation\.modal\.content\.placeholder/)).toHaveLength(1)
+
+    fireEvent.click(switches[1])
+
+    expect(screen.getAllByPlaceholderText(/feature\.moderation\.modal\.content\.placeholder/)).toHaveLength(2)
+  })
+
+  it('should select api extension via api selector', async () => {
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'api', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByTestId('select-api'))
+
+    // Trigger save and confirm the chosen extension id is passed through
+    fireEvent.click(screen.getByText(/operation\.save/))
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        config: expect.objectContaining({ api_based_extension_id: 'api-ext-1' }),
+      }),
+    )
+  })
+
+  it('should save with openai_moderation type when configured', async () => {
+    await render(
+      <ModerationSettingModal
+        data={{
+          enabled: true,
+          type: 'openai_moderation',
+          config: {
+            inputs_config: { enabled: true, preset_response: 'blocked' },
+            outputs_config: { enabled: false, preset_response: '' },
+          },
+        }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'openai_moderation',
+    }))
+  })
+
+  it('should handle keyword truncation to 100 chars per line and 100 lines', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/)
+    // Create a long keyword that exceeds 100 chars
+    const longWord = 'a'.repeat(150)
+    fireEvent.change(textarea, { target: { value: longWord } })
+
+    // Value should be truncated to 100 chars
+    expect((textarea as HTMLTextAreaElement).value.length).toBeLessThanOrEqual(100)
+  })
+
+  it('should save with formatted outputs_config when both enabled', async () => {
+    const data: ModerationConfig = {
+      ...defaultData,
+      config: {
+        keywords: 'test',
+        inputs_config: { enabled: true, preset_response: 'input blocked' },
+        outputs_config: { enabled: true, preset_response: 'output blocked' },
+      },
+    }
+    await render(
+      <ModerationSettingModal
+        data={data}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      config: expect.objectContaining({
+        inputs_config: expect.objectContaining({ enabled: true }),
+        outputs_config: expect.objectContaining({ enabled: true }),
+      }),
+    }))
+  })
+
+  it('should switch from keywords to api type', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    // Click api provider
+    fireEvent.click(screen.getByText(/apiBasedExtension\.selector\.title/))
+
+    // API selector should now be visible, keywords textarea should be hidden
+    expect(screen.getByTestId('api-selector')).toBeInTheDocument()
+    expect(screen.queryByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/)).not.toBeInTheDocument()
+  })
+
+  it('should handle empty lines in keywords', async () => {
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    const textarea = screen.getByPlaceholderText(/feature\.moderation\.modal\.keywords\.placeholder/) as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'word1\n\nword2\n\n' } })
+
+    expect(textarea.value).toBe('word1\n\nword2\n')
+  })
+
+  it('should show OpenAI not configured warning when OpenAI provider is not set up', async () => {
+    mockModelProvidersData = {
+      data: {
+        data: [{
+          provider: 'langgenius/openai/openai',
+          system_configuration: {
+            enabled: false,
+            current_quota_type: 'free',
+            quota_configurations: [],
+          },
+          custom_configuration: { status: 'no-configure' },
+        }],
+      },
+      isPending: false,
+      refetch: vi.fn(),
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'openai_moderation', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/feature\.moderation\.modal\.openaiNotConfig\.before/)).toBeInTheDocument()
+  })
+
+  it('should open settings modal when provider link is clicked in OpenAI warning', async () => {
+    mockModelProvidersData = {
+      data: {
+        data: [{
+          provider: 'langgenius/openai/openai',
+          system_configuration: {
+            enabled: false,
+            current_quota_type: 'free',
+            quota_configurations: [],
+          },
+          custom_configuration: { status: 'no-configure' },
+        }],
+      },
+      isPending: false,
+      refetch: vi.fn(),
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'openai_moderation', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/settings\.provider/))
+
+    expect(mockSetShowAccountSettingModal).toHaveBeenCalled()
+  })
+
+  it('should not save when OpenAI type is selected but not configured', async () => {
+    mockModelProvidersData = {
+      data: {
+        data: [{
+          provider: 'langgenius/openai/openai',
+          system_configuration: {
+            enabled: false,
+            current_quota_type: 'free',
+            quota_configurations: [],
+          },
+          custom_configuration: { status: 'no-configure' },
+        }],
+      },
+      isPending: false,
+      refetch: vi.fn(),
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'openai_moderation', config: { inputs_config: { enabled: true, preset_response: 'blocked' }, outputs_config: { enabled: false, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  it('should render code-based extension providers', async () => {
+    mockCodeBasedExtensions = {
+      data: {
+        data: [{
+          name: 'custom-ext',
+          label: { 'en-US': 'Custom Extension', 'zh-Hans': '自定义扩展' },
+          form_schema: [
+            { variable: 'api_url', label: { 'en-US': 'API URL', 'zh-Hans': 'API 地址' }, type: 'text-input', required: true, default: '', placeholder: 'Enter URL', options: [], max_length: 200 },
+          ],
+        }],
+      },
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText('Custom Extension')).toBeInTheDocument()
+  })
+
+  it('should show form generation when code-based extension is selected', async () => {
+    mockCodeBasedExtensions = {
+      data: {
+        data: [{
+          name: 'custom-ext',
+          label: { 'en-US': 'Custom Extension', 'zh-Hans': '自定义扩展' },
+          form_schema: [
+            { variable: 'api_url', label: { 'en-US': 'API URL', 'zh-Hans': 'API 地址' }, type: 'text-input', required: true, default: '', placeholder: 'Enter URL', options: [], max_length: 200 },
+          ],
+        }],
+      },
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'custom-ext', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText('API URL')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Enter URL')).toBeInTheDocument()
+  })
+
+  it('should initialize config from form schema when switching to code-based extension', async () => {
+    mockCodeBasedExtensions = {
+      data: {
+        data: [{
+          name: 'custom-ext',
+          label: { 'en-US': 'Custom Extension', 'zh-Hans': '自定义扩展' },
+          form_schema: [
+            { variable: 'api_url', label: { 'en-US': 'API URL', 'zh-Hans': 'API 地址' }, type: 'text-input', required: true, default: 'https://default.com', placeholder: '', options: [], max_length: 200 },
+          ],
+        }],
+      },
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={defaultData}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    // Click on the custom extension provider
+    fireEvent.click(screen.getByText('Custom Extension'))
+
+    // The form input should use the default value from form schema
+    expect(screen.getByDisplayValue('https://default.com')).toBeInTheDocument()
+  })
+
+  it('should show error when required form schema field is empty on save', async () => {
+    mockCodeBasedExtensions = {
+      data: {
+        data: [{
+          name: 'custom-ext',
+          label: { 'en-US': 'Custom Extension', 'zh-Hans': '自定义扩展' },
+          form_schema: [
+            { variable: 'api_url', label: { 'en-US': 'API URL', 'zh-Hans': 'API 地址' }, type: 'text-input', required: true, default: '', placeholder: '', options: [], max_length: 200 },
+          ],
+        }],
+      },
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'custom-ext', config: { inputs_config: { enabled: true, preset_response: 'blocked' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should save with code-based extension config when valid', async () => {
+    mockCodeBasedExtensions = {
+      data: {
+        data: [{
+          name: 'custom-ext',
+          label: { 'en-US': 'Custom Extension', 'zh-Hans': '自定义扩展' },
+          form_schema: [
+            { variable: 'api_url', label: { 'en-US': 'API URL', 'zh-Hans': 'API 地址' }, type: 'text-input', required: true, default: '', placeholder: '', options: [], max_length: 200 },
+          ],
+        }],
+      },
+    }
+
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'custom-ext', config: { api_url: 'https://example.com', inputs_config: { enabled: true, preset_response: 'blocked' }, outputs_config: { enabled: false, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'custom-ext',
+      config: expect.objectContaining({
+        api_url: 'https://example.com',
+      }),
+    }))
+  })
+
+  it('should show doc link for api type', async () => {
+    await render(
+      <ModerationSettingModal
+        data={{ ...defaultData, type: 'api', config: { inputs_config: { enabled: true, preset_response: '' } } }}
+        onCancel={vi.fn()}
+        onSave={onSave}
+      />,
+    )
+
+    expect(screen.getByText(/apiBasedExtension\.link/)).toBeInTheDocument()
+  })
+})
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 c9455c98eb..c68abfd7b1 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -1,14 +1,11 @@
 import type { ChangeEvent, FC } from 'react'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
-import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Modal from '@/app/components/base/modal'
 import { useToastContext } from '@/app/components/base/toast'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
@@ -238,8 +235,21 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       className="!mt-14 !w-[600px] !max-w-none !p-6"
     >
       <div className="flex items-center justify-between">
-        <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
-        <div className="cursor-pointer p-1" onClick={onCancel}><RiCloseLine className="h-4 w-4 text-text-tertiary" /></div>
+        <div className="text-text-primary title-2xl-semi-bold">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
+        <div
+          role="button"
+          tabIndex={0}
+          className="cursor-pointer p-1"
+          onClick={onCancel}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onCancel()
+            }
+          }}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
       </div>
       <div className="py-2">
         <div className="text-sm font-medium leading-9 text-text-primary">
@@ -251,9 +261,9 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
               <div
                 key={provider.key}
                 className={cn(
-                  'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
                   localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === provider.key && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
                   localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
                 )}
                 onClick={() => handleDataTypeChange(provider.key)}
@@ -272,7 +282,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         {
           !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
             <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <InfoCircle className="mr-1 h-4 w-4 text-[#F79009]" />
+              <span className="i-custom-vender-line-general-info-circle mr-1 h-4 w-4 text-[#F79009]" />
               <div className="flex items-center text-xs font-medium text-gray-700">
                 {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
                 <span
@@ -324,7 +334,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 rel="noopener noreferrer"
                 className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
               >
-                <BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+                <span className="i-custom-vender-line-education-book-open-01 mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
                 {t('apiBasedExtension.link', { ns: 'common' })}
               </a>
             </div>
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.spec.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.spec.tsx
new file mode 100644
index 0000000000..592e08a995
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.spec.tsx
@@ -0,0 +1,55 @@
+import type { OnFeaturesChange } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { FeaturesProvider } from '../context'
+import MoreLikeThis from './more-like-this'
+
+const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
+  return render(
+    <FeaturesProvider>
+      <MoreLikeThis disabled={props.disabled} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('MoreLikeThis', () => {
+  it('should render the more-like-this feature card', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.moreLikeThis\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description text', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.moreLikeThis\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not throw when onChange is not provided', () => {
+    renderWithProvider()
+
+    expect(() => fireEvent.click(screen.getByRole('switch'))).not.toThrow()
+  })
+
+  it('should render tooltip for the feature', () => {
+    renderWithProvider()
+
+    // MoreLikeThis has a tooltip prop, verifying the feature renders with title
+    expect(screen.getByText(/feature\.moreLikeThis\.title/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.spec.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.spec.tsx
new file mode 100644
index 0000000000..341065fe21
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.spec.tsx
@@ -0,0 +1,48 @@
+import type { OnFeaturesChange } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { FeaturesProvider } from '../context'
+import SpeechToText from './speech-to-text'
+
+const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
+  return render(
+    <FeaturesProvider>
+      <SpeechToText disabled={props.disabled ?? false} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('SpeechToText', () => {
+  it('should render the speech-to-text feature card', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.speechToText\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description text', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.speechToText\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not throw when onChange is not provided', () => {
+    renderWithProvider()
+
+    expect(() => fireEvent.click(screen.getByRole('switch'))).not.toThrow()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.spec.tsx
new file mode 100644
index 0000000000..a9623a8215
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.spec.tsx
@@ -0,0 +1,115 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TtsAutoPlay } from '@/types/app'
+import { FeaturesProvider } from '../../context'
+import TextToSpeech from './index'
+
+vi.mock('@/i18n-config/language', () => ({
+  languages: [
+    { value: 'en-US', name: 'English', example: 'Hello world' },
+    { value: 'zh-Hans', name: '中文', example: '你好' },
+  ],
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { disabled?: boolean, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <TextToSpeech disabled={props.disabled ?? false} onChange={props.onChange} />
+    </FeaturesProvider>,
+  )
+}
+
+describe('TextToSpeech', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render the text-to-speech title', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.textToSpeech\.title/)).toBeInTheDocument()
+  })
+
+  it('should render description when disabled', () => {
+    renderWithProvider()
+
+    expect(screen.getByText(/feature\.textToSpeech\.description/)).toBeInTheDocument()
+  })
+
+  it('should render a switch toggle', () => {
+    renderWithProvider()
+
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('should call onChange when toggled', () => {
+    const onChange = vi.fn()
+    renderWithProvider({ onChange })
+
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('should show language and voice info when enabled and not hovering', () => {
+    renderWithProvider({}, {
+      text2speech: { enabled: true, language: 'en-US', voice: 'alloy' },
+    })
+
+    expect(screen.getByText('English')).toBeInTheDocument()
+    expect(screen.getByText('alloy')).toBeInTheDocument()
+  })
+
+  it('should show default display text when voice is not set', () => {
+    renderWithProvider({}, {
+      text2speech: { enabled: true, language: 'en-US' },
+    })
+
+    expect(screen.getByText(/voice\.defaultDisplay/)).toBeInTheDocument()
+  })
+
+  it('should show voice settings button when hovering', () => {
+    renderWithProvider({}, {
+      text2speech: { enabled: true },
+    })
+
+    // Simulate mouse enter on the feature card
+    const card = screen.getByText(/feature\.textToSpeech\.title/).closest('[class]')!
+    fireEvent.mouseEnter(card)
+
+    expect(screen.getByText(/voice\.voiceSettings\.title/)).toBeInTheDocument()
+  })
+
+  it('should show autoPlay enabled text when autoPlay is enabled', () => {
+    renderWithProvider({}, {
+      text2speech: { enabled: true, language: 'en-US', autoPlay: TtsAutoPlay.enabled },
+    })
+
+    expect(screen.getByText(/voice\.voiceSettings\.autoPlayEnabled/)).toBeInTheDocument()
+  })
+
+  it('should show autoPlay disabled text when autoPlay is not enabled', () => {
+    renderWithProvider({}, {
+      text2speech: { enabled: true, language: 'en-US' },
+    })
+
+    expect(screen.getByText(/voice\.voiceSettings\.autoPlayDisabled/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.spec.tsx
new file mode 100644
index 0000000000..b4a0dafd91
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.spec.tsx
@@ -0,0 +1,349 @@
+import type { Features } from '../../types'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TtsAutoPlay } from '@/types/app'
+import { FeaturesProvider } from '../../context'
+import ParamConfigContent from './param-config-content'
+
+let mockLanguages = [
+  { value: 'en-US', name: 'English', example: 'Hello world' },
+  { value: 'zh-Hans', name: '中文', example: '你好' },
+]
+
+let mockPathname = '/app/test-app-id/configuration'
+
+let mockVoiceItems: { value: string, name: string }[] | undefined = [
+  { value: 'alloy', name: 'Alloy' },
+  { value: 'echo', name: 'Echo' },
+]
+
+const mockUseAppVoices = vi.fn((_appId: string, _language?: string) => ({
+  data: mockVoiceItems,
+}))
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => mockPathname,
+  useParams: () => ({}),
+}))
+
+vi.mock('@/i18n-config/language', () => ({
+  get languages() {
+    return mockLanguages
+  },
+}))
+
+vi.mock('@/service/use-apps', () => ({
+  useAppVoices: (appId: string, language?: string) => mockUseAppVoices(appId, language),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: true, language: 'en-US', voice: 'alloy', autoPlay: TtsAutoPlay.disabled },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (
+  props: { onClose?: () => void, onChange?: OnFeaturesChange } = {},
+  featureOverrides?: Partial<Features>,
+) => {
+  const features = { ...defaultFeatures, ...featureOverrides }
+  return render(
+    <FeaturesProvider features={features}>
+      <ParamConfigContent
+        onClose={props.onClose ?? vi.fn()}
+        onChange={props.onChange}
+      />
+    </FeaturesProvider>,
+  )
+}
+
+describe('ParamConfigContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockPathname = '/app/test-app-id/configuration'
+    mockLanguages = [
+      { value: 'en-US', name: 'English', example: 'Hello world' },
+      { value: 'zh-Hans', name: '中文', example: '你好' },
+    ]
+    mockVoiceItems = [
+      { value: 'alloy', name: 'Alloy' },
+      { value: 'echo', name: 'Echo' },
+    ]
+  })
+
+  // Rendering states and static UI sections.
+  describe('Rendering', () => {
+    it('should render voice settings title', () => {
+      renderWithProvider()
+
+      expect(screen.getByText(/voice\.voiceSettings\.title/)).toBeInTheDocument()
+    })
+
+    it('should render language label', () => {
+      renderWithProvider()
+
+      expect(screen.getByText(/voice\.voiceSettings\.language/)).toBeInTheDocument()
+    })
+
+    it('should render voice label', () => {
+      renderWithProvider()
+
+      expect(screen.getByText(/voice\.voiceSettings\.voice/)).toBeInTheDocument()
+    })
+
+    it('should render autoPlay toggle', () => {
+      renderWithProvider()
+
+      expect(screen.getByText(/voice\.voiceSettings\.autoPlay/)).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should render tooltip icon for language', () => {
+      renderWithProvider()
+
+      const languageLabel = screen.getByText(/voice\.voiceSettings\.language/)
+      expect(languageLabel).toBeInTheDocument()
+      const tooltip = languageLabel.parentElement as HTMLElement
+      expect(tooltip.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should display language listbox button', () => {
+      renderWithProvider()
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should display current voice in listbox button', () => {
+      renderWithProvider()
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons.find(btn => btn.textContent?.includes('Alloy'))
+      expect(voiceButton).toBeInTheDocument()
+    })
+
+    it('should render audition button when language has example', () => {
+      renderWithProvider()
+
+      const auditionButton = screen.queryByTestId('audition-button')
+      expect(auditionButton).toBeInTheDocument()
+    })
+
+    it('should not render audition button when language has no example', () => {
+      mockLanguages = [
+        { value: 'en-US', name: 'English', example: '' },
+        { value: 'zh-Hans', name: '中文', example: '' },
+      ]
+
+      renderWithProvider()
+
+      const auditionButton = screen.queryByTestId('audition-button')
+      expect(auditionButton).toBeNull()
+    })
+
+    it('should render with no language set and use first as default', () => {
+      renderWithProvider({}, {
+        text2speech: { enabled: true, language: '', voice: '', autoPlay: TtsAutoPlay.disabled },
+      })
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThan(0)
+    })
+
+    it('should render with no voice set and use first as default', () => {
+      renderWithProvider({}, {
+        text2speech: { enabled: true, language: 'en-US', voice: 'nonexistent', autoPlay: TtsAutoPlay.disabled },
+      })
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons.find(btn => btn.textContent?.includes('Alloy'))
+      expect(voiceButton).toBeInTheDocument()
+    })
+  })
+
+  // User-triggered behavior and callbacks.
+  describe('User Interactions', () => {
+    it('should call onClose when close button is clicked', async () => {
+      const onClose = vi.fn()
+      renderWithProvider({ onClose })
+
+      const closeButton = screen.getByRole('button', { name: /close/i })
+      await userEvent.click(closeButton)
+
+      expect(onClose).toHaveBeenCalled()
+    })
+
+    it('should call onClose when close button receives Enter key', async () => {
+      const onClose = vi.fn()
+      renderWithProvider({ onClose })
+
+      const closeButton = screen.getByRole('button', { name: /close/i })
+      await userEvent.click(closeButton)
+      onClose.mockClear()
+      closeButton.focus()
+      await userEvent.keyboard('{Enter}')
+
+      expect(onClose).toHaveBeenCalled()
+    })
+
+    it('should not call onClose when close button receives unrelated key', async () => {
+      const onClose = vi.fn()
+      renderWithProvider({ onClose })
+
+      const closeButton = screen.getByRole('button', { name: /close/i })
+      closeButton.focus()
+      await userEvent.keyboard('{Escape}')
+
+      expect(onClose).not.toHaveBeenCalled()
+    })
+
+    it('should toggle autoPlay switch and call onChange', async () => {
+      const onChange = vi.fn()
+      renderWithProvider({ onChange })
+
+      await userEvent.click(screen.getByRole('switch'))
+
+      expect(onChange).toHaveBeenCalled()
+    })
+
+    it('should set autoPlay to disabled when toggled off from enabled state', async () => {
+      const onChange = vi.fn()
+      renderWithProvider(
+        { onChange },
+        { text2speech: { enabled: true, language: 'en-US', voice: 'alloy', autoPlay: TtsAutoPlay.enabled } },
+      )
+
+      const autoPlaySwitch = screen.getByRole('switch')
+      expect(autoPlaySwitch).toHaveAttribute('aria-checked', 'true')
+
+      await userEvent.click(autoPlaySwitch)
+
+      expect(autoPlaySwitch).toHaveAttribute('aria-checked', 'false')
+      expect(onChange).toHaveBeenCalled()
+    })
+
+    it('should call feature update without onChange callback', async () => {
+      renderWithProvider()
+
+      await userEvent.click(screen.getByRole('switch'))
+
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should open language listbox and show options', async () => {
+      renderWithProvider()
+
+      const buttons = screen.getAllByRole('button')
+      const languageButton = buttons.find(btn => btn.textContent?.includes('voice.language.'))
+      expect(languageButton).toBeDefined()
+      await userEvent.click(languageButton!)
+
+      const options = await screen.findAllByRole('option')
+      expect(options.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('should handle language change', async () => {
+      const onChange = vi.fn()
+      renderWithProvider({ onChange })
+
+      const buttons = screen.getAllByRole('button')
+      const languageButton = buttons.find(btn => btn.textContent?.includes('voice.language.'))
+      expect(languageButton).toBeDefined()
+      await userEvent.click(languageButton!)
+      const options = await screen.findAllByRole('option')
+      expect(options.length).toBeGreaterThan(1)
+      await userEvent.click(options[1])
+      expect(onChange).toHaveBeenCalled()
+    })
+
+    it('should handle voice change', async () => {
+      const onChange = vi.fn()
+      renderWithProvider({ onChange })
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons.find(btn => btn.textContent?.includes('Alloy'))
+      expect(voiceButton).toBeDefined()
+      await userEvent.click(voiceButton!)
+      const options = await screen.findAllByRole('option')
+      expect(options.length).toBeGreaterThan(1)
+      await userEvent.click(options[1])
+      expect(onChange).toHaveBeenCalled()
+    })
+
+    it('should show selected language option in listbox', async () => {
+      renderWithProvider()
+
+      const buttons = screen.getAllByRole('button')
+      const languageButton = buttons.find(btn => btn.textContent?.includes('voice.language.'))
+      expect(languageButton).toBeDefined()
+      await userEvent.click(languageButton!)
+      const options = await screen.findAllByRole('option')
+      expect(options.length).toBeGreaterThanOrEqual(1)
+
+      const selectedOption = options.find(opt => opt.textContent?.includes('voice.language.enUS'))
+      expect(selectedOption).toBeDefined()
+      expect(selectedOption).toHaveAttribute('aria-selected', 'true')
+    })
+
+    it('should show selected voice option in listbox', async () => {
+      renderWithProvider()
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons.find(btn => btn.textContent?.includes('Alloy'))
+      expect(voiceButton).toBeDefined()
+      await userEvent.click(voiceButton!)
+      const options = await screen.findAllByRole('option')
+      expect(options.length).toBeGreaterThanOrEqual(1)
+
+      const selectedOption = options.find(opt => opt.textContent?.includes('Alloy'))
+      expect(selectedOption).toBeDefined()
+      expect(selectedOption).toHaveAttribute('aria-selected', 'true')
+    })
+  })
+
+  // Fallback and boundary scenarios.
+  describe('Edge Cases', () => {
+    it('should show placeholder and disable voice selection when no languages are available', () => {
+      mockLanguages = []
+      mockVoiceItems = undefined
+
+      renderWithProvider({}, {
+        text2speech: { enabled: true, language: 'en-US', voice: 'alloy', autoPlay: TtsAutoPlay.disabled },
+      })
+
+      const placeholderTexts = screen.getAllByText(/placeholder\.select/)
+      expect(placeholderTexts.length).toBeGreaterThanOrEqual(2)
+
+      const disabledButtons = screen
+        .getAllByRole('button')
+        .filter(button => button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
+
+      expect(disabledButtons.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should call useAppVoices with empty appId when pathname has no app segment', () => {
+      mockPathname = '/configuration'
+
+      renderWithProvider()
+
+      expect(mockUseAppVoices).toHaveBeenCalledWith('', 'en-US')
+    })
+
+    it('should render language text when selected language value is empty string', () => {
+      mockLanguages = [{ value: '' as string, name: 'Unknown Language', example: '' }]
+
+      renderWithProvider({}, {
+        text2speech: { enabled: true, language: '', voice: '', autoPlay: TtsAutoPlay.disabled },
+      })
+
+      expect(screen.getByText(/voice\.language\./)).toBeInTheDocument()
+    })
+  })
+})
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 21b4f1e0cd..631691c42f 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
@@ -2,8 +2,6 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { Item } from '@/app/components/base/select'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
-import { RiCloseLine } from '@remixicon/react'
 import { produce } from 'immer'
 import { usePathname } from 'next/navigation'
 import * as React from 'react'
@@ -67,11 +65,25 @@ const VoiceParamConfig = ({
   return (
     <>
       <div className="mb-4 flex items-center justify-between">
-        <div className="system-xl-semibold text-text-primary">{t('voice.voiceSettings.title', { ns: 'appDebug' })}</div>
-        <div className="cursor-pointer p-1" onClick={onClose}><RiCloseLine className="h-4 w-4 text-text-tertiary" /></div>
+        <div className="text-text-primary system-xl-semibold">{t('voice.voiceSettings.title', { ns: 'appDebug' })}</div>
+        <div
+          className="cursor-pointer p-1"
+          role="button"
+          tabIndex={0}
+          aria-label={t('appDebug:voice.voiceSettings.close')}
+          onClick={onClose}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose()
+            }
+          }}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
       </div>
       <div className="mb-3">
-        <div className="system-sm-semibold mb-1 flex items-center py-1 text-text-secondary">
+        <div className="mb-1 flex items-center py-1 text-text-secondary system-sm-semibold">
           {t('voice.voiceSettings.language', { ns: 'appDebug' })}
           <Tooltip
             popupContent={(
@@ -103,10 +115,7 @@ const VoiceParamConfig = ({
                   : localLanguagePlaceholder}
               </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"
-                  aria-hidden="true"
-                />
+                <span className="i-heroicons-chevron-down-20-solid h-4 w-4 text-text-tertiary" aria-hidden="true" />
               </span>
             </ListboxButton>
             <Transition
@@ -137,7 +146,7 @@ const VoiceParamConfig = ({
                           <span
                             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 className="i-heroicons-check-20-solid h-4 w-4" aria-hidden="true" />
                           </span>
                         )}
                       </>
@@ -150,7 +159,7 @@ const VoiceParamConfig = ({
         </Listbox>
       </div>
       <div className="mb-3">
-        <div className="system-sm-semibold mb-1 py-1 text-text-secondary">
+        <div className="mb-1 py-1 text-text-secondary system-sm-semibold">
           {t('voice.voiceSettings.voice', { ns: 'appDebug' })}
         </div>
         <div className="flex items-center gap-1">
@@ -173,10 +182,7 @@ const VoiceParamConfig = ({
                   {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"
-                    aria-hidden="true"
-                  />
+                  <span className="i-heroicons-chevron-down-20-solid h-4 w-4 text-text-tertiary" aria-hidden="true" />
                 </span>
               </ListboxButton>
               <Transition
@@ -203,7 +209,7 @@ const VoiceParamConfig = ({
                             <span
                               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 className="i-heroicons-check-20-solid h-4 w-4" aria-hidden="true" />
                             </span>
                           )}
                         </>
@@ -215,7 +221,7 @@ const VoiceParamConfig = ({
             </div>
           </Listbox>
           {languageItem?.example && (
-            <div className="h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1">
+            <div className="h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1" data-testid="audition-button">
               <AudioBtn
                 value={languageItem?.example}
                 isAudition
@@ -227,7 +233,7 @@ const VoiceParamConfig = ({
         </div>
       </div>
       <div>
-        <div className="system-sm-semibold mb-1 py-1 text-text-secondary">
+        <div className="mb-1 py-1 text-text-secondary system-sm-semibold">
           {t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}
         </div>
         <Switch
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.spec.tsx
new file mode 100644
index 0000000000..d88d302f92
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.spec.tsx
@@ -0,0 +1,105 @@
+import type { Features } from '../../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FeaturesProvider } from '../../context'
+import VoiceSettings from './voice-settings'
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/app/test-app-id/configuration',
+  useParams: () => ({ appId: 'test-app-id' }),
+}))
+
+vi.mock('@/service/use-apps', () => ({
+  useAppVoices: () => ({
+    data: [{ name: 'alloy', value: 'alloy' }],
+  }),
+}))
+
+const defaultFeatures: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: true, language: 'en-US', voice: 'alloy' },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const renderWithProvider = (ui: React.ReactNode) => {
+  return render(
+    <FeaturesProvider features={defaultFeatures}>
+      {ui}
+    </FeaturesProvider>,
+  )
+}
+
+describe('VoiceSettings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render children in trigger', () => {
+    renderWithProvider(
+      <VoiceSettings open={false} onOpen={vi.fn()}>
+        <button>Settings</button>
+      </VoiceSettings>,
+    )
+
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('should render ParamConfigContent in portal', () => {
+    renderWithProvider(
+      <VoiceSettings open={true} onOpen={vi.fn()}>
+        <button>Settings</button>
+      </VoiceSettings>,
+    )
+
+    expect(screen.getByText(/voice\.voiceSettings\.title/)).toBeInTheDocument()
+  })
+
+  it('should call onOpen with toggle function when trigger is clicked', () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <VoiceSettings open={false} onOpen={onOpen}>
+        <button>Settings</button>
+      </VoiceSettings>,
+    )
+
+    fireEvent.click(screen.getByText('Settings'))
+
+    expect(onOpen).toHaveBeenCalled()
+    // The toggle function should flip the open state
+    const toggleFn = onOpen.mock.calls[0][0]
+    expect(typeof toggleFn).toBe('function')
+    expect(toggleFn(false)).toBe(true)
+    expect(toggleFn(true)).toBe(false)
+  })
+
+  it('should not call onOpen when disabled and trigger is clicked', () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <VoiceSettings open={false} onOpen={onOpen} disabled>
+        <button>Settings</button>
+      </VoiceSettings>,
+    )
+
+    fireEvent.click(screen.getByText('Settings'))
+
+    expect(onOpen).not.toHaveBeenCalled()
+  })
+
+  it('should call onOpen with false when close is clicked', () => {
+    const onOpen = vi.fn()
+    renderWithProvider(
+      <VoiceSettings open={true} onOpen={onOpen}>
+        <button>Settings</button>
+      </VoiceSettings>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /voice\.voiceSettings\.close/ }))
+
+    expect(onOpen).toHaveBeenCalledWith(false)
+  })
+})
diff --git a/web/app/components/base/features/store.spec.ts b/web/app/components/base/features/store.spec.ts
new file mode 100644
index 0000000000..fc2cf8822e
--- /dev/null
+++ b/web/app/components/base/features/store.spec.ts
@@ -0,0 +1,180 @@
+import { Resolution, TransferMethod } from '@/types/app'
+import { createFeaturesStore } from './store'
+
+describe('createFeaturesStore', () => {
+  describe('Default State', () => {
+    it('should create a store with moreLikeThis disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.moreLikeThis?.enabled).toBe(false)
+    })
+
+    it('should create a store with opening disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.opening?.enabled).toBe(false)
+    })
+
+    it('should create a store with suggested disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.suggested?.enabled).toBe(false)
+    })
+
+    it('should create a store with text2speech disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.text2speech?.enabled).toBe(false)
+    })
+
+    it('should create a store with speech2text disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.speech2text?.enabled).toBe(false)
+    })
+
+    it('should create a store with citation disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.citation?.enabled).toBe(false)
+    })
+
+    it('should create a store with moderation disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.moderation?.enabled).toBe(false)
+    })
+
+    it('should create a store with annotationReply disabled by default', () => {
+      const store = createFeaturesStore()
+      const state = store.getState()
+
+      expect(state.features.annotationReply?.enabled).toBe(false)
+    })
+  })
+
+  describe('File Image Initialization', () => {
+    it('should initialize file image enabled as false', () => {
+      const store = createFeaturesStore()
+      const { features } = store.getState()
+
+      expect(features.file?.image?.enabled).toBe(false)
+    })
+
+    it('should initialize file image detail as high resolution', () => {
+      const store = createFeaturesStore()
+      const { features } = store.getState()
+
+      expect(features.file?.image?.detail).toBe(Resolution.high)
+    })
+
+    it('should initialize file image number_limits as 3', () => {
+      const store = createFeaturesStore()
+      const { features } = store.getState()
+
+      expect(features.file?.image?.number_limits).toBe(3)
+    })
+
+    it('should initialize file image transfer_methods with local and remote options', () => {
+      const store = createFeaturesStore()
+      const { features } = store.getState()
+
+      expect(features.file?.image?.transfer_methods).toEqual([
+        TransferMethod.local_file,
+        TransferMethod.remote_url,
+      ])
+    })
+  })
+
+  describe('Feature Merging', () => {
+    it('should merge initial moreLikeThis enabled state', () => {
+      const store = createFeaturesStore({
+        features: {
+          moreLikeThis: { enabled: true },
+        },
+      })
+      const { features } = store.getState()
+
+      expect(features.moreLikeThis?.enabled).toBe(true)
+    })
+
+    it('should merge initial opening enabled state', () => {
+      const store = createFeaturesStore({
+        features: {
+          opening: { enabled: true },
+        },
+      })
+      const { features } = store.getState()
+
+      expect(features.opening?.enabled).toBe(true)
+    })
+
+    it('should preserve additional properties when merging', () => {
+      const store = createFeaturesStore({
+        features: {
+          opening: { enabled: true, opening_statement: 'Hello!' },
+        },
+      })
+      const { features } = store.getState()
+
+      expect(features.opening?.enabled).toBe(true)
+      expect(features.opening?.opening_statement).toBe('Hello!')
+    })
+  })
+
+  describe('setFeatures', () => {
+    it('should update moreLikeThis feature via setFeatures', () => {
+      const store = createFeaturesStore()
+
+      store.getState().setFeatures({
+        moreLikeThis: { enabled: true },
+      })
+
+      expect(store.getState().features.moreLikeThis?.enabled).toBe(true)
+    })
+
+    it('should update multiple features via setFeatures', () => {
+      const store = createFeaturesStore()
+
+      store.getState().setFeatures({
+        moreLikeThis: { enabled: true },
+        opening: { enabled: true },
+      })
+
+      expect(store.getState().features.moreLikeThis?.enabled).toBe(true)
+      expect(store.getState().features.opening?.enabled).toBe(true)
+    })
+  })
+
+  describe('showFeaturesModal', () => {
+    it('should initialize showFeaturesModal as false', () => {
+      const store = createFeaturesStore()
+
+      expect(store.getState().showFeaturesModal).toBe(false)
+    })
+
+    it('should toggle showFeaturesModal to true', () => {
+      const store = createFeaturesStore()
+
+      store.getState().setShowFeaturesModal(true)
+
+      expect(store.getState().showFeaturesModal).toBe(true)
+    })
+
+    it('should toggle showFeaturesModal to false', () => {
+      const store = createFeaturesStore()
+      store.getState().setShowFeaturesModal(true)
+
+      store.getState().setShowFeaturesModal(false)
+
+      expect(store.getState().showFeaturesModal).toBe(false)
+    })
+  })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 4bc0ce7e99..9f0104333f 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1862,17 +1862,6 @@
   "app/components/base/features/new-feature-panel/conversation-opener/modal.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/features/new-feature-panel/dialog-wrapper.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/base/features/new-feature-panel/feature-bar.tsx": {
@@ -1893,11 +1882,6 @@
       "count": 5
     }
   },
-  "app/components/base/features/new-feature-panel/file-upload/setting-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -1922,9 +1906,6 @@
     }
   },
   "app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1934,11 +1915,6 @@
       "count": 7
     }
   },
-  "app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx": {
     "ts/no-explicit-any": {
       "count": 1

From 657eeb65b82773931690f016879f8d18066c79fb Mon Sep 17 00:00:00 2001
From: Poojan <poojan@infocusp.com>
Date: Tue, 24 Feb 2026 12:04:48 +0530
Subject: [PATCH 13/26] test: add unit tests for base-components-part-2
 (#32409)

---
 .../base/audio-gallery/index.spec.tsx         |  49 +++++
 .../components/base/image-gallery/index.tsx   |   1 +
 .../base/markdown-blocks/audio-block.spec.tsx |  73 +++++++
 .../base/markdown-blocks/button.spec.tsx      | 121 ++++++++++++
 .../base/markdown-blocks/paragraph.spec.tsx   |  96 ++++++++++
 .../markdown-blocks/plugin-paragraph.spec.tsx | 181 ++++++++++++++++++
 .../base/markdown-blocks/plugin-paragraph.tsx |   6 +-
 .../base/markdown-blocks/pre-code.spec.tsx    |  61 ++++++
 .../components/base/radio-card/index.spec.tsx | 137 +++++++++++++
 .../base/radio-card/simple/index.spec.tsx     | 137 +++++++++++++
 .../base/radio/component/group/index.spec.tsx | 108 +++++++++++
 .../base/radio/component/radio/index.spec.tsx |  95 +++++++++
 .../base/radio/context/index.spec.tsx         |  59 ++++++
 web/app/components/base/radio/index.spec.tsx  |  44 +++++
 web/app/components/base/radio/ui.spec.tsx     |  88 +++++++++
 15 files changed, 1253 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/base/audio-gallery/index.spec.tsx
 create mode 100644 web/app/components/base/markdown-blocks/audio-block.spec.tsx
 create mode 100644 web/app/components/base/markdown-blocks/button.spec.tsx
 create mode 100644 web/app/components/base/markdown-blocks/paragraph.spec.tsx
 create mode 100644 web/app/components/base/markdown-blocks/plugin-paragraph.spec.tsx
 create mode 100644 web/app/components/base/markdown-blocks/pre-code.spec.tsx
 create mode 100644 web/app/components/base/radio-card/index.spec.tsx
 create mode 100644 web/app/components/base/radio-card/simple/index.spec.tsx
 create mode 100644 web/app/components/base/radio/component/group/index.spec.tsx
 create mode 100644 web/app/components/base/radio/component/radio/index.spec.tsx
 create mode 100644 web/app/components/base/radio/context/index.spec.tsx
 create mode 100644 web/app/components/base/radio/index.spec.tsx
 create mode 100644 web/app/components/base/radio/ui.spec.tsx

diff --git a/web/app/components/base/audio-gallery/index.spec.tsx b/web/app/components/base/audio-gallery/index.spec.tsx
new file mode 100644
index 0000000000..9039d4995c
--- /dev/null
+++ b/web/app/components/base/audio-gallery/index.spec.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+// AudioGallery.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+
+import AudioGallery from './index'
+
+// Mock AudioPlayer so we only assert prop forwarding
+const audioPlayerMock = vi.fn()
+
+vi.mock('./AudioPlayer', () => ({
+  default: (props: { srcs: string[] }) => {
+    audioPlayerMock(props)
+    return <div data-testid="audio-player" />
+  },
+}))
+
+describe('AudioGallery', () => {
+  afterEach(() => {
+    audioPlayerMock.mockClear()
+    vi.resetModules()
+  })
+
+  it('returns null when srcs array is empty', () => {
+    const { container } = render(<AudioGallery srcs={[]} />)
+    expect(container.firstChild).toBeNull()
+    expect(screen.queryByTestId('audio-player')).toBeNull()
+  })
+
+  it('returns null when all srcs are falsy', () => {
+    const { container } = render(<AudioGallery srcs={['', '', '']} />)
+    expect(container.firstChild).toBeNull()
+    expect(screen.queryByTestId('audio-player')).toBeNull()
+  })
+
+  it('filters out falsy srcs and passes valid srcs to AudioPlayer', () => {
+    render(<AudioGallery srcs={['a.mp3', '', 'b.mp3']} />)
+    expect(screen.getByTestId('audio-player')).toBeInTheDocument()
+    expect(audioPlayerMock).toHaveBeenCalledTimes(1)
+    expect(audioPlayerMock).toHaveBeenCalledWith({ srcs: ['a.mp3', 'b.mp3'] })
+  })
+
+  it('wraps AudioPlayer inside container with expected class', () => {
+    const { container } = render(<AudioGallery srcs={['a.mp3']} />)
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeTruthy()
+    expect(root.className).toContain('my-3')
+  })
+})
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index 8ca8be0fc7..7d3ef77d28 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -47,6 +47,7 @@ const ImageGallery: FC<Props> = ({
                 style={imgStyle}
                 src={src}
                 alt=""
+                data-testid="gallery-image" // Added for testing
                 onClick={() => setImagePreviewUrl(src)}
                 onError={e => e.currentTarget.remove()}
               />
diff --git a/web/app/components/base/markdown-blocks/audio-block.spec.tsx b/web/app/components/base/markdown-blocks/audio-block.spec.tsx
new file mode 100644
index 0000000000..166de39a16
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/audio-block.spec.tsx
@@ -0,0 +1,73 @@
+import type { NamedExoticComponent } from 'react'
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+
+// AudioBlock.integration.spec.tsx
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import AudioBlock from './audio-block'
+
+// Mock the nested AudioPlayer used by AudioGallery (do not mock AudioGallery itself)
+const audioPlayerMock = vi.fn()
+vi.mock('@/app/components/base/audio-gallery/AudioPlayer', () => ({
+  default: (props: { srcs: string[] }) => {
+    audioPlayerMock(props)
+    return <div data-testid="audio-player" data-srcs={JSON.stringify(props.srcs)} />
+  },
+})) // adjust path if AudioBlock sits elsewhere
+
+describe('AudioBlock (integration - real AudioGallery)', () => {
+  beforeEach(() => {
+    audioPlayerMock.mockClear()
+  })
+
+  it('renders AudioGallery with multiple srcs extracted from node.children', () => {
+    const node = {
+      children: [
+        { properties: { src: 'one.mp3' } },
+        { properties: { src: 'two.mp3' } },
+        { type: 'text', value: 'plain' },
+      ],
+      properties: {},
+    }
+
+    const { container } = render(<AudioBlock node={node} />)
+
+    const gallery = screen.getByTestId('audio-player')
+    expect(gallery).toBeInTheDocument()
+
+    expect(audioPlayerMock).toHaveBeenCalledTimes(1)
+    expect(audioPlayerMock).toHaveBeenCalledWith({ srcs: ['one.mp3', 'two.mp3'] })
+
+    expect(container.firstChild).not.toBeNull()
+  })
+
+  it('renders AudioGallery with single src from node.properties when no children with properties', () => {
+    const node = {
+      children: [{ type: 'text', value: 'no-src' }],
+      properties: { src: 'single.mp3' },
+    }
+
+    render(<AudioBlock node={node} />)
+
+    expect(audioPlayerMock).toHaveBeenCalledTimes(1)
+    expect(audioPlayerMock).toHaveBeenCalledWith({ srcs: ['single.mp3'] })
+    expect(screen.getByTestId('audio-player')).toBeInTheDocument()
+  })
+
+  it('returns null when there are no audio sources', () => {
+    const node = {
+      children: [{ type: 'text', value: 'nothing here' }],
+      properties: {},
+    }
+
+    const { container } = render(<AudioBlock node={node} />)
+    expect(container.firstChild).toBeNull()
+    expect(audioPlayerMock).not.toHaveBeenCalled()
+  })
+
+  it('has displayName set to AudioBlock', () => {
+    const component = AudioBlock as NamedExoticComponent<{ node: unknown }>
+    expect(component.displayName).toBe('AudioBlock')
+  })
+})
diff --git a/web/app/components/base/markdown-blocks/button.spec.tsx b/web/app/components/base/markdown-blocks/button.spec.tsx
new file mode 100644
index 0000000000..7a1b8e5827
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/button.spec.tsx
@@ -0,0 +1,121 @@
+import type { NamedExoticComponent } from 'react'
+import type { ChatContextValue } from '@/app/components/base/chat/chat/context'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// markdown-button.spec.tsx
+import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+
+import MarkdownButton from './button'
+
+// Only mock the URL utility so behavior is deterministic
+const isValidUrlSpy = vi.fn()
+vi.mock('./utils', () => ({
+  isValidUrl: (u: string) => isValidUrlSpy(u),
+})) // test subject
+
+type TestNode = {
+  properties?: {
+    dataVariant?: string
+    dataMessage?: string
+    dataLink?: string
+    dataSize?: string
+  }
+  children?: Array<{ value?: string }>
+}
+
+describe('MarkdownButton (integration)', () => {
+  const onSendSpy = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  function renderWithCtx(node: TestNode) {
+    // Provide minimal ChatContext; cast to ChatContextValue to satisfy the provider signature
+    const ctx = {
+      onSend: (msg: unknown) => onSendSpy(msg),
+      // other props are optional at runtime; assert type to satisfy TS
+    } as unknown as ChatContextValue
+
+    return render(
+      <ChatContextProvider {...ctx}>
+        <MarkdownButton node={node as unknown as Record<string, unknown>} />
+      </ChatContextProvider>,
+    )
+  }
+
+  it('renders button text from node children', () => {
+    const node: TestNode = { children: [{ value: 'Click me' }], properties: {} }
+    renderWithCtx(node)
+    expect(screen.getByRole('button')).toHaveTextContent('Click me')
+  })
+
+  it('opens new tab when link is valid and does not call onSend', async () => {
+    isValidUrlSpy.mockReturnValue(true)
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+    const user = userEvent.setup()
+
+    const node: TestNode = {
+      properties: { dataLink: 'https://example.com' },
+      children: [{ value: 'Go' }],
+    }
+
+    renderWithCtx(node)
+    await user.click(screen.getByRole('button'))
+
+    expect(isValidUrlSpy).toHaveBeenCalledWith('https://example.com')
+    expect(openSpy).toHaveBeenCalledWith('https://example.com', '_blank')
+    expect(onSendSpy).not.toHaveBeenCalled()
+
+    openSpy.mockRestore()
+  })
+
+  it('calls onSend when link is invalid but message exists', async () => {
+    isValidUrlSpy.mockReturnValue(false)
+    const user = userEvent.setup()
+
+    const node: TestNode = {
+      properties: { dataLink: 'not-a-url', dataMessage: 'hello!' },
+      children: [{ value: 'Send' }],
+    }
+
+    renderWithCtx(node)
+    await user.click(screen.getByRole('button'))
+
+    expect(isValidUrlSpy).toHaveBeenCalledWith('not-a-url')
+    expect(onSendSpy).toHaveBeenCalledTimes(1)
+    expect(onSendSpy).toHaveBeenCalledWith('hello!')
+  })
+
+  it('does nothing when no link and no message', async () => {
+    isValidUrlSpy.mockReturnValue(false)
+    const user = userEvent.setup()
+
+    const node: TestNode = { properties: {}, children: [{ value: 'Empty' }] }
+    renderWithCtx(node)
+    await user.click(screen.getByRole('button'))
+
+    expect(isValidUrlSpy).not.toHaveBeenCalled()
+    expect(onSendSpy).not.toHaveBeenCalled()
+  })
+
+  it('calls onSend when message present and no link', async () => {
+    const user = userEvent.setup()
+    const node: TestNode = {
+      properties: { dataMessage: 'msg-only' },
+      children: [{ value: 'Msg' }],
+    }
+
+    renderWithCtx(node)
+    await user.click(screen.getByRole('button'))
+
+    expect(onSendSpy).toHaveBeenCalledWith('msg-only')
+  })
+
+  it('has displayName set to MarkdownButton', () => {
+    const comp = MarkdownButton as NamedExoticComponent<{ node: unknown }>
+    expect(comp.displayName).toBe('MarkdownButton')
+  })
+})
diff --git a/web/app/components/base/markdown-blocks/paragraph.spec.tsx b/web/app/components/base/markdown-blocks/paragraph.spec.tsx
new file mode 100644
index 0000000000..1abfe246ba
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/paragraph.spec.tsx
@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import Paragraph from './paragraph'
+
+vi.mock('@/app/components/base/image-gallery', () => ({
+  default: ({ srcs }: { srcs: string[] }) => (
+    <div data-testid="image-gallery">{srcs.join(',')}</div>
+  ),
+}))
+
+type MockNode = {
+  children?: Array<{
+    tagName?: string
+    properties?: {
+      src?: string
+    }
+  }>
+}
+
+type ParagraphProps = {
+  node: MockNode
+  children?: React.ReactNode
+}
+
+const renderParagraph = (props: ParagraphProps) => {
+  return render(<Paragraph {...props} />)
+}
+
+describe('Paragraph', () => {
+  it('should render normal paragraph when no image child exists', () => {
+    renderParagraph({
+      node: { children: [] },
+      children: 'Hello world',
+    })
+
+    expect(screen.getByText('Hello world').tagName).toBe('P')
+  })
+
+  it('should render image gallery when first child is img', () => {
+    renderParagraph({
+      node: {
+        children: [
+          {
+            tagName: 'img',
+            properties: { src: 'test.png' },
+          },
+        ],
+      },
+      children: ['Image only'],
+    })
+
+    expect(screen.getByTestId('image-gallery')).toBeInTheDocument()
+    expect(screen.getByTestId('image-gallery')).toHaveTextContent('test.png')
+  })
+
+  it('should render additional content after image when children length > 1', () => {
+    renderParagraph({
+      node: {
+        children: [
+          {
+            tagName: 'img',
+            properties: { src: 'test.png' },
+          },
+        ],
+      },
+      children: ['Image', <span key="1">Caption</span>],
+    })
+
+    expect(screen.getByTestId('image-gallery')).toBeInTheDocument()
+    expect(screen.getByText('Caption')).toBeInTheDocument()
+  })
+
+  it('should render paragraph when first child exists but is not img', () => {
+    renderParagraph({
+      node: {
+        children: [
+          {
+            tagName: 'div',
+          },
+        ],
+      },
+      children: 'Not image',
+    })
+
+    expect(screen.getByText('Not image').tagName).toBe('P')
+  })
+
+  it('should render paragraph when children_node is undefined', () => {
+    renderParagraph({
+      node: {},
+      children: 'Fallback',
+    })
+
+    expect(screen.getByText('Fallback').tagName).toBe('P')
+  })
+})
diff --git a/web/app/components/base/markdown-blocks/plugin-paragraph.spec.tsx b/web/app/components/base/markdown-blocks/plugin-paragraph.spec.tsx
new file mode 100644
index 0000000000..5479ab81ac
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/plugin-paragraph.spec.tsx
@@ -0,0 +1,181 @@
+/* eslint-disable next/no-img-element */
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { usePluginReadmeAsset } from '@/service/use-plugins'
+import { PluginParagraph } from './plugin-paragraph'
+import { getMarkdownImageURL } from './utils'
+
+// Mock dependencies
+vi.mock('@/service/use-plugins', () => ({
+  usePluginReadmeAsset: vi.fn(),
+}))
+
+vi.mock('./utils', () => ({
+  getMarkdownImageURL: vi.fn(),
+}))
+
+vi.mock('@/app/components/base/image-uploader/image-preview', () => ({
+  default: ({ url, onCancel }: { url: string, onCancel: () => void }) => (
+    <div data-testid="image-preview-modal">
+      <span>{url}</span>
+      <button onClick={onCancel} type="button">Close</button>
+    </div>
+  ),
+}))
+
+/**
+ * Interfaces to avoid 'any' and satisfy strict linting
+ */
+type MockNode = {
+  children?: Array<{
+    tagName?: string
+    properties?: { src?: string }
+  }>
+}
+
+type HookReturn = {
+  data?: Blob
+  isLoading?: boolean
+  error?: Error | null
+}
+
+describe('PluginParagraph', () => {
+  const mockPluginInfo = {
+    pluginUniqueIdentifier: 'test-plugin-id',
+    pluginId: 'plugin-123',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Ensure URL globals exist in the test environment using globalThis
+    if (!globalThis.URL.createObjectURL) {
+      globalThis.URL.createObjectURL = vi.fn()
+      globalThis.URL.revokeObjectURL = vi.fn()
+    }
+
+    // Default mock return to prevent destructuring errors
+    vi.mocked(usePluginReadmeAsset).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: null,
+    } as HookReturn as ReturnType<typeof usePluginReadmeAsset>)
+  })
+
+  it('should render a standard paragraph when not an image', () => {
+    const node: MockNode = { children: [{ tagName: 'span' }] }
+    render(
+      <PluginParagraph node={node}>
+        Hello World
+      </PluginParagraph>,
+    )
+
+    expect(screen.getByTestId('standard-paragraph')).toHaveTextContent('Hello World')
+  })
+
+  it('should render an ImageGallery when the first child is an image', () => {
+    const node: MockNode = {
+      children: [{ tagName: 'img', properties: { src: 'test-img.png' } }],
+    }
+    vi.mocked(getMarkdownImageURL).mockReturnValue('https://cdn.com/test-img.png')
+
+    const { container } = render(
+      <PluginParagraph pluginInfo={mockPluginInfo} node={node}>
+        <img src="test-img.png" alt="" />
+      </PluginParagraph>,
+    )
+
+    expect(screen.getByTestId('image-paragraph-wrapper')).toBeInTheDocument()
+    // Query by selector since alt="" removes the 'img' role from the accessibility tree
+    const img = container.querySelector('img')
+    expect(img).toHaveAttribute('src', 'https://cdn.com/test-img.png')
+  })
+
+  it('should use a blob URL when asset data is successfully fetched', () => {
+    const node: MockNode = {
+      children: [{ tagName: 'img', properties: { src: 'test-img.png' } }],
+    }
+    const mockBlob = new Blob([''], { type: 'image/png' })
+    vi.mocked(usePluginReadmeAsset).mockReturnValue({
+      data: mockBlob,
+    } as HookReturn as ReturnType<typeof usePluginReadmeAsset>)
+
+    vi.spyOn(globalThis.URL, 'createObjectURL').mockReturnValue('blob:actual-blob-url')
+
+    const { container } = render(
+      <PluginParagraph pluginInfo={mockPluginInfo} node={node}>
+        <img src="test-img.png" alt="" />
+      </PluginParagraph>,
+    )
+
+    const img = container.querySelector('img')
+    expect(img).toHaveAttribute('src', 'blob:actual-blob-url')
+  })
+
+  it('should render remaining children below the image gallery', () => {
+    const node: MockNode = {
+      children: [
+        { tagName: 'img', properties: { src: 'test-img.png' } },
+        { tagName: 'text' },
+      ],
+    }
+
+    render(
+      <PluginParagraph pluginInfo={mockPluginInfo} node={node}>
+        <img src="test-img.png" alt="" />
+        <span>Caption Text</span>
+      </PluginParagraph>,
+    )
+
+    expect(screen.getByTestId('remaining-children')).toHaveTextContent('Caption Text')
+  })
+
+  it('should revoke the blob URL on unmount to prevent memory leaks', () => {
+    const node: MockNode = {
+      children: [{ tagName: 'img', properties: { src: 'test-img.png' } }],
+    }
+    const mockBlob = new Blob([''], { type: 'image/png' })
+    vi.mocked(usePluginReadmeAsset).mockReturnValue({
+      data: mockBlob,
+    } as HookReturn as ReturnType<typeof usePluginReadmeAsset>)
+
+    const revokeSpy = vi.spyOn(globalThis.URL, 'revokeObjectURL')
+    vi.spyOn(globalThis.URL, 'createObjectURL').mockReturnValue('blob:cleanup-test')
+
+    const { unmount } = render(
+      <PluginParagraph pluginInfo={mockPluginInfo} node={node}>
+        <img src="test-img.png" alt="" />
+      </PluginParagraph>,
+    )
+
+    unmount()
+    expect(revokeSpy).toHaveBeenCalledWith('blob:cleanup-test')
+  })
+
+  it('should open the image preview modal when an image in the gallery is clicked', async () => {
+    const user = userEvent.setup()
+    const node: MockNode = {
+      children: [{ tagName: 'img', properties: { src: 'test-img.png' } }],
+    }
+    vi.mocked(getMarkdownImageURL).mockReturnValue('https://cdn.com/gallery.png')
+
+    const { container } = render(
+      <PluginParagraph pluginInfo={mockPluginInfo} node={node}>
+        <img src="test-img.png" alt="" />
+      </PluginParagraph>,
+    )
+
+    const img = container.querySelector('img')
+    if (img)
+      await user.click(img)
+
+    // ImageGallery is not mocked, so it should trigger the preview
+    expect(screen.getByTestId('image-preview-modal')).toBeInTheDocument()
+    expect(screen.getByText('https://cdn.com/gallery.png')).toBeInTheDocument()
+
+    const closeBtn = screen.getByText('Close')
+    await user.click(closeBtn)
+    expect(screen.queryByTestId('image-preview-modal')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/markdown-blocks/plugin-paragraph.tsx b/web/app/components/base/markdown-blocks/plugin-paragraph.tsx
index 73189289f3..b9b4d5e873 100644
--- a/web/app/components/base/markdown-blocks/plugin-paragraph.tsx
+++ b/web/app/components/base/markdown-blocks/plugin-paragraph.tsx
@@ -58,13 +58,13 @@ export const PluginParagraph: React.FC<PluginParagraphProps> = ({ pluginInfo, no
     const remainingChildren = Array.isArray(children) && children.length > 1 ? children.slice(1) : undefined
 
     return (
-      <div className="markdown-img-wrapper">
+      <div className="markdown-img-wrapper" data-testid="image-paragraph-wrapper">
         <ImageGallery srcs={[imageUrl]} />
         {remainingChildren && (
-          <div className="mt-2">{remainingChildren}</div>
+          <div className="mt-2" data-testid="remaining-children">{remainingChildren}</div>
         )}
       </div>
     )
   }
-  return <p>{children}</p>
+  return <p data-testid="standard-paragraph">{children}</p>
 }
diff --git a/web/app/components/base/markdown-blocks/pre-code.spec.tsx b/web/app/components/base/markdown-blocks/pre-code.spec.tsx
new file mode 100644
index 0000000000..a3cc234e8f
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/pre-code.spec.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import PreCode from './pre-code'
+
+describe('PreCode Component', () => {
+  it('renders children correctly inside the pre tag', () => {
+    const { container } = render(
+      <PreCode>
+        <code data-testid="test-code">console.log("hello world")</code>
+      </PreCode>,
+    )
+
+    const preElement = container.querySelector('pre')
+    const codeElement = screen.getByTestId('test-code')
+
+    expect(preElement).toBeInTheDocument()
+    expect(codeElement).toBeInTheDocument()
+    // Verify code is a descendant of pre
+    expect(preElement).toContainElement(codeElement)
+    expect(codeElement.textContent).toBe('console.log("hello world")')
+  })
+
+  it('contains the copy button span for CSS targeting', () => {
+    const { container } = render(
+      <PreCode>
+        <code>test content</code>
+      </PreCode>,
+    )
+
+    const copySpan = container.querySelector('.copy-code-button')
+    expect(copySpan).toBeInTheDocument()
+    expect(copySpan?.tagName).toBe('SPAN')
+  })
+
+  it('renders as a <pre> element', () => {
+    const { container } = render(<PreCode>Content</PreCode>)
+    expect(container.querySelector('pre')).toBeInTheDocument()
+  })
+
+  it('handles multiple children correctly', () => {
+    render(
+      <PreCode>
+        <span>Line 1</span>
+        <span>Line 2</span>
+      </PreCode>,
+    )
+
+    expect(screen.getByText('Line 1')).toBeInTheDocument()
+    expect(screen.getByText('Line 2')).toBeInTheDocument()
+  })
+
+  it('correctly instantiates the pre element node', () => {
+    const { container } = render(<PreCode>Ref check</PreCode>)
+    const pre = container.querySelector('pre')
+
+    // Verifies the node is an actual HTMLPreElement,
+    // confirming the ref-linked element rendered correctly.
+    expect(pre).toBeInstanceOf(HTMLPreElement)
+  })
+})
diff --git a/web/app/components/base/radio-card/index.spec.tsx b/web/app/components/base/radio-card/index.spec.tsx
new file mode 100644
index 0000000000..f1368476bf
--- /dev/null
+++ b/web/app/components/base/radio-card/index.spec.tsx
@@ -0,0 +1,137 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// index.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+import RadioCard from './index'
+
+describe('RadioCard', () => {
+  it('renders icon, title and description', () => {
+    render(
+      <RadioCard
+        icon={<span data-testid="icon">ICON</span>}
+        title="Card Title"
+        description="Some description"
+      />,
+    )
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+    expect(screen.getByText('Card Title')).toBeInTheDocument()
+    expect(screen.getByText('Some description')).toBeInTheDocument()
+  })
+
+  it('calls onChosen when clicked', async () => {
+    const user = userEvent.setup()
+    const onChosen = vi.fn()
+
+    render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="Clickable"
+        description="desc"
+        onChosen={onChosen}
+      />,
+    )
+
+    await user.click(screen.getByText('Clickable'))
+    expect(onChosen).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides radio element when noRadio is true and still shows chosen-config area (wrapper)', () => {
+    const { container } = render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="No Radio"
+        description="desc"
+        noRadio
+      />,
+    )
+
+    const radioWrapper = container.querySelector('.absolute.right-3.top-3')
+    expect(radioWrapper).toBeNull()
+
+    // chosen-config area should appear because noRadio true triggers the block
+    const chosenArea = container.querySelector('.mt-2')
+    expect(chosenArea).toBeTruthy()
+  })
+
+  it('shows radio checked styles when isChosen and shows chosenConfig', () => {
+    const { container } = render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="Chosen"
+        description="desc"
+        isChosen
+        chosenConfig={<div data-testid="chosen-config">config</div>}
+      />,
+    )
+
+    // radio absolute wrapper exists
+    const radioWrapper = container.querySelector('.absolute.right-3.top-3')
+    expect(radioWrapper).toBeTruthy()
+
+    // inner circle div should have checked fragment in class list
+    const inner = radioWrapper?.querySelector('div')
+    expect(inner).toBeTruthy()
+    expect(inner?.className).toContain('border-components-radio-border-checked')
+
+    // chosenConfig rendered
+    expect(screen.getByTestId('chosen-config')).toBeInTheDocument()
+  })
+
+  it('applies custom className to root and merges chosenConfigWrapClassName', () => {
+    const { container } = render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="Custom"
+        description="desc"
+        className="my-root-class"
+        isChosen
+        chosenConfig={<div>cfg</div>}
+        chosenConfigWrapClassName="my-config-wrap"
+      />,
+    )
+
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeTruthy()
+    expect(root.className).toContain('my-root-class')
+    expect(root.className).toContain('border-[1.5px]')
+    expect(root.className).toContain('bg-components-option-card-option-selected-bg')
+
+    const chosenWrap = container.querySelector('.mt-2 .my-config-wrap')
+    expect(chosenWrap).toBeTruthy()
+    expect(chosenWrap?.textContent).toBe('cfg')
+  })
+
+  it('does not render radio when noRadio true and still allows clicking on whole card', async () => {
+    const user = userEvent.setup()
+    const onChosen = vi.fn()
+
+    const { container } = render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="ClickNoRadio"
+        description="desc"
+        noRadio
+        onChosen={onChosen}
+      />,
+    )
+
+    // click title should trigger onChosen
+    await user.click(screen.getByText('ClickNoRadio'))
+    expect(onChosen).toHaveBeenCalledTimes(1)
+
+    // radio area should be absent
+    expect(container.querySelector('.absolute.right-3.top-3')).toBeNull()
+  })
+
+  it('memo export renders correctly', () => {
+    render(
+      <RadioCard
+        icon={<span>i</span>}
+        title="Memo"
+        description="desc"
+      />,
+    )
+    expect(screen.getByText('Memo')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/radio-card/simple/index.spec.tsx b/web/app/components/base/radio-card/simple/index.spec.tsx
new file mode 100644
index 0000000000..42e03484e8
--- /dev/null
+++ b/web/app/components/base/radio-card/simple/index.spec.tsx
@@ -0,0 +1,137 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// index.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+import RadioCard from './index'
+
+describe('RadioCard', () => {
+  it('renders title and description', () => {
+    render(
+      <RadioCard
+        title="Card Title"
+        description="Card Description"
+        isChosen={false}
+        onChosen={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('Card Title')).toBeInTheDocument()
+    expect(screen.getByText('Card Description')).toBeInTheDocument()
+  })
+
+  it('renders JSX title correctly', () => {
+    render(
+      <RadioCard
+        title={<span data-testid="jsx-title">JSX Title</span>}
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByTestId('jsx-title')).toBeInTheDocument()
+  })
+
+  it('renders icon when provided', () => {
+    render(
+      <RadioCard
+        title="With Icon"
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+        icon={<span data-testid="icon">ICON</span>}
+      />,
+    )
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders extra content when provided', () => {
+    render(
+      <RadioCard
+        title="With Extra"
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+        extra={<div data-testid="extra">Extra Content</div>}
+      />,
+    )
+
+    expect(screen.getByTestId('extra')).toBeInTheDocument()
+  })
+
+  it('calls onChosen when clicked', async () => {
+    const user = userEvent.setup()
+    const onChosen = vi.fn()
+
+    render(
+      <RadioCard
+        title="Clickable"
+        description="Desc"
+        isChosen={false}
+        onChosen={onChosen}
+      />,
+    )
+
+    await user.click(screen.getByText('Clickable'))
+    expect(onChosen).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies active class when isChosen is true', () => {
+    const { container: inactiveContainer } = render(
+      <RadioCard
+        title="Inactive"
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+      />,
+    )
+    const inactiveClassName = (inactiveContainer.firstChild as HTMLElement).className
+
+    const { container: activeContainer } = render(
+      <RadioCard
+        title="Active"
+        description="Desc"
+        isChosen
+        onChosen={vi.fn()}
+      />,
+    )
+
+    const activeRoot = activeContainer.firstChild as HTMLElement
+    expect(activeRoot.className).not.toBe(inactiveClassName)
+    // Since it uses CSS modules, we expect the active class to be appended or changed
+    // In index.tsx it's cn(s.item, isChosen && s.active)
+    expect(activeRoot.className.length).toBeGreaterThan(inactiveClassName.length)
+    expect(activeRoot.className).toContain(inactiveClassName)
+  })
+
+  it('does not apply active styling logic when isChosen is false', () => {
+    const { container } = render(
+      <RadioCard
+        title="Inactive"
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+      />,
+    )
+
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeTruthy()
+    // It should have some classes but not the active one
+    expect(root.className).not.toBe('')
+    expect(root.className).not.toContain('active') // CSS modules usually append _active
+  })
+
+  it('memo export renders correctly', () => {
+    render(
+      <RadioCard
+        title="Memo"
+        description="Desc"
+        isChosen={false}
+        onChosen={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('Memo')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/radio/component/group/index.spec.tsx b/web/app/components/base/radio/component/group/index.spec.tsx
new file mode 100644
index 0000000000..e417c2a203
--- /dev/null
+++ b/web/app/components/base/radio/component/group/index.spec.tsx
@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useContextSelector } from 'use-context-selector'
+// Group.test.tsx
+import { describe, expect, it, vi } from 'vitest'
+import RadioGroupContext from '../../context'
+import Group from './index'
+
+// small consumer that uses the same context as your component
+function ContextConsumer({ showButton = true }: { showButton?: boolean }) {
+  // eslint-disable-next-line ts/no-explicit-any
+  const ctx = useContextSelector(RadioGroupContext, (v: any) => v)
+  const value = ctx?.value
+  const onChange = ctx?.onChange
+  return (
+    <div>
+      <span data-testid="radio-value">{String(value)}</span>
+      {showButton && (
+        <button
+          data-testid="radio-change-btn"
+          onClick={() => onChange?.('clicked-from-test')}
+        >
+          change
+        </button>
+      )}
+    </div>
+  )
+}
+
+describe('Group component', () => {
+  it('renders children and exposes provided value through context', () => {
+    render(
+      <Group value="initial-value">
+        <ContextConsumer />
+      </Group>,
+    )
+
+    const valueNode = screen.getByTestId('radio-value')
+    expect(valueNode).toBeInTheDocument()
+    expect(valueNode).toHaveTextContent('initial-value')
+  })
+
+  it('merges custom className with existing classes on root element', () => {
+    const { container } = render(
+      <Group value="v" className="my-extra-class">
+        <ContextConsumer />
+      </Group>,
+    )
+
+    const root = container.firstChild as HTMLElement
+
+    expect(root).toBeInTheDocument()
+    expect(root.className).toContain('my-extra-class')
+
+    // ensure it still has other classes (from cn + css module)
+    expect(root.className.length).toBeGreaterThan('my-extra-class'.length)
+  })
+
+  it('calls onChange from context when consumer triggers it', async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Group value="whatever" onChange={handleChange}>
+        <ContextConsumer />
+      </Group>,
+    )
+
+    const btn = screen.getByTestId('radio-change-btn')
+    await user.click(btn)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith('clicked-from-test')
+  })
+
+  it('does not throw if onChange is not provided and consumer calls it', async () => {
+    const user = userEvent.setup()
+    render(
+      <Group value={0}>
+        {/* the consumer will call onChange which is undefined */}
+        <ContextConsumer />
+      </Group>,
+    )
+
+    const btn = screen.getByTestId('radio-change-btn')
+    // clicking should not throw (if it threw the test would fail)
+    await user.click(btn)
+    // value still rendered correctly (verifies consumer reads numeric/false-y values too)
+    expect(screen.getByTestId('radio-value')).toHaveTextContent('0')
+  })
+
+  it('correctly passes boolean and numeric values through context', () => {
+    render(
+      <>
+        <Group value={false}>
+          <ContextConsumer />
+        </Group>
+        <Group value={123}>
+          <ContextConsumer showButton={false} />
+        </Group>
+      </>,
+    )
+
+    const nodes = screen.getAllByTestId('radio-value')
+    // first should be "false", second "123"
+    expect(nodes[0]).toHaveTextContent('false')
+    expect(nodes[1]).toHaveTextContent('123')
+  })
+})
diff --git a/web/app/components/base/radio/component/radio/index.spec.tsx b/web/app/components/base/radio/component/radio/index.spec.tsx
new file mode 100644
index 0000000000..cdf0587453
--- /dev/null
+++ b/web/app/components/base/radio/component/radio/index.spec.tsx
@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// index.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+import RadioGroupContext from '../../context'
+import Radio from './index'
+
+describe('Radio component', () => {
+  it('renders label children and assigns an id to the label', () => {
+    const { container } = render(<Radio>My Label</Radio>)
+
+    const label = screen.getByText('My Label')
+    expect(label).toBeInTheDocument()
+    // label must be an HTMLLabelElement with an id assigned by useId
+    expect(label.tagName.toLowerCase()).toBe('label')
+    expect(label).toHaveAttribute('id')
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeTruthy()
+  })
+
+  it('does not render a label when children is falsey', () => {
+    render(<Radio />)
+    // there should be no <label> in the document
+    const labels = screen.queryAllByRole('label')
+    expect(labels.length).toBe(0)
+    // also ensure no textual children
+    expect(screen.queryByText(/./)).toBeNull()
+  })
+
+  it('calls both local onChange and group onChange when clicked', async () => {
+    const user = userEvent.setup()
+    const localChange = vi.fn()
+    const groupChange = vi.fn()
+
+    render(
+      <RadioGroupContext.Provider value={{ value: null, onChange: groupChange }}>
+        <Radio value="v1" onChange={localChange}>
+          ClickMe
+        </Radio>
+      </RadioGroupContext.Provider>,
+    )
+
+    const root = screen.getByText('ClickMe').closest('div') as HTMLElement
+    await user.click(root)
+    expect(localChange).toHaveBeenCalledTimes(1)
+    expect(localChange).toHaveBeenCalledWith('v1')
+    expect(groupChange).toHaveBeenCalledTimes(1)
+    expect(groupChange).toHaveBeenCalledWith('v1')
+  })
+
+  it('does not call onChange handlers when disabled', async () => {
+    const user = userEvent.setup()
+    const localChange = vi.fn()
+    const groupChange = vi.fn()
+
+    render(
+      <RadioGroupContext.Provider value={{ value: null, onChange: groupChange }}>
+        <Radio value="v2" onChange={localChange} disabled>
+          DisabledLabel
+        </Radio>
+      </RadioGroupContext.Provider>,
+    )
+
+    const root = screen.getByText('DisabledLabel').closest('div') as HTMLElement
+    await user.click(root)
+    expect(localChange).not.toHaveBeenCalled()
+    expect(groupChange).not.toHaveBeenCalled()
+  })
+
+  it('uses group value to determine checked state and applies checked class fragment', () => {
+    const { container: c1 } = render(
+      <RadioGroupContext.Provider value={{ value: 'yes', onChange: () => {} }}>
+        <Radio value="yes">CheckedByGroup</Radio>
+      </RadioGroupContext.Provider>,
+    )
+    const root1 = c1.firstChild as HTMLElement
+    expect(root1).toBeTruthy()
+    // component conditionally adds the 'bg-components-option-card-option-bg-hover' fragment when checked
+    expect(root1.className).toContain('bg-components-option-card-option-bg-hover')
+
+    const { container: c2 } = render(<Radio checked>CheckedByProp</Radio>)
+    const root2 = c2.firstChild as HTMLElement
+    expect(root2).toBeTruthy()
+    expect(root2.className).toContain('bg-components-option-card-option-bg-hover')
+  })
+
+  it('merges custom className with component classes', () => {
+    const { container } = render(<Radio className="my-custom-class">Label</Radio>)
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeInTheDocument()
+    expect(root.className).toContain('my-custom-class')
+    // ensure other classes still exist (merged)
+    expect(root.className.length).toBeGreaterThan('my-custom-class'.length)
+  })
+})
diff --git a/web/app/components/base/radio/context/index.spec.tsx b/web/app/components/base/radio/context/index.spec.tsx
new file mode 100644
index 0000000000..105bbbed3c
--- /dev/null
+++ b/web/app/components/base/radio/context/index.spec.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import { useContextSelector } from 'use-context-selector'
+// context.spec.tsx
+import { describe, expect, it } from 'vitest'
+import RadioGroupContext from './index'
+
+function Consumer() {
+  const value = useContextSelector(RadioGroupContext, v => v)
+  return <div data-testid="ctx-value">{JSON.stringify(value)}</div>
+}
+
+describe('RadioGroupContext', () => {
+  it('provides null as default value when no provider is used', () => {
+    render(<Consumer />)
+
+    const node = screen.getByTestId('ctx-value')
+    expect(node).toBeInTheDocument()
+    expect(node).toHaveTextContent('null')
+  })
+
+  it('provides value from provider when wrapped', () => {
+    const providedValue = { value: 'radio', onChange: () => {} }
+
+    render(
+      <RadioGroupContext.Provider value={providedValue}>
+        <Consumer />
+      </RadioGroupContext.Provider>,
+    )
+
+    const node = screen.getByTestId('ctx-value')
+    expect(node).toBeInTheDocument()
+    expect(node).toHaveTextContent(JSON.stringify(providedValue))
+  })
+
+  it('updates when provider value changes', () => {
+    const first = { value: 'first', onChange: () => {} }
+    const second = { value: 'second', onChange: () => {} }
+
+    const { rerender } = render(
+      <RadioGroupContext.Provider value={first}>
+        <Consumer />
+      </RadioGroupContext.Provider>,
+    )
+
+    expect(screen.getByTestId('ctx-value')).toHaveTextContent(
+      JSON.stringify(first),
+    )
+
+    rerender(
+      <RadioGroupContext.Provider value={second}>
+        <Consumer />
+      </RadioGroupContext.Provider>,
+    )
+
+    expect(screen.getByTestId('ctx-value')).toHaveTextContent(
+      JSON.stringify(second),
+    )
+  })
+})
diff --git a/web/app/components/base/radio/index.spec.tsx b/web/app/components/base/radio/index.spec.tsx
new file mode 100644
index 0000000000..838a0eb0ef
--- /dev/null
+++ b/web/app/components/base/radio/index.spec.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// index.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+import Group from './component/group'
+import Radio from './index'
+
+describe('Radio (index)', () => {
+  it('attaches Group as a property on the default export', () => {
+    expect(Radio.Group).toBe(Group)
+  })
+
+  it('renders Radio when used as a component', () => {
+    render(<Radio>RootLabel</Radio>)
+    expect(screen.getByText('RootLabel')).toBeInTheDocument()
+    const label = screen.getByText('RootLabel')
+    expect(label.tagName.toLowerCase()).toBe('label')
+  })
+
+  it('Radio.Group provides context to nested Radio and group onChange is called on click', async () => {
+    const user = userEvent.setup()
+    const groupOnChange = vi.fn()
+
+    render(
+      <Radio.Group value="val" onChange={groupOnChange}>
+        <Radio value="val">InnerRadio</Radio>
+      </Radio.Group>,
+    )
+
+    const root = screen.getByText('InnerRadio').closest('div') as HTMLElement
+    await user.click(root)
+    expect(groupOnChange).toHaveBeenCalledTimes(1)
+    expect(groupOnChange).toHaveBeenCalledWith('val')
+  })
+
+  it('Radio.Group can render arbitrary children', () => {
+    render(
+      <Radio.Group value={undefined} onChange={() => {}}>
+        <div data-testid="plain-child">child</div>
+      </Radio.Group>,
+    )
+    expect(screen.getByTestId('plain-child')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/radio/ui.spec.tsx b/web/app/components/base/radio/ui.spec.tsx
new file mode 100644
index 0000000000..7dec5f3660
--- /dev/null
+++ b/web/app/components/base/radio/ui.spec.tsx
@@ -0,0 +1,88 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+// radio-ui.spec.tsx
+import { describe, expect, it, vi } from 'vitest'
+import RadioUI from './ui'
+
+describe('RadioUI component', () => {
+  it('renders with correct role and aria attributes', () => {
+    render(<RadioUI isChecked />)
+
+    const radio = screen.getByRole('radio')
+    expect(radio).toBeInTheDocument()
+    expect(radio).toHaveAttribute('aria-checked', 'true')
+    expect(radio).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  it('applies checked + enabled styles', () => {
+    render(<RadioUI isChecked />)
+    const radio = screen.getByRole('radio')
+    expect(radio.className).toContain('border-[5px]')
+    expect(radio.className).toContain('border-components-radio-border-checked')
+  })
+
+  it('applies unchecked + enabled styles', () => {
+    render(<RadioUI isChecked={false} />)
+    const radio = screen.getByRole('radio')
+    expect(radio.className).toContain('border-components-radio-border')
+  })
+
+  it('applies checked + disabled styles', () => {
+    render(<RadioUI isChecked disabled />)
+    const radio = screen.getByRole('radio')
+    expect(radio).toHaveAttribute('aria-disabled', 'true')
+    expect(radio.className).toContain(
+      'border-components-radio-border-checked-disabled',
+    )
+  })
+
+  it('applies unchecked + disabled styles', () => {
+    render(<RadioUI isChecked={false} disabled />)
+    const radio = screen.getByRole('radio')
+    expect(radio.className).toContain(
+      'border-components-radio-border-disabled',
+    )
+    expect(radio.className).toContain(
+      'bg-components-radio-bg-disabled',
+    )
+  })
+
+  it('calls onCheck when clicked if not disabled', async () => {
+    const user = userEvent.setup()
+    const handleCheck = vi.fn()
+
+    render(<RadioUI isChecked={false} onCheck={handleCheck} />)
+
+    const radio = screen.getByRole('radio')
+    await user.click(radio)
+
+    expect(handleCheck).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onCheck when disabled', async () => {
+    const user = userEvent.setup()
+    const handleCheck = vi.fn()
+
+    render(
+      <RadioUI isChecked={false} disabled onCheck={handleCheck} />,
+    )
+
+    const radio = screen.getByRole('radio')
+    await user.click(radio)
+
+    expect(handleCheck).not.toHaveBeenCalled()
+  })
+
+  it('merges custom className', () => {
+    render(
+      <RadioUI isChecked={false} className="my-extra-class" />,
+    )
+    const radio = screen.getByRole('radio')
+    expect(radio.className).toContain('my-extra-class')
+  })
+
+  it('memo export renders correctly', () => {
+    render(<RadioUI isChecked />)
+    expect(screen.getByRole('radio')).toBeInTheDocument()
+  })
+})

From 740d94c6edae2eae5220c2150fa783ded856d103 Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 12:05:23 +0530
Subject: [PATCH 14/26] test: add tests for some base components (#32356)

---
 web/app/components/base/alert.spec.tsx        |  96 +++++
 web/app/components/base/alert.tsx             |  12 +-
 .../components/base/app-unavailable.spec.tsx  |  82 ++++
 .../base/auto-height-textarea/index.spec.tsx  | 201 +++++++++
 web/app/components/base/badge.spec.tsx        |  86 ++++
 .../base/block-input/index.spec.tsx           | 226 +++++++++++
 web/app/components/base/block-input/index.tsx |  16 +-
 .../base/button/add-button.spec.tsx           |  49 +++
 web/app/components/base/button/add-button.tsx |   3 +-
 .../base/button/sync-button.spec.tsx          |  56 +++
 .../components/base/button/sync-button.tsx    |   5 +-
 .../components/base/carousel/index.spec.tsx   | 218 ++++++++++
 .../assets/indeterminate-icon.spec.tsx        |  17 +
 web/app/components/base/drawer/index.tsx      |   3 +-
 .../base/error-boundary/index.spec.tsx        | 383 ++++++++++++++++++
 .../base/float-right-container/index.spec.tsx | 140 +++++++
 .../components/base/pagination/hook.spec.ts   | 155 +++++++
 .../components/base/pagination/index.spec.tsx | 242 +++++++++++
 .../base/pagination/pagination.spec.tsx       | 376 +++++++++++++++++
 .../components/base/theme-selector.spec.tsx   | 103 +++++
 web/app/components/base/theme-selector.tsx    |  24 +-
 .../components/base/theme-switcher.spec.tsx   | 106 +++++
 web/app/components/base/theme-switcher.tsx    |  18 +-
 web/eslint-suppressions.json                  |   8 -
 24 files changed, 2569 insertions(+), 56 deletions(-)
 create mode 100644 web/app/components/base/alert.spec.tsx
 create mode 100644 web/app/components/base/app-unavailable.spec.tsx
 create mode 100644 web/app/components/base/auto-height-textarea/index.spec.tsx
 create mode 100644 web/app/components/base/badge.spec.tsx
 create mode 100644 web/app/components/base/block-input/index.spec.tsx
 create mode 100644 web/app/components/base/button/add-button.spec.tsx
 create mode 100644 web/app/components/base/button/sync-button.spec.tsx
 create mode 100644 web/app/components/base/carousel/index.spec.tsx
 create mode 100644 web/app/components/base/checkbox/assets/indeterminate-icon.spec.tsx
 create mode 100644 web/app/components/base/error-boundary/index.spec.tsx
 create mode 100644 web/app/components/base/float-right-container/index.spec.tsx
 create mode 100644 web/app/components/base/pagination/hook.spec.ts
 create mode 100644 web/app/components/base/pagination/index.spec.tsx
 create mode 100644 web/app/components/base/pagination/pagination.spec.tsx
 create mode 100644 web/app/components/base/theme-selector.spec.tsx
 create mode 100644 web/app/components/base/theme-switcher.spec.tsx

diff --git a/web/app/components/base/alert.spec.tsx b/web/app/components/base/alert.spec.tsx
new file mode 100644
index 0000000000..1ad52ea201
--- /dev/null
+++ b/web/app/components/base/alert.spec.tsx
@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Alert from './alert'
+
+describe('Alert', () => {
+  const defaultProps = {
+    message: 'This is an alert message',
+    onHide: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Alert {...defaultProps} />)
+      expect(screen.getByText(defaultProps.message)).toBeInTheDocument()
+    })
+
+    it('should render the info icon', () => {
+      render(<Alert {...defaultProps} />)
+      const icon = screen.getByTestId('info-icon')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('should render the close icon', () => {
+      render(<Alert {...defaultProps} />)
+      const closeIcon = screen.getByTestId('close-icon')
+      expect(closeIcon).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<Alert {...defaultProps} className="my-custom-class" />)
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('my-custom-class')
+    })
+
+    it('should retain base classes when custom className is applied', () => {
+      const { container } = render(<Alert {...defaultProps} className="my-custom-class" />)
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('pointer-events-none', 'w-full')
+    })
+
+    it('should default type to info', () => {
+      render(<Alert {...defaultProps} />)
+      const gradientDiv = screen.getByTestId('alert-gradient')
+      expect(gradientDiv).toHaveClass('from-components-badge-status-light-normal-halo')
+    })
+
+    it('should render with explicit type info', () => {
+      render(<Alert {...defaultProps} type="info" />)
+      const gradientDiv = screen.getByTestId('alert-gradient')
+      expect(gradientDiv).toHaveClass('from-components-badge-status-light-normal-halo')
+    })
+
+    it('should display the provided message text', () => {
+      const msg = 'A different alert message'
+      render(<Alert {...defaultProps} message={msg} />)
+      expect(screen.getByText(msg)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onHide when close button is clicked', () => {
+      const onHide = vi.fn()
+      render(<Alert {...defaultProps} onHide={onHide} />)
+      const closeButton = screen.getByTestId('close-icon')
+      fireEvent.click(closeButton)
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onHide when other parts of the alert are clicked', () => {
+      const onHide = vi.fn()
+      render(<Alert {...defaultProps} onHide={onHide} />)
+      fireEvent.click(screen.getByText(defaultProps.message))
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render with an empty message string', () => {
+      render(<Alert {...defaultProps} message="" />)
+      const messageDiv = screen.getByTestId('msg-container')
+      expect(messageDiv).toBeInTheDocument()
+      expect(messageDiv).toHaveTextContent('')
+    })
+
+    it('should render with a very long message', () => {
+      const longMessage = 'A'.repeat(1000)
+      render(<Alert {...defaultProps} message={longMessage} />)
+      expect(screen.getByText(longMessage)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index cf602b541a..3c1671bb2c 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -1,7 +1,3 @@
-import {
-  RiCloseLine,
-  RiInformation2Fill,
-} from '@remixicon/react'
 import { cva } from 'class-variance-authority'
 import {
   memo,
@@ -35,13 +31,13 @@ const Alert: React.FC<Props> = ({
       <div
         className="relative flex space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg"
       >
-        <div className={cn('pointer-events-none absolute inset-0 bg-gradient-to-r  opacity-[0.4]', bgVariants({ type }))}>
+        <div className={cn('pointer-events-none absolute inset-0 bg-gradient-to-r opacity-[0.4]', bgVariants({ type }))} data-testid="alert-gradient">
         </div>
         <div className="flex h-6 w-6 items-center justify-center">
-          <RiInformation2Fill className="text-text-accent" />
+          <span className="i-ri-information-2-fill text-text-accent" data-testid="info-icon" />
         </div>
         <div className="p-1">
-          <div className="system-xs-regular text-text-secondary">
+          <div className="text-text-secondary system-xs-regular" data-testid="msg-container">
             {message}
           </div>
         </div>
@@ -49,7 +45,7 @@ const Alert: React.FC<Props> = ({
           className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
           onClick={onHide}
         >
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="close-icon" />
         </div>
       </div>
     </div>
diff --git a/web/app/components/base/app-unavailable.spec.tsx b/web/app/components/base/app-unavailable.spec.tsx
new file mode 100644
index 0000000000..27fb359781
--- /dev/null
+++ b/web/app/components/base/app-unavailable.spec.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react'
+import AppUnavailable from './app-unavailable'
+
+describe('AppUnavailable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AppUnavailable />)
+      expect(screen.getByText(/404/)).toBeInTheDocument()
+    })
+
+    it('should render the error code in a heading', () => {
+      render(<AppUnavailable />)
+      const heading = screen.getByRole('heading', { level: 1 })
+      expect(heading).toHaveTextContent(/404/)
+    })
+
+    it('should render the default unavailable message', () => {
+      render(<AppUnavailable />)
+      expect(screen.getByText(/unavailable/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should display custom error code', () => {
+      render(<AppUnavailable code={500} />)
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('500')
+    })
+
+    it('should accept string error code', () => {
+      render(<AppUnavailable code="403" />)
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('403')
+    })
+
+    it('should apply custom className', () => {
+      const { container } = render(<AppUnavailable className="my-custom" />)
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('my-custom')
+    })
+
+    it('should retain base classes when custom className is applied', () => {
+      const { container } = render(<AppUnavailable className="my-custom" />)
+      const outerDiv = container.firstChild as HTMLElement
+      expect(outerDiv).toHaveClass('flex', 'h-screen', 'w-screen', 'items-center', 'justify-center')
+    })
+
+    it('should display unknownReason when provided', () => {
+      render(<AppUnavailable unknownReason="Custom error occurred" />)
+      expect(screen.getByText(/Custom error occurred/i)).toBeInTheDocument()
+    })
+
+    it('should display unknown error translation when isUnknownReason is true', () => {
+      render(<AppUnavailable isUnknownReason />)
+      expect(screen.getByText(/share.common.appUnknownError/i)).toBeInTheDocument()
+    })
+
+    it('should prioritize unknownReason over isUnknownReason', () => {
+      render(<AppUnavailable isUnknownReason unknownReason="My custom reason" />)
+      expect(screen.getByText(/My custom reason/i)).toBeInTheDocument()
+    })
+
+    it('should show appUnavailable translation when isUnknownReason is false', () => {
+      render(<AppUnavailable isUnknownReason={false} />)
+      expect(screen.getByText(/share.common.appUnavailable/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render with code 0', () => {
+      render(<AppUnavailable code={0} />)
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('0')
+    })
+
+    it('should render with an empty unknownReason and fall back to translation', () => {
+      render(<AppUnavailable unknownReason="" />)
+      expect(screen.getByText(/share.common.appUnavailable/i)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/auto-height-textarea/index.spec.tsx b/web/app/components/base/auto-height-textarea/index.spec.tsx
new file mode 100644
index 0000000000..2eab1ba82e
--- /dev/null
+++ b/web/app/components/base/auto-height-textarea/index.spec.tsx
@@ -0,0 +1,201 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { sleep } from '@/utils'
+import AutoHeightTextarea from './index'
+
+vi.mock('@/utils', async () => {
+  const actual = await vi.importActual('@/utils')
+  return {
+    ...actual,
+    sleep: vi.fn(),
+  }
+})
+
+describe('AutoHeightTextarea', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
+      const textarea = document.querySelector('textarea')
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it('should render with placeholder when value is empty', () => {
+      render(<AutoHeightTextarea placeholder="Enter text" value="" onChange={vi.fn()} />)
+      expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument()
+    })
+
+    it('should render with value', () => {
+      render(<AutoHeightTextarea value="Hello World" onChange={vi.fn()} />)
+      const textarea = screen.getByDisplayValue('Hello World')
+      expect(textarea).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className to textarea', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} className="custom-class" />)
+      const textarea = document.querySelector('textarea')
+      expect(textarea).toHaveClass('custom-class')
+    })
+
+    it('should apply custom wrapperClassName to wrapper div', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} wrapperClassName="wrapper-class" />)
+      const wrapper = document.querySelector('div.relative')
+      expect(wrapper).toHaveClass('wrapper-class')
+    })
+
+    it('should apply minHeight and maxHeight styles to hidden div', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} minHeight={50} maxHeight={200} />)
+      const hiddenDiv = document.querySelector('div.invisible')
+      expect(hiddenDiv).toHaveStyle({ minHeight: '50px', maxHeight: '200px' })
+    })
+
+    it('should use default minHeight and maxHeight when not provided', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
+      const hiddenDiv = document.querySelector('div.invisible')
+      expect(hiddenDiv).toHaveStyle({ minHeight: '36px', maxHeight: '96px' })
+    })
+
+    it('should set autoFocus on textarea', () => {
+      const focusSpy = vi.spyOn(HTMLTextAreaElement.prototype, 'focus')
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} autoFocus />)
+      expect(focusSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onChange when textarea value changes', () => {
+      const handleChange = vi.fn()
+      render(<AutoHeightTextarea value="" onChange={handleChange} />)
+      const textarea = screen.getByRole('textbox')
+
+      fireEvent.change(textarea, { target: { value: 'new value' } })
+
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onKeyDown when key is pressed', () => {
+      const handleKeyDown = vi.fn()
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} onKeyDown={handleKeyDown} />)
+      const textarea = screen.getByRole('textbox')
+
+      fireEvent.keyDown(textarea, { key: 'Enter' })
+
+      expect(handleKeyDown).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onKeyUp when key is released', () => {
+      const handleKeyUp = vi.fn()
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} onKeyUp={handleKeyUp} />)
+      const textarea = screen.getByRole('textbox')
+
+      fireEvent.keyUp(textarea, { key: 'Enter' })
+
+      expect(handleKeyUp).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty string value', () => {
+      render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should handle whitespace-only value', () => {
+      render(<AutoHeightTextarea value="   " onChange={vi.fn()} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue('   ')
+    })
+
+    it('should handle very long text (>10000 chars)', () => {
+      const longText = 'a'.repeat(10001)
+      render(<AutoHeightTextarea value={longText} onChange={vi.fn()} />)
+      const textarea = screen.getByDisplayValue(longText)
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it('should handle newlines in value', () => {
+      const textWithNewlines = 'line1\nline2\nline3'
+      render(<AutoHeightTextarea value={textWithNewlines} onChange={vi.fn()} />)
+      const textarea = document.querySelector('textarea')
+      expect(textarea).toHaveValue(textWithNewlines)
+    })
+
+    it('should handle special characters in value', () => {
+      const specialChars = '!@#$%^&*()_+-=[]{}|;:,.<>?'
+      render(<AutoHeightTextarea value={specialChars} onChange={vi.fn()} />)
+      const textarea = screen.getByDisplayValue(specialChars)
+      expect(textarea).toBeInTheDocument()
+    })
+  })
+
+  describe('Ref forwarding', () => {
+    it('should accept ref and allow focusing', () => {
+      const ref = { current: null as HTMLTextAreaElement | null }
+      render(<AutoHeightTextarea ref={ref as React.RefObject<HTMLTextAreaElement>} value="" onChange={vi.fn()} />)
+
+      expect(ref.current).not.toBeNull()
+      expect(ref.current?.tagName).toBe('TEXTAREA')
+    })
+  })
+
+  describe('controlFocus prop', () => {
+    it('should call focus when controlFocus changes', () => {
+      const focusSpy = vi.spyOn(HTMLTextAreaElement.prototype, 'focus')
+      const { rerender } = render(<AutoHeightTextarea value="" onChange={vi.fn()} controlFocus={1} />)
+
+      expect(focusSpy).toHaveBeenCalledTimes(1)
+
+      rerender(<AutoHeightTextarea value="" onChange={vi.fn()} controlFocus={2} />)
+
+      expect(focusSpy).toHaveBeenCalledTimes(2)
+      focusSpy.mockRestore()
+    })
+
+    it('should retry focus recursively when ref is not ready during autoFocus', async () => {
+      const delayedRef = {} as React.RefObject<HTMLTextAreaElement>
+      let assignedNode: HTMLTextAreaElement | null = null
+      let exposedNode: HTMLTextAreaElement | null = null
+
+      Object.defineProperty(delayedRef, 'current', {
+        get: () => exposedNode,
+        set: (value: HTMLTextAreaElement | null) => {
+          assignedNode = value
+        },
+      })
+
+      const sleepMock = vi.mocked(sleep)
+      let sleepCalls = 0
+      sleepMock.mockImplementation(async () => {
+        sleepCalls += 1
+        if (sleepCalls === 2)
+          exposedNode = assignedNode
+      })
+
+      const focusSpy = vi.spyOn(HTMLTextAreaElement.prototype, 'focus')
+      const setSelectionRangeSpy = vi.spyOn(HTMLTextAreaElement.prototype, 'setSelectionRange')
+
+      render(<AutoHeightTextarea ref={delayedRef} value="" onChange={vi.fn()} autoFocus />)
+
+      await waitFor(() => {
+        expect(sleepMock).toHaveBeenCalledTimes(2)
+        expect(focusSpy).toHaveBeenCalled()
+        expect(setSelectionRangeSpy).toHaveBeenCalledTimes(1)
+      })
+
+      focusSpy.mockRestore()
+      setSelectionRangeSpy.mockRestore()
+    })
+  })
+
+  describe('displayName', () => {
+    it('should have displayName set', () => {
+      expect(AutoHeightTextarea.displayName).toBe('AutoHeightTextarea')
+    })
+  })
+})
diff --git a/web/app/components/base/badge.spec.tsx b/web/app/components/base/badge.spec.tsx
new file mode 100644
index 0000000000..5ca5cfe789
--- /dev/null
+++ b/web/app/components/base/badge.spec.tsx
@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react'
+import Badge from './badge'
+
+describe('Badge', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Badge text="beta" />)
+      expect(screen.getByText(/beta/i)).toBeInTheDocument()
+    })
+
+    it('should render with children instead of text', () => {
+      render(<Badge><span>child content</span></Badge>)
+      expect(screen.getByText(/child content/i)).toBeInTheDocument()
+    })
+
+    it('should render with no text or children', () => {
+      const { container } = render(<Badge />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveTextContent('')
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<Badge text="test" className="my-custom" />)
+      const badge = container.firstChild as HTMLElement
+      expect(badge).toHaveClass('my-custom')
+    })
+
+    it('should retain base classes when custom className is applied', () => {
+      const { container } = render(<Badge text="test" className="my-custom" />)
+      const badge = container.firstChild as HTMLElement
+      expect(badge).toHaveClass('relative', 'inline-flex', 'h-5', 'items-center')
+    })
+
+    it('should apply uppercase class by default', () => {
+      const { container } = render(<Badge text="test" />)
+      const badge = container.firstChild as HTMLElement
+      expect(badge).toHaveClass('system-2xs-medium-uppercase')
+    })
+
+    it('should apply non-uppercase class when uppercase is false', () => {
+      const { container } = render(<Badge text="test" uppercase={false} />)
+      const badge = container.firstChild as HTMLElement
+      expect(badge).toHaveClass('system-xs-medium')
+      expect(badge).not.toHaveClass('system-2xs-medium-uppercase')
+    })
+
+    it('should render red corner mark when hasRedCornerMark is true', () => {
+      const { container } = render(<Badge text="test" hasRedCornerMark />)
+      const mark = container.querySelector('.bg-components-badge-status-light-error-bg')
+      expect(mark).toBeInTheDocument()
+    })
+
+    it('should not render red corner mark by default', () => {
+      const { container } = render(<Badge text="test" />)
+      const mark = container.querySelector('.bg-components-badge-status-light-error-bg')
+      expect(mark).not.toBeInTheDocument()
+    })
+
+    it('should prioritize children over text', () => {
+      render(<Badge text="text content"><span>child wins</span></Badge>)
+      expect(screen.getByText(/child wins/i)).toBeInTheDocument()
+      expect(screen.queryByText(/text content/i)).not.toBeInTheDocument()
+    })
+
+    it('should render ReactNode as text prop', () => {
+      render(<Badge text={<strong>bold badge</strong>} />)
+      expect(screen.getByText(/bold badge/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render with empty string text', () => {
+      const { container } = render(<Badge text="" />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveTextContent('')
+    })
+
+    it('should render with hasRedCornerMark false explicitly', () => {
+      const { container } = render(<Badge text="test" hasRedCornerMark={false} />)
+      const mark = container.querySelector('.bg-components-badge-status-light-error-bg')
+      expect(mark).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/block-input/index.spec.tsx b/web/app/components/base/block-input/index.spec.tsx
new file mode 100644
index 0000000000..8d8729287d
--- /dev/null
+++ b/web/app/components/base/block-input/index.spec.tsx
@@ -0,0 +1,226 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import Toast from '@/app/components/base/toast'
+import BlockInput, { getInputKeys } from './index'
+
+vi.mock('@/utils/var', () => ({
+  checkKeys: vi.fn((_keys: string[]) => ({
+    isValid: true,
+    errorMessageKey: '',
+    errorKey: '',
+  })),
+}))
+
+describe('BlockInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(Toast, 'notify')
+    cleanup()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<BlockInput value="" />)
+      const wrapper = screen.getByTestId('block-input')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it('should render with initial value', () => {
+      const { container } = render(<BlockInput value="Hello World" />)
+      expect(container.textContent).toContain('Hello World')
+    })
+
+    it('should render variable highlights', () => {
+      render(<BlockInput value="Hello {{name}}" />)
+      const nameElement = screen.getByText('name')
+      expect(nameElement).toBeInTheDocument()
+      expect(nameElement.parentElement).toHaveClass('text-primary-600')
+    })
+
+    it('should render multiple variable highlights', () => {
+      render(<BlockInput value="{{foo}} and {{bar}}" />)
+      expect(screen.getByText('foo')).toBeInTheDocument()
+      expect(screen.getByText('bar')).toBeInTheDocument()
+    })
+
+    it('should display character count in footer when not readonly', () => {
+      render(<BlockInput value="Hello" />)
+      expect(screen.getByText('5')).toBeInTheDocument()
+    })
+
+    it('should hide footer in readonly mode', () => {
+      render(<BlockInput value="Hello" readonly />)
+      expect(screen.queryByText('5')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      render(<BlockInput value="test" className="custom-class" />)
+      const innerContent = screen.getByTestId('block-input-content')
+      expect(innerContent).toHaveClass('custom-class')
+    })
+
+    it('should apply readonly prop with max height', () => {
+      render(<BlockInput value="test" readonly />)
+      const contentDiv = screen.getByTestId('block-input').firstChild as Element
+      expect(contentDiv).toHaveClass('max-h-[180px]')
+    })
+
+    it('should have default empty value', () => {
+      render(<BlockInput value="" />)
+      const contentDiv = screen.getByTestId('block-input')
+      expect(contentDiv).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should enter edit mode when clicked', async () => {
+      render(<BlockInput value="Hello" />)
+
+      const contentArea = screen.getByText('Hello')
+      fireEvent.click(contentArea)
+
+      await waitFor(() => {
+        expect(screen.getByRole('textbox')).toBeInTheDocument()
+      })
+    })
+
+    it('should update value when typing in edit mode', async () => {
+      const onConfirm = vi.fn()
+      const { checkKeys } = await import('@/utils/var')
+        ; (checkKeys as ReturnType<typeof vi.fn>).mockReturnValue({ isValid: true, errorMessageKey: '', errorKey: '' })
+
+      render(<BlockInput value="Hello" onConfirm={onConfirm} />)
+
+      const contentArea = screen.getByText('Hello')
+      fireEvent.click(contentArea)
+
+      const textarea = await screen.findByRole('textbox')
+      fireEvent.change(textarea, { target: { value: 'Hello World' } })
+
+      expect(textarea).toHaveValue('Hello World')
+    })
+
+    it('should call onConfirm on value change with valid keys', async () => {
+      const onConfirm = vi.fn()
+      const { checkKeys } = await import('@/utils/var')
+        ; (checkKeys as ReturnType<typeof vi.fn>).mockReturnValue({ isValid: true, errorMessageKey: '', errorKey: '' })
+
+      render(<BlockInput value="initial" onConfirm={onConfirm} />)
+
+      const contentArea = screen.getByText('initial')
+      fireEvent.click(contentArea)
+
+      const textarea = await screen.findByRole('textbox')
+      fireEvent.change(textarea, { target: { value: '{{name}}' } })
+
+      await waitFor(() => {
+        expect(onConfirm).toHaveBeenCalledWith('{{name}}', ['name'])
+      })
+    })
+
+    it('should show error toast on value change with invalid keys', async () => {
+      const onConfirm = vi.fn()
+      const { checkKeys } = await import('@/utils/var');
+      (checkKeys as ReturnType<typeof vi.fn>).mockReturnValue({
+        isValid: false,
+        errorMessageKey: 'invalidKey',
+        errorKey: 'test_key',
+      })
+
+      render(<BlockInput value="initial" onConfirm={onConfirm} />)
+
+      const contentArea = screen.getByText('initial')
+      fireEvent.click(contentArea)
+
+      const textarea = await screen.findByRole('textbox')
+      fireEvent.change(textarea, { target: { value: '{{invalid}}' } })
+
+      await waitFor(() => {
+        expect(Toast.notify).toHaveBeenCalled()
+      })
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    it('should not enter edit mode when readonly is true', () => {
+      render(<BlockInput value="Hello" readonly />)
+
+      const contentArea = screen.getByText('Hello')
+      fireEvent.click(contentArea)
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty string value', () => {
+      const { container } = render(<BlockInput value="" />)
+      expect(container.textContent).toBe('0')
+      const span = screen.getByTestId('block-input').querySelector('span')
+      expect(span).toBeInTheDocument()
+      expect(span).toBeEmptyDOMElement()
+    })
+
+    it('should handle value without variables', () => {
+      render(<BlockInput value="plain text" />)
+      expect(screen.getByText('plain text')).toBeInTheDocument()
+    })
+
+    it('should handle newlines in value', () => {
+      render(<BlockInput value="line1\nline2" />)
+      expect(screen.getByText(/line1/)).toBeInTheDocument()
+    })
+
+    it('should handle multiple same variables', () => {
+      render(<BlockInput value="{{name}} and {{name}}" />)
+      const highlights = screen.getAllByText('name')
+      expect(highlights).toHaveLength(2)
+    })
+
+    it('should handle value with only variables', () => {
+      render(<BlockInput value="{{foo}}{{bar}}{{baz}}" />)
+      expect(screen.getByText('foo')).toBeInTheDocument()
+      expect(screen.getByText('bar')).toBeInTheDocument()
+      expect(screen.getByText('baz')).toBeInTheDocument()
+    })
+
+    it('should handle text adjacent to variables', () => {
+      render(<BlockInput value="prefix {{var}} suffix" />)
+      expect(screen.getByText(/prefix/)).toBeInTheDocument()
+      expect(screen.getByText(/suffix/)).toBeInTheDocument()
+    })
+  })
+})
+
+describe('getInputKeys', () => {
+  it('should extract keys from {{}} syntax', () => {
+    const keys = getInputKeys('Hello {{name}}')
+    expect(keys).toEqual(['name'])
+  })
+
+  it('should extract multiple keys', () => {
+    const keys = getInputKeys('{{foo}} and {{bar}}')
+    expect(keys).toEqual(['foo', 'bar'])
+  })
+
+  it('should remove duplicate keys', () => {
+    const keys = getInputKeys('{{name}} and {{name}}')
+    expect(keys).toEqual(['name'])
+  })
+
+  it('should return empty array for no variables', () => {
+    const keys = getInputKeys('plain text')
+    expect(keys).toEqual([])
+  })
+
+  it('should return empty array for empty string', () => {
+    const keys = getInputKeys('')
+    expect(keys).toEqual([])
+  })
+
+  it('should handle keys with underscores and numbers', () => {
+    const keys = getInputKeys('{{user_1}} and {{user_2}}')
+    expect(keys).toEqual(['user_1', 'user_2'])
+  })
+})
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index d9057eb737..05bb95e10b 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -63,7 +63,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   }, [isEditing])
 
   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 h-full w-full break-all border-0 px-4 py-2 text-sm text-gray-900 outline-0': true,
     'block-input--editing': isEditing,
   })
 
@@ -111,7 +111,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
     return (
-      <div className={cn(style, className)}>
+      <div className={cn(style, className)} data-testid="block-input-content">
         {renderSafeContent(currentValue || '')}
       </div>
     )
@@ -121,7 +121,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
 
   const textAreaContent = (
-    <div className={cn(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">
@@ -134,10 +134,10 @@ const BlockInput: FC<IBlockInputProps> = ({
                 onBlur={() => {
                   blur()
                   setIsEditing(false)
-                  // click confirm also make blur. Then outer value is change. So below code has problem.
-                  // setTimeout(() => {
-                  //   handleCancel()
-                  // }, 1000)
+                // click confirm also make blur. Then outer value is change. So below code has problem.
+                // setTimeout(() => {
+                //   handleCancel()
+                // }, 1000)
                 }}
               />
             </div>
@@ -147,7 +147,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   )
 
   return (
-    <div className={cn('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')} data-testid="block-input">
       {textAreaContent}
       {/* footer */}
       {!readonly && (
diff --git a/web/app/components/base/button/add-button.spec.tsx b/web/app/components/base/button/add-button.spec.tsx
new file mode 100644
index 0000000000..658c032bb7
--- /dev/null
+++ b/web/app/components/base/button/add-button.spec.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, render } from '@testing-library/react'
+import AddButton from './add-button'
+
+describe('AddButton', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<AddButton onClick={vi.fn()} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an add icon', () => {
+      const { container } = render(<AddButton onClick={vi.fn()} />)
+      const svg = container.querySelector('span')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
+      expect(container.firstChild).toHaveClass('my-custom')
+    })
+
+    it('should retain base classes when custom className is applied', () => {
+      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
+      expect(container.firstChild).toHaveClass('cursor-pointer')
+      expect(container.firstChild).toHaveClass('rounded-md')
+      expect(container.firstChild).toHaveClass('select-none')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = vi.fn()
+      const { container } = render(<AddButton onClick={onClick} />)
+      fireEvent.click(container.firstChild!)
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick multiple times on repeated clicks', () => {
+      const onClick = vi.fn()
+      const { container } = render(<AddButton onClick={onClick} />)
+      fireEvent.click(container.firstChild!)
+      fireEvent.click(container.firstChild!)
+      fireEvent.click(container.firstChild!)
+      expect(onClick).toHaveBeenCalledTimes(3)
+    })
+  })
+})
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 332b52daca..50a39ffe7c 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
@@ -15,7 +14,7 @@ const AddButton: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
-      <RiAddLine className="h-4 w-4 text-text-tertiary" />
+      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
     </div>
   )
 }
diff --git a/web/app/components/base/button/sync-button.spec.tsx b/web/app/components/base/button/sync-button.spec.tsx
new file mode 100644
index 0000000000..eeaf60d46e
--- /dev/null
+++ b/web/app/components/base/button/sync-button.spec.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import SyncButton from './sync-button'
+
+vi.mock('ahooks', () => ({
+  useBoolean: () => [false, { setTrue: vi.fn(), setFalse: vi.fn() }],
+}))
+
+describe('SyncButton', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<SyncButton onClick={vi.fn()} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render a refresh icon', () => {
+      const { container } = render(<SyncButton onClick={vi.fn()} />)
+      const svg = container.querySelector('span')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
+      const clickableDiv = screen.getByTestId('sync-button')
+      expect(clickableDiv).toHaveClass('my-custom')
+    })
+
+    it('should retain base classes when custom className is applied', () => {
+      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
+      const clickableDiv = screen.getByTestId('sync-button')
+      expect(clickableDiv).toHaveClass('rounded-md')
+      expect(clickableDiv).toHaveClass('select-none')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = vi.fn()
+      render(<SyncButton onClick={onClick} />)
+      const clickableDiv = screen.getByTestId('sync-button')!
+      fireEvent.click(clickableDiv)
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick multiple times on repeated clicks', () => {
+      const onClick = vi.fn()
+      render(<SyncButton onClick={onClick} />)
+      const clickableDiv = screen.getByTestId('sync-button')!
+      fireEvent.click(clickableDiv)
+      fireEvent.click(clickableDiv)
+      fireEvent.click(clickableDiv)
+      expect(onClick).toHaveBeenCalledTimes(3)
+    })
+  })
+})
diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
index 12c34026cb..06c155fb1d 100644
--- a/web/app/components/base/button/sync-button.tsx
+++ b/web/app/components/base/button/sync-button.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { RiRefreshLine } from '@remixicon/react'
 import * as React from 'react'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { cn } from '@/utils/classnames'
@@ -18,8 +17,8 @@ const SyncButton: FC<Props> = ({
 }) => {
   return (
     <TooltipPlus popupContent={popupContent}>
-      <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
-        <RiRefreshLine className="h-4 w-4 text-text-tertiary" />
+      <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="sync-button">
+        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
       </div>
     </TooltipPlus>
   )
diff --git a/web/app/components/base/carousel/index.spec.tsx b/web/app/components/base/carousel/index.spec.tsx
new file mode 100644
index 0000000000..06434a51aa
--- /dev/null
+++ b/web/app/components/base/carousel/index.spec.tsx
@@ -0,0 +1,218 @@
+import type { Mock } from 'vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Carousel, useCarousel } from './index'
+
+vi.mock('embla-carousel-react', () => ({
+  default: vi.fn(),
+}))
+
+type EmblaEventName = 'reInit' | 'select'
+type EmblaListener = (api: MockEmblaApi | undefined) => void
+
+type MockEmblaApi = {
+  scrollPrev: Mock
+  scrollNext: Mock
+  scrollTo: Mock
+  selectedScrollSnap: Mock
+  canScrollPrev: Mock
+  canScrollNext: Mock
+  slideNodes: Mock
+  on: Mock
+  off: Mock
+}
+
+let mockCanScrollPrev = false
+let mockCanScrollNext = false
+let mockSelectedIndex = 0
+let mockSlideCount = 3
+let listeners: Record<EmblaEventName, EmblaListener[]>
+let mockApi: MockEmblaApi
+const mockCarouselRef = vi.fn()
+
+const mockedUseEmblaCarousel = vi.mocked(useEmblaCarousel)
+
+const createMockEmblaApi = (): MockEmblaApi => ({
+  scrollPrev: vi.fn(),
+  scrollNext: vi.fn(),
+  scrollTo: vi.fn(),
+  selectedScrollSnap: vi.fn(() => mockSelectedIndex),
+  canScrollPrev: vi.fn(() => mockCanScrollPrev),
+  canScrollNext: vi.fn(() => mockCanScrollNext),
+  slideNodes: vi.fn(() =>
+    Array.from({ length: mockSlideCount }, () => document.createElement('div')),
+  ),
+  on: vi.fn((event: EmblaEventName, callback: EmblaListener) => {
+    listeners[event].push(callback)
+  }),
+  off: vi.fn((event: EmblaEventName, callback: EmblaListener) => {
+    listeners[event] = listeners[event].filter(listener => listener !== callback)
+  }),
+})
+
+const emitEmblaEvent = (event: EmblaEventName, api: MockEmblaApi | undefined = mockApi) => {
+  listeners[event].forEach(callback => callback(api))
+}
+
+const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'horizontal') => {
+  return render(
+    <Carousel orientation={orientation}>
+      <Carousel.Content data-testid="carousel-content">
+        <Carousel.Item>Slide 1</Carousel.Item>
+      </Carousel.Content>
+      <Carousel.Previous>Prev</Carousel.Previous>
+      <Carousel.Next>Next</Carousel.Next>
+      <Carousel.Dot>Dot</Carousel.Dot>
+    </Carousel>,
+  )
+}
+
+describe('Carousel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCanScrollPrev = false
+    mockCanScrollNext = false
+    mockSelectedIndex = 0
+    mockSlideCount = 3
+    listeners = { reInit: [], select: [] }
+    mockApi = createMockEmblaApi()
+
+    mockedUseEmblaCarousel.mockReturnValue(
+      [mockCarouselRef, mockApi] as unknown as ReturnType<typeof useEmblaCarousel>,
+    )
+  })
+
+  // Rendering and basic semantic structure.
+  describe('Rendering', () => {
+    it('should render region and slides when used with content and items', () => {
+      renderCarouselWithControls()
+
+      expect(screen.getByRole('region')).toHaveAttribute('aria-roledescription', 'carousel')
+      expect(screen.getByTestId('carousel-content')).toHaveClass('flex')
+      expect(screen.getByRole('group')).toHaveAttribute('aria-roledescription', 'slide')
+    })
+  })
+
+  // Props should be translated into Embla options and visible layout.
+  describe('Props', () => {
+    it('should configure embla with horizontal axis when orientation is omitted', () => {
+      render(
+        <Carousel opts={{ loop: true }} plugins={['plugin-marker' as unknown as never]}>
+          <Carousel.Content />
+        </Carousel>,
+      )
+
+      expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
+        { loop: true, axis: 'x' },
+        ['plugin-marker'],
+      )
+    })
+
+    it('should configure embla with vertical axis and vertical content classes when orientation is vertical', () => {
+      renderCarouselWithControls('vertical')
+
+      expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
+        { axis: 'y' },
+        undefined,
+      )
+      expect(screen.getByTestId('carousel-content')).toHaveClass('flex-col')
+    })
+  })
+
+  // Users can move slides through previous and next controls.
+  describe('User interactions', () => {
+    it('should call scroll handlers when previous and next buttons are clicked', () => {
+      mockCanScrollPrev = true
+      mockCanScrollNext = true
+
+      renderCarouselWithControls()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Prev' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+
+      expect(mockApi.scrollPrev).toHaveBeenCalledTimes(1)
+      expect(mockApi.scrollNext).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call scrollTo with clicked index when a dot is clicked', () => {
+      renderCarouselWithControls()
+      const dots = screen.getAllByRole('button', { name: 'Dot' })
+
+      fireEvent.click(dots[2])
+
+      expect(mockApi.scrollTo).toHaveBeenCalledWith(2)
+    })
+  })
+
+  // Embla events should keep control states and selected index in sync.
+  describe('State synchronization', () => {
+    it('should update disabled states and active dot when select event is emitted', () => {
+      renderCarouselWithControls()
+
+      mockCanScrollPrev = true
+      mockCanScrollNext = true
+      mockSelectedIndex = 2
+
+      act(() => {
+        emitEmblaEvent('select')
+      })
+
+      const dots = screen.getAllByRole('button', { name: 'Dot' })
+      expect(screen.getByRole('button', { name: 'Prev' })).toBeEnabled()
+      expect(screen.getByRole('button', { name: 'Next' })).toBeEnabled()
+      expect(dots[2]).toHaveAttribute('data-state', 'active')
+    })
+
+    it('should subscribe to embla events and unsubscribe from select on unmount', () => {
+      const { unmount } = renderCarouselWithControls()
+
+      const selectCallback = mockApi.on.mock.calls.find(
+        call => call[0] === 'select',
+      )?.[1] as EmblaListener
+
+      expect(mockApi.on).toHaveBeenCalledWith('reInit', expect.any(Function))
+      expect(mockApi.on).toHaveBeenCalledWith('select', expect.any(Function))
+
+      unmount()
+
+      expect(mockApi.off).toHaveBeenCalledWith('select', selectCallback)
+    })
+  })
+
+  // Edge-case behavior for missing providers or missing embla api values.
+  describe('Edge cases', () => {
+    it('should throw when useCarousel is used outside Carousel provider', () => {
+      const InvalidConsumer = () => {
+        useCarousel()
+        return null
+      }
+
+      expect(() => render(<InvalidConsumer />)).toThrowError(
+        'useCarousel must be used within a <Carousel />',
+      )
+    })
+
+    it('should render with disabled controls and no dots when embla api is undefined', () => {
+      mockedUseEmblaCarousel.mockReturnValue(
+        [mockCarouselRef, undefined] as unknown as ReturnType<typeof useEmblaCarousel>,
+      )
+
+      renderCarouselWithControls()
+
+      expect(screen.getByRole('button', { name: 'Prev' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled()
+      expect(screen.queryByRole('button', { name: 'Dot' })).not.toBeInTheDocument()
+    })
+
+    it('should ignore select callback when embla emits an undefined api', () => {
+      renderCarouselWithControls()
+
+      expect(() => {
+        act(() => {
+          emitEmblaEvent('select', undefined)
+        })
+      }).not.toThrow()
+    })
+  })
+})
diff --git a/web/app/components/base/checkbox/assets/indeterminate-icon.spec.tsx b/web/app/components/base/checkbox/assets/indeterminate-icon.spec.tsx
new file mode 100644
index 0000000000..3f39dd836f
--- /dev/null
+++ b/web/app/components/base/checkbox/assets/indeterminate-icon.spec.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import IndeterminateIcon from './indeterminate-icon'
+
+describe('IndeterminateIcon', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<IndeterminateIcon />)
+      expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
+    })
+
+    it('should render an svg element', () => {
+      const { container } = render(<IndeterminateIcon />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 2f44ce75af..a145f9a64d 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
 import Button from '../button'
@@ -81,7 +80,7 @@ export default function Drawer({
               )}
               {showClose && (
                 <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
-                  <XMarkIcon className="h-4 w-4 text-text-tertiary" onClick={onClose} />
+                  <span className="i-heroicons-x-mark h-4 w-4 text-text-tertiary" onClick={onClose} data-testid="close-icon" />
                 </DialogTitle>
               )}
             </div>
diff --git a/web/app/components/base/error-boundary/index.spec.tsx b/web/app/components/base/error-boundary/index.spec.tsx
new file mode 100644
index 0000000000..1caca84d79
--- /dev/null
+++ b/web/app/components/base/error-boundary/index.spec.tsx
@@ -0,0 +1,383 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ErrorBoundary, { ErrorFallback, useAsyncError, useErrorHandler, withErrorBoundary } from './index'
+
+const mockConfig = vi.hoisted(() => ({
+  isDev: false,
+}))
+
+vi.mock('@/config', () => ({
+  get IS_DEV() {
+    return mockConfig.isDev
+  },
+}))
+
+type ThrowOnRenderProps = {
+  message?: string
+  shouldThrow: boolean
+}
+
+const ThrowOnRender = ({ shouldThrow, message = 'render boom' }: ThrowOnRenderProps) => {
+  if (shouldThrow)
+    throw new Error(message)
+
+  return <div>Child content rendered</div>
+}
+
+let consoleErrorSpy: ReturnType<typeof vi.spyOn>
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockConfig.isDev = false
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore()
+  })
+
+  // Verify default render and default fallback behavior.
+  describe('Rendering', () => {
+    it('should render children when no error occurs', () => {
+      render(
+        <ErrorBoundary>
+          <ThrowOnRender shouldThrow={false} />
+        </ErrorBoundary>,
+      )
+
+      expect(screen.getByText('Child content rendered')).toBeInTheDocument()
+    })
+
+    it('should render default fallback with title and message when child throws', async () => {
+      render(
+        <ErrorBoundary>
+          <ThrowOnRender shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      expect(await screen.findByText('Something went wrong')).toBeInTheDocument()
+      expect(screen.getByText('An unexpected error occurred while rendering this component.')).toBeInTheDocument()
+    })
+
+    it('should render custom title, message, and className in fallback', async () => {
+      render(
+        <ErrorBoundary
+          className="custom-boundary"
+          customMessage="Custom recovery message"
+          customTitle="Custom crash title"
+          isolate={false}
+        >
+          <ThrowOnRender shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      expect(await screen.findByText('Custom crash title')).toBeInTheDocument()
+      expect(screen.getByText('Custom recovery message')).toBeInTheDocument()
+
+      const fallbackRoot = document.querySelector('.custom-boundary')
+      expect(fallbackRoot).toBeInTheDocument()
+      expect(fallbackRoot).not.toHaveClass('min-h-[200px]')
+    })
+  })
+
+  // Validate explicit fallback prop variants.
+  describe('Fallback props', () => {
+    it('should render node fallback when fallback prop is a React node', async () => {
+      render(
+        <ErrorBoundary fallback={<div>Node fallback content</div>}>
+          <ThrowOnRender shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      expect(await screen.findByText('Node fallback content')).toBeInTheDocument()
+    })
+
+    it('should render function fallback with error message when fallback prop is a function', async () => {
+      render(
+        <ErrorBoundary
+          fallback={error => (
+            <div>
+              Function fallback:
+              {' '}
+              {error.message}
+            </div>
+          )}
+        >
+          <ThrowOnRender message="function fallback boom" shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      expect(await screen.findByText('Function fallback: function fallback boom')).toBeInTheDocument()
+    })
+  })
+
+  // Validate error reporting and details panel behavior.
+  describe('Error reporting', () => {
+    it('should call onError with error and errorInfo when child throws', async () => {
+      const onError = vi.fn()
+
+      render(
+        <ErrorBoundary onError={onError}>
+          <ThrowOnRender shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      await screen.findByText('Something went wrong')
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({ message: 'render boom' }),
+        expect.objectContaining({ componentStack: expect.any(String) }),
+      )
+    })
+
+    it('should render details block when showDetails is true', async () => {
+      render(
+        <ErrorBoundary showDetails={true}>
+          <ThrowOnRender message="details boom" shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      expect(await screen.findByText('Error Details (Development Only)')).toBeInTheDocument()
+      expect(screen.getByText('Error:')).toBeInTheDocument()
+      expect(screen.getByText(/details boom/i)).toBeInTheDocument()
+    })
+
+    it('should log boundary errors in development mode', async () => {
+      mockConfig.isDev = true
+
+      render(
+        <ErrorBoundary>
+          <ThrowOnRender message="dev boom" shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      await screen.findByText('Something went wrong')
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'ErrorBoundary caught an error:',
+        expect.objectContaining({ message: 'dev boom' }),
+      )
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Error Info:',
+        expect.objectContaining({ componentStack: expect.any(String) }),
+      )
+    })
+  })
+
+  // Validate recovery controls and automatic reset triggers.
+  describe('Recovery', () => {
+    it('should hide recovery actions when enableRecovery is false', async () => {
+      render(
+        <ErrorBoundary enableRecovery={false}>
+          <ThrowOnRender shouldThrow={true} />
+        </ErrorBoundary>,
+      )
+
+      await screen.findByText('Something went wrong')
+
+      expect(screen.queryByRole('button', { name: 'Try Again' })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Reload Page' })).not.toBeInTheDocument()
+    })
+
+    it('should reset and render children when Try Again is clicked', async () => {
+      const onReset = vi.fn()
+
+      const RecoveryHarness = () => {
+        const [shouldThrow, setShouldThrow] = React.useState(true)
+        return (
+          <ErrorBoundary
+            onReset={() => {
+              onReset()
+              setShouldThrow(false)
+            }}
+          >
+            <ThrowOnRender shouldThrow={shouldThrow} />
+          </ErrorBoundary>
+        )
+      }
+
+      render(<RecoveryHarness />)
+      fireEvent.click(await screen.findByRole('button', { name: 'Try Again' }))
+
+      await screen.findByText('Child content rendered')
+      expect(onReset).toHaveBeenCalledTimes(1)
+    })
+
+    it('should reset after resetKeys change when boundary is in error state', async () => {
+      const ResetKeysHarness = () => {
+        const [shouldThrow, setShouldThrow] = React.useState(true)
+        const [boundaryKey, setBoundaryKey] = React.useState(0)
+
+        return (
+          <>
+            <button
+              onClick={() => {
+                setShouldThrow(false)
+                setBoundaryKey(1)
+              }}
+            >
+              Recover with keys
+            </button>
+            <ErrorBoundary resetKeys={[boundaryKey]}>
+              <ThrowOnRender shouldThrow={shouldThrow} />
+            </ErrorBoundary>
+          </>
+        )
+      }
+
+      render(<ResetKeysHarness />)
+      await screen.findByText('Something went wrong')
+
+      fireEvent.click(screen.getByRole('button', { name: 'Recover with keys' }))
+
+      await waitFor(() => {
+        expect(screen.getByText('Child content rendered')).toBeInTheDocument()
+      })
+    })
+
+    it('should reset after children change when resetOnPropsChange is true', async () => {
+      const ResetOnPropsHarness = () => {
+        const [shouldThrow, setShouldThrow] = React.useState(true)
+        const [childLabel, setChildLabel] = React.useState('first child')
+
+        return (
+          <>
+            <button
+              onClick={() => {
+                setShouldThrow(false)
+                setChildLabel('second child')
+              }}
+            >
+              Replace children
+            </button>
+            <ErrorBoundary resetOnPropsChange={true}>
+              {shouldThrow ? <ThrowOnRender shouldThrow={true} /> : <div>{childLabel}</div>}
+            </ErrorBoundary>
+          </>
+        )
+      }
+
+      render(<ResetOnPropsHarness />)
+      await screen.findByText('Something went wrong')
+
+      fireEvent.click(screen.getByRole('button', { name: 'Replace children' }))
+
+      await waitFor(() => {
+        expect(screen.getByText('second child')).toBeInTheDocument()
+      })
+    })
+  })
+})
+
+describe('ErrorBoundary utility exports', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore()
+  })
+
+  // Validate imperative error hook behavior.
+  describe('useErrorHandler', () => {
+    it('should trigger error boundary fallback when setError is called', async () => {
+      const HookConsumer = () => {
+        const setError = useErrorHandler()
+        return (
+          <button onClick={() => setError(new Error('handler boom'))}>
+            Trigger hook error
+          </button>
+        )
+      }
+
+      render(
+        <ErrorBoundary fallback={<div>Hook fallback shown</div>}>
+          <HookConsumer />
+        </ErrorBoundary>,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Trigger hook error' }))
+
+      expect(await screen.findByText('Hook fallback shown')).toBeInTheDocument()
+    })
+  })
+
+  // Validate async error bridge hook behavior.
+  describe('useAsyncError', () => {
+    it('should trigger error boundary fallback when async error callback is called', async () => {
+      const AsyncHookConsumer = () => {
+        const throwAsyncError = useAsyncError()
+        return (
+          <button onClick={() => throwAsyncError(new Error('async hook boom'))}>
+            Trigger async hook error
+          </button>
+        )
+      }
+
+      render(
+        <ErrorBoundary fallback={<div>Async fallback shown</div>}>
+          <AsyncHookConsumer />
+        </ErrorBoundary>,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Trigger async hook error' }))
+
+      expect(await screen.findByText('Async fallback shown')).toBeInTheDocument()
+    })
+  })
+
+  // Validate HOC wrapper behavior and metadata.
+  describe('withErrorBoundary', () => {
+    it('should wrap component and render custom title when wrapped component throws', async () => {
+      type WrappedProps = {
+        shouldThrow: boolean
+      }
+
+      const WrappedTarget = ({ shouldThrow }: WrappedProps) => {
+        if (shouldThrow)
+          throw new Error('wrapped boom')
+        return <div>Wrapped content</div>
+      }
+
+      const Wrapped = withErrorBoundary(WrappedTarget, {
+        customTitle: 'Wrapped boundary title',
+      })
+
+      render(<Wrapped shouldThrow={true} />)
+
+      expect(await screen.findByText('Wrapped boundary title')).toBeInTheDocument()
+    })
+
+    it('should set displayName using wrapped component name', () => {
+      const NamedComponent = () => <div>named content</div>
+      const Wrapped = withErrorBoundary(NamedComponent)
+
+      expect(Wrapped.displayName).toBe('withErrorBoundary(NamedComponent)')
+    })
+  })
+
+  // Validate simple fallback helper component.
+  describe('ErrorFallback', () => {
+    it('should render message and call reset action when button is clicked', () => {
+      const resetErrorBoundaryAction = vi.fn()
+
+      render(
+        <ErrorFallback
+          error={new Error('fallback helper message')}
+          resetErrorBoundaryAction={resetErrorBoundaryAction}
+        />,
+      )
+
+      expect(screen.getByText('Oops! Something went wrong')).toBeInTheDocument()
+      expect(screen.getByText('fallback helper message')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+      expect(resetErrorBoundaryAction).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/base/float-right-container/index.spec.tsx b/web/app/components/base/float-right-container/index.spec.tsx
new file mode 100644
index 0000000000..51713cc527
--- /dev/null
+++ b/web/app/components/base/float-right-container/index.spec.tsx
@@ -0,0 +1,140 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import FloatRightContainer from './index'
+
+describe('FloatRightContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering behavior across mobile and desktop branches.
+  describe('Rendering', () => {
+    it('should render content in drawer when isMobile is true and isOpen is true', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Mobile panel"
+        >
+          <div>Mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('Mobile panel')).toBeInTheDocument()
+      expect(screen.getByText('Mobile content')).toBeInTheDocument()
+    })
+
+    it('should not render content when isMobile is true and isOpen is false', () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={false}
+          onClose={vi.fn()}
+          unmount={true}
+        >
+          <div>Closed mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.queryByText('Closed mobile content')).not.toBeInTheDocument()
+    })
+
+    it('should render content inline when isMobile is false and isOpen is true', () => {
+      render(
+        <FloatRightContainer
+          isMobile={false}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Desktop drawer title should not render"
+        >
+          <div>Desktop inline content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(screen.getByText('Desktop inline content')).toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.queryByText('Desktop drawer title should not render')).not.toBeInTheDocument()
+    })
+
+    it('should render nothing when isMobile is false and isOpen is false', () => {
+      const { container } = render(
+        <FloatRightContainer
+          isMobile={false}
+          isOpen={false}
+          onClose={vi.fn()}
+        >
+          <div>Hidden desktop content</div>
+        </FloatRightContainer>,
+      )
+
+      expect(container).toBeEmptyDOMElement()
+      expect(screen.queryByText('Hidden desktop content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Validate that drawer-specific props are passed through in mobile mode.
+  describe('Props forwarding', () => {
+    it('should call onClose when close icon is clicked in mobile drawer mode', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable mobile content</div>
+        </FloatRightContainer>,
+      )
+
+      await screen.findByRole('dialog')
+      const closeIcon = screen.getByTestId('close-icon')
+      expect(closeIcon).toBeInTheDocument()
+
+      fireEvent.click(closeIcon!)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should apply drawer className props in mobile drawer mode', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          dialogClassName="custom-dialog-class"
+          panelClassName="custom-panel-class"
+        >
+          <div>Class forwarding content</div>
+        </FloatRightContainer>,
+      )
+
+      const dialog = await screen.findByRole('dialog')
+      expect(dialog).toHaveClass('custom-dialog-class')
+
+      const panel = document.querySelector('.custom-panel-class')
+      expect(panel).toBeInTheDocument()
+    })
+  })
+
+  // Edge-case behavior with optional children.
+  describe('Edge cases', () => {
+    it('should render without crashing when children is undefined in mobile mode', async () => {
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={vi.fn()}
+          title="Empty mobile panel"
+          children={undefined}
+        />,
+      )
+
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByText('Empty mobile panel')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/pagination/hook.spec.ts b/web/app/components/base/pagination/hook.spec.ts
new file mode 100644
index 0000000000..284032df47
--- /dev/null
+++ b/web/app/components/base/pagination/hook.spec.ts
@@ -0,0 +1,155 @@
+import { renderHook } from '@testing-library/react'
+import usePagination from './hook'
+
+const defaultProps = {
+  currentPage: 0,
+  setCurrentPage: vi.fn(),
+  totalPages: 10,
+  edgePageCount: 2,
+  middlePagesSiblingCount: 1,
+  truncableText: '...',
+  truncableClassName: 'truncable',
+}
+
+describe('usePagination', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('pages', () => {
+    it('should generate correct pages array', () => {
+      const { result } = renderHook(() => usePagination(defaultProps))
+      expect(result.current.pages).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+    })
+
+    it('should generate empty pages for totalPages 0', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, totalPages: 0 }))
+      expect(result.current.pages).toEqual([])
+    })
+
+    it('should generate single page', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, totalPages: 1 }))
+      expect(result.current.pages).toEqual([1])
+    })
+  })
+
+  describe('hasPreviousPage / hasNextPage', () => {
+    it('should have no previous page on first page', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 1 }))
+      expect(result.current.hasPreviousPage).toBe(false)
+    })
+
+    it('should have previous page when not on first page', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 3 }))
+      expect(result.current.hasPreviousPage).toBe(true)
+    })
+
+    it('should have next page when not on last page', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 1 }))
+      expect(result.current.hasNextPage).toBe(true)
+    })
+
+    it('should have no next page on last page', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 10 }))
+      expect(result.current.hasNextPage).toBe(false)
+    })
+  })
+
+  describe('middlePages', () => {
+    it('should return correct middle pages when at start', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 0 }))
+      // isReachedToFirst: currentPage(0) <= middlePagesSiblingCount(1), so slice(0, 3)
+      expect(result.current.middlePages).toEqual([1, 2, 3])
+    })
+
+    it('should return correct middle pages when in the middle', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      // Not at start or end, slice(5-1, 5+1+1) = slice(4, 7) = [5, 6, 7]
+      expect(result.current.middlePages).toEqual([5, 6, 7])
+    })
+
+    it('should return correct middle pages when at end', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 9 }))
+      // isReachedToLast: currentPage(9) + middlePagesSiblingCount(1) >= totalPages(10), so slice(-3)
+      expect(result.current.middlePages).toEqual([8, 9, 10])
+    })
+  })
+
+  describe('previousPages and nextPages', () => {
+    it('should return empty previousPages when at start', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 0 }))
+      expect(result.current.previousPages).toEqual([])
+    })
+
+    it('should return previousPages when in the middle', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      // edgePageCount=2, so first 2 pages filtered by not in middlePages
+      expect(result.current.previousPages).toEqual([1, 2])
+    })
+
+    it('should return empty nextPages when at end', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 9 }))
+      expect(result.current.nextPages).toEqual([])
+    })
+
+    it('should return nextPages when in the middle', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      // Last 2 pages: [9, 10], filtered by not in middlePages [5,6,7]
+      expect(result.current.nextPages).toEqual([9, 10])
+    })
+  })
+
+  describe('truncation', () => {
+    it('should be previous truncable when middle pages are far from edge', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      // previousPages=[1,2], middlePages=[5,6,7], 5 > 2+1 = true
+      expect(result.current.isPreviousTruncable).toBe(true)
+    })
+
+    it('should not be previous truncable when pages are contiguous', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 2 }))
+      expect(result.current.isPreviousTruncable).toBe(false)
+    })
+
+    it('should be next truncable when middle pages are far from end edge', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      // middlePages=[5,6,7], nextPages=[9,10], 7+1 < 9 = true
+      expect(result.current.isNextTruncable).toBe(true)
+    })
+
+    it('should not be next truncable when pages are contiguous', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 7 }))
+      expect(result.current.isNextTruncable).toBe(false)
+    })
+  })
+
+  describe('passthrough values', () => {
+    it('should pass through currentPage', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, currentPage: 5 }))
+      expect(result.current.currentPage).toBe(5)
+    })
+
+    it('should pass through setCurrentPage', () => {
+      const setCurrentPage = vi.fn()
+      const { result } = renderHook(() => usePagination({ ...defaultProps, setCurrentPage }))
+      result.current.setCurrentPage(3)
+      expect(setCurrentPage).toHaveBeenCalledWith(3)
+    })
+
+    it('should pass through truncableText', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, truncableText: '…' }))
+      expect(result.current.truncableText).toBe('…')
+    })
+
+    it('should pass through truncableClassName', () => {
+      const { result } = renderHook(() => usePagination({ ...defaultProps, truncableClassName: 'custom-trunc' }))
+      expect(result.current.truncableClassName).toBe('custom-trunc')
+    })
+
+    it('should use default truncableText', () => {
+      const { currentPage, setCurrentPage, totalPages, edgePageCount, middlePagesSiblingCount } = defaultProps
+      const { result } = renderHook(() => usePagination({ currentPage, setCurrentPage, totalPages, edgePageCount, middlePagesSiblingCount }))
+      expect(result.current.truncableText).toBe('...')
+    })
+  })
+})
diff --git a/web/app/components/base/pagination/index.spec.tsx b/web/app/components/base/pagination/index.spec.tsx
new file mode 100644
index 0000000000..ef924c290b
--- /dev/null
+++ b/web/app/components/base/pagination/index.spec.tsx
@@ -0,0 +1,242 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import CustomizedPagination from './index'
+
+describe('CustomizedPagination', () => {
+  const defaultProps = {
+    current: 0,
+    onChange: vi.fn(),
+    total: 100,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<CustomizedPagination {...defaultProps} />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should display current page and total pages', () => {
+      render(<CustomizedPagination {...defaultProps} current={0} total={100} limit={10} />)
+      // current + 1 = 1, totalPages = 10
+      // The page info display shows "1 / 10" and page buttons also show numbers
+      expect(screen.getByText('/')).toBeInTheDocument()
+      expect(screen.getAllByText('1').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should render prev and next buttons', () => {
+      render(<CustomizedPagination {...defaultProps} />)
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('should render page number buttons', () => {
+      render(<CustomizedPagination {...defaultProps} total={50} limit={10} />)
+      // 5 pages total, should see page numbers
+      expect(screen.getByText('2')).toBeInTheDocument()
+      expect(screen.getByText('3')).toBeInTheDocument()
+    })
+
+    it('should display slash separator between current page and total', () => {
+      render(<CustomizedPagination {...defaultProps} />)
+      expect(screen.getByText('/')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<CustomizedPagination {...defaultProps} className="my-custom" />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('my-custom')
+    })
+
+    it('should default limit to 10', () => {
+      render(<CustomizedPagination {...defaultProps} total={100} />)
+      // totalPages = 100 / 10 = 10, displayed in the page info area
+      expect(screen.getAllByText('10').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should calculate total pages based on custom limit', () => {
+      render(<CustomizedPagination {...defaultProps} total={100} limit={25} />)
+      // totalPages = 100 / 25 = 4, displayed in the page info area
+      expect(screen.getAllByText('4').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should disable prev button on first page', () => {
+      render(<CustomizedPagination {...defaultProps} current={0} />)
+      const buttons = screen.getAllByRole('button')
+      // First button is prev
+      expect(buttons[0]).toBeDisabled()
+    })
+
+    it('should disable next button on last page', () => {
+      render(<CustomizedPagination {...defaultProps} current={9} total={100} limit={10} />)
+      const buttons = screen.getAllByRole('button')
+      // Last button is next
+      expect(buttons[buttons.length - 1]).toBeDisabled()
+    })
+
+    it('should not render limit selector when onLimitChange is not provided', () => {
+      render(<CustomizedPagination {...defaultProps} />)
+      expect(screen.queryByText(/common\.pagination\.perPage/i)).not.toBeInTheDocument()
+    })
+
+    it('should render limit selector when onLimitChange is provided', () => {
+      const onLimitChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} onLimitChange={onLimitChange} />)
+      // Should show limit options 10, 25, 50
+      expect(screen.getByText('25')).toBeInTheDocument()
+      expect(screen.getByText('50')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onChange when next button is clicked', () => {
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={0} onChange={onChange} />)
+      const buttons = screen.getAllByRole('button')
+      const nextButton = buttons[buttons.length - 1]
+      fireEvent.click(nextButton)
+      expect(onChange).toHaveBeenCalledWith(1)
+    })
+
+    it('should call onChange when prev button is clicked', () => {
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={5} onChange={onChange} />)
+      const buttons = screen.getAllByRole('button')
+      fireEvent.click(buttons[0])
+      expect(onChange).toHaveBeenCalledWith(4)
+    })
+
+    it('should show input when page display is clicked', () => {
+      render(<CustomizedPagination {...defaultProps} />)
+      // Click the current page display (the div containing "1 / 10")
+      fireEvent.click(screen.getByText('/'))
+      // Input should appear
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should navigate to entered page on Enter key', () => {
+      vi.useFakeTimers()
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={0} onChange={onChange} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '5' } })
+      fireEvent.keyDown(input, { key: 'Enter' })
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+      expect(onChange).toHaveBeenCalledWith(4) // 0-indexed
+    })
+
+    it('should cancel input on Escape key', () => {
+      render(<CustomizedPagination {...defaultProps} current={0} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.keyDown(input, { key: 'Escape' })
+      // Input should be hidden and page display should return
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+      expect(screen.getByText('/')).toBeInTheDocument()
+    })
+
+    it('should confirm input on blur', () => {
+      vi.useFakeTimers()
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={0} onChange={onChange} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '3' } })
+      fireEvent.blur(input)
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+      expect(onChange).toHaveBeenCalledWith(2) // 0-indexed
+    })
+
+    it('should clamp page to max when input exceeds total pages', () => {
+      vi.useFakeTimers()
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={0} total={100} limit={10} onChange={onChange} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '999' } })
+      fireEvent.keyDown(input, { key: 'Enter' })
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+      expect(onChange).toHaveBeenCalledWith(9) // last page (0-indexed)
+    })
+
+    it('should clamp page to min when input is less than 1', () => {
+      vi.useFakeTimers()
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={5} onChange={onChange} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '0' } })
+      fireEvent.keyDown(input, { key: 'Enter' })
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+      expect(onChange).toHaveBeenCalledWith(0)
+    })
+
+    it('should ignore non-numeric input', () => {
+      render(<CustomizedPagination {...defaultProps} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'abc' } })
+      expect(input).toHaveValue('')
+    })
+
+    it('should call onLimitChange when limit option is clicked', () => {
+      const onLimitChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} onLimitChange={onLimitChange} />)
+      fireEvent.click(screen.getByText('25'))
+      expect(onLimitChange).toHaveBeenCalledWith(25)
+    })
+
+    it('should call onLimitChange with 50 when 50 option is clicked', () => {
+      const onLimitChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} onLimitChange={onLimitChange} />)
+      fireEvent.click(screen.getByText('50'))
+      expect(onLimitChange).toHaveBeenCalledWith(50)
+    })
+
+    it('should call onChange when a page button is clicked', () => {
+      const onChange = vi.fn()
+      render(<CustomizedPagination {...defaultProps} current={0} total={50} limit={10} onChange={onChange} />)
+      fireEvent.click(screen.getByText('3'))
+      expect(onChange).toHaveBeenCalledWith(2) // 0-indexed
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle total of 0', () => {
+      const { container } = render(<CustomizedPagination {...defaultProps} total={0} />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should handle single page', () => {
+      render(<CustomizedPagination {...defaultProps} total={5} limit={10} />)
+      // totalPages = 1, both buttons should be disabled
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).toBeDisabled()
+      expect(buttons[buttons.length - 1]).toBeDisabled()
+    })
+
+    it('should restore input value when blurred with empty value', () => {
+      render(<CustomizedPagination {...defaultProps} current={4} />)
+      fireEvent.click(screen.getByText('/'))
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: '' } })
+      fireEvent.blur(input)
+      // Should close input without calling onChange, restoring to current + 1
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/pagination/pagination.spec.tsx b/web/app/components/base/pagination/pagination.spec.tsx
new file mode 100644
index 0000000000..2374f8257a
--- /dev/null
+++ b/web/app/components/base/pagination/pagination.spec.tsx
@@ -0,0 +1,376 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Pagination } from './pagination'
+
+// Helper to render Pagination with common defaults
+function renderPagination({
+  currentPage = 0,
+  totalPages = 10,
+  setCurrentPage = vi.fn(),
+  edgePageCount = 2,
+  middlePagesSiblingCount = 1,
+  truncableText = '...',
+  truncableClassName = 'truncable',
+  children,
+}: {
+  currentPage?: number
+  totalPages?: number
+  setCurrentPage?: (page: number) => void
+  edgePageCount?: number
+  middlePagesSiblingCount?: number
+  truncableText?: string
+  truncableClassName?: string
+  children?: React.ReactNode
+} = {}) {
+  return render(
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      setCurrentPage={setCurrentPage}
+      edgePageCount={edgePageCount}
+      middlePagesSiblingCount={middlePagesSiblingCount}
+      truncableText={truncableText}
+      truncableClassName={truncableClassName}
+    >
+      {children}
+    </Pagination>,
+  )
+}
+
+describe('Pagination', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = renderPagination()
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should render children', () => {
+      renderPagination({ children: <span>child content</span> })
+      expect(screen.getByText(/child content/i)).toBeInTheDocument()
+    })
+
+    it('should apply className to wrapper div', () => {
+      const { container } = render(
+        <Pagination
+          currentPage={0}
+          totalPages={5}
+          setCurrentPage={vi.fn()}
+          edgePageCount={2}
+          middlePagesSiblingCount={1}
+          className="my-pagination"
+        >
+          <span>test</span>
+        </Pagination>,
+      )
+      expect(container.firstChild).toHaveClass('my-pagination')
+    })
+
+    it('should apply data-testid when provided', () => {
+      render(
+        <Pagination
+          currentPage={0}
+          totalPages={5}
+          setCurrentPage={vi.fn()}
+          edgePageCount={2}
+          middlePagesSiblingCount={1}
+          dataTestId="my-pagination"
+        >
+          <span>test</span>
+        </Pagination>,
+      )
+      expect(screen.getByTestId('my-pagination')).toBeInTheDocument()
+    })
+  })
+
+  describe('PrevButton', () => {
+    it('should render prev button', () => {
+      renderPagination({
+        currentPage: 3,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      expect(screen.getByText(/prev/i)).toBeInTheDocument()
+    })
+
+    it('should call setCurrentPage with previous page when clicked', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 3,
+        setCurrentPage,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      fireEvent.click(screen.getByText(/prev/i))
+      expect(setCurrentPage).toHaveBeenCalledWith(2)
+    })
+
+    it('should not navigate below page 0', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        setCurrentPage,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      fireEvent.click(screen.getByText(/prev/i))
+      expect(setCurrentPage).not.toHaveBeenCalled()
+    })
+
+    it('should be disabled on first page', () => {
+      renderPagination({
+        currentPage: 0,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      expect(screen.getByText(/prev/i).closest('button')).toBeDisabled()
+    })
+
+    it('should navigate on Enter key press', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 3,
+        setCurrentPage,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      fireEvent.keyPress(screen.getByText(/prev/i), { key: 'Enter', charCode: 13 })
+      expect(setCurrentPage).toHaveBeenCalledWith(2)
+    })
+
+    it('should not navigate on Enter when disabled', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        setCurrentPage,
+        children: <Pagination.PrevButton>Prev</Pagination.PrevButton>,
+      })
+      fireEvent.keyPress(screen.getByText(/prev/i), { key: 'Enter', charCode: 13 })
+      expect(setCurrentPage).not.toHaveBeenCalled()
+    })
+
+    it('should render with custom as element', () => {
+      renderPagination({
+        currentPage: 3,
+        children: <Pagination.PrevButton as={<div />}>Prev</Pagination.PrevButton>,
+      })
+      expect(screen.getByText(/prev/i)).toBeInTheDocument()
+    })
+
+    it('should apply dataTestId', () => {
+      renderPagination({
+        currentPage: 3,
+        children: <Pagination.PrevButton dataTestId="prev-btn">Prev</Pagination.PrevButton>,
+      })
+      expect(screen.getByTestId('prev-btn')).toBeInTheDocument()
+    })
+  })
+
+  describe('NextButton', () => {
+    it('should render next button', () => {
+      renderPagination({
+        currentPage: 0,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      expect(screen.getByText(/next/i)).toBeInTheDocument()
+    })
+
+    it('should call setCurrentPage with next page when clicked', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        totalPages: 10,
+        setCurrentPage,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      fireEvent.click(screen.getByText(/next/i))
+      expect(setCurrentPage).toHaveBeenCalledWith(1)
+    })
+
+    it('should not navigate beyond last page', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 9,
+        totalPages: 10,
+        setCurrentPage,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      fireEvent.click(screen.getByText(/next/i))
+      expect(setCurrentPage).not.toHaveBeenCalled()
+    })
+
+    it('should be disabled on last page', () => {
+      renderPagination({
+        currentPage: 9,
+        totalPages: 10,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      expect(screen.getByText(/next/i).closest('button')).toBeDisabled()
+    })
+
+    it('should navigate on Enter key press', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        totalPages: 10,
+        setCurrentPage,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      fireEvent.keyPress(screen.getByText(/next/i), { key: 'Enter', charCode: 13 })
+      expect(setCurrentPage).toHaveBeenCalledWith(1)
+    })
+
+    it('should not navigate on Enter when disabled', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 9,
+        totalPages: 10,
+        setCurrentPage,
+        children: <Pagination.NextButton>Next</Pagination.NextButton>,
+      })
+      fireEvent.keyPress(screen.getByText(/next/i), { key: 'Enter', charCode: 13 })
+      expect(setCurrentPage).not.toHaveBeenCalled()
+    })
+
+    it('should apply dataTestId', () => {
+      renderPagination({
+        currentPage: 0,
+        children: <Pagination.NextButton dataTestId="next-btn">Next</Pagination.NextButton>,
+      })
+      expect(screen.getByTestId('next-btn')).toBeInTheDocument()
+    })
+  })
+
+  describe('PageButton', () => {
+    it('should render page number buttons', () => {
+      renderPagination({
+        currentPage: 0,
+        totalPages: 5,
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      expect(screen.getByText('1')).toBeInTheDocument()
+      expect(screen.getByText('5')).toBeInTheDocument()
+    })
+
+    it('should apply activeClassName to current page', () => {
+      renderPagination({
+        currentPage: 2,
+        totalPages: 5,
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      // current page is 2, so page 3 (1-indexed) should be active
+      expect(screen.getByText('3').closest('a')).toHaveClass('active')
+    })
+
+    it('should apply inactiveClassName to non-current pages', () => {
+      renderPagination({
+        currentPage: 2,
+        totalPages: 5,
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      expect(screen.getByText('1').closest('a')).toHaveClass('inactive')
+    })
+
+    it('should call setCurrentPage when a page button is clicked', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        totalPages: 5,
+        setCurrentPage,
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      fireEvent.click(screen.getByText('3'))
+      expect(setCurrentPage).toHaveBeenCalledWith(2) // 0-indexed
+    })
+
+    it('should navigate on Enter key press on a page button', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        totalPages: 5,
+        setCurrentPage,
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      fireEvent.keyPress(screen.getByText('4'), { key: 'Enter', charCode: 13 })
+      expect(setCurrentPage).toHaveBeenCalledWith(3) // 0-indexed
+    })
+
+    it('should render truncable text when pages are truncated', () => {
+      renderPagination({
+        currentPage: 5,
+        totalPages: 20,
+        edgePageCount: 2,
+        middlePagesSiblingCount: 1,
+        truncableText: '...',
+        children: (
+          <Pagination.PageButton
+            className="page-btn"
+            activeClassName="active"
+            inactiveClassName="inactive"
+          />
+        ),
+      })
+      // With 20 pages and current at 5, there should be truncation
+      expect(screen.getAllByText('...').length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle single page', () => {
+      const setCurrentPage = vi.fn()
+      renderPagination({
+        currentPage: 0,
+        totalPages: 1,
+        setCurrentPage,
+        children: (
+          <>
+            <Pagination.PrevButton>Prev</Pagination.PrevButton>
+            <Pagination.PageButton className="page-btn" activeClassName="active" inactiveClassName="inactive" />
+            <Pagination.NextButton>Next</Pagination.NextButton>
+          </>
+        ),
+      })
+      expect(screen.getByText(/prev/i).closest('button')).toBeDisabled()
+      expect(screen.getByText(/next/i).closest('button')).toBeDisabled()
+      expect(screen.getByText('1')).toBeInTheDocument()
+    })
+
+    it('should handle zero total pages', () => {
+      const { container } = renderPagination({
+        currentPage: 0,
+        totalPages: 0,
+        children: (
+          <Pagination.PageButton className="page-btn" activeClassName="active" inactiveClassName="inactive" />
+        ),
+      })
+      expect(container).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/theme-selector.spec.tsx b/web/app/components/base/theme-selector.spec.tsx
new file mode 100644
index 0000000000..8cd0028acf
--- /dev/null
+++ b/web/app/components/base/theme-selector.spec.tsx
@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ThemeSelector from './theme-selector'
+
+// Mock next-themes with controllable state
+let mockTheme = 'system'
+const mockSetTheme = vi.fn()
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: mockTheme,
+    setTheme: mockSetTheme,
+  }),
+}))
+
+describe('ThemeSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTheme = 'system'
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<ThemeSelector />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should render the trigger button', () => {
+      render(<ThemeSelector />)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should not show dropdown content when closed', () => {
+      render(<ThemeSelector />)
+      expect(screen.queryByText(/common\.theme\.light/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should show all theme options when dropdown is opened', () => {
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.getByText(/light/i)).toBeInTheDocument()
+      expect(screen.getByText(/dark/i)).toBeInTheDocument()
+      expect(screen.getByText(/auto/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setTheme with light when light option is clicked', () => {
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      const lightButton = screen.getByText(/light/i).closest('button')!
+      fireEvent.click(lightButton)
+      expect(mockSetTheme).toHaveBeenCalledWith('light')
+    })
+
+    it('should call setTheme with dark when dark option is clicked', () => {
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      const darkButton = screen.getByText(/dark/i).closest('button')!
+      fireEvent.click(darkButton)
+      expect(mockSetTheme).toHaveBeenCalledWith('dark')
+    })
+
+    it('should call setTheme with system when system option is clicked', () => {
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      const systemButton = screen.getByText(/auto/i).closest('button')!
+      fireEvent.click(systemButton)
+      expect(mockSetTheme).toHaveBeenCalledWith('system')
+    })
+  })
+
+  describe('Theme-specific rendering', () => {
+    it('should show checkmark for the currently active light theme', () => {
+      mockTheme = 'light'
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.getByTestId('light-icon')).toBeInTheDocument()
+    })
+
+    it('should show checkmark for the currently active dark theme', () => {
+      mockTheme = 'dark'
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.getByTestId('dark-icon')).toBeInTheDocument()
+    })
+
+    it('should show checkmark for the currently active system theme', () => {
+      mockTheme = 'system'
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.getByTestId('system-icon')).toBeInTheDocument()
+    })
+
+    it('should not show checkmark on non-active themes', () => {
+      mockTheme = 'light'
+      render(<ThemeSelector />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.queryByTestId('dark-icon')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('system-icon')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/theme-selector.tsx b/web/app/components/base/theme-selector.tsx
index 8869407057..49fdfb4390 100644
--- a/web/app/components/base/theme-selector.tsx
+++ b/web/app/components/base/theme-selector.tsx
@@ -1,11 +1,5 @@
 'use client'
 
-import {
-  RiCheckLine,
-  RiComputerLine,
-  RiMoonLine,
-  RiSunLine,
-} from '@remixicon/react'
 import { useTheme } from 'next-themes'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -30,9 +24,9 @@ export default function ThemeSelector() {
 
   const getCurrentIcon = () => {
     switch (theme) {
-      case 'light': return <RiSunLine className="h-4 w-4 text-text-tertiary" />
-      case 'dark': return <RiMoonLine className="h-4 w-4 text-text-tertiary" />
-      default: return <RiComputerLine className="h-4 w-4 text-text-tertiary" />
+      case 'light': return <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
+      case 'dark': return <span className="i-ri-moon-line h-4 w-4 text-text-tertiary" />
+      default: return <span className="i-ri-computer-line h-4 w-4 text-text-tertiary" />
     }
   }
 
@@ -59,13 +53,13 @@ export default function ThemeSelector() {
             className="flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover"
             onClick={() => handleThemeChange('light')}
           >
-            <RiSunLine className="h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
             <div className="flex grow items-center justify-start px-1">
               <span className="system-md-regular">{t('theme.light', { ns: 'common' })}</span>
             </div>
             {theme === 'light' && (
               <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-                <RiCheckLine className="h-4 w-4 text-text-accent" />
+                <span className="i-ri-check-line h-4 w-4 text-text-accent" data-testid="light-icon" />
               </div>
             )}
           </button>
@@ -74,13 +68,13 @@ export default function ThemeSelector() {
             className="flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover"
             onClick={() => handleThemeChange('dark')}
           >
-            <RiMoonLine className="h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-moon-line h-4 w-4 text-text-tertiary" />
             <div className="flex grow items-center justify-start px-1">
               <span className="system-md-regular">{t('theme.dark', { ns: 'common' })}</span>
             </div>
             {theme === 'dark' && (
               <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-                <RiCheckLine className="h-4 w-4 text-text-accent" />
+                <span className="i-ri-check-line h-4 w-4 text-text-accent" data-testid="dark-icon" />
               </div>
             )}
           </button>
@@ -89,13 +83,13 @@ export default function ThemeSelector() {
             className="flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover"
             onClick={() => handleThemeChange('system')}
           >
-            <RiComputerLine className="h-4 w-4 text-text-tertiary" />
+            <span className="i-ri-computer-line h-4 w-4 text-text-tertiary" />
             <div className="flex grow items-center justify-start px-1">
               <span className="system-md-regular">{t('theme.auto', { ns: 'common' })}</span>
             </div>
             {theme === 'system' && (
               <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-                <RiCheckLine className="h-4 w-4 text-text-accent" />
+                <span className="i-ri-check-line h-4 w-4 text-text-accent" data-testid="system-icon" />
               </div>
             )}
           </button>
diff --git a/web/app/components/base/theme-switcher.spec.tsx b/web/app/components/base/theme-switcher.spec.tsx
new file mode 100644
index 0000000000..e19fbd3835
--- /dev/null
+++ b/web/app/components/base/theme-switcher.spec.tsx
@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ThemeSwitcher from './theme-switcher'
+
+let mockTheme = 'system'
+const mockSetTheme = vi.fn()
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: mockTheme,
+    setTheme: mockSetTheme,
+  }),
+}))
+
+describe('ThemeSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTheme = 'system'
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<ThemeSwitcher />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render three theme option buttons', () => {
+      render(<ThemeSwitcher />)
+      expect(screen.getByTestId('system-theme-container')).toBeInTheDocument()
+      expect(screen.getByTestId('light-theme-container')).toBeInTheDocument()
+      expect(screen.getByTestId('dark-theme-container')).toBeInTheDocument()
+    })
+
+    it('should render two dividers between options', () => {
+      render(<ThemeSwitcher />)
+      const dividers = screen.getAllByTestId('divider')
+      expect(dividers).toHaveLength(2)
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setTheme with system when system option is clicked', () => {
+      render(<ThemeSwitcher />)
+      fireEvent.click(screen.getByTestId('system-theme-container')) // system is first
+      expect(mockSetTheme).toHaveBeenCalledWith('system')
+    })
+
+    it('should call setTheme with light when light option is clicked', () => {
+      render(<ThemeSwitcher />)
+      fireEvent.click(screen.getByTestId('light-theme-container')) // light is second
+      expect(mockSetTheme).toHaveBeenCalledWith('light')
+    })
+
+    it('should call setTheme with dark when dark option is clicked', () => {
+      render(<ThemeSwitcher />)
+      fireEvent.click(screen.getByTestId('dark-theme-container')) // dark is third
+      expect(mockSetTheme).toHaveBeenCalledWith('dark')
+    })
+  })
+
+  describe('Theme-specific rendering', () => {
+    it('should highlight system option when theme is system', () => {
+      mockTheme = 'system'
+      render(<ThemeSwitcher />)
+      expect(screen.getByTestId('system-theme-container')).toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('light-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('dark-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+    })
+
+    it('should highlight light option when theme is light', () => {
+      mockTheme = 'light'
+      render(<ThemeSwitcher />)
+      expect(screen.getByTestId('light-theme-container')).toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('system-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('dark-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+    })
+
+    it('should highlight dark option when theme is dark', () => {
+      mockTheme = 'dark'
+      render(<ThemeSwitcher />)
+      expect(screen.getByTestId('dark-theme-container')).toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('system-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+      expect(screen.getByTestId('light-theme-container')).not.toHaveClass('bg-components-segmented-control-item-active-bg')
+    })
+
+    it('should show divider between system and light when dark is active', () => {
+      mockTheme = 'dark'
+      render(<ThemeSwitcher />)
+      const dividers = screen.getAllByTestId('divider')
+      expect(dividers[0]).toHaveClass('bg-divider-regular')
+    })
+
+    it('should show divider between light and dark when system is active', () => {
+      mockTheme = 'system'
+      render(<ThemeSwitcher />)
+      const dividers = screen.getAllByTestId('divider')
+      expect(dividers[1]).toHaveClass('bg-divider-regular')
+    })
+
+    it('should have transparent dividers when neither adjacent theme is active', () => {
+      mockTheme = 'light'
+      render(<ThemeSwitcher />)
+      const dividers = screen.getAllByTestId('divider')
+      expect(dividers[0]).not.toHaveClass('bg-divider-regular')
+      expect(dividers[1]).not.toHaveClass('bg-divider-regular')
+    })
+  })
+})
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index d223ff738e..86e24a443c 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -1,9 +1,4 @@
 'use client'
-import {
-  RiComputerLine,
-  RiMoonLine,
-  RiSunLine,
-} from '@remixicon/react'
 import { useTheme } from 'next-themes'
 import { cn } from '@/utils/classnames'
 
@@ -24,33 +19,36 @@ export default function ThemeSwitcher() {
           theme === 'system' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('system')}
+        data-testid="system-theme-container"
       >
         <div className="p-0.5">
-          <RiComputerLine className="h-4 w-4" />
+          <span className="i-ri-computer-line h-4 w-4" />
         </div>
       </div>
-      <div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')}></div>
+      <div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')} data-testid="divider"></div>
       <div
         className={cn(
           'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           theme === 'light' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('light')}
+        data-testid="light-theme-container"
       >
         <div className="p-0.5">
-          <RiSunLine className="h-4 w-4" />
+          <span className="i-ri-sun-line h-4 w-4" />
         </div>
       </div>
-      <div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')}></div>
+      <div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')} data-testid="divider"></div>
       <div
         className={cn(
           'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           theme === 'dark' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('dark')}
+        data-testid="dark-theme-container"
       >
         <div className="p-0.5">
-          <RiMoonLine className="h-4 w-4" />
+          <span className="i-ri-moon-line h-4 w-4" />
         </div>
       </div>
     </div>
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 9f0104333f..b5c02271b9 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1266,14 +1266,6 @@
       "count": 2
     }
   },
-  "app/components/base/alert.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/base/amplitude/AmplitudeProvider.tsx": {
     "react-refresh/only-export-components": {
       "count": 1

From a040b9428d1df1ed78c7d21ab24658436fdec442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E4=BA=86=E7=9D=A1=E5=A4=A7=E8=A7=89?=
 <64798754+stakeswky@users.noreply.github.com>
Date: Tue, 24 Feb 2026 15:31:12 +0800
Subject: [PATCH 15/26] fix: correct type annotations in Langfuse trace
 entities to match SDK (#32498)

Co-authored-by: User <user@example.com>
---
 .../langfuse_trace/entities/langfuse_trace_entity.py | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py b/api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py
index 312c7d3676..76755bf769 100644
--- a/api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py
+++ b/api/core/ops/langfuse_trace/entities/langfuse_trace_entity.py
@@ -129,11 +129,11 @@ class LangfuseSpan(BaseModel):
         default=None,
         description="The id of the user that triggered the execution. Used to provide user-level analytics.",
     )
-    start_time: datetime | str | None = Field(
+    start_time: datetime | None = Field(
         default_factory=datetime.now,
         description="The time at which the span started, defaults to the current time.",
     )
-    end_time: datetime | str | None = Field(
+    end_time: datetime | None = Field(
         default=None,
         description="The time at which the span ended. Automatically set by span.end().",
     )
@@ -146,7 +146,7 @@ class LangfuseSpan(BaseModel):
         description="Additional metadata of the span. Can be any JSON object. Metadata is merged when being updated "
         "via the API.",
     )
-    level: str | None = Field(
+    level: LevelEnum | None = Field(
         default=None,
         description="The level of the span. Can be DEBUG, DEFAULT, WARNING or ERROR. Used for sorting/filtering of "
         "traces with elevated error levels and for highlighting in the UI.",
@@ -222,16 +222,16 @@ class LangfuseGeneration(BaseModel):
         default=None,
         description="Identifier of the generation. Useful for sorting/filtering in the UI.",
     )
-    start_time: datetime | str | None = Field(
+    start_time: datetime | None = Field(
         default_factory=datetime.now,
         description="The time at which the generation started, defaults to the current time.",
     )
-    completion_start_time: datetime | str | None = Field(
+    completion_start_time: datetime | None = Field(
         default=None,
         description="The time at which the completion started (streaming). Set it to get latency analytics broken "
         "down into time until completion started and completion duration.",
     )
-    end_time: datetime | str | None = Field(
+    end_time: datetime | None = Field(
         default=None,
         description="The time at which the generation ended. Automatically set by generation.end().",
     )

From 9819f7d69c660c4870290c230167782c56edeb65 Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 13:46:06 +0530
Subject: [PATCH 16/26] test: add tests for file-upload components (#32373)

Co-authored-by: sahil <sahil@infocusp.com>
---
 .../base/file-uploader/audio-preview.spec.tsx |  69 ++
 .../base/file-uploader/audio-preview.tsx      |   3 +-
 .../base/file-uploader/constants.spec.ts      |  71 ++
 .../file-from-link-or-local/index.spec.tsx    | 173 ++++
 .../file-uploader/file-image-render.spec.tsx  |  67 ++
 .../base/file-uploader/file-input.spec.tsx    | 179 ++++
 .../file-uploader/file-list-in-log.spec.tsx   | 142 +++
 .../file-uploader/file-type-icon.spec.tsx     |  85 ++
 .../file-item.spec.tsx                        | 407 ++++++++
 .../index.spec.tsx                            | 207 +++++
 .../file-image-item.spec.tsx                  | 246 +++++
 .../file-item.spec.tsx                        | 337 +++++++
 .../file-uploader-in-chat-input/file-item.tsx |  20 +-
 .../file-list.spec.tsx                        | 137 +++
 .../index.spec.tsx                            | 101 ++
 .../base/file-uploader/hooks.spec.ts          | 867 ++++++++++++++++++
 .../file-uploader/pdf-highlighter-adapter.tsx |   7 +
 .../base/file-uploader/pdf-preview.spec.tsx   | 142 +++
 .../base/file-uploader/pdf-preview.tsx        |   3 +-
 .../base/file-uploader/store.spec.tsx         | 168 ++++
 .../base/file-uploader/utils.spec.ts          | 292 ++++--
 .../base/file-uploader/video-preview.spec.tsx |  69 ++
 .../base/file-uploader/video-preview.tsx      |   3 +-
 .../base/image-uploader/image-preview.tsx     |   4 +-
 web/eslint-suppressions.json                  |   8 -
 25 files changed, 3680 insertions(+), 127 deletions(-)
 create mode 100644 web/app/components/base/file-uploader/audio-preview.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/constants.spec.ts
 create mode 100644 web/app/components/base/file-uploader/file-from-link-or-local/index.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-image-render.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-input.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list-in-log.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-type-icon.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-attachment/index.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/file-uploader-in-chat-input/index.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/hooks.spec.ts
 create mode 100644 web/app/components/base/file-uploader/pdf-highlighter-adapter.tsx
 create mode 100644 web/app/components/base/file-uploader/pdf-preview.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/store.spec.tsx
 create mode 100644 web/app/components/base/file-uploader/video-preview.spec.tsx

diff --git a/web/app/components/base/file-uploader/audio-preview.spec.tsx b/web/app/components/base/file-uploader/audio-preview.spec.tsx
new file mode 100644
index 0000000000..a2034b202a
--- /dev/null
+++ b/web/app/components/base/file-uploader/audio-preview.spec.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AudioPreview from './audio-preview'
+
+describe('AudioPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render audio element with correct source', () => {
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+
+    const audio = document.querySelector('audio')
+    expect(audio).toBeInTheDocument()
+    expect(audio).toHaveAttribute('title', 'Test Audio')
+  })
+
+  it('should render source element with correct src and type', () => {
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+
+    const source = document.querySelector('source')
+    expect(source).toHaveAttribute('src', 'https://example.com/audio.mp3')
+    expect(source).toHaveAttribute('type', 'audio/mpeg')
+  })
+
+  it('should render close button with icon', () => {
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+
+    const closeIcon = screen.getByTestId('close-btn')
+    expect(closeIcon).toBeInTheDocument()
+  })
+
+  it('should call onCancel when close button is clicked', () => {
+    const onCancel = vi.fn()
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={onCancel} />)
+
+    const closeIcon = screen.getByTestId('close-btn')
+    fireEvent.click(closeIcon.parentElement!)
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should stop propagation when backdrop is clicked', () => {
+    const { baseElement } = render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+
+    const backdrop = baseElement.querySelector('[tabindex="-1"]')
+    const event = new MouseEvent('click', { bubbles: true })
+    const stopPropagation = vi.spyOn(event, 'stopPropagation')
+    backdrop!.dispatchEvent(event)
+
+    expect(stopPropagation).toHaveBeenCalled()
+  })
+
+  it('should call onCancel when Escape key is pressed', () => {
+    const onCancel = vi.fn()
+
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={onCancel} />)
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should render in a portal attached to document.body', () => {
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+
+    const audio = document.querySelector('audio')
+    expect(audio?.closest('[tabindex="-1"]')?.parentElement).toBe(document.body)
+  })
+})
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index e8be22fc9f..53535359e6 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 
@@ -36,7 +35,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
         className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
-        <RiCloseLine className="h-4 w-4 text-gray-500" />
+        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />
       </div>
     </div>,
     document.body,
diff --git a/web/app/components/base/file-uploader/constants.spec.ts b/web/app/components/base/file-uploader/constants.spec.ts
new file mode 100644
index 0000000000..abe44aa842
--- /dev/null
+++ b/web/app/components/base/file-uploader/constants.spec.ts
@@ -0,0 +1,71 @@
+import {
+  AUDIO_SIZE_LIMIT,
+  FILE_SIZE_LIMIT,
+  FILE_URL_REGEX,
+  IMG_SIZE_LIMIT,
+  MAX_FILE_UPLOAD_LIMIT,
+  VIDEO_SIZE_LIMIT,
+} from './constants'
+
+describe('file-uploader constants', () => {
+  describe('size limit constants', () => {
+    it('should set IMG_SIZE_LIMIT to 10 MB', () => {
+      expect(IMG_SIZE_LIMIT).toBe(10 * 1024 * 1024)
+    })
+
+    it('should set FILE_SIZE_LIMIT to 15 MB', () => {
+      expect(FILE_SIZE_LIMIT).toBe(15 * 1024 * 1024)
+    })
+
+    it('should set AUDIO_SIZE_LIMIT to 50 MB', () => {
+      expect(AUDIO_SIZE_LIMIT).toBe(50 * 1024 * 1024)
+    })
+
+    it('should set VIDEO_SIZE_LIMIT to 100 MB', () => {
+      expect(VIDEO_SIZE_LIMIT).toBe(100 * 1024 * 1024)
+    })
+
+    it('should set MAX_FILE_UPLOAD_LIMIT to 10', () => {
+      expect(MAX_FILE_UPLOAD_LIMIT).toBe(10)
+    })
+  })
+
+  describe('FILE_URL_REGEX', () => {
+    it('should match http URLs', () => {
+      expect(FILE_URL_REGEX.test('http://example.com')).toBe(true)
+      expect(FILE_URL_REGEX.test('http://example.com/path/file.txt')).toBe(true)
+    })
+
+    it('should match https URLs', () => {
+      expect(FILE_URL_REGEX.test('https://example.com')).toBe(true)
+      expect(FILE_URL_REGEX.test('https://example.com/path/file.pdf')).toBe(true)
+    })
+
+    it('should match ftp URLs', () => {
+      expect(FILE_URL_REGEX.test('ftp://files.example.com')).toBe(true)
+      expect(FILE_URL_REGEX.test('ftp://files.example.com/data.csv')).toBe(true)
+    })
+
+    it('should reject URLs without a valid protocol', () => {
+      expect(FILE_URL_REGEX.test('example.com')).toBe(false)
+      expect(FILE_URL_REGEX.test('www.example.com')).toBe(false)
+    })
+
+    it('should reject empty strings', () => {
+      expect(FILE_URL_REGEX.test('')).toBe(false)
+    })
+
+    it('should reject unsupported protocols', () => {
+      expect(FILE_URL_REGEX.test('file:///local/path')).toBe(false)
+      expect(FILE_URL_REGEX.test('ssh://host')).toBe(false)
+      expect(FILE_URL_REGEX.test('data:text/plain;base64,abc')).toBe(false)
+    })
+
+    it('should reject partial protocol strings', () => {
+      expect(FILE_URL_REGEX.test('http:')).toBe(false)
+      expect(FILE_URL_REGEX.test('http:/')).toBe(false)
+      expect(FILE_URL_REGEX.test('https:')).toBe(false)
+      expect(FILE_URL_REGEX.test('ftp:')).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.spec.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.spec.tsx
new file mode 100644
index 0000000000..5227b9b2b2
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.spec.tsx
@@ -0,0 +1,173 @@
+import type { FileEntity } from '../types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FileContextProvider } from '../store'
+import FileFromLinkOrLocal from './index'
+
+let mockFiles: FileEntity[] = []
+
+function createStubFile(id: string): FileEntity {
+  return { id, name: `${id}.txt`, size: 0, type: '', progress: 100, transferMethod: 'local_file' as FileEntity['transferMethod'], supportFileType: 'document' }
+}
+
+const mockHandleLoadFileFromLink = vi.fn()
+vi.mock('../hooks', () => ({
+  useFile: () => ({
+    handleLoadFileFromLink: mockHandleLoadFileFromLink,
+  }),
+}))
+
+const createFileConfig = (overrides: Partial<FileUpload> = {}): FileUpload => ({
+  enabled: true,
+  allowed_file_types: ['image'],
+  allowed_file_extensions: [],
+  number_limits: 5,
+  ...overrides,
+} as FileUpload)
+
+function renderAndOpen(props: Partial<React.ComponentProps<typeof FileFromLinkOrLocal>> = {}) {
+  const trigger = props.trigger ?? ((open: boolean) => <button data-testid="trigger">{open ? 'Close' : 'Open'}</button>)
+  const result = render(
+    <FileContextProvider value={mockFiles}>
+      <FileFromLinkOrLocal
+        trigger={trigger}
+        fileConfig={props.fileConfig ?? createFileConfig()}
+        {...props}
+      />
+    </FileContextProvider>,
+  )
+  fireEvent.click(screen.getByTestId('trigger'))
+  return result
+}
+
+describe('FileFromLinkOrLocal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFiles = []
+  })
+
+  it('should render trigger element', () => {
+    const trigger = (open: boolean) => (
+      <button data-testid="trigger">
+        Open
+        {open ? 'close' : 'open'}
+      </button>
+    )
+    render(
+      <FileContextProvider value={mockFiles}>
+        <FileFromLinkOrLocal trigger={trigger} fileConfig={createFileConfig()} />
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByTestId('trigger')).toBeInTheDocument()
+  })
+
+  it('should render URL input when showFromLink is true', () => {
+    renderAndOpen({ showFromLink: true })
+
+    expect(screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/)).toBeInTheDocument()
+  })
+
+  it('should render upload button when showFromLocal is true', () => {
+    renderAndOpen({ showFromLocal: true })
+
+    expect(screen.getByText(/fileUploader\.uploadFromComputer/)).toBeInTheDocument()
+  })
+
+  it('should render OR divider when both link and local are shown', () => {
+    renderAndOpen({ showFromLink: true, showFromLocal: true })
+
+    expect(screen.getByText('OR')).toBeInTheDocument()
+  })
+
+  it('should not render OR divider when only link is shown', () => {
+    renderAndOpen({ showFromLink: true, showFromLocal: false })
+
+    expect(screen.queryByText('OR')).not.toBeInTheDocument()
+  })
+
+  it('should show error when invalid URL is submitted', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const input = screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/)
+    fireEvent.change(input, { target: { value: 'invalid-url' } })
+
+    const okButton = screen.getByText(/operation\.ok/)
+    fireEvent.click(okButton)
+
+    expect(screen.getByText(/fileUploader\.pasteFileLinkInvalid/)).toBeInTheDocument()
+  })
+
+  it('should clear error when input changes', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const input = screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/)
+    fireEvent.change(input, { target: { value: 'invalid-url' } })
+    fireEvent.click(screen.getByText(/operation\.ok/))
+
+    expect(screen.getByText(/fileUploader\.pasteFileLinkInvalid/)).toBeInTheDocument()
+
+    fireEvent.change(input, { target: { value: 'https://example.com' } })
+    expect(screen.queryByText(/fileUploader\.pasteFileLinkInvalid/)).not.toBeInTheDocument()
+  })
+
+  it('should disable ok button when url is empty', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const okButton = screen.getByText(/operation\.ok/)
+    expect(okButton.closest('button')).toBeDisabled()
+  })
+
+  it('should disable inputs when file limit is reached', () => {
+    mockFiles = ['1', '2', '3', '4', '5'].map(createStubFile)
+    renderAndOpen({ fileConfig: createFileConfig({ number_limits: 5 }), showFromLink: true, showFromLocal: true })
+
+    const input = screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/)
+    expect(input).toBeDisabled()
+  })
+
+  it('should not submit when url is empty', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const okButton = screen.getByText(/operation\.ok/)
+    fireEvent.click(okButton)
+
+    expect(screen.queryByText(/fileUploader\.pasteFileLinkInvalid/)).not.toBeInTheDocument()
+  })
+
+  it('should call handleLoadFileFromLink when valid URL is submitted', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const input = screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/)
+    fireEvent.change(input, { target: { value: 'https://example.com/file.pdf' } })
+    fireEvent.click(screen.getByText(/operation\.ok/))
+
+    expect(mockHandleLoadFileFromLink).toHaveBeenCalledWith('https://example.com/file.pdf')
+  })
+
+  it('should clear URL input after successful submission', () => {
+    renderAndOpen({ showFromLink: true })
+
+    const input = screen.getByPlaceholderText(/fileUploader\.pasteFileLinkInputPlaceholder/) as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'https://example.com/file.pdf' } })
+    fireEvent.click(screen.getByText(/operation\.ok/))
+
+    expect(input.value).toBe('')
+  })
+
+  it('should toggle open state when trigger is clicked', () => {
+    const trigger = (open: boolean) => <button data-testid="trigger">{open ? 'Close' : 'Open'}</button>
+    render(
+      <FileContextProvider value={mockFiles}>
+        <FileFromLinkOrLocal trigger={trigger} fileConfig={createFileConfig()} showFromLink />
+      </FileContextProvider>,
+    )
+
+    const triggerButton = screen.getByTestId('trigger')
+    expect(triggerButton).toHaveTextContent('Open')
+
+    fireEvent.click(triggerButton)
+
+    expect(triggerButton).toHaveTextContent('Close')
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-image-render.spec.tsx b/web/app/components/base/file-uploader/file-image-render.spec.tsx
new file mode 100644
index 0000000000..fa85011f5c
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-image-render.spec.tsx
@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import FileImageRender from './file-image-render'
+
+describe('FileImageRender', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render an image with the given URL', () => {
+    render(<FileImageRender imageUrl="https://example.com/image.png" />)
+
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://example.com/image.png')
+  })
+
+  it('should use default alt text when alt is not provided', () => {
+    render(<FileImageRender imageUrl="https://example.com/image.png" />)
+
+    expect(screen.getByAltText('Preview')).toBeInTheDocument()
+  })
+
+  it('should use custom alt text when provided', () => {
+    render(<FileImageRender imageUrl="https://example.com/image.png" alt="Custom alt" />)
+
+    expect(screen.getByAltText('Custom alt')).toBeInTheDocument()
+  })
+
+  it('should apply custom className to container', () => {
+    const { container } = render(
+      <FileImageRender imageUrl="https://example.com/image.png" className="custom-class" />,
+    )
+
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('should call onLoad when image loads', () => {
+    const onLoad = vi.fn()
+    render(<FileImageRender imageUrl="https://example.com/image.png" onLoad={onLoad} />)
+
+    fireEvent.load(screen.getByRole('img'))
+
+    expect(onLoad).toHaveBeenCalled()
+  })
+
+  it('should call onError when image fails to load', () => {
+    const onError = vi.fn()
+    render(<FileImageRender imageUrl="https://example.com/broken.png" onError={onError} />)
+
+    fireEvent.error(screen.getByRole('img'))
+
+    expect(onError).toHaveBeenCalled()
+  })
+
+  it('should add cursor-pointer to image when showDownloadAction is true', () => {
+    render(<FileImageRender imageUrl="https://example.com/image.png" showDownloadAction />)
+
+    const img = screen.getByRole('img')
+    expect(img).toHaveClass('cursor-pointer')
+  })
+
+  it('should not add cursor-pointer when showDownloadAction is false', () => {
+    render(<FileImageRender imageUrl="https://example.com/image.png" />)
+
+    const img = screen.getByRole('img')
+    expect(img).not.toHaveClass('cursor-pointer')
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-input.spec.tsx b/web/app/components/base/file-uploader/file-input.spec.tsx
new file mode 100644
index 0000000000..73c7690e29
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-input.spec.tsx
@@ -0,0 +1,179 @@
+import type { FileEntity } from './types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { fireEvent, render } from '@testing-library/react'
+import FileInput from './file-input'
+import { FileContextProvider } from './store'
+
+const mockHandleLocalFileUpload = vi.fn()
+
+vi.mock('./hooks', () => ({
+  useFile: () => ({
+    handleLocalFileUpload: mockHandleLocalFileUpload,
+  }),
+}))
+
+const createFileConfig = (overrides: Partial<FileUpload> = {}): FileUpload => ({
+  enabled: true,
+  allowed_file_types: ['image'],
+  allowed_file_extensions: [],
+  number_limits: 5,
+  ...overrides,
+} as FileUpload)
+
+function createStubFile(id: string): FileEntity {
+  return { id, name: `${id}.txt`, size: 0, type: '', progress: 100, transferMethod: 'local_file' as FileEntity['transferMethod'], supportFileType: 'document' }
+}
+
+function renderWithProvider(ui: React.ReactElement, fileIds: string[] = []) {
+  return render(
+    <FileContextProvider value={fileIds.map(createStubFile)}>
+      {ui}
+    </FileContextProvider>,
+  )
+}
+
+describe('FileInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render a file input element', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig()} />)
+
+    const input = document.querySelector('input[type="file"]')
+    expect(input).toBeInTheDocument()
+  })
+
+  it('should set accept attribute based on allowed file types', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig({ allowed_file_types: ['image'] })} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.accept).toBe('.JPG,.JPEG,.PNG,.GIF,.WEBP,.SVG')
+  })
+
+  it('should use custom extensions when file type is custom', () => {
+    renderWithProvider(
+      <FileInput fileConfig={createFileConfig({
+        allowed_file_types: ['custom'] as unknown as FileUpload['allowed_file_types'],
+        allowed_file_extensions: ['.csv', '.xlsx'],
+      })}
+      />,
+    )
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.accept).toBe('.csv,.xlsx')
+  })
+
+  it('should allow multiple files when number_limits > 1', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig({ number_limits: 3 })} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.multiple).toBe(true)
+  })
+
+  it('should not allow multiple files when number_limits is 1', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig({ number_limits: 1 })} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.multiple).toBe(false)
+  })
+
+  it('should be disabled when file limit is reached', () => {
+    renderWithProvider(
+      <FileInput fileConfig={createFileConfig({ number_limits: 3 })} />,
+      ['1', '2', '3'],
+    )
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.disabled).toBe(true)
+  })
+
+  it('should not be disabled when file limit is not reached', () => {
+    renderWithProvider(
+      <FileInput fileConfig={createFileConfig({ number_limits: 3 })} />,
+      ['1'],
+    )
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.disabled).toBe(false)
+  })
+
+  it('should call handleLocalFileUpload when files are selected', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig()} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    expect(mockHandleLocalFileUpload).toHaveBeenCalledWith(file)
+  })
+
+  it('should respect number_limits when uploading multiple files', () => {
+    renderWithProvider(
+      <FileInput fileConfig={createFileConfig({ number_limits: 3 })} />,
+      ['1', '2'],
+    )
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    const file1 = new File(['content'], 'test1.jpg', { type: 'image/jpeg' })
+    const file2 = new File(['content'], 'test2.jpg', { type: 'image/jpeg' })
+
+    Object.defineProperty(input, 'files', {
+      value: [file1, file2],
+    })
+    fireEvent.change(input)
+
+    // Only 1 file should be uploaded (2 existing + 1 = 3 = limit)
+    expect(mockHandleLocalFileUpload).toHaveBeenCalledTimes(1)
+    expect(mockHandleLocalFileUpload).toHaveBeenCalledWith(file1)
+  })
+
+  it('should upload first file only when number_limits is not set', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig({ number_limits: undefined })} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    expect(mockHandleLocalFileUpload).toHaveBeenCalledWith(file)
+  })
+
+  it('should not upload when targetFiles is null', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig()} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    fireEvent.change(input, { target: { files: null } })
+
+    expect(mockHandleLocalFileUpload).not.toHaveBeenCalled()
+  })
+
+  it('should handle empty allowed_file_types', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig({ allowed_file_types: undefined })} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.accept).toBe('')
+  })
+
+  it('should handle custom type with undefined allowed_file_extensions', () => {
+    renderWithProvider(
+      <FileInput fileConfig={createFileConfig({
+        allowed_file_types: ['custom'] as unknown as FileUpload['allowed_file_types'],
+        allowed_file_extensions: undefined,
+      })}
+      />,
+    )
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input.accept).toBe('')
+  })
+
+  it('should clear input value on click', () => {
+    renderWithProvider(<FileInput fileConfig={createFileConfig()} />)
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    Object.defineProperty(input, 'value', { writable: true, value: 'some-file' })
+    fireEvent.click(input)
+
+    expect(input.value).toBe('')
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-list-in-log.spec.tsx b/web/app/components/base/file-uploader/file-list-in-log.spec.tsx
new file mode 100644
index 0000000000..0c1dff8759
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list-in-log.spec.tsx
@@ -0,0 +1,142 @@
+import type { FileEntity } from './types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import FileListInLog from './file-list-in-log'
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: `file-${Math.random()}`,
+  name: 'test.txt',
+  size: 1024,
+  type: 'text/plain',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  ...overrides,
+})
+
+describe('FileListInLog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return null when fileList is empty', () => {
+    const { container } = render(<FileListInLog fileList={[]} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render collapsed view by default', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    render(<FileListInLog fileList={fileList} />)
+
+    expect(screen.getByText(/runDetail\.fileListDetail/)).toBeInTheDocument()
+  })
+
+  it('should render expanded view when isExpanded is true', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    render(<FileListInLog fileList={fileList} isExpanded />)
+
+    expect(screen.getByText(/runDetail\.fileListLabel/)).toBeInTheDocument()
+    expect(screen.getByText('files')).toBeInTheDocument()
+  })
+
+  it('should toggle between collapsed and expanded on click', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    render(<FileListInLog fileList={fileList} />)
+
+    expect(screen.getByText(/runDetail\.fileListDetail/)).toBeInTheDocument()
+
+    const detailLink = screen.getByText(/runDetail\.fileListDetail/)
+    fireEvent.click(detailLink.parentElement!)
+
+    expect(screen.getByText(/runDetail\.fileListLabel/)).toBeInTheDocument()
+  })
+
+  it('should render image files with an img element in collapsed view', () => {
+    const fileList = [{
+      varName: 'files',
+      list: [createFile({
+        name: 'photo.png',
+        supportFileType: 'image',
+        url: 'https://example.com/photo.png',
+      })],
+    }]
+    render(<FileListInLog fileList={fileList} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.png')
+  })
+
+  it('should render non-image files with an SVG icon in collapsed view', () => {
+    const fileList = [{
+      varName: 'files',
+      list: [createFile({
+        name: 'doc.pdf',
+        supportFileType: 'document',
+      })],
+    }]
+    render(<FileListInLog fileList={fileList} />)
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+  })
+
+  it('should render file details in expanded view', () => {
+    const file = createFile({ name: 'report.txt' })
+    const fileList = [{ varName: 'files', list: [file] }]
+    render(<FileListInLog fileList={fileList} isExpanded />)
+
+    expect(screen.getByText('report.txt')).toBeInTheDocument()
+  })
+
+  it('should render multiple var groups in expanded view', () => {
+    const fileList = [
+      { varName: 'images', list: [createFile({ name: 'a.jpg' })] },
+      { varName: 'documents', list: [createFile({ name: 'b.pdf' })] },
+    ]
+    render(<FileListInLog fileList={fileList} isExpanded />)
+
+    expect(screen.getByText('images')).toBeInTheDocument()
+    expect(screen.getByText('documents')).toBeInTheDocument()
+  })
+
+  it('should apply noBorder class when noBorder is true', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    const { container } = render(<FileListInLog fileList={fileList} noBorder />)
+
+    expect(container.firstChild).not.toHaveClass('border-t')
+  })
+
+  it('should apply noPadding class when noPadding is true', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    const { container } = render(<FileListInLog fileList={fileList} noPadding />)
+
+    expect(container.firstChild).toHaveClass('!p-0')
+  })
+
+  it('should render image file with empty url when both base64Url and url are undefined', () => {
+    const fileList = [{
+      varName: 'files',
+      list: [createFile({
+        name: 'photo.png',
+        supportFileType: 'image',
+        base64Url: undefined,
+        url: undefined,
+      })],
+    }]
+    render(<FileListInLog fileList={fileList} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+  })
+
+  it('should collapse when label is clicked in expanded view', () => {
+    const fileList = [{ varName: 'files', list: [createFile()] }]
+    render(<FileListInLog fileList={fileList} isExpanded />)
+
+    const label = screen.getByText(/runDetail\.fileListLabel/)
+    fireEvent.click(label)
+
+    expect(screen.getByText(/runDetail\.fileListDetail/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-type-icon.spec.tsx b/web/app/components/base/file-uploader/file-type-icon.spec.tsx
new file mode 100644
index 0000000000..89b42b489d
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-type-icon.spec.tsx
@@ -0,0 +1,85 @@
+import type { FileAppearanceTypeEnum } from './types'
+import { render } from '@testing-library/react'
+import FileTypeIcon from './file-type-icon'
+
+describe('FileTypeIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('icon rendering per file type', () => {
+    const fileTypeToColor: Array<{ type: keyof typeof FileAppearanceTypeEnum, color: string }> = [
+      { type: 'pdf', color: 'text-[#EA3434]' },
+      { type: 'image', color: 'text-[#00B2EA]' },
+      { type: 'video', color: 'text-[#844FDA]' },
+      { type: 'audio', color: 'text-[#FF3093]' },
+      { type: 'document', color: 'text-[#6F8BB5]' },
+      { type: 'code', color: 'text-[#BCC0D1]' },
+      { type: 'markdown', color: 'text-[#309BEC]' },
+      { type: 'custom', color: 'text-[#BCC0D1]' },
+      { type: 'excel', color: 'text-[#01AC49]' },
+      { type: 'word', color: 'text-[#2684FF]' },
+      { type: 'ppt', color: 'text-[#FF650F]' },
+      { type: 'gif', color: 'text-[#00B2EA]' },
+    ]
+
+    it.each(fileTypeToColor)(
+      'should render $type icon with correct color',
+      ({ type, color }) => {
+        const { container } = render(<FileTypeIcon type={type} />)
+
+        const icon = container.querySelector('svg')
+        expect(icon).toBeInTheDocument()
+        expect(icon).toHaveClass(color)
+      },
+    )
+  })
+
+  it('should render document icon when type is unknown', () => {
+    const { container } = render(<FileTypeIcon type={'nonexistent' as unknown as keyof typeof FileAppearanceTypeEnum} />)
+
+    const icon = container.querySelector('svg')
+    expect(icon).toBeInTheDocument()
+    expect(icon).toHaveClass('text-[#6F8BB5]')
+  })
+
+  describe('size variants', () => {
+    const sizeMap: Array<{ size: 'sm' | 'md' | 'lg' | 'xl', expectedClass: string }> = [
+      { size: 'sm', expectedClass: 'size-4' },
+      { size: 'md', expectedClass: 'size-[18px]' },
+      { size: 'lg', expectedClass: 'size-5' },
+      { size: 'xl', expectedClass: 'size-6' },
+    ]
+
+    it.each(sizeMap)(
+      'should apply $expectedClass when size is $size',
+      ({ size, expectedClass }) => {
+        const { container } = render(<FileTypeIcon type="pdf" size={size} />)
+
+        const icon = container.querySelector('svg')
+        expect(icon).toHaveClass(expectedClass)
+      },
+    )
+
+    it('should default to sm size when no size is provided', () => {
+      const { container } = render(<FileTypeIcon type="pdf" />)
+
+      const icon = container.querySelector('svg')
+      expect(icon).toHaveClass('size-4')
+    })
+  })
+
+  it('should apply custom className when provided', () => {
+    const { container } = render(<FileTypeIcon type="pdf" className="extra-class" />)
+
+    const icon = container.querySelector('svg')
+    expect(icon).toHaveClass('extra-class')
+  })
+
+  it('should always include shrink-0 class', () => {
+    const { container } = render(<FileTypeIcon type="document" />)
+
+    const icon = container.querySelector('svg')
+    expect(icon).toHaveClass('shrink-0')
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.spec.tsx
new file mode 100644
index 0000000000..72d4643955
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.spec.tsx
@@ -0,0 +1,407 @@
+import type { FileEntity } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { PreviewMode } from '@/app/components/base/features/types'
+import { TransferMethod } from '@/types/app'
+import FileInAttachmentItem from './file-item'
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+vi.mock('@/utils/format', () => ({
+  formatFileSize: (size: number) => `${size}B`,
+}))
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'document.pdf',
+  size: 2048,
+  type: 'application/pdf',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  uploadedId: 'uploaded-1',
+  url: 'https://example.com/document.pdf',
+  ...overrides,
+})
+
+describe('FileInAttachmentItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render file name and extension', () => {
+    render(<FileInAttachmentItem file={createFile()} />)
+
+    expect(screen.getByText(/document\.pdf/i)).toBeInTheDocument()
+    expect(screen.getByText(/^pdf$/i)).toBeInTheDocument()
+  })
+
+  it('should render file size', () => {
+    render(<FileInAttachmentItem file={createFile({ size: 2048 })} />)
+
+    expect(screen.getByText(/2048B/)).toBeInTheDocument()
+  })
+
+  it('should render FileTypeIcon for non-image files', () => {
+    const { container } = render(<FileInAttachmentItem file={createFile()} />)
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should render FileImageRender for image files', () => {
+    render(
+      <FileInAttachmentItem file={createFile({
+        supportFileType: 'image',
+        base64Url: 'data:image/png;base64,abc',
+      })}
+      />,
+    )
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'data:image/png;base64,abc')
+  })
+
+  it('should render delete button when showDeleteAction is true', () => {
+    render(<FileInAttachmentItem file={createFile()} showDeleteAction />)
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should not render delete button when showDeleteAction is false', () => {
+    render(<FileInAttachmentItem file={createFile()} showDeleteAction={false} />)
+
+    // With showDeleteAction=false, showDownloadAction defaults to true,
+    // so there should be exactly 1 button (the download button)
+    const buttons = screen.getAllByRole('button')
+    expect(buttons).toHaveLength(1)
+  })
+
+  it('should call onRemove when delete button is clicked', () => {
+    const onRemove = vi.fn()
+    // Disable download to isolate the delete button
+    render(<FileInAttachmentItem file={createFile()} showDeleteAction showDownloadAction={false} onRemove={onRemove} />)
+
+    const deleteBtn = screen.getByRole('button')
+    fireEvent.click(deleteBtn)
+
+    expect(onRemove).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should render download button when showDownloadAction is true', () => {
+    render(<FileInAttachmentItem file={createFile()} showDownloadAction />)
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should render progress circle when file is uploading', () => {
+    const { container } = render(<FileInAttachmentItem file={createFile({ progress: 50, uploadedId: undefined })} />)
+
+    // ProgressCircle renders an SVG with a <circle> and <path> element
+    const svg = container.querySelector('svg')
+    expect(svg).toBeInTheDocument()
+    const circle = container.querySelector('circle')
+    expect(circle).toBeInTheDocument()
+  })
+
+  it('should render replay icon when upload failed', () => {
+    const { container } = render(<FileInAttachmentItem file={createFile({ progress: -1 })} />)
+
+    // ReplayLine renders an SVG with data-icon="ReplayLine"
+    const replayIcon = container.querySelector('[data-icon="ReplayLine"]')
+    expect(replayIcon).toBeInTheDocument()
+  })
+
+  it('should call onReUpload when replay icon is clicked', () => {
+    const onReUpload = vi.fn()
+    const { container } = render(<FileInAttachmentItem file={createFile({ progress: -1 })} onReUpload={onReUpload} />)
+
+    const replayIcon = container.querySelector('[data-icon="ReplayLine"]')
+    const replayBtn = replayIcon!.closest('button')
+    fireEvent.click(replayBtn!)
+
+    expect(onReUpload).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should indicate error state when progress is -1', () => {
+    const { container } = render(<FileInAttachmentItem file={createFile({ progress: -1 })} />)
+
+    // Error state is confirmed by the presence of the replay icon
+    const replayIcon = container.querySelector('[data-icon="ReplayLine"]')
+    expect(replayIcon).toBeInTheDocument()
+  })
+
+  it('should render eye icon for previewable image files', () => {
+    render(
+      <FileInAttachmentItem
+        file={createFile({
+          supportFileType: 'image',
+          url: 'https://example.com/img.png',
+        })}
+        canPreview
+      />,
+    )
+
+    // canPreview + image renders an extra button for the eye icon
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('should show image preview when eye icon is clicked', () => {
+    render(
+      <FileInAttachmentItem
+        file={createFile({
+          supportFileType: 'image',
+          url: 'https://example.com/img.png',
+        })}
+        canPreview
+      />,
+    )
+
+    // The eye button is rendered before the download button for image files
+    const buttons = screen.getAllByRole('button')
+    // Click the eye button (the first action button for image preview)
+    fireEvent.click(buttons[0])
+
+    // ImagePreview renders a portal with an img element
+    const previewImages = document.querySelectorAll('img')
+    // There should be at least 2 images: the file thumbnail + the preview
+    expect(previewImages.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('should close image preview when close is clicked', () => {
+    render(
+      <FileInAttachmentItem
+        file={createFile({
+          supportFileType: 'image',
+          url: 'https://example.com/img.png',
+        })}
+        canPreview
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    fireEvent.click(buttons[0])
+
+    // ImagePreview renders via createPortal with class "image-preview-container"
+    const previewContainer = document.querySelector('.image-preview-container')!
+    expect(previewContainer).toBeInTheDocument()
+
+    // Close button is the last clickable div with an SVG in the preview container
+    const closeIcon = screen.getByTestId('image-preview-close-button')
+    fireEvent.click(closeIcon.parentElement!)
+
+    // Preview should be removed
+    expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
+  })
+
+  it('should call downloadUrl when download button is clicked', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    render(<FileInAttachmentItem file={createFile()} showDownloadAction />)
+
+    // Download button is the only action button when showDeleteAction is not set
+    const downloadBtn = screen.getByRole('button')
+    fireEvent.click(downloadBtn)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      fileName: expect.stringMatching(/document\.pdf/i),
+    }))
+  })
+
+  it('should open new page when previewMode is NewPage and clicked', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: 'https://example.com/doc.pdf' })}
+        canPreview
+        previewMode={PreviewMode.NewPage}
+      />,
+    )
+
+    // Click the file name text to trigger the row click handler
+    fireEvent.click(screen.getByText(/document\.pdf/i))
+
+    expect(windowOpen).toHaveBeenCalledWith('https://example.com/doc.pdf', '_blank')
+    windowOpen.mockRestore()
+  })
+
+  it('should fallback to base64Url when url is empty for NewPage preview', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: undefined, base64Url: 'data:image/png;base64,abc' })}
+        canPreview
+        previewMode={PreviewMode.NewPage}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/document\.pdf/i))
+
+    expect(windowOpen).toHaveBeenCalledWith('data:image/png;base64,abc', '_blank')
+    windowOpen.mockRestore()
+  })
+
+  it('should open empty string when both url and base64Url are empty for NewPage preview', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: undefined, base64Url: undefined })}
+        canPreview
+        previewMode={PreviewMode.NewPage}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/document\.pdf/i))
+
+    expect(windowOpen).toHaveBeenCalledWith('', '_blank')
+    windowOpen.mockRestore()
+  })
+
+  it('should not open new page when previewMode is not NewPage', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
+    render(
+      <FileInAttachmentItem
+        file={createFile()}
+        canPreview
+        previewMode={PreviewMode.CurrentPage}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/document\.pdf/i))
+
+    expect(windowOpen).not.toHaveBeenCalled()
+    windowOpen.mockRestore()
+  })
+
+  it('should use url for image render fallback when base64Url is empty', () => {
+    render(
+      <FileInAttachmentItem file={createFile({
+        supportFileType: 'image',
+        base64Url: undefined,
+        url: 'https://example.com/img.png',
+      })}
+      />,
+    )
+
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://example.com/img.png')
+  })
+
+  it('should render image element even when both urls are empty', () => {
+    render(
+      <FileInAttachmentItem file={createFile({
+        supportFileType: 'image',
+        base64Url: undefined,
+        url: undefined,
+      })}
+      />,
+    )
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+  })
+
+  it('should not render eye icon when canPreview is false for image files', () => {
+    render(
+      <FileInAttachmentItem
+        file={createFile({
+          supportFileType: 'image',
+          url: 'https://example.com/img.png',
+        })}
+        canPreview={false}
+      />,
+    )
+
+    // Without canPreview, only the download button should render
+    const buttons = screen.getAllByRole('button')
+    expect(buttons).toHaveLength(1)
+  })
+
+  it('should download using base64Url when url is not available', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: undefined, base64Url: 'data:application/pdf;base64,abc' })}
+        showDownloadAction
+      />,
+    )
+
+    const downloadBtn = screen.getByRole('button')
+    fireEvent.click(downloadBtn)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: 'data:application/pdf;base64,abc',
+    }))
+  })
+
+  it('should not render file size when size is 0', () => {
+    render(<FileInAttachmentItem file={createFile({ size: 0 })} />)
+
+    expect(screen.queryByText(/0B/)).not.toBeInTheDocument()
+  })
+
+  it('should not render extension when ext is empty', () => {
+    render(<FileInAttachmentItem file={createFile({ name: 'noext' })} />)
+
+    // The file name should still show
+    expect(screen.getByText(/noext/)).toBeInTheDocument()
+  })
+
+  it('should show image preview with empty url when url is undefined', () => {
+    render(
+      <FileInAttachmentItem
+        file={createFile({
+          supportFileType: 'image',
+          url: undefined,
+          base64Url: undefined,
+        })}
+        canPreview
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    // Click the eye preview button
+    fireEvent.click(buttons[0])
+
+    // setImagePreviewUrl(url || '') = setImagePreviewUrl('')
+    // Empty string is falsy, so preview should NOT render
+    expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
+  })
+
+  it('should download with empty url when both url and base64Url are undefined', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: undefined, base64Url: undefined })}
+        showDownloadAction
+      />,
+    )
+
+    const downloadBtn = screen.getByRole('button')
+    fireEvent.click(downloadBtn)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: '',
+    }))
+  })
+
+  it('should call downloadUrl with empty url when both url and base64Url are falsy', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    render(
+      <FileInAttachmentItem
+        file={createFile({ url: '', base64Url: '' })}
+        showDownloadAction
+      />,
+    )
+
+    const downloadBtn = screen.getByRole('button')
+    fireEvent.click(downloadBtn)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: '',
+    }))
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.spec.tsx
new file mode 100644
index 0000000000..81946e0d1c
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.spec.tsx
@@ -0,0 +1,207 @@
+import type { FileEntity } from '../types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import FileUploaderInAttachmentWrapper from './index'
+
+const mockHandleRemoveFile = vi.fn()
+const mockHandleReUploadFile = vi.fn()
+vi.mock('../hooks', () => ({
+  useFile: () => ({
+    handleRemoveFile: mockHandleRemoveFile,
+    handleReUploadFile: mockHandleReUploadFile,
+  }),
+}))
+
+vi.mock('@/utils/format', () => ({
+  formatFileSize: (size: number) => `${size}B`,
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+const createFileConfig = (overrides: Partial<FileUpload> = {}): FileUpload => ({
+  enabled: true,
+  allowed_file_types: ['image'],
+  allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+  allowed_file_extensions: [],
+  number_limits: 5,
+  ...overrides,
+} as unknown as FileUpload)
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'test.txt',
+  size: 1024,
+  type: 'text/plain',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  ...overrides,
+})
+
+describe('FileUploaderInAttachmentWrapper', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render without crashing', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+      />,
+    )
+
+    // FileContextProvider wraps children with a Zustand context — verify children render
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
+  })
+
+  it('should render upload buttons when not disabled', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThan(0)
+  })
+
+  it('should not render upload buttons when disabled', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+        isDisabled
+      />,
+    )
+
+    expect(screen.queryByText(/fileUploader\.uploadFromComputer/)).not.toBeInTheDocument()
+  })
+
+  it('should render file items for each file', () => {
+    const files = [
+      createFile({ id: 'f1', name: 'a.txt' }),
+      createFile({ id: 'f2', name: 'b.txt' }),
+    ]
+
+    render(
+      <FileUploaderInAttachmentWrapper
+        value={files}
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+      />,
+    )
+
+    expect(screen.getByText(/a\.txt/i)).toBeInTheDocument()
+    expect(screen.getByText(/b\.txt/i)).toBeInTheDocument()
+  })
+
+  it('should render local upload button for local_file method', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig({
+          allowed_file_upload_methods: [TransferMethod.local_file],
+        } as unknown as Partial<FileUpload>)}
+      />,
+    )
+
+    expect(screen.getByText(/fileUploader\.uploadFromComputer/)).toBeInTheDocument()
+  })
+
+  it('should render link upload option for remote_url method', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig({
+          allowed_file_upload_methods: [TransferMethod.remote_url],
+        } as unknown as Partial<FileUpload>)}
+      />,
+    )
+
+    expect(screen.getByText(/fileUploader\.pasteFileLink/)).toBeInTheDocument()
+  })
+
+  it('should call handleRemoveFile when remove button is clicked', () => {
+    const files = [createFile({ id: 'f1', name: 'a.txt' })]
+
+    render(
+      <FileUploaderInAttachmentWrapper
+        value={files}
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+      />,
+    )
+
+    // Find the file item row, then locate the delete button within it
+    const fileNameEl = screen.getByText(/a\.txt/i)
+    const fileRow = fileNameEl.closest('[title="a.txt"]')?.parentElement?.parentElement
+    const deleteBtn = fileRow?.querySelector('button:last-of-type')
+    fireEvent.click(deleteBtn!)
+
+    expect(mockHandleRemoveFile).toHaveBeenCalledWith('f1')
+  })
+
+  it('should apply open style on remote_url trigger when portal is open', () => {
+    render(
+      <FileUploaderInAttachmentWrapper
+        onChange={vi.fn()}
+        fileConfig={createFileConfig({
+          allowed_file_upload_methods: [TransferMethod.remote_url],
+        } as unknown as Partial<FileUpload>)}
+      />,
+    )
+
+    // Click the remote_url button to open the portal
+    const linkButton = screen.getByText(/fileUploader\.pasteFileLink/)
+    fireEvent.click(linkButton)
+
+    // The button should still be in the document
+    expect(linkButton.closest('button')).toBeInTheDocument()
+  })
+
+  it('should disable upload buttons when file limit is reached', () => {
+    const files = [
+      createFile({ id: 'f1' }),
+      createFile({ id: 'f2' }),
+      createFile({ id: 'f3' }),
+      createFile({ id: 'f4' }),
+      createFile({ id: 'f5' }),
+    ]
+
+    render(
+      <FileUploaderInAttachmentWrapper
+        value={files}
+        onChange={vi.fn()}
+        fileConfig={createFileConfig({ number_limits: 5 })}
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    const disabledButtons = buttons.filter(btn => btn.hasAttribute('disabled'))
+    expect(disabledButtons.length).toBeGreaterThan(0)
+  })
+
+  it('should call handleReUploadFile when reupload button is clicked', () => {
+    const files = [createFile({ id: 'f1', name: 'a.txt', progress: -1 })]
+
+    const { container } = render(
+      <FileUploaderInAttachmentWrapper
+        value={files}
+        onChange={vi.fn()}
+        fileConfig={createFileConfig()}
+      />,
+    )
+
+    // ReplayLine is inside ActionButton (a <button>) with data-icon attribute
+    const replayIcon = container.querySelector('svg[data-icon="ReplayLine"]')
+    const replayBtn = replayIcon!.closest('button')
+    fireEvent.click(replayBtn!)
+
+    expect(mockHandleReUploadFile).toHaveBeenCalledWith('f1')
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.spec.tsx
new file mode 100644
index 0000000000..e30c6c886c
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.spec.tsx
@@ -0,0 +1,246 @@
+import type { FileEntity } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import FileImageItem from './file-image-item'
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'photo.png',
+  size: 4096,
+  type: 'image/png',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'image',
+  uploadedId: 'uploaded-1',
+  base64Url: 'data:image/png;base64,abc',
+  url: 'https://example.com/photo.png',
+  ...overrides,
+})
+
+describe('FileImageItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render an image with the base64 URL', () => {
+    render(<FileImageItem file={createFile()} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'data:image/png;base64,abc')
+  })
+
+  it('should use url when base64Url is not available', () => {
+    render(<FileImageItem file={createFile({ base64Url: undefined })} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.png')
+  })
+
+  it('should render delete button when showDeleteAction is true', () => {
+    render(<FileImageItem file={createFile()} showDeleteAction />)
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should call onRemove when delete button is clicked', () => {
+    const onRemove = vi.fn()
+    render(<FileImageItem file={createFile()} showDeleteAction onRemove={onRemove} />)
+
+    const buttons = screen.getAllByRole('button')
+    fireEvent.click(buttons[0])
+
+    expect(onRemove).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should render progress circle when file is uploading', () => {
+    const { container } = render(
+      <FileImageItem file={createFile({ progress: 50, uploadedId: undefined })} />,
+    )
+
+    const svgs = container.querySelectorAll('svg')
+    const progressSvg = Array.from(svgs).find(svg => svg.querySelector('circle'))
+    expect(progressSvg).toBeInTheDocument()
+  })
+
+  it('should render replay icon when upload failed', () => {
+    const { container } = render(<FileImageItem file={createFile({ progress: -1 })} />)
+
+    // ReplayLine renders as an SVG icon with data-icon attribute
+    const replaySvg = container.querySelector('svg[data-icon="ReplayLine"]')
+    expect(replaySvg).toBeInTheDocument()
+  })
+
+  it('should call onReUpload when replay icon is clicked', () => {
+    const onReUpload = vi.fn()
+    const { container } = render(
+      <FileImageItem file={createFile({ progress: -1 })} onReUpload={onReUpload} />,
+    )
+
+    const replaySvg = container.querySelector('svg[data-icon="ReplayLine"]')
+    fireEvent.click(replaySvg!)
+
+    expect(onReUpload).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should show image preview when clicked and canPreview is true', () => {
+    render(<FileImageItem file={createFile()} canPreview />)
+
+    // Click the wrapper div (parent of the img element)
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+
+    // ImagePreview renders via createPortal with class "image-preview-container", not role="dialog"
+    expect(document.querySelector('.image-preview-container')).toBeInTheDocument()
+  })
+
+  it('should not show image preview when canPreview is false', () => {
+    render(<FileImageItem file={createFile()} canPreview={false} />)
+
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+
+    expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
+  })
+
+  it('should close image preview when close is clicked', () => {
+    render(<FileImageItem file={createFile()} canPreview />)
+
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+    // ImagePreview renders via createPortal with class "image-preview-container"
+    const previewContainer = document.querySelector('.image-preview-container')!
+    expect(previewContainer).toBeInTheDocument()
+
+    // Close button is the last clickable div with an SVG in the preview container
+    const closeIcon = screen.getByTestId('image-preview-close-button')
+    fireEvent.click(closeIcon.parentElement!)
+
+    expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
+  })
+
+  it('should render download overlay when showDownloadAction is true', () => {
+    const { container } = render(<FileImageItem file={createFile()} showDownloadAction />)
+
+    // The download icon SVG should be present
+    const svgs = container.querySelectorAll('svg')
+    expect(svgs.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should call downloadUrl when download button is clicked', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    const { container } = render(<FileImageItem file={createFile()} showDownloadAction />)
+
+    // Find the RiDownloadLine SVG (it doesn't have data-icon attribute, unlike ReplayLine)
+    const svgs = container.querySelectorAll('svg')
+    const downloadSvg = Array.from(svgs).find(
+      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
+    )
+    fireEvent.click(downloadSvg!.parentElement!)
+
+    expect(downloadUrl).toHaveBeenCalled()
+  })
+
+  it('should not render delete button when showDeleteAction is false', () => {
+    render(<FileImageItem file={createFile()} />)
+
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
+  })
+
+  it('should use url when both base64Url and url fallback for image render', () => {
+    render(<FileImageItem file={createFile({ base64Url: undefined, url: 'https://example.com/img.png' })} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://example.com/img.png')
+  })
+
+  it('should render image element even when both base64Url and url are undefined', () => {
+    render(<FileImageItem file={createFile({ base64Url: undefined, url: undefined })} />)
+
+    const img = screen.getByRole('img')
+    expect(img).toBeInTheDocument()
+  })
+
+  it('should use url with attachment param for download_url when url is available', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    const file = createFile({ url: 'https://example.com/photo.png' })
+    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+
+    // The download SVG should be rendered
+    const svgs = container.querySelectorAll('svg')
+    expect(svgs.length).toBeGreaterThanOrEqual(1)
+    const downloadSvg = Array.from(svgs).find(
+      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
+    )
+    fireEvent.click(downloadSvg!.parentElement!)
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: expect.stringContaining('as_attachment=true'),
+    }))
+  })
+
+  it('should use base64Url for download_url when url is not available', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    const file = createFile({ url: undefined, base64Url: 'data:image/png;base64,abc' })
+    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+
+    const svgs = container.querySelectorAll('svg')
+    const downloadSvg = Array.from(svgs).find(
+      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
+    )
+    fireEvent.click(downloadSvg!.parentElement!)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: 'data:image/png;base64,abc',
+    }))
+  })
+
+  it('should set preview url using base64Url when available', () => {
+    render(<FileImageItem file={createFile({ base64Url: 'data:image/png;base64,abc', url: 'https://example.com/photo.png' })} canPreview />)
+
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+
+    expect(document.querySelector('.image-preview-container')).toBeInTheDocument()
+  })
+
+  it('should set preview url using url when base64Url is not available', () => {
+    render(<FileImageItem file={createFile({ base64Url: undefined, url: 'https://example.com/photo.png' })} canPreview />)
+
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+
+    expect(document.querySelector('.image-preview-container')).toBeInTheDocument()
+  })
+
+  it('should set preview url to empty string when both base64Url and url are undefined', () => {
+    render(<FileImageItem file={createFile({ base64Url: undefined, url: undefined })} canPreview />)
+
+    const img = screen.getByRole('img')
+    fireEvent.click(img.parentElement!)
+
+    // Preview won't show because imagePreviewUrl is empty string (falsy)
+    expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
+  })
+
+  it('should call downloadUrl with correct params when download button is clicked', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    const file = createFile({ url: 'https://example.com/photo.png', name: 'photo.png' })
+    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+
+    const svgs = container.querySelectorAll('svg')
+    const downloadSvg = Array.from(svgs).find(
+      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
+    )
+    fireEvent.click(downloadSvg!.parentElement!)
+
+    expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
+      url: expect.stringContaining('as_attachment=true'),
+      fileName: 'photo.png',
+    }))
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.spec.tsx
new file mode 100644
index 0000000000..92ce1a5e9e
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.spec.tsx
@@ -0,0 +1,337 @@
+import type { FileEntity } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import FileItem from './file-item'
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+vi.mock('@/utils/format', () => ({
+  formatFileSize: (size: number) => `${size}B`,
+}))
+
+vi.mock('../dynamic-pdf-preview', () => ({
+  default: ({ url, onCancel }: { url: string, onCancel: () => void }) => (
+    <div data-testid="pdf-preview" data-url={url}>
+      <button data-testid="pdf-close" onClick={onCancel}>Close PDF</button>
+    </div>
+  ),
+}))
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'document.pdf',
+  size: 2048,
+  type: 'application/pdf',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  uploadedId: 'uploaded-1',
+  url: 'https://example.com/document.pdf',
+  ...overrides,
+})
+
+describe('FileItem (chat-input)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render file name', () => {
+    render(<FileItem file={createFile()} />)
+
+    expect(screen.getByText(/document\.pdf/i)).toBeInTheDocument()
+  })
+
+  it('should render file extension and size', () => {
+    const { container } = render(<FileItem file={createFile()} />)
+
+    // Extension and size are rendered as text nodes in the metadata div
+    expect(container.textContent).toContain('pdf')
+    expect(container.textContent).toContain('2048B')
+  })
+
+  it('should render FileTypeIcon', () => {
+    const { container } = render(<FileItem file={createFile()} />)
+
+    const fileTypeIcon = container.querySelector('svg')
+    expect(fileTypeIcon).toBeInTheDocument()
+  })
+
+  it('should render delete button when showDeleteAction is true', () => {
+    render(<FileItem file={createFile()} showDeleteAction />)
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should call onRemove when delete button is clicked', () => {
+    const onRemove = vi.fn()
+    render(<FileItem file={createFile()} showDeleteAction onRemove={onRemove} />)
+    const delete_button = screen.getByTestId('delete-button')
+    fireEvent.click(delete_button)
+    expect(onRemove).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should render progress circle when file is uploading', () => {
+    const { container } = render(
+      <FileItem file={createFile({ progress: 50, uploadedId: undefined })} />,
+    )
+
+    const progressSvg = container.querySelector('svg circle')
+    expect(progressSvg).toBeInTheDocument()
+  })
+
+  it('should render replay icon when upload failed', () => {
+    render(<FileItem file={createFile({ progress: -1 })} />)
+
+    const replayIcon = screen.getByTestId('replay-icon')
+    expect(replayIcon).toBeInTheDocument()
+  })
+
+  it('should call onReUpload when replay icon is clicked', () => {
+    const onReUpload = vi.fn()
+    render(
+      <FileItem file={createFile({ progress: -1 })} onReUpload={onReUpload} />,
+    )
+
+    const replayIcon = screen.getByTestId('replay-icon')
+    fireEvent.click(replayIcon!)
+
+    expect(onReUpload).toHaveBeenCalledWith('file-1')
+  })
+
+  it('should have error styling when upload failed', () => {
+    const { container } = render(<FileItem file={createFile({ progress: -1 })} />)
+    const fileItemContainer = container.firstChild as HTMLElement
+    expect(fileItemContainer).toHaveClass('border-state-destructive-border')
+    expect(fileItemContainer).toHaveClass('bg-state-destructive-hover-alt')
+  })
+
+  it('should show audio preview when audio file name is clicked', async () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'audio.mp3',
+          type: 'audio/mpeg',
+          url: 'https://example.com/audio.mp3',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/audio\.mp3/i))
+
+    const audioElement = document.querySelector('audio')
+    expect(audioElement).toBeInTheDocument()
+  })
+
+  it('should show video preview when video file name is clicked', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'video.mp4',
+          type: 'video/mp4',
+          url: 'https://example.com/video.mp4',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/video\.mp4/i))
+
+    const videoElement = document.querySelector('video')
+    expect(videoElement).toBeInTheDocument()
+  })
+
+  it('should show pdf preview when pdf file name is clicked', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'doc.pdf',
+          type: 'application/pdf',
+          url: 'https://example.com/doc.pdf',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/doc\.pdf/i))
+
+    expect(screen.getByTestId('pdf-preview')).toBeInTheDocument()
+  })
+
+  it('should close audio preview', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'audio.mp3',
+          type: 'audio/mpeg',
+          url: 'https://example.com/audio.mp3',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/audio\.mp3/i))
+    expect(document.querySelector('audio')).toBeInTheDocument()
+
+    const deleteButton = screen.getByTestId('close-btn')
+    fireEvent.click(deleteButton)
+
+    expect(document.querySelector('audio')).not.toBeInTheDocument()
+  })
+
+  it('should render download button when showDownloadAction is true and url exists', () => {
+    render(<FileItem file={createFile()} showDownloadAction />)
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should call downloadUrl when download button is clicked', async () => {
+    const { downloadUrl } = await import('@/utils/download')
+    render(<FileItem file={createFile()} showDownloadAction />)
+
+    const downloadBtn = screen.getByTestId('download-button')
+    fireEvent.click(downloadBtn)
+
+    expect(downloadUrl).toHaveBeenCalled()
+  })
+
+  it('should not render download button when showDownloadAction is false', () => {
+    render(<FileItem file={createFile()} showDownloadAction={false} />)
+
+    const buttons = screen.queryAllByRole('button')
+    expect(buttons).toHaveLength(0)
+  })
+
+  it('should not show preview when canPreview is false', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'audio.mp3',
+          type: 'audio/mpeg',
+        })}
+        canPreview={false}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/audio\.mp3/i))
+
+    expect(document.querySelector('audio')).not.toBeInTheDocument()
+  })
+
+  it('should close video preview', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'video.mp4',
+          type: 'video/mp4',
+          url: 'https://example.com/video.mp4',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/video\.mp4/i))
+    expect(document.querySelector('video')).toBeInTheDocument()
+
+    const closeBtn = screen.getByTestId('video-preview-close-btn')
+    fireEvent.click(closeBtn)
+
+    expect(document.querySelector('video')).not.toBeInTheDocument()
+  })
+
+  it('should close pdf preview', () => {
+    render(
+      <FileItem
+        file={createFile({
+          name: 'doc.pdf',
+          type: 'application/pdf',
+          url: 'https://example.com/doc.pdf',
+        })}
+        canPreview
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/doc\.pdf/i))
+    expect(screen.getByTestId('pdf-preview')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('pdf-close'))
+    expect(screen.queryByTestId('pdf-preview')).not.toBeInTheDocument()
+  })
+
+  it('should use createObjectURL when no url or base64Url but has originalFile', () => {
+    const mockUrl = 'blob:http://localhost/test-blob'
+    const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue(mockUrl)
+
+    const file = createFile({
+      name: 'audio.mp3',
+      type: 'audio/mpeg',
+      url: undefined,
+      base64Url: undefined,
+      originalFile: new File(['content'], 'audio.mp3', { type: 'audio/mpeg' }),
+    })
+    render(<FileItem file={file} canPreview />)
+
+    fireEvent.click(screen.getByText(/audio\.mp3/i))
+
+    expect(document.querySelector('audio')).toBeInTheDocument()
+    expect(createObjectURLSpy).toHaveBeenCalled()
+    createObjectURLSpy.mockRestore()
+  })
+
+  it('should not use createObjectURL when no originalFile and no urls', () => {
+    const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL')
+    const file = createFile({
+      name: 'audio.mp3',
+      type: 'audio/mpeg',
+      url: undefined,
+      base64Url: undefined,
+      originalFile: undefined,
+    })
+    render(<FileItem file={file} canPreview />)
+
+    fireEvent.click(screen.getByText(/audio\.mp3/i))
+    expect(createObjectURLSpy).not.toHaveBeenCalled()
+    createObjectURLSpy.mockRestore()
+    expect(document.querySelector('audio')).not.toBeInTheDocument()
+  })
+
+  it('should not render download button when download_url is falsy', () => {
+    render(
+      <FileItem
+        file={createFile({ url: undefined, base64Url: undefined })}
+        showDownloadAction
+      />,
+    )
+
+    const buttons = screen.queryAllByRole('button')
+    expect(buttons).toHaveLength(0)
+  })
+
+  it('should render download button when base64Url is available as download_url', () => {
+    render(
+      <FileItem
+        file={createFile({ url: undefined, base64Url: 'data:application/pdf;base64,abc' })}
+        showDownloadAction
+      />,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should not render extension separator when ext is empty', () => {
+    render(<FileItem file={createFile({ name: 'noext' })} />)
+
+    expect(screen.getByText(/noext/)).toBeInTheDocument()
+  })
+
+  it('should not render file size when size is 0', () => {
+    render(<FileItem file={createFile({ size: 0 })} />)
+
+    expect(screen.queryByText(/0B/)).not.toBeInTheDocument()
+  })
+})
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 af32f917b9..09f5070f1e 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -1,15 +1,10 @@
 import type { FileEntity } from '../types'
-import {
-  RiCloseLine,
-  RiDownloadLine,
-} from '@remixicon/react'
 import { useState } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
 import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
 import VideoPreview from '@/app/components/base/file-uploader/video-preview'
-import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
@@ -62,20 +57,21 @@ const FileItem = ({
             <Button
               className="absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
               onClick={() => onRemove?.(id)}
+              data-testid="delete-button"
             >
-              <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
+              <span className="i-ri-close-line h-4 w-4 text-components-button-secondary-text" />
             </Button>
           )
         }
         <div
-          className="system-xs-medium mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary"
+          className="mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary system-xs-medium"
           title={name}
           onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
         >
           {name}
         </div>
         <div className="relative flex items-center justify-between">
-          <div className="system-2xs-medium-uppercase flex items-center text-text-tertiary">
+          <div className="flex items-center text-text-tertiary system-2xs-medium-uppercase">
             <FileTypeIcon
               size="sm"
               type={getFileAppearanceType(name, type)}
@@ -102,8 +98,9 @@ const FileItem = ({
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
+                data-testid="download-button"
               >
-                <RiDownloadLine className="h-3.5 w-3.5 text-text-tertiary" />
+                <span className="i-ri-download-line h-3.5 w-3.5 text-text-tertiary" />
               </ActionButton>
             )
           }
@@ -118,10 +115,7 @@ const FileItem = ({
           }
           {
             uploadError && (
-              <ReplayLine
-                className="h-4 w-4 text-text-tertiary"
-                onClick={() => onReUpload?.(id)}
-              />
+              <span className="i-custom-vender-other-replay-line h-4 w-4 cursor-pointer text-text-tertiary" onClick={() => onReUpload?.(id)} data-testid="replay-icon" role="button" tabIndex={0} />
             )
           }
         </div>
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.spec.tsx
new file mode 100644
index 0000000000..cae64eb6cb
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.spec.tsx
@@ -0,0 +1,137 @@
+import type { FileEntity } from '../types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import { FileContextProvider } from '../store'
+import { FileList, FileListInChatInput } from './file-list'
+
+vi.mock('../hooks', () => ({
+  useFile: () => ({
+    handleRemoveFile: vi.fn(),
+    handleReUploadFile: vi.fn(),
+  }),
+}))
+
+vi.mock('@/utils/format', () => ({
+  formatFileSize: (size: number) => `${size}B`,
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+const createFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: `file-${Math.random()}`,
+  name: 'document.pdf',
+  size: 1024,
+  type: 'application/pdf',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  ...overrides,
+})
+
+describe('FileList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render FileImageItem for image files', () => {
+    const files = [createFile({
+      name: 'photo.png',
+      type: 'image/png',
+      supportFileType: 'image',
+      base64Url: 'data:image/png;base64,abc',
+    })]
+    render(<FileList files={files} />)
+
+    expect(screen.getByRole('img')).toBeInTheDocument()
+  })
+
+  it('should render FileItem for non-image files', () => {
+    const files = [createFile({
+      name: 'document.pdf',
+      supportFileType: 'document',
+    })]
+    render(<FileList files={files} />)
+
+    expect(screen.getByText(/document\.pdf/i)).toBeInTheDocument()
+  })
+
+  it('should render both image and non-image files', () => {
+    const files = [
+      createFile({
+        name: 'photo.png',
+        type: 'image/png',
+        supportFileType: 'image',
+        base64Url: 'data:image/png;base64,abc',
+      }),
+      createFile({ name: 'doc.pdf', supportFileType: 'document' }),
+    ]
+    render(<FileList files={files} />)
+
+    expect(screen.getByRole('img')).toBeInTheDocument()
+    expect(screen.getByText(/doc\.pdf/i)).toBeInTheDocument()
+  })
+
+  it('should render empty list when no files', () => {
+    const { container } = render(<FileList files={[]} />)
+
+    expect(container.firstChild).toBeInTheDocument()
+    expect(screen.queryAllByRole('img')).toHaveLength(0)
+  })
+
+  it('should apply custom className', () => {
+    const { container } = render(<FileList files={[]} className="custom-class" />)
+
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('should render multiple files', () => {
+    const files = [
+      createFile({ name: 'a.pdf' }),
+      createFile({ name: 'b.pdf' }),
+      createFile({ name: 'c.pdf' }),
+    ]
+    render(<FileList files={files} />)
+
+    expect(screen.getByText(/a\.pdf/i)).toBeInTheDocument()
+    expect(screen.getByText(/b\.pdf/i)).toBeInTheDocument()
+    expect(screen.getByText(/c\.pdf/i)).toBeInTheDocument()
+  })
+})
+
+describe('FileListInChatInput', () => {
+  let mockStoreFiles: FileEntity[] = []
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockStoreFiles = []
+  })
+
+  it('should render FileList with files from store', () => {
+    mockStoreFiles = [createFile({ name: 'test.pdf' })]
+    const fileConfig = { enabled: true, allowed_file_types: ['document'] } as FileUpload
+
+    render(
+      <FileContextProvider value={mockStoreFiles}>
+        <FileListInChatInput fileConfig={fileConfig} />
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByText(/test\.pdf/i)).toBeInTheDocument()
+  })
+
+  it('should render empty FileList when store has no files', () => {
+    const fileConfig = { enabled: true, allowed_file_types: ['document'] } as FileUpload
+
+    render(
+      <FileContextProvider value={mockStoreFiles}>
+        <FileListInChatInput fileConfig={fileConfig} />
+      </FileContextProvider>,
+    )
+
+    expect(screen.queryAllByRole('img')).toHaveLength(0)
+    expect(screen.queryByText(/\.pdf/i)).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.spec.tsx
new file mode 100644
index 0000000000..0cdde4835d
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.spec.tsx
@@ -0,0 +1,101 @@
+import type { FileUpload } from '@/app/components/base/features/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FileContextProvider } from '../store'
+import FileUploaderInChatInput from './index'
+
+vi.mock('@/types/app', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/types/app')>()
+  return {
+    ...actual,
+    TransferMethod: {
+      local_file: 'local_file',
+      remote_url: 'remote_url',
+    },
+  }
+})
+
+vi.mock('../hooks', () => ({
+  useFile: () => ({
+    handleLoadFileFromLink: vi.fn(),
+  }),
+}))
+
+function renderWithProvider(ui: React.ReactElement) {
+  return render(
+    <FileContextProvider>
+      {ui}
+    </FileContextProvider>,
+  )
+}
+
+const createFileConfig = (overrides: Partial<FileUpload> = {}): FileUpload => ({
+  enabled: true,
+  allowed_file_types: ['image'],
+  allowed_file_upload_methods: ['local_file', 'remote_url'],
+  allowed_file_extensions: [],
+  number_limits: 5,
+  ...overrides,
+} as unknown as FileUpload)
+
+describe('FileUploaderInChatInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render an attachment icon SVG', () => {
+    renderWithProvider(<FileUploaderInChatInput fileConfig={createFileConfig()} />)
+
+    const button = screen.getByRole('button')
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should render FileFromLinkOrLocal when not readonly', () => {
+    renderWithProvider(<FileUploaderInChatInput fileConfig={createFileConfig()} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button).not.toBeDisabled()
+  })
+
+  it('should render only the trigger button when readonly', () => {
+    renderWithProvider(<FileUploaderInChatInput fileConfig={createFileConfig()} readonly />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+  })
+
+  it('should render button with attachment icon for local_file upload method', () => {
+    renderWithProvider(
+      <FileUploaderInChatInput fileConfig={createFileConfig({
+        allowed_file_upload_methods: ['local_file'],
+      } as unknown as Partial<FileUpload>)}
+      />,
+    )
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should render button with attachment icon for remote_url upload method', () => {
+    renderWithProvider(
+      <FileUploaderInChatInput fileConfig={createFileConfig({
+        allowed_file_upload_methods: ['remote_url'],
+      } as unknown as Partial<FileUpload>)}
+      />,
+    )
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should apply open state styling when trigger is activated', () => {
+    renderWithProvider(<FileUploaderInChatInput fileConfig={createFileConfig()} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(button).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/file-uploader/hooks.spec.ts b/web/app/components/base/file-uploader/hooks.spec.ts
new file mode 100644
index 0000000000..5577b87649
--- /dev/null
+++ b/web/app/components/base/file-uploader/hooks.spec.ts
@@ -0,0 +1,867 @@
+import type { FileEntity } from './types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import type { FileUploadConfigResponse } from '@/models/common'
+import { act, renderHook } from '@testing-library/react'
+import { useFile, useFileSizeLimit } from './hooks'
+
+const mockNotify = vi.fn()
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ token: undefined }),
+}))
+
+// Exception: hook requires toast context that isn't available without a provider wrapper
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+const mockSetFiles = vi.fn()
+let mockStoreFiles: FileEntity[] = []
+vi.mock('./store', () => ({
+  useFileStore: () => ({
+    getState: () => ({
+      files: mockStoreFiles,
+      setFiles: mockSetFiles,
+    }),
+  }),
+}))
+
+const mockFileUpload = vi.fn()
+const mockIsAllowedFileExtension = vi.fn().mockReturnValue(true)
+const mockGetSupportFileType = vi.fn().mockReturnValue('document')
+vi.mock('./utils', () => ({
+  fileUpload: (...args: unknown[]) => mockFileUpload(...args),
+  getFileUploadErrorMessage: vi.fn().mockReturnValue('Upload error'),
+  getSupportFileType: (...args: unknown[]) => mockGetSupportFileType(...args),
+  isAllowedFileExtension: (...args: unknown[]) => mockIsAllowedFileExtension(...args),
+}))
+
+const mockUploadRemoteFileInfo = vi.fn()
+vi.mock('@/service/common', () => ({
+  uploadRemoteFileInfo: (...args: unknown[]) => mockUploadRemoteFileInfo(...args),
+}))
+
+vi.mock('uuid', () => ({
+  v4: () => 'mock-uuid',
+}))
+
+describe('useFileSizeLimit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return default limits when no config is provided', () => {
+    const { result } = renderHook(() => useFileSizeLimit())
+
+    expect(result.current.imgSizeLimit).toBe(10 * 1024 * 1024)
+    expect(result.current.docSizeLimit).toBe(15 * 1024 * 1024)
+    expect(result.current.audioSizeLimit).toBe(50 * 1024 * 1024)
+    expect(result.current.videoSizeLimit).toBe(100 * 1024 * 1024)
+    expect(result.current.maxFileUploadLimit).toBe(10)
+  })
+
+  it('should use config values when provided', () => {
+    const config: FileUploadConfigResponse = {
+      image_file_size_limit: 20,
+      file_size_limit: 30,
+      audio_file_size_limit: 100,
+      video_file_size_limit: 200,
+      workflow_file_upload_limit: 20,
+    } as FileUploadConfigResponse
+
+    const { result } = renderHook(() => useFileSizeLimit(config))
+
+    expect(result.current.imgSizeLimit).toBe(20 * 1024 * 1024)
+    expect(result.current.docSizeLimit).toBe(30 * 1024 * 1024)
+    expect(result.current.audioSizeLimit).toBe(100 * 1024 * 1024)
+    expect(result.current.videoSizeLimit).toBe(200 * 1024 * 1024)
+    expect(result.current.maxFileUploadLimit).toBe(20)
+  })
+
+  it('should fall back to defaults when config values are zero', () => {
+    const config = {
+      image_file_size_limit: 0,
+      file_size_limit: 0,
+      audio_file_size_limit: 0,
+      video_file_size_limit: 0,
+      workflow_file_upload_limit: 0,
+    } as FileUploadConfigResponse
+
+    const { result } = renderHook(() => useFileSizeLimit(config))
+
+    expect(result.current.imgSizeLimit).toBe(10 * 1024 * 1024)
+    expect(result.current.docSizeLimit).toBe(15 * 1024 * 1024)
+    expect(result.current.audioSizeLimit).toBe(50 * 1024 * 1024)
+    expect(result.current.videoSizeLimit).toBe(100 * 1024 * 1024)
+    expect(result.current.maxFileUploadLimit).toBe(10)
+  })
+})
+
+describe('useFile', () => {
+  const defaultFileConfig: FileUpload = {
+    enabled: true,
+    allowed_file_types: ['image', 'document'],
+    allowed_file_extensions: [],
+    number_limits: 5,
+  } as FileUpload
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockStoreFiles = []
+    mockIsAllowedFileExtension.mockReturnValue(true)
+    mockGetSupportFileType.mockReturnValue('document')
+  })
+
+  it('should return all file handler functions', () => {
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    expect(result.current.handleAddFile).toBeDefined()
+    expect(result.current.handleUpdateFile).toBeDefined()
+    expect(result.current.handleRemoveFile).toBeDefined()
+    expect(result.current.handleReUploadFile).toBeDefined()
+    expect(result.current.handleLoadFileFromLink).toBeDefined()
+    expect(result.current.handleLoadFileFromLinkSuccess).toBeDefined()
+    expect(result.current.handleLoadFileFromLinkError).toBeDefined()
+    expect(result.current.handleClearFiles).toBeDefined()
+    expect(result.current.handleLocalFileUpload).toBeDefined()
+    expect(result.current.handleClipboardPasteFile).toBeDefined()
+    expect(result.current.handleDragFileEnter).toBeDefined()
+    expect(result.current.handleDragFileOver).toBeDefined()
+    expect(result.current.handleDragFileLeave).toBeDefined()
+    expect(result.current.handleDropFile).toBeDefined()
+    expect(result.current.isDragActive).toBe(false)
+  })
+
+  it('should add a file via handleAddFile', () => {
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    result.current.handleAddFile({
+      id: 'test-id',
+      name: 'test.txt',
+      type: 'text/plain',
+      size: 100,
+      progress: 0,
+      transferMethod: 'local_file',
+      supportFileType: 'document',
+    } as FileEntity)
+    expect(mockSetFiles).toHaveBeenCalled()
+  })
+
+  it('should update a file via handleUpdateFile', () => {
+    mockStoreFiles = [{ id: 'file-1', name: 'a.txt', progress: 0 }] as FileEntity[]
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    result.current.handleUpdateFile({ id: 'file-1', name: 'a.txt', progress: 50 } as FileEntity)
+    expect(mockSetFiles).toHaveBeenCalled()
+  })
+
+  it('should not update file when id is not found', () => {
+    mockStoreFiles = [{ id: 'file-1', name: 'a.txt' }] as FileEntity[]
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    result.current.handleUpdateFile({ id: 'nonexistent' } as FileEntity)
+    expect(mockSetFiles).toHaveBeenCalled()
+  })
+
+  it('should remove a file via handleRemoveFile', () => {
+    mockStoreFiles = [{ id: 'file-1', name: 'a.txt' }] as FileEntity[]
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    result.current.handleRemoveFile('file-1')
+    expect(mockSetFiles).toHaveBeenCalled()
+  })
+
+  it('should clear all files via handleClearFiles', () => {
+    mockStoreFiles = [{ id: 'a' }] as FileEntity[]
+    const { result } = renderHook(() => useFile(defaultFileConfig))
+
+    result.current.handleClearFiles()
+    expect(mockSetFiles).toHaveBeenCalledWith([])
+  })
+
+  describe('handleReUploadFile', () => {
+    it('should re-upload a file and call fileUpload', () => {
+      const originalFile = new File(['content'], 'test.txt', { type: 'text/plain' })
+      mockStoreFiles = [{
+        id: 'file-1',
+        name: 'test.txt',
+        type: 'text/plain',
+        size: 100,
+        progress: -1,
+        transferMethod: 'local_file',
+        supportFileType: 'document',
+        originalFile,
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      result.current.handleReUploadFile('file-1')
+      expect(mockSetFiles).toHaveBeenCalled()
+      expect(mockFileUpload).toHaveBeenCalled()
+    })
+
+    it('should not re-upload when file id is not found', () => {
+      mockStoreFiles = []
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      result.current.handleReUploadFile('nonexistent')
+      expect(mockFileUpload).not.toHaveBeenCalled()
+    })
+
+    it('should handle progress callback during re-upload', () => {
+      const originalFile = new File(['content'], 'test.txt', { type: 'text/plain' })
+      mockStoreFiles = [{
+        id: 'file-1',
+        name: 'test.txt',
+        type: 'text/plain',
+        size: 100,
+        progress: -1,
+        transferMethod: 'local_file',
+        supportFileType: 'document',
+        originalFile,
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleReUploadFile('file-1')
+
+      const uploadCall = mockFileUpload.mock.calls[0][0]
+      uploadCall.onProgressCallback(50)
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should handle success callback during re-upload', () => {
+      const originalFile = new File(['content'], 'test.txt', { type: 'text/plain' })
+      mockStoreFiles = [{
+        id: 'file-1',
+        name: 'test.txt',
+        type: 'text/plain',
+        size: 100,
+        progress: -1,
+        transferMethod: 'local_file',
+        supportFileType: 'document',
+        originalFile,
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleReUploadFile('file-1')
+
+      const uploadCall = mockFileUpload.mock.calls[0][0]
+      uploadCall.onSuccessCallback({ id: 'uploaded-1' })
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should handle error callback during re-upload', () => {
+      const originalFile = new File(['content'], 'test.txt', { type: 'text/plain' })
+      mockStoreFiles = [{
+        id: 'file-1',
+        name: 'test.txt',
+        type: 'text/plain',
+        size: 100,
+        progress: -1,
+        transferMethod: 'local_file',
+        supportFileType: 'document',
+        originalFile,
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleReUploadFile('file-1')
+
+      const uploadCall = mockFileUpload.mock.calls[0][0]
+      uploadCall.onErrorCallback(new Error('fail'))
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+  })
+
+  describe('handleLoadFileFromLink', () => {
+    it('should run startProgressTimer to increment file progress', () => {
+      vi.useFakeTimers()
+      mockUploadRemoteFileInfo.mockReturnValue(new Promise(() => {})) // never resolves
+
+      // Set up a file in the store that has progress 0
+      mockStoreFiles = [{
+        id: 'mock-uuid',
+        name: 'https://example.com/file.txt',
+        type: '',
+        size: 0,
+        progress: 0,
+        transferMethod: 'remote_url',
+        supportFileType: '',
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLoadFileFromLink('https://example.com/file.txt')
+
+      // Advance timer to trigger the interval
+      vi.advanceTimersByTime(200)
+      expect(mockSetFiles).toHaveBeenCalled()
+
+      vi.useRealTimers()
+    })
+
+    it('should add file and call uploadRemoteFileInfo', () => {
+      mockUploadRemoteFileInfo.mockResolvedValue({
+        id: 'remote-1',
+        mime_type: 'text/plain',
+        size: 100,
+        name: 'remote.txt',
+        url: 'https://example.com/remote.txt',
+      })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLoadFileFromLink('https://example.com/file.txt')
+
+      expect(mockSetFiles).toHaveBeenCalled()
+      expect(mockUploadRemoteFileInfo).toHaveBeenCalledWith('https://example.com/file.txt', false)
+    })
+
+    it('should remove file when extension is not allowed', async () => {
+      mockIsAllowedFileExtension.mockReturnValue(false)
+      mockUploadRemoteFileInfo.mockResolvedValue({
+        id: 'remote-1',
+        mime_type: 'text/plain',
+        size: 100,
+        name: 'remote.txt',
+        url: 'https://example.com/remote.txt',
+      })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      await act(async () => {
+        result.current.handleLoadFileFromLink('https://example.com/file.txt')
+        await vi.waitFor(() => expect(mockUploadRemoteFileInfo).toHaveBeenCalled())
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should use empty arrays when allowed_file_types and allowed_file_extensions are undefined', async () => {
+      mockIsAllowedFileExtension.mockReturnValue(false)
+      mockUploadRemoteFileInfo.mockResolvedValue({
+        id: 'remote-1',
+        mime_type: 'text/plain',
+        size: 100,
+        name: 'remote.txt',
+        url: 'https://example.com/remote.txt',
+      })
+
+      const configWithUndefined = {
+        ...defaultFileConfig,
+        allowed_file_types: undefined,
+        allowed_file_extensions: undefined,
+      } as unknown as FileUpload
+
+      const { result } = renderHook(() => useFile(configWithUndefined))
+      await act(async () => {
+        result.current.handleLoadFileFromLink('https://example.com/file.txt')
+        await vi.waitFor(() => expect(mockUploadRemoteFileInfo).toHaveBeenCalled())
+      })
+
+      expect(mockIsAllowedFileExtension).toHaveBeenCalledWith('remote.txt', 'text/plain', [], [])
+    })
+
+    it('should remove file when remote upload fails', async () => {
+      mockUploadRemoteFileInfo.mockRejectedValue(new Error('network error'))
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      await act(async () => {
+        result.current.handleLoadFileFromLink('https://example.com/file.txt')
+        await vi.waitFor(() => expect(mockNotify).toHaveBeenCalled())
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should remove file when size limit is exceeded on remote upload', async () => {
+      mockGetSupportFileType.mockReturnValue('image')
+      mockUploadRemoteFileInfo.mockResolvedValue({
+        id: 'remote-1',
+        mime_type: 'image/png',
+        size: 20 * 1024 * 1024,
+        name: 'large.png',
+        url: 'https://example.com/large.png',
+      })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      await act(async () => {
+        result.current.handleLoadFileFromLink('https://example.com/large.png')
+        await vi.waitFor(() => expect(mockUploadRemoteFileInfo).toHaveBeenCalled())
+      })
+
+      // File should be removed because image exceeds 10MB limit
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should update file on successful remote upload within limits', async () => {
+      mockUploadRemoteFileInfo.mockResolvedValue({
+        id: 'remote-1',
+        mime_type: 'text/plain',
+        size: 100,
+        name: 'remote.txt',
+        url: 'https://example.com/remote.txt',
+      })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      await act(async () => {
+        result.current.handleLoadFileFromLink('https://example.com/remote.txt')
+        await vi.waitFor(() => expect(mockUploadRemoteFileInfo).toHaveBeenCalled())
+      })
+
+      // setFiles should be called: once for add, once for update
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should stop progress timer when file reaches 80 percent', () => {
+      vi.useFakeTimers()
+      mockUploadRemoteFileInfo.mockReturnValue(new Promise(() => {}))
+
+      // Set up a file already at 80% progress
+      mockStoreFiles = [{
+        id: 'mock-uuid',
+        name: 'https://example.com/file.txt',
+        type: '',
+        size: 0,
+        progress: 80,
+        transferMethod: 'remote_url',
+        supportFileType: '',
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLoadFileFromLink('https://example.com/file.txt')
+
+      // At progress 80, the timer should stop (clearTimeout path)
+      vi.advanceTimersByTime(200)
+
+      vi.useRealTimers()
+    })
+
+    it('should stop progress timer when progress is negative', () => {
+      vi.useFakeTimers()
+      mockUploadRemoteFileInfo.mockReturnValue(new Promise(() => {}))
+
+      // Set up a file with negative progress (error state)
+      mockStoreFiles = [{
+        id: 'mock-uuid',
+        name: 'https://example.com/file.txt',
+        type: '',
+        size: 0,
+        progress: -1,
+        transferMethod: 'remote_url',
+        supportFileType: '',
+      }] as FileEntity[]
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLoadFileFromLink('https://example.com/file.txt')
+
+      vi.advanceTimersByTime(200)
+
+      vi.useRealTimers()
+    })
+  })
+
+  describe('handleLocalFileUpload', () => {
+    let capturedListeners: Record<string, (() => void)[]>
+    let mockReaderResult: string | null
+
+    beforeEach(() => {
+      capturedListeners = {}
+      mockReaderResult = 'data:text/plain;base64,Y29udGVudA=='
+
+      class MockFileReader {
+        result: string | null = null
+        addEventListener(event: string, handler: () => void) {
+          if (!capturedListeners[event])
+            capturedListeners[event] = []
+          capturedListeners[event].push(handler)
+        }
+
+        readAsDataURL() {
+          this.result = mockReaderResult
+          capturedListeners.load?.forEach(handler => handler())
+        }
+      }
+      vi.stubGlobal('FileReader', MockFileReader)
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+    })
+
+    it('should upload a local file', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should reject file with unsupported extension', () => {
+      mockIsAllowedFileExtension.mockReturnValue(false)
+      const file = new File(['content'], 'test.xyz', { type: 'application/xyz' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      expect(mockSetFiles).not.toHaveBeenCalled()
+    })
+
+    it('should use empty arrays when allowed_file_types and allowed_file_extensions are undefined', () => {
+      mockIsAllowedFileExtension.mockReturnValue(false)
+      const file = new File(['content'], 'test.xyz', { type: 'application/xyz' })
+
+      const configWithUndefined = {
+        ...defaultFileConfig,
+        allowed_file_types: undefined,
+        allowed_file_extensions: undefined,
+      } as unknown as FileUpload
+
+      const { result } = renderHook(() => useFile(configWithUndefined))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockIsAllowedFileExtension).toHaveBeenCalledWith('test.xyz', 'application/xyz', [], [])
+    })
+
+    it('should reject file when upload is disabled and noNeedToCheckEnable is false', () => {
+      const disabledConfig = { ...defaultFileConfig, enabled: false } as FileUpload
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+
+      const { result } = renderHook(() => useFile(disabledConfig, false))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should reject image file exceeding size limit', () => {
+      mockGetSupportFileType.mockReturnValue('image')
+      const largeFile = new File([new ArrayBuffer(20 * 1024 * 1024)], 'large.png', { type: 'image/png' })
+      Object.defineProperty(largeFile, 'size', { value: 20 * 1024 * 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(largeFile)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should reject audio file exceeding size limit', () => {
+      mockGetSupportFileType.mockReturnValue('audio')
+      const largeFile = new File([], 'large.mp3', { type: 'audio/mpeg' })
+      Object.defineProperty(largeFile, 'size', { value: 60 * 1024 * 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(largeFile)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should reject video file exceeding size limit', () => {
+      mockGetSupportFileType.mockReturnValue('video')
+      const largeFile = new File([], 'large.mp4', { type: 'video/mp4' })
+      Object.defineProperty(largeFile, 'size', { value: 200 * 1024 * 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(largeFile)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should reject document file exceeding size limit', () => {
+      mockGetSupportFileType.mockReturnValue('document')
+      const largeFile = new File([], 'large.pdf', { type: 'application/pdf' })
+      Object.defineProperty(largeFile, 'size', { value: 20 * 1024 * 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(largeFile)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should reject custom file exceeding document size limit', () => {
+      mockGetSupportFileType.mockReturnValue('custom')
+      const largeFile = new File([], 'large.xyz', { type: 'application/octet-stream' })
+      Object.defineProperty(largeFile, 'size', { value: 20 * 1024 * 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(largeFile)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should allow custom file within document size limit', () => {
+      mockGetSupportFileType.mockReturnValue('custom')
+      const file = new File(['content'], 'file.xyz', { type: 'application/octet-stream' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).not.toHaveBeenCalled()
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should allow document file within size limit', () => {
+      mockGetSupportFileType.mockReturnValue('document')
+      const file = new File(['content'], 'small.pdf', { type: 'application/pdf' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).not.toHaveBeenCalled()
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should allow file with unknown type (default case)', () => {
+      mockGetSupportFileType.mockReturnValue('unknown')
+      const file = new File(['content'], 'test.bin', { type: 'application/octet-stream' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      // Should not be rejected - unknown type passes checkSizeLimit
+      expect(mockNotify).not.toHaveBeenCalled()
+    })
+
+    it('should allow image file within size limit', () => {
+      mockGetSupportFileType.mockReturnValue('image')
+      const file = new File(['content'], 'small.png', { type: 'image/png' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).not.toHaveBeenCalled()
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should allow audio file within size limit', () => {
+      mockGetSupportFileType.mockReturnValue('audio')
+      const file = new File(['content'], 'small.mp3', { type: 'audio/mpeg' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).not.toHaveBeenCalled()
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should allow video file within size limit', () => {
+      mockGetSupportFileType.mockReturnValue('video')
+      const file = new File(['content'], 'small.mp4', { type: 'video/mp4' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).not.toHaveBeenCalled()
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should set base64Url for image files during upload', () => {
+      mockGetSupportFileType.mockReturnValue('image')
+      const file = new File(['content'], 'photo.png', { type: 'image/png' })
+      Object.defineProperty(file, 'size', { value: 1024 })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockSetFiles).toHaveBeenCalled()
+      // The file should have been added with base64Url set (for image type)
+      const addedFiles = mockSetFiles.mock.calls[0][0]
+      expect(addedFiles[0].base64Url).toBe('data:text/plain;base64,Y29udGVudA==')
+    })
+
+    it('should set empty base64Url for non-image files during upload', () => {
+      mockGetSupportFileType.mockReturnValue('document')
+      const file = new File(['content'], 'doc.pdf', { type: 'application/pdf' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockSetFiles).toHaveBeenCalled()
+      const addedFiles = mockSetFiles.mock.calls[0][0]
+      expect(addedFiles[0].base64Url).toBe('')
+    })
+
+    it('should call fileUpload with callbacks after FileReader loads', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockFileUpload).toHaveBeenCalled()
+      const uploadCall = mockFileUpload.mock.calls[0][0]
+
+      // Test progress callback
+      uploadCall.onProgressCallback(50)
+      expect(mockSetFiles).toHaveBeenCalled()
+
+      // Test success callback
+      uploadCall.onSuccessCallback({ id: 'uploaded-1' })
+      expect(mockSetFiles).toHaveBeenCalled()
+    })
+
+    it('should handle fileUpload error callback', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      const uploadCall = mockFileUpload.mock.calls[0][0]
+      uploadCall.onErrorCallback(new Error('upload failed'))
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should handle FileReader error event', () => {
+      capturedListeners = {}
+      const errorListeners: (() => void)[] = []
+
+      class ErrorFileReader {
+        result: string | null = null
+        addEventListener(event: string, handler: () => void) {
+          if (event === 'error')
+            errorListeners.push(handler)
+          if (!capturedListeners[event])
+            capturedListeners[event] = []
+          capturedListeners[event].push(handler)
+        }
+
+        readAsDataURL() {
+          // Simulate error instead of load
+          errorListeners.forEach(handler => handler())
+        }
+      }
+      vi.stubGlobal('FileReader', ErrorFileReader)
+
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+      result.current.handleLocalFileUpload(file)
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+  })
+
+  describe('handleClipboardPasteFile', () => {
+    it('should handle file paste from clipboard', () => {
+      const file = new File(['content'], 'pasted.png', { type: 'image/png' })
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = {
+        clipboardData: {
+          files: [file],
+          getData: () => '',
+        },
+        preventDefault: vi.fn(),
+      } as unknown as React.ClipboardEvent<HTMLTextAreaElement>
+
+      result.current.handleClipboardPasteFile(event)
+      expect(event.preventDefault).toHaveBeenCalled()
+    })
+
+    it('should not handle paste when text is present', () => {
+      const file = new File(['content'], 'pasted.png', { type: 'image/png' })
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = {
+        clipboardData: {
+          files: [file],
+          getData: () => 'some text',
+        },
+        preventDefault: vi.fn(),
+      } as unknown as React.ClipboardEvent<HTMLTextAreaElement>
+
+      result.current.handleClipboardPasteFile(event)
+      expect(event.preventDefault).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('drag and drop handlers', () => {
+    it('should set isDragActive on drag enter', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as React.DragEvent<HTMLElement>
+      act(() => {
+        result.current.handleDragFileEnter(event)
+      })
+
+      expect(result.current.isDragActive).toBe(true)
+    })
+
+    it('should call preventDefault on drag over', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as React.DragEvent<HTMLElement>
+      result.current.handleDragFileOver(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+    })
+
+    it('should unset isDragActive on drag leave', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const enterEvent = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as React.DragEvent<HTMLElement>
+      act(() => {
+        result.current.handleDragFileEnter(enterEvent)
+      })
+      expect(result.current.isDragActive).toBe(true)
+
+      const leaveEvent = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as React.DragEvent<HTMLElement>
+      act(() => {
+        result.current.handleDragFileLeave(leaveEvent)
+      })
+      expect(result.current.isDragActive).toBe(false)
+    })
+
+    it('should handle file drop', () => {
+      const file = new File(['content'], 'dropped.txt', { type: 'text/plain' })
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = {
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        dataTransfer: { files: [file] },
+      } as unknown as React.DragEvent<HTMLElement>
+
+      act(() => {
+        result.current.handleDropFile(event)
+      })
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(result.current.isDragActive).toBe(false)
+    })
+
+    it('should not upload when no file is dropped', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      const event = {
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        dataTransfer: { files: [] },
+      } as unknown as React.DragEvent<HTMLElement>
+
+      act(() => {
+        result.current.handleDropFile(event)
+      })
+
+      // No file upload should be triggered
+      expect(mockSetFiles).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('noop handlers', () => {
+    it('should have handleLoadFileFromLinkSuccess as noop', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      expect(() => result.current.handleLoadFileFromLinkSuccess()).not.toThrow()
+    })
+
+    it('should have handleLoadFileFromLinkError as noop', () => {
+      const { result } = renderHook(() => useFile(defaultFileConfig))
+
+      expect(() => result.current.handleLoadFileFromLinkError()).not.toThrow()
+    })
+  })
+})
diff --git a/web/app/components/base/file-uploader/pdf-highlighter-adapter.tsx b/web/app/components/base/file-uploader/pdf-highlighter-adapter.tsx
new file mode 100644
index 0000000000..c2fb780ca8
--- /dev/null
+++ b/web/app/components/base/file-uploader/pdf-highlighter-adapter.tsx
@@ -0,0 +1,7 @@
+import { PdfHighlighter, PdfLoader } from 'react-pdf-highlighter'
+import 'react-pdf-highlighter/dist/style.css'
+
+export {
+  PdfHighlighter,
+  PdfLoader,
+}
diff --git a/web/app/components/base/file-uploader/pdf-preview.spec.tsx b/web/app/components/base/file-uploader/pdf-preview.spec.tsx
new file mode 100644
index 0000000000..df07a592ef
--- /dev/null
+++ b/web/app/components/base/file-uploader/pdf-preview.spec.tsx
@@ -0,0 +1,142 @@
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import PdfPreview from './pdf-preview'
+
+vi.mock('./pdf-highlighter-adapter', () => ({
+  PdfLoader: ({ children, beforeLoad }: { children: (doc: unknown) => ReactNode, beforeLoad: ReactNode }) => (
+    <div data-testid="pdf-loader">
+      {beforeLoad}
+      {children({ numPages: 1 })}
+    </div>
+  ),
+  PdfHighlighter: ({ enableAreaSelection, highlightTransform, scrollRef, onScrollChange, onSelectionFinished }: {
+    enableAreaSelection?: (event: MouseEvent) => boolean
+    highlightTransform?: () => ReactNode
+    scrollRef?: (ref: unknown) => void
+    onScrollChange?: () => void
+    onSelectionFinished?: () => unknown
+  }) => {
+    enableAreaSelection?.(new MouseEvent('click'))
+    highlightTransform?.()
+    scrollRef?.(null)
+    onScrollChange?.()
+    onSelectionFinished?.()
+    return <div data-testid="pdf-highlighter" />
+  },
+}))
+
+describe('PdfPreview', () => {
+  const mockOnCancel = vi.fn()
+
+  const getScaleContainer = () => {
+    const container = document.querySelector('div[style*="transform"]') as HTMLDivElement | null
+    expect(container).toBeInTheDocument()
+    return container!
+  }
+
+  const getControl = (rightClass: 'right-24' | 'right-16' | 'right-6') => {
+    const control = document.querySelector(`div.absolute.${rightClass}.top-6`) as HTMLDivElement | null
+    expect(control).toBeInTheDocument()
+    return control!
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.innerWidth = 1024
+    fireEvent(window, new Event('resize'))
+  })
+
+  it('should render the pdf preview portal with overlay and loading indicator', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    expect(document.querySelector('[tabindex="-1"]')).toBeInTheDocument()
+    expect(screen.getByTestId('pdf-loader')).toBeInTheDocument()
+    expect(screen.getByTestId('pdf-highlighter')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should render zoom in, zoom out, and close icon SVGs', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    const svgs = document.querySelectorAll('svg')
+    expect(svgs.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('should zoom in when zoom in control is clicked', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.click(getControl('right-16'))
+
+    expect(getScaleContainer().getAttribute('style')).toContain('scale(1.2)')
+  })
+
+  it('should zoom out when zoom out control is clicked', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.click(getControl('right-24'))
+
+    expect(getScaleContainer().getAttribute('style')).toMatch(/scale\(0\.8333/)
+  })
+
+  it('should keep non-1 scale when zooming out from a larger scale', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.click(getControl('right-16'))
+    fireEvent.click(getControl('right-16'))
+    fireEvent.click(getControl('right-24'))
+
+    expect(getScaleContainer().getAttribute('style')).toContain('scale(1.2)')
+  })
+
+  it('should reset scale back to 1 when zooming in then out', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.click(getControl('right-16'))
+    fireEvent.click(getControl('right-24'))
+
+    expect(getScaleContainer().getAttribute('style')).toContain('scale(1)')
+  })
+
+  it('should zoom in when ArrowUp key is pressed', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
+
+    expect(getScaleContainer().getAttribute('style')).toContain('scale(1.2)')
+  })
+
+  it('should zoom out when ArrowDown key is pressed', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.keyDown(document, { key: 'ArrowDown', code: 'ArrowDown' })
+
+    expect(getScaleContainer().getAttribute('style')).toMatch(/scale\(0\.8333/)
+  })
+
+  it('should call onCancel when close control is clicked', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.click(getControl('right-6'))
+
+    expect(mockOnCancel).toHaveBeenCalled()
+  })
+
+  it('should call onCancel when Escape key is pressed', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(mockOnCancel).toHaveBeenCalled()
+  })
+
+  it('should render the overlay and stop click propagation', () => {
+    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
+
+    const overlay = document.querySelector('[tabindex="-1"]')
+    expect(overlay).toBeInTheDocument()
+    const event = new MouseEvent('click', { bubbles: true })
+    const stopPropagation = vi.spyOn(event, 'stopPropagation')
+    overlay!.dispatchEvent(event)
+    expect(stopPropagation).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index aab8bcd9d1..32b2528cf8 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -6,11 +6,10 @@ import * as React from 'react'
 import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { PdfHighlighter, PdfLoader } from 'react-pdf-highlighter'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import 'react-pdf-highlighter/dist/style.css'
+import { PdfHighlighter, PdfLoader } from './pdf-highlighter-adapter'
 
 type PdfPreviewProps = {
   url: string
diff --git a/web/app/components/base/file-uploader/store.spec.tsx b/web/app/components/base/file-uploader/store.spec.tsx
new file mode 100644
index 0000000000..96053498d9
--- /dev/null
+++ b/web/app/components/base/file-uploader/store.spec.tsx
@@ -0,0 +1,168 @@
+import type { FileEntity } from './types'
+import { render, renderHook, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import { createFileStore, FileContext, FileContextProvider, useFileStore, useStore } from './store'
+
+const createMockFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'test.txt',
+  size: 1024,
+  type: 'text/plain',
+  progress: 100,
+  transferMethod: TransferMethod.local_file,
+  supportFileType: 'document',
+  ...overrides,
+})
+
+describe('createFileStore', () => {
+  it('should create a store with empty files by default', () => {
+    const store = createFileStore()
+    expect(store.getState().files).toEqual([])
+  })
+
+  it('should create a store with empty array when value is falsy', () => {
+    const store = createFileStore(undefined)
+    expect(store.getState().files).toEqual([])
+  })
+
+  it('should create a store with initial files', () => {
+    const files = [createMockFile()]
+    const store = createFileStore(files)
+    expect(store.getState().files).toEqual(files)
+  })
+
+  it('should spread initial value to create a new array', () => {
+    const files = [createMockFile()]
+    const store = createFileStore(files)
+    expect(store.getState().files).not.toBe(files)
+    expect(store.getState().files).toEqual(files)
+  })
+
+  it('should update files via setFiles', () => {
+    const store = createFileStore()
+    const newFiles = [createMockFile()]
+    store.getState().setFiles(newFiles)
+    expect(store.getState().files).toEqual(newFiles)
+  })
+
+  it('should call onChange when setFiles is called', () => {
+    const onChange = vi.fn()
+    const store = createFileStore([], onChange)
+    const newFiles = [createMockFile()]
+    store.getState().setFiles(newFiles)
+    expect(onChange).toHaveBeenCalledWith(newFiles)
+  })
+
+  it('should not throw when onChange is not provided', () => {
+    const store = createFileStore()
+    expect(() => store.getState().setFiles([])).not.toThrow()
+  })
+})
+
+describe('useStore', () => {
+  it('should return selected state from the store', () => {
+    const files = [createMockFile()]
+    const store = createFileStore(files)
+
+    const { result } = renderHook(() => useStore(s => s.files), {
+      wrapper: ({ children }) => (
+        <FileContext.Provider value={store}>{children}</FileContext.Provider>
+      ),
+    })
+
+    expect(result.current).toEqual(files)
+  })
+
+  it('should throw when used without FileContext.Provider', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    expect(() => {
+      renderHook(() => useStore(s => s.files))
+    }).toThrow('Missing FileContext.Provider in the tree')
+
+    consoleError.mockRestore()
+  })
+})
+
+describe('useFileStore', () => {
+  it('should return the store from context', () => {
+    const store = createFileStore()
+
+    const { result } = renderHook(() => useFileStore(), {
+      wrapper: ({ children }) => (
+        <FileContext.Provider value={store}>{children}</FileContext.Provider>
+      ),
+    })
+
+    expect(result.current).toBe(store)
+  })
+})
+
+describe('FileContextProvider', () => {
+  it('should render children', () => {
+    render(
+      <FileContextProvider>
+        <div data-testid="child">Hello</div>
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+  })
+
+  it('should provide a store to children', () => {
+    const TestChild = () => {
+      const files = useStore(s => s.files)
+      return <div data-testid="files">{files.length}</div>
+    }
+
+    render(
+      <FileContextProvider>
+        <TestChild />
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByTestId('files')).toHaveTextContent('0')
+  })
+
+  it('should initialize store with value prop', () => {
+    const files = [createMockFile()]
+    const TestChild = () => {
+      const storeFiles = useStore(s => s.files)
+      return <div data-testid="files">{storeFiles.length}</div>
+    }
+
+    render(
+      <FileContextProvider value={files}>
+        <TestChild />
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByTestId('files')).toHaveTextContent('1')
+  })
+
+  it('should reuse store on re-render instead of creating a new one', () => {
+    const TestChild = () => {
+      const storeFiles = useStore(s => s.files)
+      return <div data-testid="files">{storeFiles.length}</div>
+    }
+
+    const { rerender } = render(
+      <FileContextProvider>
+        <TestChild />
+      </FileContextProvider>,
+    )
+
+    expect(screen.getByTestId('files')).toHaveTextContent('0')
+
+    // Re-render with new value prop - store should be reused (storeRef.current exists)
+    rerender(
+      <FileContextProvider value={[createMockFile()]}>
+        <TestChild />
+      </FileContextProvider>,
+    )
+
+    // Store was created once on first render, so the value prop change won't create a new store
+    // The files count should still be 0 since storeRef.current is already set
+    expect(screen.getByTestId('files')).toHaveTextContent('0')
+  })
+})
diff --git a/web/app/components/base/file-uploader/utils.spec.ts b/web/app/components/base/file-uploader/utils.spec.ts
index f69b3c27f5..358fc586eb 100644
--- a/web/app/components/base/file-uploader/utils.spec.ts
+++ b/web/app/components/base/file-uploader/utils.spec.ts
@@ -1,4 +1,4 @@
-import mime from 'mime'
+import type { FileEntity } from './types'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { upload } from '@/service/base'
 import { TransferMethod } from '@/types/app'
@@ -11,6 +11,7 @@ import {
   getFileExtension,
   getFileNameFromUrl,
   getFilesInLogs,
+  getFileUploadErrorMessage,
   getProcessedFiles,
   getProcessedFilesFromResponse,
   getSupportFileExtensionList,
@@ -18,23 +19,40 @@ import {
   isAllowedFileExtension,
 } from './utils'
 
-vi.mock('mime', () => ({
-  default: {
-    getAllExtensions: vi.fn(),
-  },
-}))
-
 vi.mock('@/service/base', () => ({
   upload: vi.fn(),
 }))
 
 describe('file-uploader utils', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
+    vi.resetAllMocks()
+  })
+
+  describe('getFileUploadErrorMessage', () => {
+    const createMockT = () => vi.fn().mockImplementation((key: string) => key) as unknown as import('i18next').TFunction
+
+    it('should return forbidden message when error code is forbidden', () => {
+      const error = { response: { code: 'forbidden', message: 'Access denied' } }
+      expect(getFileUploadErrorMessage(error, 'default', createMockT())).toBe('Access denied')
+    })
+
+    it('should return file_extension_blocked translation when error code matches', () => {
+      const error = { response: { code: 'file_extension_blocked' } }
+      expect(getFileUploadErrorMessage(error, 'default', createMockT())).toBe('fileUploader.fileExtensionBlocked')
+    })
+
+    it('should return default message for other errors', () => {
+      const error = { response: { code: 'unknown_error' } }
+      expect(getFileUploadErrorMessage(error, 'Upload failed', createMockT())).toBe('Upload failed')
+    })
+
+    it('should return default message when error has no response', () => {
+      expect(getFileUploadErrorMessage(null, 'Upload failed', createMockT())).toBe('Upload failed')
+    })
   })
 
   describe('fileUpload', () => {
-    it('should handle successful file upload', () => {
+    it('should handle successful file upload', async () => {
       const mockFile = new File(['test'], 'test.txt')
       const mockCallbacks = {
         onProgressCallback: vi.fn(),
@@ -50,32 +68,102 @@ describe('file-uploader utils', () => {
       })
 
       expect(upload).toHaveBeenCalled()
+
+      // Wait for the promise to resolve and call onSuccessCallback
+      await vi.waitFor(() => {
+        expect(mockCallbacks.onSuccessCallback).toHaveBeenCalledWith({ id: '123' })
+      })
+    })
+
+    it('should call onErrorCallback when upload fails', async () => {
+      const mockFile = new File(['test'], 'test.txt')
+      const mockCallbacks = {
+        onProgressCallback: vi.fn(),
+        onSuccessCallback: vi.fn(),
+        onErrorCallback: vi.fn(),
+      }
+
+      const uploadError = new Error('Upload failed')
+      vi.mocked(upload).mockRejectedValue(uploadError)
+
+      fileUpload({
+        file: mockFile,
+        ...mockCallbacks,
+      })
+
+      await vi.waitFor(() => {
+        expect(mockCallbacks.onErrorCallback).toHaveBeenCalledWith(uploadError)
+      })
+    })
+
+    it('should call onProgressCallback when progress event is computable', () => {
+      const mockFile = new File(['test'], 'test.txt')
+      const mockCallbacks = {
+        onProgressCallback: vi.fn(),
+        onSuccessCallback: vi.fn(),
+        onErrorCallback: vi.fn(),
+      }
+
+      vi.mocked(upload).mockImplementation(({ onprogress }) => {
+        // Simulate a progress event
+        if (onprogress)
+          onprogress.call({} as XMLHttpRequest, { lengthComputable: true, loaded: 50, total: 100 } as ProgressEvent)
+
+        return Promise.resolve({ id: '123' })
+      })
+
+      fileUpload({
+        file: mockFile,
+        ...mockCallbacks,
+      })
+
+      expect(mockCallbacks.onProgressCallback).toHaveBeenCalledWith(50)
+    })
+
+    it('should not call onProgressCallback when progress event is not computable', () => {
+      const mockFile = new File(['test'], 'test.txt')
+      const mockCallbacks = {
+        onProgressCallback: vi.fn(),
+        onSuccessCallback: vi.fn(),
+        onErrorCallback: vi.fn(),
+      }
+
+      vi.mocked(upload).mockImplementation(({ onprogress }) => {
+        if (onprogress)
+          onprogress.call({} as XMLHttpRequest, { lengthComputable: false, loaded: 0, total: 0 } as ProgressEvent)
+
+        return Promise.resolve({ id: '123' })
+      })
+
+      fileUpload({
+        file: mockFile,
+        ...mockCallbacks,
+      })
+
+      expect(mockCallbacks.onProgressCallback).not.toHaveBeenCalled()
     })
   })
 
   describe('getFileExtension', () => {
     it('should get extension from mimetype', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['pdf']))
       expect(getFileExtension('file', 'application/pdf')).toBe('pdf')
     })
 
-    it('should get extension from mimetype and file name 1', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['pdf']))
+    it('should get extension from mimetype and file name', () => {
       expect(getFileExtension('file.pdf', 'application/pdf')).toBe('pdf')
     })
 
     it('should get extension from mimetype with multiple ext candidates with filename hint', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['der', 'crt', 'pem']))
       expect(getFileExtension('file.pem', 'application/x-x509-ca-cert')).toBe('pem')
     })
 
     it('should get extension from mimetype with multiple ext candidates without filename hint', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['der', 'crt', 'pem']))
-      expect(getFileExtension('file', 'application/x-x509-ca-cert')).toBe('der')
+      const ext = getFileExtension('file', 'application/x-x509-ca-cert')
+      // mime returns Set(['der', 'crt', 'pem']), first value is used when no filename hint
+      expect(['der', 'crt', 'pem']).toContain(ext)
     })
 
-    it('should get extension from filename if mimetype fails', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(null)
+    it('should get extension from filename when mimetype is empty', () => {
       expect(getFileExtension('file.txt', '')).toBe('txt')
       expect(getFileExtension('file.txt.docx', '')).toBe('docx')
       expect(getFileExtension('file', '')).toBe('')
@@ -84,164 +172,123 @@ describe('file-uploader utils', () => {
     it('should return empty string for remote files', () => {
       expect(getFileExtension('file.txt', '', true)).toBe('')
     })
+
+    it('should fall back to filename extension for unknown mimetype', () => {
+      expect(getFileExtension('file.txt', 'application/unknown')).toBe('txt')
+    })
+
+    it('should return empty string for unknown mimetype without filename extension', () => {
+      expect(getFileExtension('file', 'application/unknown')).toBe('')
+    })
   })
 
   describe('getFileAppearanceType', () => {
     it('should identify gif files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['gif']))
       expect(getFileAppearanceType('image.gif', 'image/gif'))
         .toBe(FileAppearanceTypeEnum.gif)
     })
 
     it('should identify image files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['jpg']))
       expect(getFileAppearanceType('image.jpg', 'image/jpeg'))
         .toBe(FileAppearanceTypeEnum.image)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['jpeg']))
       expect(getFileAppearanceType('image.jpeg', 'image/jpeg'))
         .toBe(FileAppearanceTypeEnum.image)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['png']))
       expect(getFileAppearanceType('image.png', 'image/png'))
         .toBe(FileAppearanceTypeEnum.image)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['webp']))
       expect(getFileAppearanceType('image.webp', 'image/webp'))
         .toBe(FileAppearanceTypeEnum.image)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['svg']))
-      expect(getFileAppearanceType('image.svg', 'image/svgxml'))
+      expect(getFileAppearanceType('image.svg', 'image/svg+xml'))
         .toBe(FileAppearanceTypeEnum.image)
     })
 
     it('should identify video files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mp4']))
       expect(getFileAppearanceType('video.mp4', 'video/mp4'))
         .toBe(FileAppearanceTypeEnum.video)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mov']))
       expect(getFileAppearanceType('video.mov', 'video/quicktime'))
         .toBe(FileAppearanceTypeEnum.video)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mpeg']))
       expect(getFileAppearanceType('video.mpeg', 'video/mpeg'))
         .toBe(FileAppearanceTypeEnum.video)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['webm']))
-      expect(getFileAppearanceType('video.web', 'video/webm'))
+      expect(getFileAppearanceType('video.webm', 'video/webm'))
         .toBe(FileAppearanceTypeEnum.video)
     })
 
     it('should identify audio files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mp3']))
       expect(getFileAppearanceType('audio.mp3', 'audio/mpeg'))
         .toBe(FileAppearanceTypeEnum.audio)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['m4a']))
       expect(getFileAppearanceType('audio.m4a', 'audio/mp4'))
         .toBe(FileAppearanceTypeEnum.audio)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['wav']))
-      expect(getFileAppearanceType('audio.wav', 'audio/vnd.wav'))
+      expect(getFileAppearanceType('audio.wav', 'audio/wav'))
         .toBe(FileAppearanceTypeEnum.audio)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['amr']))
       expect(getFileAppearanceType('audio.amr', 'audio/AMR'))
         .toBe(FileAppearanceTypeEnum.audio)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mpga']))
       expect(getFileAppearanceType('audio.mpga', 'audio/mpeg'))
         .toBe(FileAppearanceTypeEnum.audio)
     })
 
     it('should identify code files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['html']))
       expect(getFileAppearanceType('index.html', 'text/html'))
         .toBe(FileAppearanceTypeEnum.code)
     })
 
     it('should identify PDF files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['pdf']))
       expect(getFileAppearanceType('doc.pdf', 'application/pdf'))
         .toBe(FileAppearanceTypeEnum.pdf)
     })
 
     it('should identify markdown files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['md']))
       expect(getFileAppearanceType('file.md', 'text/markdown'))
         .toBe(FileAppearanceTypeEnum.markdown)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['markdown']))
       expect(getFileAppearanceType('file.markdown', 'text/markdown'))
         .toBe(FileAppearanceTypeEnum.markdown)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['mdx']))
       expect(getFileAppearanceType('file.mdx', 'text/mdx'))
         .toBe(FileAppearanceTypeEnum.markdown)
     })
 
     it('should identify excel files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['xlsx']))
       expect(getFileAppearanceType('doc.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'))
         .toBe(FileAppearanceTypeEnum.excel)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['xls']))
       expect(getFileAppearanceType('doc.xls', 'application/vnd.ms-excel'))
         .toBe(FileAppearanceTypeEnum.excel)
     })
 
     it('should identify word files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['doc']))
       expect(getFileAppearanceType('doc.doc', 'application/msword'))
         .toBe(FileAppearanceTypeEnum.word)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['docx']))
       expect(getFileAppearanceType('doc.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'))
         .toBe(FileAppearanceTypeEnum.word)
     })
 
-    it('should identify word files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['ppt']))
+    it('should identify ppt files', () => {
       expect(getFileAppearanceType('doc.ppt', 'application/vnd.ms-powerpoint'))
         .toBe(FileAppearanceTypeEnum.ppt)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['pptx']))
       expect(getFileAppearanceType('doc.pptx', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'))
         .toBe(FileAppearanceTypeEnum.ppt)
     })
 
     it('should identify document files', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['txt']))
       expect(getFileAppearanceType('file.txt', 'text/plain'))
         .toBe(FileAppearanceTypeEnum.document)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['csv']))
       expect(getFileAppearanceType('file.csv', 'text/csv'))
         .toBe(FileAppearanceTypeEnum.document)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['msg']))
       expect(getFileAppearanceType('file.msg', 'application/vnd.ms-outlook'))
         .toBe(FileAppearanceTypeEnum.document)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['eml']))
       expect(getFileAppearanceType('file.eml', 'message/rfc822'))
         .toBe(FileAppearanceTypeEnum.document)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['xml']))
-      expect(getFileAppearanceType('file.xml', 'application/rssxml'))
+      expect(getFileAppearanceType('file.xml', 'application/xml'))
         .toBe(FileAppearanceTypeEnum.document)
-
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['epub']))
-      expect(getFileAppearanceType('file.epub', 'application/epubzip'))
+      expect(getFileAppearanceType('file.epub', 'application/epub+zip'))
         .toBe(FileAppearanceTypeEnum.document)
     })
 
-    it('should handle null mime extension', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(null)
-      expect(getFileAppearanceType('file.txt', 'text/plain'))
+    it('should fall back to filename extension for unknown mimetype', () => {
+      expect(getFileAppearanceType('file.txt', 'application/unknown'))
         .toBe(FileAppearanceTypeEnum.document)
     })
+
+    it('should return custom type for unrecognized extensions', () => {
+      expect(getFileAppearanceType('file.xyz', 'application/xyz'))
+        .toBe(FileAppearanceTypeEnum.custom)
+    })
   })
 
   describe('getSupportFileType', () => {
@@ -278,25 +325,70 @@ describe('file-uploader utils', () => {
         upload_file_id: '123',
       })
     })
+
+    it('should fallback to empty string when url is missing', () => {
+      const files = [{
+        id: '123',
+        name: 'test.txt',
+        size: 1024,
+        type: 'text/plain',
+        progress: 100,
+        supportFileType: 'document',
+        transferMethod: TransferMethod.local_file,
+        url: undefined,
+        uploadedId: '123',
+      }] as unknown as FileEntity[]
+
+      const result = getProcessedFiles(files)
+      expect(result[0].url).toBe('')
+    })
+
+    it('should fallback to empty string when uploadedId is missing', () => {
+      const files = [{
+        id: '123',
+        name: 'test.txt',
+        size: 1024,
+        type: 'text/plain',
+        progress: 100,
+        supportFileType: 'document',
+        transferMethod: TransferMethod.local_file,
+        url: 'http://example.com',
+        uploadedId: undefined,
+      }] as unknown as FileEntity[]
+
+      const result = getProcessedFiles(files)
+      expect(result[0].upload_file_id).toBe('')
+    })
+
+    it('should filter out files with progress -1', () => {
+      const files = [
+        {
+          id: '1',
+          name: 'good.txt',
+          progress: 100,
+          supportFileType: 'document',
+          transferMethod: TransferMethod.local_file,
+          url: 'http://example.com',
+          uploadedId: '1',
+        },
+        {
+          id: '2',
+          name: 'bad.txt',
+          progress: -1,
+          supportFileType: 'document',
+          transferMethod: TransferMethod.local_file,
+          url: 'http://example.com',
+          uploadedId: '2',
+        },
+      ] as unknown as FileEntity[]
+
+      const result = getProcessedFiles(files)
+      expect(result).toHaveLength(1)
+      expect(result[0].upload_file_id).toBe('1')
+    })
   })
 
   describe('getProcessedFilesFromResponse', () => {
-    beforeEach(() => {
-      vi.mocked(mime.getAllExtensions).mockImplementation((mimeType: string) => {
-        const mimeMap: Record<string, Set<string>> = {
-          'image/jpeg': new Set(['jpg', 'jpeg']),
-          'image/png': new Set(['png']),
-          'image/gif': new Set(['gif']),
-          'video/mp4': new Set(['mp4']),
-          'audio/mp3': new Set(['mp3']),
-          'application/pdf': new Set(['pdf']),
-          'text/plain': new Set(['txt']),
-          'application/json': new Set(['json']),
-        }
-        return mimeMap[mimeType] || new Set()
-      })
-    })
-
     it('should process files correctly without type correction', () => {
       const files = [{
         related_id: '2a38e2ca-1295-415d-a51d-65d4ff9912d9',
@@ -367,7 +459,7 @@ describe('file-uploader utils', () => {
         extension: '.mp3',
         filename: 'audio.mp3',
         size: 1024,
-        mime_type: 'audio/mp3',
+        mime_type: 'audio/mpeg',
         transfer_method: TransferMethod.local_file,
         type: 'document',
         url: 'https://example.com/audio.mp3',
@@ -415,7 +507,7 @@ describe('file-uploader utils', () => {
       expect(result[0].supportFileType).toBe('document')
     })
 
-    it('should NOT correct when filename and MIME type both point to wrong type', () => {
+    it('should NOT correct when filename and MIME type both point to same type', () => {
       const files = [{
         related_id: '123',
         extension: '.jpg',
@@ -540,6 +632,11 @@ describe('file-uploader utils', () => {
       expect(getFileNameFromUrl('http://example.com/path/file.txt'))
         .toBe('file.txt')
     })
+
+    it('should return empty string for URL ending with slash', () => {
+      expect(getFileNameFromUrl('http://example.com/path/'))
+        .toBe('')
+    })
   })
 
   describe('getSupportFileExtensionList', () => {
@@ -599,7 +696,6 @@ describe('file-uploader utils', () => {
 
   describe('isAllowedFileExtension', () => {
     it('should validate allowed file extensions', () => {
-      vi.mocked(mime.getAllExtensions).mockReturnValue(new Set(['pdf']))
       expect(isAllowedFileExtension(
         'test.pdf',
         'application/pdf',
diff --git a/web/app/components/base/file-uploader/video-preview.spec.tsx b/web/app/components/base/file-uploader/video-preview.spec.tsx
new file mode 100644
index 0000000000..2384281c8e
--- /dev/null
+++ b/web/app/components/base/file-uploader/video-preview.spec.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render } from '@testing-library/react'
+import VideoPreview from './video-preview'
+
+describe('VideoPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render video element with correct title', () => {
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+
+    const video = document.querySelector('video')
+    expect(video).toBeInTheDocument()
+    expect(video).toHaveAttribute('title', 'Test Video')
+  })
+
+  it('should render source element with correct src and type', () => {
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+
+    const source = document.querySelector('source')
+    expect(source).toHaveAttribute('src', 'https://example.com/video.mp4')
+    expect(source).toHaveAttribute('type', 'video/mp4')
+  })
+
+  it('should render close button with icon', () => {
+    const { getByTestId } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+
+    const closeIcon = getByTestId('video-preview-close-btn')
+    expect(closeIcon).toBeInTheDocument()
+  })
+
+  it('should call onCancel when close button is clicked', () => {
+    const onCancel = vi.fn()
+    const { getByTestId } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />)
+
+    const closeIcon = getByTestId('video-preview-close-btn')
+    fireEvent.click(closeIcon.parentElement!)
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should stop propagation when backdrop is clicked', () => {
+    const { baseElement } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+
+    const backdrop = baseElement.querySelector('[tabindex="-1"]')
+    const event = new MouseEvent('click', { bubbles: true })
+    const stopPropagation = vi.spyOn(event, 'stopPropagation')
+    backdrop!.dispatchEvent(event)
+
+    expect(stopPropagation).toHaveBeenCalled()
+  })
+
+  it('should call onCancel when Escape key is pressed', () => {
+    const onCancel = vi.fn()
+
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />)
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('should render in a portal attached to document.body', () => {
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+
+    const video = document.querySelector('video')
+    expect(video?.closest('[tabindex="-1"]')?.parentElement).toBe(document.body)
+  })
+})
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index 94d9a94c58..e328f58770 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -35,7 +34,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
-        <RiCloseLine className="h-4 w-4 text-gray-500" />
+        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />
       </div>
     </div>,
     document.body,
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 0641af3d79..cffbde2755 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { RiAddBoxLine, RiCloseLine, RiDownloadCloud2Line, RiFileCopyLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
+import { RiAddBoxLine, RiDownloadCloud2Line, RiFileCopyLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { t } from 'i18next'
 import * as React from 'react'
@@ -256,7 +256,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <RiCloseLine className="h-4 w-4 text-gray-500" />
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />
         </div>
       </Tooltip>
     </div>,
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index b5c02271b9..c1b87efac3 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1953,11 +1953,6 @@
       "count": 1
     }
   },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/file-uploader/hooks.ts": {
     "ts/no-explicit-any": {
       "count": 3
@@ -1969,9 +1964,6 @@
     }
   },
   "app/components/base/file-uploader/utils.spec.ts": {
-    "test/no-identical-title": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }

From 0eaae4f573b0baa4a5e8abddac8364d93fa32cd5 Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 13:52:43 +0530
Subject: [PATCH 17/26] test: added tests for some base components (#32370)

---
 .../base/auto-height-textarea/index.spec.tsx  | 24 ++++-----
 .../base/button/add-button.spec.tsx           |  8 +--
 web/app/components/base/button/add-button.tsx |  2 +-
 .../base/button/sync-button.spec.tsx          | 10 ++--
 .../components/base/carousel/index.spec.tsx   | 23 +++++++--
 web/app/components/base/drawer/index.tsx      | 13 ++++-
 .../base/float-right-container/index.spec.tsx | 51 +++++++++++++++++--
 web/eslint-suppressions.json                  |  6 ---
 8 files changed, 98 insertions(+), 39 deletions(-)

diff --git a/web/app/components/base/auto-height-textarea/index.spec.tsx b/web/app/components/base/auto-height-textarea/index.spec.tsx
index 2eab1ba82e..f6ac0670df 100644
--- a/web/app/components/base/auto-height-textarea/index.spec.tsx
+++ b/web/app/components/base/auto-height-textarea/index.spec.tsx
@@ -1,5 +1,4 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { sleep } from '@/utils'
 import AutoHeightTextarea from './index'
 
@@ -18,8 +17,8 @@ describe('AutoHeightTextarea', () => {
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
-      const textarea = document.querySelector('textarea')
+      const { container } = render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
+      const textarea = container.querySelector('textarea')
       expect(textarea).toBeInTheDocument()
     })
 
@@ -37,26 +36,26 @@ describe('AutoHeightTextarea', () => {
 
   describe('Props', () => {
     it('should apply custom className to textarea', () => {
-      render(<AutoHeightTextarea value="" onChange={vi.fn()} className="custom-class" />)
-      const textarea = document.querySelector('textarea')
+      const { container } = render(<AutoHeightTextarea value="" onChange={vi.fn()} className="custom-class" />)
+      const textarea = container.querySelector('textarea')
       expect(textarea).toHaveClass('custom-class')
     })
 
     it('should apply custom wrapperClassName to wrapper div', () => {
-      render(<AutoHeightTextarea value="" onChange={vi.fn()} wrapperClassName="wrapper-class" />)
-      const wrapper = document.querySelector('div.relative')
+      const { container } = render(<AutoHeightTextarea value="" onChange={vi.fn()} wrapperClassName="wrapper-class" />)
+      const wrapper = container.querySelector('div.relative')
       expect(wrapper).toHaveClass('wrapper-class')
     })
 
     it('should apply minHeight and maxHeight styles to hidden div', () => {
-      render(<AutoHeightTextarea value="" onChange={vi.fn()} minHeight={50} maxHeight={200} />)
-      const hiddenDiv = document.querySelector('div.invisible')
+      const { container } = render(<AutoHeightTextarea value="" onChange={vi.fn()} minHeight={50} maxHeight={200} />)
+      const hiddenDiv = container.querySelector('div.invisible')
       expect(hiddenDiv).toHaveStyle({ minHeight: '50px', maxHeight: '200px' })
     })
 
     it('should use default minHeight and maxHeight when not provided', () => {
-      render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
-      const hiddenDiv = document.querySelector('div.invisible')
+      const { container } = render(<AutoHeightTextarea value="" onChange={vi.fn()} />)
+      const hiddenDiv = container.querySelector('div.invisible')
       expect(hiddenDiv).toHaveStyle({ minHeight: '36px', maxHeight: '96px' })
     })
 
@@ -64,6 +63,7 @@ describe('AutoHeightTextarea', () => {
       const focusSpy = vi.spyOn(HTMLTextAreaElement.prototype, 'focus')
       render(<AutoHeightTextarea value="" onChange={vi.fn()} autoFocus />)
       expect(focusSpy).toHaveBeenCalled()
+      focusSpy.mockRestore()
     })
   })
 
@@ -122,7 +122,7 @@ describe('AutoHeightTextarea', () => {
     it('should handle newlines in value', () => {
       const textWithNewlines = 'line1\nline2\nline3'
       render(<AutoHeightTextarea value={textWithNewlines} onChange={vi.fn()} />)
-      const textarea = document.querySelector('textarea')
+      const textarea = screen.getByRole('textbox')
       expect(textarea).toHaveValue(textWithNewlines)
     })
 
diff --git a/web/app/components/base/button/add-button.spec.tsx b/web/app/components/base/button/add-button.spec.tsx
index 658c032bb7..ad27753211 100644
--- a/web/app/components/base/button/add-button.spec.tsx
+++ b/web/app/components/base/button/add-button.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import AddButton from './add-button'
 
 describe('AddButton', () => {
@@ -9,9 +9,9 @@ describe('AddButton', () => {
     })
 
     it('should render an add icon', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} />)
-      const svg = container.querySelector('span')
-      expect(svg).toBeInTheDocument()
+      render(<AddButton onClick={vi.fn()} />)
+      const iconSpan = screen.getByTestId('add-button').querySelector('span')
+      expect(iconSpan).toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 50a39ffe7c..92f9ae6800 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -13,7 +13,7 @@ const AddButton: FC<Props> = ({
   onClick,
 }) => {
   return (
-    <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
+    <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="add-button">
       <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
     </div>
   )
diff --git a/web/app/components/base/button/sync-button.spec.tsx b/web/app/components/base/button/sync-button.spec.tsx
index eeaf60d46e..8876229c28 100644
--- a/web/app/components/base/button/sync-button.spec.tsx
+++ b/web/app/components/base/button/sync-button.spec.tsx
@@ -13,9 +13,9 @@ describe('SyncButton', () => {
     })
 
     it('should render a refresh icon', () => {
-      const { container } = render(<SyncButton onClick={vi.fn()} />)
-      const svg = container.querySelector('span')
-      expect(svg).toBeInTheDocument()
+      render(<SyncButton onClick={vi.fn()} />)
+      const iconSpan = screen.getByTestId('sync-button').querySelector('span')
+      expect(iconSpan).toBeInTheDocument()
     })
   })
 
@@ -38,7 +38,7 @@ describe('SyncButton', () => {
     it('should call onClick when clicked', () => {
       const onClick = vi.fn()
       render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')!
+      const clickableDiv = screen.getByTestId('sync-button')
       fireEvent.click(clickableDiv)
       expect(onClick).toHaveBeenCalledTimes(1)
     })
@@ -46,7 +46,7 @@ describe('SyncButton', () => {
     it('should call onClick multiple times on repeated clicks', () => {
       const onClick = vi.fn()
       render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')!
+      const clickableDiv = screen.getByTestId('sync-button')
       fireEvent.click(clickableDiv)
       fireEvent.click(clickableDiv)
       fireEvent.click(clickableDiv)
diff --git a/web/app/components/base/carousel/index.spec.tsx b/web/app/components/base/carousel/index.spec.tsx
index 06434a51aa..6bce414ee7 100644
--- a/web/app/components/base/carousel/index.spec.tsx
+++ b/web/app/components/base/carousel/index.spec.tsx
@@ -1,7 +1,6 @@
 import type { Mock } from 'vitest'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import useEmblaCarousel from 'embla-carousel-react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Carousel, useCarousel } from './index'
 
 vi.mock('embla-carousel-react', () => ({
@@ -52,7 +51,9 @@ const createMockEmblaApi = (): MockEmblaApi => ({
 })
 
 const emitEmblaEvent = (event: EmblaEventName, api: MockEmblaApi | undefined = mockApi) => {
-  listeners[event].forEach(callback => callback(api))
+  listeners[event].forEach((callback) => {
+    callback(api)
+  })
 }
 
 const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'horizontal') => {
@@ -60,6 +61,8 @@ const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'ho
     <Carousel orientation={orientation}>
       <Carousel.Content data-testid="carousel-content">
         <Carousel.Item>Slide 1</Carousel.Item>
+        <Carousel.Item>Slide 2</Carousel.Item>
+        <Carousel.Item>Slide 3</Carousel.Item>
       </Carousel.Content>
       <Carousel.Previous>Prev</Carousel.Previous>
       <Carousel.Next>Next</Carousel.Next>
@@ -68,6 +71,13 @@ const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'ho
   )
 }
 
+const mockPlugin = () => ({
+  name: 'mock',
+  options: {},
+  init: vi.fn(),
+  destroy: vi.fn(),
+})
+
 describe('Carousel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -90,22 +100,25 @@ describe('Carousel', () => {
 
       expect(screen.getByRole('region')).toHaveAttribute('aria-roledescription', 'carousel')
       expect(screen.getByTestId('carousel-content')).toHaveClass('flex')
-      expect(screen.getByRole('group')).toHaveAttribute('aria-roledescription', 'slide')
+      screen.getAllByRole('group').forEach((slide) => {
+        expect(slide).toHaveAttribute('aria-roledescription', 'slide')
+      })
     })
   })
 
   // Props should be translated into Embla options and visible layout.
   describe('Props', () => {
     it('should configure embla with horizontal axis when orientation is omitted', () => {
+      const plugin = mockPlugin()
       render(
-        <Carousel opts={{ loop: true }} plugins={['plugin-marker' as unknown as never]}>
+        <Carousel opts={{ loop: true }} plugins={[plugin]}>
           <Carousel.Content />
         </Carousel>,
       )
 
       expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
         { loop: true, axis: 'x' },
-        ['plugin-marker'],
+        [plugin],
       )
     })
 
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index a145f9a64d..ab01a4114d 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -80,7 +80,18 @@ export default function Drawer({
               )}
               {showClose && (
                 <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
-                  <span className="i-heroicons-x-mark h-4 w-4 text-text-tertiary" onClick={onClose} data-testid="close-icon" />
+                  <span
+                    className="i-heroicons-x-mark h-4 w-4 text-text-tertiary"
+                    onClick={onClose}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ')
+                        onClose()
+                    }}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={t('operation.close', { ns: 'common' })}
+                    data-testid="close-icon"
+                  />
                 </DialogTitle>
               )}
             </div>
diff --git a/web/app/components/base/float-right-container/index.spec.tsx b/web/app/components/base/float-right-container/index.spec.tsx
index 51713cc527..4cf87b189c 100644
--- a/web/app/components/base/float-right-container/index.spec.tsx
+++ b/web/app/components/base/float-right-container/index.spec.tsx
@@ -1,5 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import FloatRightContainer from './index'
 
 describe('FloatRightContainer', () => {
@@ -94,7 +94,47 @@ describe('FloatRightContainer', () => {
       const closeIcon = screen.getByTestId('close-icon')
       expect(closeIcon).toBeInTheDocument()
 
-      fireEvent.click(closeIcon!)
+      await userEvent.click(closeIcon)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose when close is done using escape key', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable content</div>
+        </FloatRightContainer>,
+      )
+
+      const closeIcon = screen.getByTestId('close-icon')
+      closeIcon.focus()
+      await userEvent.keyboard('{Enter}')
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose when close is done using space key', async () => {
+      const onClose = vi.fn()
+      render(
+        <FloatRightContainer
+          isMobile={true}
+          isOpen={true}
+          onClose={onClose}
+          showClose={true}
+        >
+          <div>Closable content</div>
+        </FloatRightContainer>,
+      )
+
+      const closeIcon = screen.getByTestId('close-icon')
+      closeIcon.focus()
+      await userEvent.keyboard(' ')
 
       expect(onClose).toHaveBeenCalledTimes(1)
     })
@@ -129,8 +169,9 @@ describe('FloatRightContainer', () => {
           isOpen={true}
           onClose={vi.fn()}
           title="Empty mobile panel"
-          children={undefined}
-        />,
+        >
+          {undefined}
+        </FloatRightContainer>,
       )
 
       expect(await screen.findByRole('dialog')).toBeInTheDocument()
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index c1b87efac3..285cef2018 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1342,12 +1342,6 @@
     },
     "react/no-nested-component-definitions": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/base/button/add-button.stories.tsx": {

From 84533cbfe05138eee8a271e3bf7402b292d0194a Mon Sep 17 00:00:00 2001
From: Tyson Cung <45380903+tysoncung@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:29:17 +0800
Subject: [PATCH 18/26] fix: resolve pyright bad-index errors in parser.py
 (#32507)

---
 api/core/tools/utils/parser.py | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/api/core/tools/utils/parser.py b/api/core/tools/utils/parser.py
index 584975de05..67079665e6 100644
--- a/api/core/tools/utils/parser.py
+++ b/api/core/tools/utils/parser.py
@@ -2,7 +2,7 @@ import re
 from json import dumps as json_dumps
 from json import loads as json_loads
 from json.decoder import JSONDecodeError
-from typing import Any
+from typing import Any, TypedDict
 
 import httpx
 from flask import request
@@ -14,6 +14,12 @@ from core.tools.entities.tool_entities import ApiProviderSchemaType, ToolParamet
 from core.tools.errors import ToolApiSchemaError, ToolNotSupportedError, ToolProviderNotFoundError
 
 
+class _OpenAPIInterface(TypedDict):
+    path: str
+    method: str
+    operation: dict[str, Any]
+
+
 class ApiBasedToolSchemaParser:
     @staticmethod
     def parse_openapi_to_tool_bundle(
@@ -35,17 +41,17 @@ class ApiBasedToolSchemaParser:
             server_url = matched_servers[0] if matched_servers else server_url
 
         # list all interfaces
-        interfaces = []
+        interfaces: list[_OpenAPIInterface] = []
         for path, path_item in openapi["paths"].items():
             methods = ["get", "post", "put", "delete", "patch", "head", "options", "trace"]
             for method in methods:
                 if method in path_item:
                     interfaces.append(
-                        {
-                            "path": path,
-                            "method": method,
-                            "operation": path_item[method],
-                        }
+                        _OpenAPIInterface(
+                            path=path,
+                            method=method,
+                            operation=path_item[method],
+                        )
                     )
 
         # get all parameters

From ad3a195734c93bd3f2aa9f6acf522b376566ceb4 Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Tue, 24 Feb 2026 15:58:12 +0530
Subject: [PATCH 19/26] test(web): increase test coverage for
 model-provider-page folder (#32374)

---
 .../base/button/sync-button.spec.tsx          |   4 -
 .../base/voice-input/index.spec.tsx           |  52 +---
 .../model-provider-page/hooks.spec.ts         | 183 +++++++++-----
 .../model-provider-page/index.spec.tsx        | 199 +++++++++++++++
 .../install-from-marketplace.spec.tsx         | 109 ++++++++
 .../deprecated-model-trigger.spec.tsx         |  61 +++++
 .../model-selector/empty-trigger.spec.tsx     |  13 +
 .../model-selector/feature-icon.spec.tsx      |  50 ++++
 .../model-selector/index.spec.tsx             | 126 ++++++++++
 .../model-selector/model-trigger.spec.tsx     |  91 +++++++
 .../model-selector/popup-item.spec.tsx        | 147 +++++++++++
 .../model-selector/popup.spec.tsx             | 199 +++++++++++++++
 .../provider-icon/index.spec.tsx              |  97 +++++++
 .../system-model-selector/index.spec.tsx      | 160 ++++++++++++
 .../model-provider-page/utils.spec.ts         | 238 ++++++++++++++++++
 15 files changed, 1617 insertions(+), 112 deletions(-)
 create mode 100644 web/app/components/header/account-setting/model-provider-page/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/popup.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-icon/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/utils.spec.ts

diff --git a/web/app/components/base/button/sync-button.spec.tsx b/web/app/components/base/button/sync-button.spec.tsx
index 8876229c28..116aaaa7b0 100644
--- a/web/app/components/base/button/sync-button.spec.tsx
+++ b/web/app/components/base/button/sync-button.spec.tsx
@@ -1,10 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import SyncButton from './sync-button'
 
-vi.mock('ahooks', () => ({
-  useBoolean: () => [false, { setTrue: vi.fn(), setFalse: vi.fn() }],
-}))
-
 describe('SyncButton', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
diff --git a/web/app/components/base/voice-input/index.spec.tsx b/web/app/components/base/voice-input/index.spec.tsx
index 959665cd97..fa32f0425f 100644
--- a/web/app/components/base/voice-input/index.spec.tsx
+++ b/web/app/components/base/voice-input/index.spec.tsx
@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { audioToText } from '@/service/share'
@@ -8,7 +8,6 @@ const { mockState, MockRecorder } = vi.hoisted(() => {
   const state = {
     params: {} as Record<string, string>,
     pathname: '/test',
-    rafCallback: undefined as (() => void) | undefined,
     recorderInstances: [] as unknown[],
     startOverride: null as (() => Promise<void>) | null,
     analyseData: new Uint8Array(1024).fill(150) as Uint8Array,
@@ -55,13 +54,6 @@ vi.mock('./utils', () => ({
   convertToMp3: vi.fn(() => new Blob(['test'], { type: 'audio/mp3' })),
 }))
 
-vi.mock('ahooks', () => ({
-  useRafInterval: vi.fn((fn: () => void) => {
-    mockState.rafCallback = fn
-    return vi.fn()
-  }),
-}))
-
 describe('VoiceInput', () => {
   const onConverted = vi.fn()
   const onCancel = vi.fn()
@@ -70,7 +62,6 @@ describe('VoiceInput', () => {
     vi.clearAllMocks()
     mockState.params = {}
     mockState.pathname = '/test'
-    mockState.rafCallback = undefined
     mockState.recorderInstances = []
     mockState.startOverride = null
 
@@ -101,21 +92,6 @@ describe('VoiceInput', () => {
     expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:00')
   })
 
-  it('should increment timer via useRafInterval callback', async () => {
-    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
-    await screen.findByText('common.voiceInput.speaking')
-
-    act(() => {
-      mockState.rafCallback?.()
-    })
-    expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:01')
-
-    act(() => {
-      mockState.rafCallback?.()
-    })
-    expect(screen.getByTestId('voice-input-timer')).toHaveTextContent('00:02')
-  })
-
   it('should call onCancel when recording start fails', async () => {
     mockState.startOverride = () => Promise.reject(new Error('Permission denied'))
 
@@ -177,32 +153,6 @@ describe('VoiceInput', () => {
     expect(onCancel).toHaveBeenCalled()
   })
 
-  it('should automatically stop recording after 600 seconds', async () => {
-    vi.mocked(audioToText).mockResolvedValueOnce({ text: 'auto stopped' })
-    mockState.params = { token: 'abc' }
-
-    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
-    await screen.findByTestId('voice-input-stop')
-
-    for (let i = 0; i < 600; i++)
-      act(() => { mockState.rafCallback?.() })
-
-    await waitFor(() => {
-      expect(onConverted).toHaveBeenCalledWith('auto stopped')
-    })
-  })
-
-  it('should show red timer text after 500 seconds', async () => {
-    render(<VoiceInput onConverted={onConverted} onCancel={onCancel} />)
-    await screen.findByTestId('voice-input-stop')
-
-    for (let i = 0; i < 501; i++)
-      act(() => { mockState.rafCallback?.() })
-
-    const timer = screen.getByTestId('voice-input-timer')
-    expect(timer.className).toContain('text-[#F04438]')
-  })
-
   it('should draw on canvas with low data values triggering v < 128 clamp', async () => {
     mockState.analyseData = new Uint8Array(1024).fill(50)
 
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 b264324374..bbcc352144 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
@@ -1,8 +1,22 @@
 import type { Mock } from 'vitest'
-import { renderHook } from '@testing-library/react'
+import type {
+  DefaultModelResponse,
+  Model,
+} from './declarations'
+import { act, renderHook } from '@testing-library/react'
 import { useLocale } from '@/context/i18n'
-import { useLanguage } from './hooks'
+import {
+  ConfigurationMethodEnum,
+  ModelTypeEnum,
+} from './declarations'
+import {
+  useLanguage,
+  useModelList,
+  useProviderCredentialsAndLoadBalancing,
+  useSystemDefaultModelAndModelList,
+} from './hooks'
 
+// Mock dependencies
 vi.mock('@tanstack/react-query', () => ({
   useQuery: vi.fn(),
   useQueryClient: vi.fn(() => ({
@@ -10,17 +24,6 @@ vi.mock('@tanstack/react-query', () => ({
   })),
 }))
 
-// mock use-context-selector
-vi.mock('use-context-selector', () => ({
-  useContext: vi.fn(),
-  createContext: () => ({
-    Provider: ({ children }: any) => children,
-    Consumer: ({ children }: any) => children(null),
-  }),
-  useContextSelector: vi.fn(),
-}))
-
-// mock service/common functions
 vi.mock('@/service/common', () => ({
   fetchDefaultModal: vi.fn(),
   fetchModelList: vi.fn(),
@@ -30,63 +33,129 @@ vi.mock('@/service/common', () => ({
 
 vi.mock('@/service/use-common', () => ({
   commonQueryKeys: {
-    modelProviders: ['common', 'model-providers'],
+    modelList: (type: string) => ['model-list', type],
+    modelProviders: ['model-providers'],
+    defaultModel: (type: string) => ['default-model', type],
   },
 }))
 
-// mock context hooks
 vi.mock('@/context/i18n', () => ({
   useLocale: vi.fn(() => 'en-US'),
 }))
 
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: vi.fn(),
-}))
+const { useQuery } = await import('@tanstack/react-query')
+const { fetchModelList, fetchModelProviderCredentials } = await import('@/service/common')
 
-vi.mock('@/context/modal-context', () => ({
-  useModalContextSelector: vi.fn(),
-}))
-
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: vi.fn(),
-}))
-
-// mock plugins
-vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
-  useMarketplacePlugins: vi.fn(),
-}))
-
-vi.mock('@/app/components/plugins/marketplace/utils', () => ({
-  getMarketplacePluginsByCollectionId: vi.fn(),
-}))
-
-vi.mock('./provider-added-card', () => ({
-  default: vi.fn(),
-}))
-
-afterAll(() => {
-  vi.resetModules()
-  vi.clearAllMocks()
-})
-
-describe('useLanguage', () => {
-  it('should replace hyphen with underscore in locale', () => {
-    ;(useLocale as Mock).mockReturnValue('en-US')
-    const { result } = renderHook(() => useLanguage())
-    expect(result.current).toBe('en_US')
+describe('hooks', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
   })
 
-  it('should return locale as is if no hyphen exists', () => {
-    ;(useLocale as Mock).mockReturnValue('enUS')
+  describe('useLanguage', () => {
+    it('should replace hyphen with underscore in locale', () => {
+      ;(useLocale as Mock).mockReturnValue('en-US')
+      const { result } = renderHook(() => useLanguage())
+      expect(result.current).toBe('en_US')
+    })
 
-    const { result } = renderHook(() => useLanguage())
-    expect(result.current).toBe('enUS')
+    it('should return locale as is if no hyphen exists', () => {
+      ;(useLocale as Mock).mockReturnValue('enUS')
+      const { result } = renderHook(() => useLanguage())
+      expect(result.current).toBe('enUS')
+    })
   })
 
-  it('should handle multiple hyphens', () => {
-    ;(useLocale as Mock).mockReturnValue('zh-Hans-CN')
+  describe('useSystemDefaultModelAndModelList', () => {
+    it('should return default model state', () => {
+      const defaultModel = {
+        provider: {
+          provider: 'openai',
+          icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+        },
+        model: 'gpt-3.5',
+        model_type: ModelTypeEnum.textGeneration,
+      } as unknown as DefaultModelResponse
+      const modelList = [{ provider: 'openai', models: [{ model: 'gpt-3.5' }] }] as unknown as Model[]
+      const { result } = renderHook(() => useSystemDefaultModelAndModelList(defaultModel, modelList))
 
-    const { result } = renderHook(() => useLanguage())
-    expect(result.current).toBe('zh_Hans-CN')
+      expect(result.current[0]).toEqual({ model: 'gpt-3.5', provider: 'openai' })
+    })
+
+    it('should update default model state', () => {
+      const defaultModel = {
+        provider: {
+          provider: 'openai',
+          icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+        },
+        model: 'gpt-3.5',
+        model_type: ModelTypeEnum.textGeneration,
+      } as any
+      const modelList = [{ provider: 'openai', models: [{ model: 'gpt-3.5' }] }] as any
+      const { result } = renderHook(() => useSystemDefaultModelAndModelList(defaultModel, modelList))
+
+      const newModel = { model: 'gpt-4', provider: 'openai' }
+      act(() => {
+        result.current[1](newModel)
+      })
+
+      expect(result.current[0]).toEqual(newModel)
+    })
+  })
+
+  describe('useProviderCredentialsAndLoadBalancing', () => {
+    it('should fetch predefined credentials', async () => {
+      (useQuery as Mock).mockReturnValue({
+        data: { credentials: { key: 'value' }, load_balancing: { enabled: true } },
+        isPending: false,
+      })
+
+      const { result } = renderHook(() => useProviderCredentialsAndLoadBalancing(
+        'openai',
+        ConfigurationMethodEnum.predefinedModel,
+        true,
+        undefined,
+        'cred-id',
+      ))
+
+      expect(result.current.credentials).toEqual({ key: 'value' })
+      expect(result.current.loadBalancing).toEqual({ enabled: true })
+      expect(fetchModelProviderCredentials).not.toHaveBeenCalled() // useQuery calls it, but we blocked it with mockReturnValue
+    })
+
+    it('should fetch custom credentials', () => {
+      (useQuery as Mock).mockReturnValue({
+        data: { credentials: { key: 'value' }, load_balancing: { enabled: true } },
+        isPending: false,
+      })
+
+      const { result } = renderHook(() => useProviderCredentialsAndLoadBalancing(
+        'openai',
+        ConfigurationMethodEnum.customizableModel,
+        true,
+        { __model_name: 'gpt-4', __model_type: ModelTypeEnum.textGeneration },
+        'cred-id',
+      ))
+
+      expect(result.current.credentials).toEqual({
+        key: 'value',
+        __model_name: 'gpt-4',
+        __model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+  })
+
+  describe('useModelList', () => {
+    it('should fetch model list', () => {
+      (useQuery as Mock).mockReturnValue({
+        data: { data: [{ model: 'gpt-4' }] },
+        isPending: false,
+        refetch: vi.fn(),
+      })
+
+      const { result } = renderHook(() => useModelList(ModelTypeEnum.textGeneration))
+
+      expect(result.current.data).toEqual([{ model: 'gpt-4' }])
+      expect(fetchModelList).not.toHaveBeenCalled()
+    })
   })
 })
diff --git a/web/app/components/header/account-setting/model-provider-page/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/index.spec.tsx
new file mode 100644
index 0000000000..1f1832628c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/index.spec.tsx
@@ -0,0 +1,199 @@
+import { act, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import {
+  CurrentSystemQuotaTypeEnum,
+  CustomConfigurationStatusEnum,
+  QuotaUnitEnum,
+} from './declarations'
+import ModelProviderPage from './index'
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    mutateCurrentWorkspace: vi.fn(),
+    isValidatingCurrentWorkspace: false,
+  }),
+}))
+
+const mockGlobalState = {
+  systemFeatures: { enable_marketplace: true },
+}
+
+const mockQuotaConfig = {
+  quota_type: CurrentSystemQuotaTypeEnum.free,
+  quota_unit: QuotaUnitEnum.times,
+  quota_limit: 100,
+  quota_used: 1,
+  last_used: 0,
+  is_valid: true,
+}
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (s: { systemFeatures: { enable_marketplace: boolean } }) => unknown) => selector(mockGlobalState),
+}))
+
+const mockProviders = [
+  {
+    provider: 'openai',
+    label: { en_US: 'OpenAI' },
+    custom_configuration: { status: CustomConfigurationStatusEnum.active },
+    system_configuration: {
+      enabled: false,
+      current_quota_type: CurrentSystemQuotaTypeEnum.free,
+      quota_configurations: [mockQuotaConfig],
+    },
+  },
+  {
+    provider: 'anthropic',
+    label: { en_US: 'Anthropic' },
+    custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+    system_configuration: {
+      enabled: false,
+      current_quota_type: CurrentSystemQuotaTypeEnum.free,
+      quota_configurations: [mockQuotaConfig],
+    },
+  },
+]
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    modelProviders: mockProviders,
+  }),
+}))
+
+const mockDefaultModelState = {
+  data: null,
+  isLoading: false,
+}
+
+vi.mock('./hooks', () => ({
+  useDefaultModel: () => mockDefaultModelState,
+}))
+
+vi.mock('./install-from-marketplace', () => ({
+  default: () => <div data-testid="install-from-marketplace" />,
+}))
+
+vi.mock('./provider-added-card', () => ({
+  default: ({ provider }: { provider: { provider: string } }) => <div data-testid="provider-card">{provider.provider}</div>,
+}))
+
+vi.mock('./provider-added-card/quota-panel', () => ({
+  default: () => <div data-testid="quota-panel" />,
+}))
+
+vi.mock('./system-model-selector', () => ({
+  default: () => <div data-testid="system-model-selector" />,
+}))
+
+describe('ModelProviderPage', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    mockGlobalState.systemFeatures.enable_marketplace = true
+    mockDefaultModelState.data = null
+    mockDefaultModelState.isLoading = false
+    mockProviders.splice(0, mockProviders.length, {
+      provider: 'openai',
+      label: { en_US: 'OpenAI' },
+      custom_configuration: { status: CustomConfigurationStatusEnum.active },
+      system_configuration: {
+        enabled: false,
+        current_quota_type: CurrentSystemQuotaTypeEnum.free,
+        quota_configurations: [mockQuotaConfig],
+      },
+    }, {
+      provider: 'anthropic',
+      label: { en_US: 'Anthropic' },
+      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+      system_configuration: {
+        enabled: false,
+        current_quota_type: CurrentSystemQuotaTypeEnum.free,
+        quota_configurations: [mockQuotaConfig],
+      },
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should render main elements', () => {
+    render(<ModelProviderPage searchText="" />)
+    expect(screen.getByText('common.modelProvider.models')).toBeInTheDocument()
+    expect(screen.getByTestId('system-model-selector')).toBeInTheDocument()
+    expect(screen.getByTestId('install-from-marketplace')).toBeInTheDocument()
+  })
+
+  it('should render configured and not configured providers sections', () => {
+    render(<ModelProviderPage searchText="" />)
+    expect(screen.getByText('openai')).toBeInTheDocument()
+    expect(screen.getByText('common.modelProvider.toBeConfigured')).toBeInTheDocument()
+    expect(screen.getByText('anthropic')).toBeInTheDocument()
+  })
+
+  it('should filter providers based on search text', () => {
+    render(<ModelProviderPage searchText="open" />)
+    act(() => {
+      vi.advanceTimersByTime(600)
+    })
+    expect(screen.getByText('openai')).toBeInTheDocument()
+    expect(screen.queryByText('anthropic')).not.toBeInTheDocument()
+  })
+
+  it('should show empty state if no configured providers match', () => {
+    render(<ModelProviderPage searchText="non-existent" />)
+    act(() => {
+      vi.advanceTimersByTime(600)
+    })
+    expect(screen.getByText('common.modelProvider.emptyProviderTitle')).toBeInTheDocument()
+  })
+
+  it('should hide marketplace section when marketplace feature is disabled', () => {
+    mockGlobalState.systemFeatures.enable_marketplace = false
+
+    render(<ModelProviderPage searchText="" />)
+
+    expect(screen.queryByTestId('install-from-marketplace')).not.toBeInTheDocument()
+  })
+
+  it('should prioritize fixed providers in visible order', () => {
+    mockProviders.splice(0, mockProviders.length, {
+      provider: 'zeta-provider',
+      label: { en_US: 'Zeta Provider' },
+      custom_configuration: { status: CustomConfigurationStatusEnum.active },
+      system_configuration: {
+        enabled: false,
+        current_quota_type: CurrentSystemQuotaTypeEnum.free,
+        quota_configurations: [mockQuotaConfig],
+      },
+    }, {
+      provider: 'langgenius/anthropic/anthropic',
+      label: { en_US: 'Anthropic Fixed' },
+      custom_configuration: { status: CustomConfigurationStatusEnum.active },
+      system_configuration: {
+        enabled: false,
+        current_quota_type: CurrentSystemQuotaTypeEnum.free,
+        quota_configurations: [mockQuotaConfig],
+      },
+    }, {
+      provider: 'langgenius/openai/openai',
+      label: { en_US: 'OpenAI Fixed' },
+      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+      system_configuration: {
+        enabled: true,
+        current_quota_type: CurrentSystemQuotaTypeEnum.free,
+        quota_configurations: [mockQuotaConfig],
+      },
+    })
+
+    render(<ModelProviderPage searchText="" />)
+
+    const renderedProviders = screen.getAllByTestId('provider-card').map(item => item.textContent)
+    expect(renderedProviders).toEqual([
+      'langgenius/openai/openai',
+      'langgenius/anthropic/anthropic',
+      'zeta-provider',
+    ])
+    expect(screen.queryByText('common.modelProvider.toBeConfigured')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
new file mode 100644
index 0000000000..e15e082045
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
@@ -0,0 +1,109 @@
+import type { Mock } from 'vitest'
+import type { ModelProvider } from './declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { describe, expect, it, vi } from 'vitest'
+import { useMarketplaceAllPlugins } from './hooks'
+import InstallFromMarketplace from './install-from-marketplace'
+
+// Mock dependencies
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children: React.ReactNode, href: string }) => <a href={href}>{children}</a>,
+}))
+
+vi.mock('next-themes', () => ({
+  useTheme: () => ({ theme: 'light' }),
+}))
+
+vi.mock('@/app/components/base/divider', () => ({
+  default: () => <div data-testid="divider" />,
+}))
+
+vi.mock('@/app/components/base/loading', () => ({
+  default: () => <div data-testid="loading" />,
+}))
+
+vi.mock('@/app/components/plugins/marketplace/list', () => ({
+  default: ({ plugins, cardRender }: { plugins: { plugin_id: string, name: string, type?: string }[], cardRender: (plugin: { plugin_id: string, name: string, type?: string }) => React.ReactNode }) => (
+    <div data-testid="plugin-list">
+      {plugins.map(p => (
+        <div key={p.plugin_id} data-testid="plugin-item">
+          {cardRender(p)}
+        </div>
+      ))}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/plugins/provider-card', () => ({
+  default: ({ payload }: { payload: { name: string } }) => <div>{payload.name}</div>,
+}))
+
+vi.mock('./hooks', () => ({
+  useMarketplaceAllPlugins: vi.fn(() => ({
+    plugins: [],
+    isLoading: false,
+  })),
+}))
+
+describe('InstallFromMarketplace', () => {
+  const mockProviders = [] as ModelProvider[]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render expanded by default', () => {
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+    expect(screen.getByText('common.modelProvider.installProvider')).toBeInTheDocument()
+    expect(screen.getByTestId('plugin-list')).toBeInTheDocument()
+  })
+
+  it('should collapse when clicked', () => {
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+    fireEvent.click(screen.getByText('common.modelProvider.installProvider'))
+    expect(screen.queryByTestId('plugin-list')).not.toBeInTheDocument()
+  })
+
+  it('should show loading state', () => {
+    (useMarketplaceAllPlugins as unknown as Mock).mockReturnValue({
+      plugins: [],
+      isLoading: true,
+    })
+
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+    // It's expanded by default, so loading should show immediately
+    expect(screen.getByTestId('loading')).toBeInTheDocument()
+  })
+
+  it('should list plugins', () => {
+    (useMarketplaceAllPlugins as unknown as Mock).mockReturnValue({
+      plugins: [{ plugin_id: '1', name: 'Plugin 1' }],
+      isLoading: false,
+    })
+
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+    // Expanded by default
+    expect(screen.getByText('Plugin 1')).toBeInTheDocument()
+  })
+
+  it('should hide bundle plugins from the list', () => {
+    (useMarketplaceAllPlugins as unknown as Mock).mockReturnValue({
+      plugins: [
+        { plugin_id: '1', name: 'Plugin 1', type: 'plugin' },
+        { plugin_id: '2', name: 'Bundle 1', type: 'bundle' },
+      ],
+      isLoading: false,
+    })
+
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+
+    expect(screen.getByText('Plugin 1')).toBeInTheDocument()
+    expect(screen.queryByText('Bundle 1')).not.toBeInTheDocument()
+  })
+
+  it('should render discovery link', () => {
+    render(<InstallFromMarketplace providers={mockProviders} searchText="" />)
+    expect(screen.getByText('plugin.marketplace.difyMarketplace')).toHaveAttribute('href')
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx
new file mode 100644
index 0000000000..ea31ae192c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import DeprecatedModelTrigger from './deprecated-model-trigger'
+
+vi.mock('../model-icon', () => ({
+  default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
+}))
+
+const mockUseProviderContext = vi.hoisted(() => vi.fn())
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: mockUseProviderContext,
+}))
+
+describe('DeprecatedModelTrigger', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseProviderContext.mockReturnValue({
+      modelProviders: [{ provider: 'someone-else' }, { provider: 'openai' }],
+    })
+  })
+
+  it('should render model name', () => {
+    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
+    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
+  })
+
+  it('should show deprecated tooltip when warn icon is hovered', async () => {
+    const { container } = render(
+      <DeprecatedModelTrigger
+        modelName="gpt-deprecated"
+        providerName="openai"
+        showWarnIcon
+      />,
+    )
+
+    const tooltipTrigger = container.querySelector('[data-state]') as HTMLElement
+    fireEvent.mouseEnter(tooltipTrigger)
+
+    expect(await screen.findByText('common.modelProvider.deprecated')).toBeInTheDocument()
+  })
+
+  it('should render when provider is not found', () => {
+    mockUseProviderContext.mockReturnValue({
+      modelProviders: [{ provider: 'someone-else' }],
+    })
+
+    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
+    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
+  })
+
+  it('should not show deprecated tooltip when warn icon is disabled', async () => {
+    render(
+      <DeprecatedModelTrigger
+        modelName="gpt-deprecated"
+        providerName="openai"
+        showWarnIcon={false}
+      />,
+    )
+
+    expect(screen.queryByText('common.modelProvider.deprecated')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.spec.tsx
new file mode 100644
index 0000000000..0c35e87ebe
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.spec.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import EmptyTrigger from './empty-trigger'
+
+describe('EmptyTrigger', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render configure model text', () => {
+    render(<EmptyTrigger open={false} />)
+    expect(screen.getByText('plugin.detailPanel.configureModel')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.spec.tsx
new file mode 100644
index 0000000000..e785ec58c7
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.spec.tsx
@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  ModelFeatureEnum,
+  ModelFeatureTextEnum,
+} from '../declarations'
+import FeatureIcon from './feature-icon'
+
+describe('FeatureIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should show feature label when showFeaturesLabel is true', () => {
+    render(
+      <>
+        <FeatureIcon feature={ModelFeatureEnum.vision} showFeaturesLabel />
+        <FeatureIcon feature={ModelFeatureEnum.document} showFeaturesLabel />
+        <FeatureIcon feature={ModelFeatureEnum.audio} showFeaturesLabel />
+        <FeatureIcon feature={ModelFeatureEnum.video} showFeaturesLabel />
+      </>,
+    )
+
+    expect(screen.getByText(ModelFeatureTextEnum.vision)).toBeInTheDocument()
+    expect(screen.getByText(ModelFeatureTextEnum.document)).toBeInTheDocument()
+    expect(screen.getByText(ModelFeatureTextEnum.audio)).toBeInTheDocument()
+    expect(screen.getByText(ModelFeatureTextEnum.video)).toBeInTheDocument()
+  })
+
+  it('should show tooltip content on hover when showFeaturesLabel is false', async () => {
+    const cases: Array<{ feature: ModelFeatureEnum, text: string }> = [
+      { feature: ModelFeatureEnum.vision, text: ModelFeatureTextEnum.vision },
+      { feature: ModelFeatureEnum.document, text: ModelFeatureTextEnum.document },
+      { feature: ModelFeatureEnum.audio, text: ModelFeatureTextEnum.audio },
+      { feature: ModelFeatureEnum.video, text: ModelFeatureTextEnum.video },
+    ]
+
+    for (const { feature, text } of cases) {
+      const { container, unmount } = render(<FeatureIcon feature={feature} />)
+      fireEvent.mouseEnter(container.firstElementChild as HTMLElement)
+      expect(await screen.findByText(`common.modelProvider.featureSupported:{"feature":"${text}"}`))
+        .toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('should render nothing for unsupported feature', () => {
+    const { container } = render(<FeatureIcon feature={ModelFeatureEnum.toolCall} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.spec.tsx
new file mode 100644
index 0000000000..0491bb0849
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.spec.tsx
@@ -0,0 +1,126 @@
+import type { Model, ModelItem } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import ModelSelector from './index'
+
+vi.mock('./model-trigger', () => ({
+  default: () => <div>model-trigger</div>,
+}))
+
+vi.mock('./deprecated-model-trigger', () => ({
+  default: ({ modelName }: { modelName: string }) => <div>{`deprecated:${modelName}`}</div>,
+}))
+
+vi.mock('./empty-trigger', () => ({
+  default: () => <div>empty-trigger</div>,
+}))
+
+vi.mock('./popup', () => ({
+  default: ({ onHide, onSelect }: { onHide: () => void, onSelect: (provider: string, model: ModelItem) => void }) => (
+    <>
+      <button type="button" onClick={() => onSelect('openai', { model: 'gpt-4' } as ModelItem)}>
+        select
+      </button>
+      <button type="button" onClick={onHide}>
+        hide
+      </button>
+    </>
+  ),
+}))
+
+const makeModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4',
+  label: { en_US: 'GPT-4', zh_Hans: 'GPT-4' },
+  model_type: ModelTypeEnum.textGeneration,
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: {},
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const makeModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: { en_US: '', zh_Hans: '' },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [makeModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('ModelSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should toggle popup and close it after selecting a model', () => {
+    render(<ModelSelector modelList={[makeModel()]} />)
+
+    fireEvent.click(screen.getByText('empty-trigger'))
+    expect(screen.getByText('select')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('select'))
+    expect(screen.queryByText('select')).not.toBeInTheDocument()
+  })
+
+  it('should call onSelect when provided', () => {
+    const onSelect = vi.fn()
+    render(<ModelSelector modelList={[makeModel()]} onSelect={onSelect} />)
+
+    fireEvent.click(screen.getByText('empty-trigger'))
+    fireEvent.click(screen.getByText('select'))
+
+    expect(onSelect).toHaveBeenCalledWith({ provider: 'openai', model: 'gpt-4' })
+  })
+
+  it('should close popup when popup requests hide', () => {
+    render(<ModelSelector modelList={[makeModel()]} />)
+
+    fireEvent.click(screen.getByText('empty-trigger'))
+    expect(screen.getByText('hide')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('hide'))
+    expect(screen.queryByText('hide')).not.toBeInTheDocument()
+  })
+
+  it('should not open popup when readonly', () => {
+    render(<ModelSelector modelList={[makeModel()]} readonly />)
+
+    fireEvent.click(screen.getByText('empty-trigger'))
+    expect(screen.queryByText('select')).not.toBeInTheDocument()
+  })
+
+  it('should render deprecated trigger when defaultModel is not in list', () => {
+    const { rerender } = render(
+      <ModelSelector
+        defaultModel={{ provider: 'openai', model: 'missing-model' }}
+        modelList={[makeModel()]}
+      />,
+    )
+
+    expect(screen.getByText('deprecated:missing-model')).toBeInTheDocument()
+
+    rerender(
+      <ModelSelector
+        defaultModel={{ provider: '', model: '' }}
+        modelList={[makeModel()]}
+      />,
+    )
+    expect(screen.getByText('deprecated:')).toBeInTheDocument()
+  })
+
+  it('should render model trigger when defaultModel matches', () => {
+    render(
+      <ModelSelector
+        defaultModel={{ provider: 'openai', model: 'gpt-4' }}
+        modelList={[makeModel()]}
+      />,
+    )
+
+    expect(screen.getByText('model-trigger')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.spec.tsx
new file mode 100644
index 0000000000..8bcf362faf
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.spec.tsx
@@ -0,0 +1,91 @@
+import type { Model, ModelItem } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import ModelTrigger from './model-trigger'
+
+vi.mock('../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+  return {
+    ...actual,
+    useLanguage: () => 'en_US',
+  }
+})
+
+vi.mock('../model-icon', () => ({
+  default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
+}))
+
+vi.mock('../model-name', () => ({
+  default: ({ modelItem }: { modelItem: ModelItem }) => <span>{modelItem.label.en_US}</span>,
+}))
+
+const makeModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4',
+  label: { en_US: 'GPT-4', zh_Hans: 'GPT-4' },
+  model_type: ModelTypeEnum.textGeneration,
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: {},
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const makeModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: { en_US: '', zh_Hans: '' },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [makeModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('ModelTrigger', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should show model name', () => {
+    render(
+      <ModelTrigger
+        open
+        provider={makeModel()}
+        model={makeModelItem()}
+      />,
+    )
+
+    expect(screen.getByText('GPT-4')).toBeInTheDocument()
+  })
+
+  it('should show status tooltip content when model is not active', async () => {
+    const { container } = render(
+      <ModelTrigger
+        open={false}
+        provider={makeModel()}
+        model={makeModelItem({ status: ModelStatusEnum.noConfigure })}
+      />,
+    )
+
+    const tooltipTrigger = container.querySelector('[data-state]') as HTMLElement
+    fireEvent.mouseEnter(tooltipTrigger)
+
+    expect(await screen.findByText('No Configure')).toBeInTheDocument()
+  })
+
+  it('should not show status icon when readonly', () => {
+    render(
+      <ModelTrigger
+        open={false}
+        provider={makeModel()}
+        model={makeModelItem({ status: ModelStatusEnum.noConfigure })}
+        readonly
+      />,
+    )
+
+    expect(screen.getByText('GPT-4')).toBeInTheDocument()
+    expect(screen.queryByText('No Configure')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.spec.tsx
new file mode 100644
index 0000000000..af398f83ba
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.spec.tsx
@@ -0,0 +1,147 @@
+import type { DefaultModel, Model, ModelItem } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  ModelFeatureEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import PopupItem from './popup-item'
+
+const mockUpdateModelList = vi.hoisted(() => vi.fn())
+const mockUpdateModelProviders = vi.hoisted(() => vi.fn())
+
+vi.mock('../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+  return {
+    ...actual,
+    useLanguage: () => 'en_US',
+    useUpdateModelList: () => mockUpdateModelList,
+    useUpdateModelProviders: () => mockUpdateModelProviders,
+  }
+})
+
+vi.mock('../model-badge', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+}))
+
+vi.mock('../model-icon', () => ({
+  default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
+}))
+
+vi.mock('../model-name', () => ({
+  default: ({ modelItem }: { modelItem: ModelItem }) => <span>{modelItem.label.en_US}</span>,
+}))
+
+const mockSetShowModelModal = vi.hoisted(() => vi.fn())
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowModelModal: mockSetShowModelModal,
+  }),
+}))
+
+const mockUseProviderContext = vi.hoisted(() => vi.fn())
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: mockUseProviderContext,
+}))
+
+const makeModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4',
+  label: { en_US: 'GPT-4', zh_Hans: 'GPT-4' },
+  model_type: ModelTypeEnum.textGeneration,
+  features: [ModelFeatureEnum.vision],
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: { mode: 'chat', context_size: 4096 },
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const makeModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: { en_US: '', zh_Hans: '' },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [makeModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('PopupItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseProviderContext.mockReturnValue({
+      modelProviders: [{ provider: 'openai' }],
+    })
+  })
+
+  it('should call onSelect when clicking an active model', () => {
+    const onSelect = vi.fn()
+    render(<PopupItem model={makeModel()} onSelect={onSelect} />)
+
+    fireEvent.click(screen.getByText('GPT-4'))
+
+    expect(onSelect).toHaveBeenCalledWith('openai', expect.objectContaining({ model: 'gpt-4' }))
+  })
+
+  it('should not call onSelect when model is not active', () => {
+    const onSelect = vi.fn()
+    render(
+      <PopupItem
+        model={makeModel({ models: [makeModelItem({ status: ModelStatusEnum.disabled })] })}
+        onSelect={onSelect}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('GPT-4'))
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('should open model modal when clicking add on unconfigured model', () => {
+    const { rerender } = render(
+      <PopupItem
+        model={makeModel({ models: [makeModelItem({ status: ModelStatusEnum.noConfigure })] })}
+        onSelect={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('COMMON.OPERATION.ADD'))
+
+    expect(mockSetShowModelModal).toHaveBeenCalled()
+
+    const call = mockSetShowModelModal.mock.calls[0][0] as { onSaveCallback?: () => void }
+    call.onSaveCallback?.()
+
+    expect(mockUpdateModelProviders).toHaveBeenCalled()
+    expect(mockUpdateModelList).toHaveBeenCalledWith(ModelTypeEnum.textGeneration)
+
+    rerender(
+      <PopupItem
+        model={makeModel({
+          models: [makeModelItem({ status: ModelStatusEnum.noConfigure, model_type: undefined as unknown as ModelTypeEnum })],
+        })}
+        onSelect={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('COMMON.OPERATION.ADD'))
+    const call2 = mockSetShowModelModal.mock.calls.at(-1)?.[0] as { onSaveCallback?: () => void } | undefined
+    call2?.onSaveCallback?.()
+
+    expect(mockUpdateModelProviders).toHaveBeenCalled()
+    expect(mockUpdateModelList).toHaveBeenCalledTimes(1)
+  })
+
+  it('should show selected state when defaultModel matches', () => {
+    const defaultModel: DefaultModel = { provider: 'openai', model: 'gpt-4' }
+    render(
+      <PopupItem
+        defaultModel={defaultModel}
+        model={makeModel()}
+        onSelect={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('GPT-4')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.spec.tsx
new file mode 100644
index 0000000000..4083f4a37c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.spec.tsx
@@ -0,0 +1,199 @@
+import type { Model, ModelItem } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  ConfigurationMethodEnum,
+  ModelFeatureEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import Popup from './popup'
+
+let mockLanguage = 'en_US'
+
+const mockSetShowAccountSettingModal = vi.hoisted(() => vi.fn())
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  }),
+}))
+
+const mockSupportFunctionCall = vi.hoisted(() => vi.fn())
+vi.mock('@/utils/tool-call', () => ({
+  supportFunctionCall: mockSupportFunctionCall,
+}))
+
+const mockCloseActiveTooltip = vi.hoisted(() => vi.fn())
+vi.mock('@/app/components/base/tooltip/TooltipManager', () => ({
+  tooltipManager: {
+    closeActiveTooltip: mockCloseActiveTooltip,
+    register: vi.fn(),
+    clear: vi.fn(),
+  },
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/solid/general', () => ({
+  XCircle: ({ onClick }: { onClick?: () => void }) => (
+    <button type="button" aria-label="clear-search" onClick={onClick} />
+  ),
+}))
+
+vi.mock('../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+  return {
+    ...actual,
+    useLanguage: () => mockLanguage,
+  }
+})
+
+vi.mock('./popup-item', () => ({
+  default: ({ model }: { model: Model }) => <div>{model.provider}</div>,
+}))
+
+const makeModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4',
+  label: { en_US: 'GPT-4', zh_Hans: 'GPT-4' },
+  model_type: ModelTypeEnum.textGeneration,
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: {},
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const makeModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: { en_US: '', zh_Hans: '' },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [makeModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('Popup', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockLanguage = 'en_US'
+    mockSupportFunctionCall.mockReturnValue(true)
+  })
+
+  it('should filter models by search and allow clearing search', () => {
+    render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('openai')).toBeInTheDocument()
+
+    const input = screen.getByPlaceholderText('datasetSettings.form.searchModel')
+    fireEvent.change(input, { target: { value: 'not-found' } })
+    expect(screen.getByText('No model found for “not-found”')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'clear-search' }))
+    expect((input as HTMLInputElement).value).toBe('')
+  })
+
+  it('should filter by scope features including toolCall and non-toolCall checks', () => {
+    const modelList = [
+      makeModel({ models: [makeModelItem({ features: [ModelFeatureEnum.toolCall, ModelFeatureEnum.vision] })] }),
+    ]
+
+    // When tool-call support is missing, it should be filtered out.
+    mockSupportFunctionCall.mockReturnValue(false)
+    const { unmount } = render(
+      <Popup
+        modelList={modelList}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+        scopeFeatures={[ModelFeatureEnum.toolCall, ModelFeatureEnum.vision]}
+      />,
+    )
+    expect(screen.getByText('No model found for “”')).toBeInTheDocument()
+
+    // When tool-call support exists, the non-toolCall feature check should also pass.
+    unmount()
+    mockSupportFunctionCall.mockReturnValue(true)
+    const { unmount: unmount2 } = render(
+      <Popup
+        modelList={modelList}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+        scopeFeatures={[ModelFeatureEnum.toolCall, ModelFeatureEnum.vision]}
+      />,
+    )
+    expect(screen.getByText('openai')).toBeInTheDocument()
+
+    unmount2()
+    const { unmount: unmount3 } = render(
+      <Popup
+        modelList={modelList}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+        scopeFeatures={[ModelFeatureEnum.vision]}
+      />,
+    )
+    expect(screen.getByText('openai')).toBeInTheDocument()
+
+    // When features are missing, non-toolCall feature checks should fail.
+    unmount3()
+    render(
+      <Popup
+        modelList={[makeModel({ models: [makeModelItem({ features: undefined })] })]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+        scopeFeatures={[ModelFeatureEnum.vision]}
+      />,
+    )
+    expect(screen.getByText('No model found for “”')).toBeInTheDocument()
+  })
+
+  it('should match labels from other languages when current language key is missing', () => {
+    mockLanguage = 'fr_FR'
+
+    render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+      />,
+    )
+
+    fireEvent.change(
+      screen.getByPlaceholderText('datasetSettings.form.searchModel'),
+      { target: { value: 'gpt' } },
+    )
+
+    expect(screen.getByText('openai')).toBeInTheDocument()
+  })
+
+  it('should close tooltip on scroll', () => {
+    const { container } = render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+      />,
+    )
+
+    fireEvent.scroll(container.firstElementChild as HTMLElement)
+    expect(mockCloseActiveTooltip).toHaveBeenCalled()
+  })
+
+  it('should open provider settings when clicking footer link', () => {
+    render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.model.settingsLink'))
+
+    expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+      payload: 'provider',
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.spec.tsx
new file mode 100644
index 0000000000..3123fbab3b
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.spec.tsx
@@ -0,0 +1,97 @@
+import type { ModelProvider } from '../declarations'
+import { render, screen } from '@testing-library/react'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+import { useLanguage } from '../hooks'
+import ProviderIcon from './index'
+
+type UseThemeReturnType = ReturnType<typeof useTheme>
+
+vi.mock('@/app/components/base/icons/src/public/llm', () => ({
+  AnthropicDark: ({ className }: { className: string }) => <div data-testid="anthropic-dark" className={className} />,
+  AnthropicLight: ({ className }: { className: string }) => <div data-testid="anthropic-light" className={className} />,
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/other', () => ({
+  Openai: ({ className }: { className: string }) => <div data-testid="openai-icon" className={className} />,
+}))
+
+vi.mock('@/i18n-config', () => ({
+  renderI18nObject: (obj: Record<string, string> | string, lang: string) => {
+    if (typeof obj === 'string')
+      return obj
+    return obj[lang] || obj.en_US || Object.values(obj)[0]
+  },
+}))
+
+vi.mock('@/hooks/use-theme', () => {
+  const mockFn = vi.fn(() => ({ theme: Theme.light }))
+  return { default: mockFn }
+})
+
+vi.mock('../hooks', () => ({
+  useLanguage: vi.fn(() => 'en_US'),
+}))
+
+const createProvider = (overrides: Partial<ModelProvider> = {}): ModelProvider => ({
+  provider: 'some/provider',
+  label: { en_US: 'Provider', zh_Hans: '提供商' },
+  help: { title: { en_US: 'Help', zh_Hans: '帮助' }, url: { en_US: 'https://example.com', zh_Hans: 'https://example.com' } },
+  icon_small: { en_US: 'https://example.com/icon.png', zh_Hans: 'https://example.com/icon.png' },
+  supported_model_types: [],
+  configurate_methods: [],
+  provider_credential_schema: { credential_form_schemas: [] },
+  model_credential_schema: { model: { label: { en_US: 'Model', zh_Hans: '模型' }, placeholder: { en_US: 'Select', zh_Hans: '选择' } }, credential_form_schemas: [] },
+  preferred_provider_type: undefined,
+  ...overrides,
+} as ModelProvider)
+
+describe('ProviderIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    const mockTheme = vi.mocked(useTheme)
+    const mockLang = vi.mocked(useLanguage)
+    mockTheme.mockReturnValue({ theme: Theme.light, themes: [], setTheme: vi.fn() } as UseThemeReturnType)
+    mockLang.mockReturnValue('en_US')
+  })
+
+  it('should render Anthropic icon based on theme', () => {
+    const mockTheme = vi.mocked(useTheme)
+    mockTheme.mockReturnValue({ theme: Theme.dark, themes: [], setTheme: vi.fn() } as UseThemeReturnType)
+    const provider = createProvider({ provider: 'langgenius/anthropic/anthropic' })
+
+    render(<ProviderIcon provider={provider} />)
+    expect(screen.getByTestId('anthropic-light')).toBeInTheDocument()
+
+    mockTheme.mockReturnValue({ theme: Theme.light, themes: [], setTheme: vi.fn() } as UseThemeReturnType)
+    render(<ProviderIcon provider={provider} />)
+    expect(screen.getByTestId('anthropic-dark')).toBeInTheDocument()
+  })
+
+  it('should render OpenAI icon', () => {
+    const provider = createProvider({ provider: 'langgenius/openai/openai' })
+    render(<ProviderIcon provider={provider} />)
+    expect(screen.getByTestId('openai-icon')).toBeInTheDocument()
+  })
+
+  it('should render generic provider with image and label', () => {
+    const provider = createProvider({ label: { en_US: 'Custom', zh_Hans: '自定义' } })
+    render(<ProviderIcon provider={provider} />)
+
+    const img = screen.getByAltText('provider-icon') as HTMLImageElement
+    expect(img.src).toBe('https://example.com/icon.png')
+    expect(screen.getByText('Custom')).toBeInTheDocument()
+  })
+
+  it('should use dark icon in dark theme for generic provider', () => {
+    const mockTheme = vi.mocked(useTheme)
+    mockTheme.mockReturnValue({ theme: Theme.dark, themes: [], setTheme: vi.fn() } as UseThemeReturnType)
+    const provider = createProvider({
+      icon_small_dark: { en_US: 'https://example.com/dark.png', zh_Hans: 'https://example.com/dark.png' },
+    })
+
+    render(<ProviderIcon provider={provider} />)
+    const img = screen.getByAltText('provider-icon') as HTMLImageElement
+    expect(img.src).toBe('https://example.com/dark.png')
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
new file mode 100644
index 0000000000..819bb71164
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
@@ -0,0 +1,160 @@
+import type { DefaultModelResponse } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import { ModelTypeEnum } from '../declarations'
+import SystemModel from './index'
+
+vi.mock('react-i18next', async () => {
+  const { createReactI18nextMock } = await import('@/test/i18n-mock')
+  return createReactI18nextMock({
+    'modelProvider.systemModelSettings': 'System Model Settings',
+    'modelProvider.systemReasoningModel.key': 'System Reasoning Model',
+    'modelProvider.systemReasoningModel.tip': 'Reasoning model tip',
+    'modelProvider.embeddingModel.key': 'Embedding Model',
+    'modelProvider.embeddingModel.tip': 'Embedding model tip',
+    'modelProvider.rerankModel.key': 'Rerank Model',
+    'modelProvider.rerankModel.tip': 'Rerank model tip',
+    'modelProvider.speechToTextModel.key': 'Speech to Text Model',
+    'modelProvider.speechToTextModel.tip': 'Speech to text model tip',
+    'modelProvider.ttsModel.key': 'TTS Model',
+    'modelProvider.ttsModel.tip': 'TTS model tip',
+    'operation.cancel': 'Cancel',
+    'operation.save': 'Save',
+    'actionMsg.modifiedSuccessfully': 'Modified successfully',
+  })
+})
+
+const mockNotify = vi.hoisted(() => vi.fn())
+const mockUpdateModelList = vi.hoisted(() => vi.fn())
+const mockUpdateDefaultModel = vi.hoisted(() => vi.fn(() => Promise.resolve({ result: 'success' })))
+
+let mockIsCurrentWorkspaceManager = true
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager,
+  }),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    textGenerationModelList: [],
+  }),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+vi.mock('../hooks', () => ({
+  useModelList: () => ({
+    data: [],
+  }),
+  useSystemDefaultModelAndModelList: (defaultModel: DefaultModelResponse | undefined) => [
+    defaultModel || { model: '', provider: { provider: '', icon_small: { en_US: '', zh_Hans: '' } } },
+    vi.fn(),
+  ],
+  useUpdateModelList: () => mockUpdateModelList,
+}))
+
+vi.mock('@/service/common', () => ({
+  updateDefaultModel: mockUpdateDefaultModel,
+}))
+
+vi.mock('../model-selector', () => ({
+  default: ({ onSelect }: { onSelect: (model: { model: string, provider: string }) => void }) => (
+    <button onClick={() => onSelect({ model: 'test', provider: 'test' })}>Mock Model Selector</button>
+  ),
+}))
+
+const mockModel: DefaultModelResponse = {
+  model: 'gpt-4',
+  model_type: ModelTypeEnum.textGeneration,
+  provider: {
+    provider: 'openai',
+    icon_small: { en_US: '', zh_Hans: '' },
+  },
+}
+
+const defaultProps = {
+  textGenerationDefaultModel: mockModel,
+  embeddingsDefaultModel: undefined,
+  rerankDefaultModel: undefined,
+  speech2textDefaultModel: undefined,
+  ttsDefaultModel: undefined,
+  notConfigured: false,
+  isLoading: false,
+}
+
+describe('SystemModel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCurrentWorkspaceManager = true
+  })
+
+  it('should render settings button', () => {
+    render(<SystemModel {...defaultProps} />)
+    expect(screen.getByRole('button', { name: /system model settings/i })).toBeInTheDocument()
+  })
+
+  it('should open modal when button is clicked', async () => {
+    render(<SystemModel {...defaultProps} />)
+    const button = screen.getByRole('button', { name: /system model settings/i })
+    fireEvent.click(button)
+    await waitFor(() => {
+      expect(screen.getByText(/system reasoning model/i)).toBeInTheDocument()
+    })
+  })
+
+  it('should disable button when loading', () => {
+    render(<SystemModel {...defaultProps} isLoading />)
+    expect(screen.getByRole('button', { name: /system model settings/i })).toBeDisabled()
+  })
+
+  it('should close modal when cancel is clicked', async () => {
+    render(<SystemModel {...defaultProps} />)
+    fireEvent.click(screen.getByRole('button', { name: /system model settings/i }))
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument()
+    })
+  })
+
+  it('should save selected models and show success feedback', async () => {
+    render(<SystemModel {...defaultProps} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /system model settings/i }))
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument()
+    })
+
+    const selectorButtons = screen.getAllByRole('button', { name: 'Mock Model Selector' })
+    selectorButtons.forEach(button => fireEvent.click(button))
+
+    fireEvent.click(screen.getByRole('button', { name: /save/i }))
+
+    await waitFor(() => {
+      expect(mockUpdateDefaultModel).toHaveBeenCalledTimes(1)
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'success',
+        message: 'Modified successfully',
+      })
+      expect(mockUpdateModelList).toHaveBeenCalledTimes(5)
+    })
+  })
+
+  it('should disable save when user is not workspace manager', async () => {
+    mockIsCurrentWorkspaceManager = false
+    render(<SystemModel {...defaultProps} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /system model settings/i }))
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /save/i })).toBeDisabled()
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/utils.spec.ts b/web/app/components/header/account-setting/model-provider-page/utils.spec.ts
new file mode 100644
index 0000000000..9ed1663d0c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/utils.spec.ts
@@ -0,0 +1,238 @@
+import type { Mock } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
+import {
+  deleteModelProvider,
+  setModelProvider,
+  validateModelLoadBalancingCredentials,
+  validateModelProvider,
+} from '@/service/common'
+import { ValidatedStatus } from '../key-validator/declarations'
+import {
+  ConfigurationMethodEnum,
+  FormTypeEnum,
+  ModelTypeEnum,
+} from './declarations'
+import {
+  genModelNameFormSchema,
+  genModelTypeFormSchema,
+  modelTypeFormat,
+  removeCredentials,
+  saveCredentials,
+  savePredefinedLoadBalancingConfig,
+  sizeFormat,
+  validateCredentials,
+  validateLoadBalancingCredentials,
+} from './utils'
+
+// Mock service/common functions
+vi.mock('@/service/common', () => ({
+  deleteModelProvider: vi.fn(),
+  setModelProvider: vi.fn(),
+  validateModelLoadBalancingCredentials: vi.fn(),
+  validateModelProvider: vi.fn(),
+}))
+
+describe('utils', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('sizeFormat', () => {
+    it('should format size less than 1000', () => {
+      expect(sizeFormat(500)).toBe('500')
+    })
+
+    it('should format size greater than 1000', () => {
+      expect(sizeFormat(1500)).toBe('1K')
+    })
+  })
+
+  describe('modelTypeFormat', () => {
+    it('should format text embedding type', () => {
+      expect(modelTypeFormat(ModelTypeEnum.textEmbedding)).toBe('TEXT EMBEDDING')
+    })
+
+    it('should format other types', () => {
+      expect(modelTypeFormat(ModelTypeEnum.textGeneration)).toBe('LLM')
+    })
+  })
+
+  describe('validateCredentials', () => {
+    it('should validate predefined credentials successfully', async () => {
+      (validateModelProvider as unknown as Mock).mockResolvedValue({ result: 'success' })
+      const result = await validateCredentials(true, 'provider', { key: 'value' })
+      expect(result).toEqual({ status: ValidatedStatus.Success })
+      expect(validateModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/credentials/validate',
+        body: { credentials: { key: 'value' } },
+      })
+    })
+
+    it('should validate custom credentials successfully', async () => {
+      (validateModelProvider as unknown as Mock).mockResolvedValue({ result: 'success' })
+      const result = await validateCredentials(false, 'provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+        key: 'value',
+      })
+      expect(result).toEqual({ status: ValidatedStatus.Success })
+      expect(validateModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models/credentials/validate',
+        body: {
+          model: 'model',
+          model_type: 'type',
+          credentials: { key: 'value' },
+        },
+      })
+    })
+
+    it('should handle validation failure', async () => {
+      (validateModelProvider as unknown as Mock).mockResolvedValue({ result: 'error', error: 'failed' })
+      const result = await validateCredentials(true, 'provider', {})
+      expect(result).toEqual({ status: ValidatedStatus.Error, message: 'failed' })
+    })
+
+    it('should handle exception', async () => {
+      (validateModelProvider as unknown as Mock).mockRejectedValue(new Error('network error'))
+      const result = await validateCredentials(true, 'provider', {})
+      expect(result).toEqual({ status: ValidatedStatus.Error, message: 'network error' })
+    })
+  })
+
+  describe('validateLoadBalancingCredentials', () => {
+    it('should validate load balancing credentials successfully', async () => {
+      (validateModelLoadBalancingCredentials as unknown as Mock).mockResolvedValue({ result: 'success' })
+      const result = await validateLoadBalancingCredentials(true, 'provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+        key: 'value',
+      })
+      expect(result).toEqual({ status: ValidatedStatus.Success })
+      expect(validateModelLoadBalancingCredentials).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models/load-balancing-configs/credentials-validate',
+        body: {
+          model: 'model',
+          model_type: 'type',
+          credentials: { key: 'value' },
+        },
+      })
+    })
+    it('should validate load balancing credentials successfully with id', async () => {
+      (validateModelLoadBalancingCredentials as unknown as Mock).mockResolvedValue({ result: 'success' })
+      const result = await validateLoadBalancingCredentials(true, 'provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+        key: 'value',
+      }, 'id')
+      expect(result).toEqual({ status: ValidatedStatus.Success })
+      expect(validateModelLoadBalancingCredentials).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models/load-balancing-configs/id/credentials-validate',
+        body: {
+          model: 'model',
+          model_type: 'type',
+          credentials: { key: 'value' },
+        },
+      })
+    })
+
+    it('should handle validation failure', async () => {
+      (validateModelLoadBalancingCredentials as unknown as Mock).mockResolvedValue({ result: 'error', error: 'failed' })
+      const result = await validateLoadBalancingCredentials(true, 'provider', {})
+      expect(result).toEqual({ status: ValidatedStatus.Error, message: 'failed' })
+    })
+  })
+
+  describe('saveCredentials', () => {
+    it('should save predefined credentials', async () => {
+      await saveCredentials(true, 'provider', { __authorization_name__: 'name', key: 'value' })
+      expect(setModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/credentials',
+        body: {
+          config_from: ConfigurationMethodEnum.predefinedModel,
+          credentials: { key: 'value' },
+          load_balancing: undefined,
+          name: 'name',
+        },
+      })
+    })
+
+    it('should save custom credentials', async () => {
+      await saveCredentials(false, 'provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+        key: 'value',
+      })
+      expect(setModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models',
+        body: {
+          model: 'model',
+          model_type: 'type',
+          credentials: { key: 'value' },
+          load_balancing: undefined,
+        },
+      })
+    })
+  })
+
+  describe('savePredefinedLoadBalancingConfig', () => {
+    it('should save predefined load balancing config', async () => {
+      await savePredefinedLoadBalancingConfig('provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+        key: 'value',
+      })
+      expect(setModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models',
+        body: {
+          config_from: ConfigurationMethodEnum.predefinedModel,
+          model: 'model',
+          model_type: 'type',
+          credentials: { key: 'value' },
+          load_balancing: undefined,
+        },
+      })
+    })
+  })
+
+  describe('removeCredentials', () => {
+    it('should remove predefined credentials', async () => {
+      await removeCredentials(true, 'provider', {}, 'id')
+      expect(deleteModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/credentials',
+        body: { credential_id: 'id' },
+      })
+    })
+
+    it('should remove custom credentials', async () => {
+      await removeCredentials(false, 'provider', {
+        __model_name: 'model',
+        __model_type: 'type',
+      })
+      expect(deleteModelProvider).toHaveBeenCalledWith({
+        url: '/workspaces/current/model-providers/provider/models',
+        body: {
+          model: 'model',
+          model_type: 'type',
+        },
+      })
+    })
+  })
+
+  describe('genModelTypeFormSchema', () => {
+    it('should generate form schema', () => {
+      const schema = genModelTypeFormSchema([ModelTypeEnum.textGeneration])
+      expect(schema.type).toBe(FormTypeEnum.select)
+      expect(schema.variable).toBe('__model_type')
+      expect(schema.options[0].value).toBe(ModelTypeEnum.textGeneration)
+    })
+  })
+
+  describe('genModelNameFormSchema', () => {
+    it('should generate form schema', () => {
+      const schema = genModelNameFormSchema()
+      expect(schema.type).toBe(FormTypeEnum.textInput)
+      expect(schema.variable).toBe('__model_name')
+      expect(schema.required).toBe(true)
+    })
+  })
+})

From b2fa6cb4d3c14a08f6fa7218014a23ae2af4fafe Mon Sep 17 00:00:00 2001
From: Poojan <poojan@infocusp.com>
Date: Tue, 24 Feb 2026 15:59:21 +0530
Subject: [PATCH 20/26] test: add unit tests for chat components (#32367)

---
 .../chat/chat/answer/agent-content.spec.tsx   | 114 +++
 .../base/chat/chat/answer/agent-content.tsx   |  26 +-
 .../chat/chat/answer/basic-content.spec.tsx   |  91 +++
 .../base/chat/chat/answer/basic-content.tsx   |  11 +-
 .../human-input-content/content-item.spec.tsx | 111 +++
 .../human-input-content/content-item.tsx      |   1 +
 .../content-wrapper.spec.tsx                  |  46 ++
 .../human-input-content/content-wrapper.tsx   |  18 +-
 .../executed-action.spec.tsx                  |  23 +
 .../human-input-content/executed-action.tsx   |   9 +-
 .../expiration-time.spec.tsx                  |  38 +
 .../human-input-content/expiration-time.tsx   |   8 +-
 .../human-input-form.spec.tsx                 | 132 ++++
 .../human-input-content/human-input-form.tsx  |   1 +
 .../submitted-content.spec.tsx                |  17 +
 .../human-input-content/submitted-content.tsx |   4 +-
 .../human-input-content/submitted.spec.tsx    |  31 +
 .../answer/human-input-content/tips.spec.tsx  |  83 ++
 .../chat/answer/human-input-content/tips.tsx  |   8 +-
 .../human-input-content/unsubmitted.spec.tsx  | 212 +++++
 .../human-input-filled-form-list.spec.tsx     |  58 ++
 .../answer/human-input-form-list.spec.tsx     | 131 ++++
 .../chat/answer/human-input-form-list.tsx     |  30 +-
 .../base/chat/chat/answer/more.spec.tsx       |  65 ++
 .../components/base/chat/chat/answer/more.tsx |   9 +-
 .../base/chat/chat/answer/operation.spec.tsx  | 726 ++++++++++++++++++
 .../base/chat/chat/answer/operation.tsx       |  57 +-
 .../chat/answer/suggested-questions.spec.tsx  |  83 ++
 .../chat/chat/answer/suggested-questions.tsx  |   3 +-
 .../chat/chat/answer/tool-detail.spec.tsx     |  74 ++
 .../chat/answer/workflow-process.spec.tsx     | 109 +++
 .../chat/chat/answer/workflow-process.tsx     |  37 +-
 .../chat/chat/chat-input-area/index.spec.tsx  | 568 ++++++++++++++
 .../chat/chat-input-area/operation.spec.tsx   | 170 ++++
 .../chat/chat/chat-input-area/operation.tsx   |   2 +
 .../base/chat/chat/citation/index.spec.tsx    | 364 +++++++++
 .../base/chat/chat/citation/index.tsx         |  36 +-
 .../base/chat/chat/citation/popup.spec.tsx    | 609 +++++++++++++++
 .../base/chat/chat/citation/popup.tsx         | 127 ++-
 .../chat/citation/progress-tooltip.spec.tsx   | 144 ++++
 .../chat/chat/citation/progress-tooltip.tsx   |  11 +-
 .../base/chat/chat/citation/tooltip.spec.tsx  | 155 ++++
 .../base/chat/chat/citation/tooltip.tsx       |   4 +-
 .../base/chat/chat/content-switch.spec.tsx    |  79 ++
 .../base/chat/chat/content-switch.tsx         |   2 +
 .../base/chat/chat/context.spec.tsx           |  94 +++
 .../components/base/chat/chat/index.spec.tsx  | 606 +++++++++++++++
 web/app/components/base/chat/chat/index.tsx   |  21 +-
 .../chat/chat/loading-anim/index.spec.tsx     |  22 +
 .../base/chat/chat/log/index.spec.tsx         | 129 ++++
 .../base/chat/chat/question.spec.tsx          | 267 +++++++
 .../components/base/chat/chat/question.tsx    |  24 +-
 .../base/chat/chat/thought/index.spec.tsx     | 345 +++++++++
 .../base/chat/chat/try-to-ask.spec.tsx        | 102 +++
 web/eslint-suppressions.json                  |  64 --
 55 files changed, 6044 insertions(+), 267 deletions(-)
 create mode 100644 web/app/components/base/chat/chat/answer/agent-content.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/basic-content.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/human-input-form.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/submitted-content.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/tips.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-filled-form-list.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/human-input-form-list.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/more.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/operation.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/suggested-questions.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/tool-detail.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/answer/workflow-process.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/chat-input-area/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/chat-input-area/operation.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/citation/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/citation/popup.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/citation/progress-tooltip.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/citation/tooltip.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/content-switch.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/context.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/loading-anim/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/log/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/question.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/thought/index.spec.tsx
 create mode 100644 web/app/components/base/chat/chat/try-to-ask.spec.tsx

diff --git a/web/app/components/base/chat/chat/answer/agent-content.spec.tsx b/web/app/components/base/chat/chat/answer/agent-content.spec.tsx
new file mode 100644
index 0000000000..ef4143fa6f
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/agent-content.spec.tsx
@@ -0,0 +1,114 @@
+import type { ChatItem } from '../../types'
+import type { IThoughtProps } from '@/app/components/base/chat/chat/thought'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import type { MarkdownProps } from '@/app/components/base/markdown'
+import { render, screen } from '@testing-library/react'
+import AgentContent from './agent-content'
+
+// Mock Markdown component used only in tests
+vi.mock('@/app/components/base/markdown', () => ({
+  Markdown: (props: MarkdownProps & { 'data-testid'?: string }) => (
+    <div data-testid={props['data-testid'] || 'markdown'} data-content={String(props.content)} className={props.className}>
+      {String(props.content)}
+    </div>
+  ),
+}))
+
+// Mock Thought
+vi.mock('@/app/components/base/chat/chat/thought', () => ({
+  default: ({ thought, isFinished }: IThoughtProps) => (
+    <div data-testid="thought-component" data-finished={isFinished}>
+      {thought.thought}
+    </div>
+  ),
+}))
+
+// Mock FileList and Utils
+vi.mock('@/app/components/base/file-uploader', () => ({
+  FileList: ({ files }: { files: FileEntity[] }) => (
+    <div data-testid="file-list-component">
+      {files.map(f => f.name).join(', ')}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/base/file-uploader/utils', () => ({
+  getProcessedFilesFromResponse: (files: FileEntity[]) => files.map(f => ({ ...f, name: `processed-${f.id}` })),
+}))
+
+describe('AgentContent', () => {
+  const mockItem: ChatItem = {
+    id: '1',
+    content: '',
+    isAnswer: true,
+  }
+
+  it('renders logAnnotation if present', () => {
+    const itemWithAnnotation = {
+      ...mockItem,
+      annotation: {
+        logAnnotation: { content: 'Log Annotation Content' },
+      },
+    }
+    render(<AgentContent item={itemWithAnnotation as ChatItem} />)
+    expect(screen.getByTestId('agent-content-markdown')).toHaveTextContent('Log Annotation Content')
+  })
+
+  it('renders content prop if provided and no annotation', () => {
+    render(<AgentContent item={mockItem} content="Direct Content" />)
+    expect(screen.getByTestId('agent-content-markdown')).toHaveTextContent('Direct Content')
+  })
+
+  it('renders agent_thoughts if content is absent', () => {
+    const itemWithThoughts = {
+      ...mockItem,
+      agent_thoughts: [
+        { thought: 'Thought 1', tool: 'tool1' },
+        { thought: 'Thought 2' },
+      ],
+    }
+    render(<AgentContent item={itemWithThoughts as ChatItem} responding={false} />)
+    const items = screen.getAllByTestId('agent-thought-item')
+    expect(items).toHaveLength(2)
+    const thoughtMarkdowns = screen.getAllByTestId('agent-thought-markdown')
+    expect(thoughtMarkdowns[0]).toHaveTextContent('Thought 1')
+    expect(thoughtMarkdowns[1]).toHaveTextContent('Thought 2')
+    expect(screen.getByTestId('thought-component')).toHaveTextContent('Thought 1')
+  })
+
+  it('passes correct isFinished to Thought component', () => {
+    const itemWithThoughts = {
+      ...mockItem,
+      agent_thoughts: [
+        { thought: 'T1', tool: 'tool1', observation: 'obs1' }, // finished by observation
+        { thought: 'T2', tool: 'tool2' }, // finished by responding=false
+      ],
+    }
+    const { rerender } = render(<AgentContent item={itemWithThoughts as ChatItem} responding={true} />)
+    const thoughts = screen.getAllByTestId('thought-component')
+    expect(thoughts[0]).toHaveAttribute('data-finished', 'true')
+    expect(thoughts[1]).toHaveAttribute('data-finished', 'false')
+
+    rerender(<AgentContent item={itemWithThoughts as ChatItem} responding={false} />)
+    expect(screen.getAllByTestId('thought-component')[1]).toHaveAttribute('data-finished', 'true')
+  })
+
+  it('renders FileList if thought has message_files', () => {
+    const itemWithFiles = {
+      ...mockItem,
+      agent_thoughts: [
+        {
+          thought: 'T1',
+          message_files: [{ id: 'file1' }, { id: 'file2' }],
+        },
+      ],
+    }
+    render(<AgentContent item={itemWithFiles as ChatItem} />)
+    expect(screen.getByTestId('file-list-component')).toHaveTextContent('processed-file1, processed-file2')
+  })
+
+  it('renders nothing if no annotation, content, or thoughts', () => {
+    render(<AgentContent item={mockItem} />)
+    expect(screen.getByTestId('agent-content-container')).toBeEmptyDOMElement()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/agent-content.tsx b/web/app/components/base/chat/chat/answer/agent-content.tsx
index d8009f13d4..579c1836e9 100644
--- a/web/app/components/base/chat/chat/answer/agent-content.tsx
+++ b/web/app/components/base/chat/chat/answer/agent-content.tsx
@@ -23,15 +23,29 @@ const AgentContent: FC<AgentContentProps> = ({
     agent_thoughts,
   } = item
 
-  if (annotation?.logAnnotation)
-    return <Markdown content={annotation?.logAnnotation.content || ''} />
+  if (annotation?.logAnnotation) {
+    return (
+      <Markdown
+        content={annotation?.logAnnotation.content || ''}
+        data-testid="agent-content-markdown"
+      />
+    )
+  }
 
   return (
-    <div>
-      {content ? <Markdown content={content} /> : agent_thoughts?.map((thought, index) => (
-        <div key={index} className="px-2 py-1">
+    <div data-testid="agent-content-container">
+      {content ? (
+        <Markdown
+          content={content}
+          data-testid="agent-content-markdown"
+        />
+      ) : agent_thoughts?.map((thought, index) => (
+        <div key={index} className="px-2 py-1" data-testid="agent-thought-item">
           {thought.thought && (
-            <Markdown content={thought.thought} />
+            <Markdown
+              content={thought.thought}
+              data-testid="agent-thought-markdown"
+            />
           )}
           {/* {item.tool} */}
           {/* perhaps not use tool */}
diff --git a/web/app/components/base/chat/chat/answer/basic-content.spec.tsx b/web/app/components/base/chat/chat/answer/basic-content.spec.tsx
new file mode 100644
index 0000000000..9a03ea9d40
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/basic-content.spec.tsx
@@ -0,0 +1,91 @@
+import type { ChatItem } from '../../types'
+import type { MarkdownProps } from '@/app/components/base/markdown'
+import { render, screen } from '@testing-library/react'
+import BasicContent from './basic-content'
+
+// Mock Markdown component used only in tests
+vi.mock('@/app/components/base/markdown', () => ({
+  Markdown: ({ content, className }: MarkdownProps) => (
+    <div data-testid="basic-content-markdown" data-content={String(content)} className={className}>
+      {String(content)}
+    </div>
+  ),
+}))
+
+describe('BasicContent', () => {
+  const mockItem = {
+    id: '1',
+    content: 'Hello World',
+    isAnswer: true,
+  }
+
+  it('renders content correctly', () => {
+    render(<BasicContent item={mockItem as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', 'Hello World')
+  })
+
+  it('renders logAnnotation content if present', () => {
+    const itemWithAnnotation = {
+      ...mockItem,
+      annotation: {
+        logAnnotation: {
+          content: 'Annotated Content',
+        },
+      },
+    }
+    render(<BasicContent item={itemWithAnnotation as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', 'Annotated Content')
+  })
+
+  it('wraps Windows UNC paths in backticks', () => {
+    const itemWithUNC = {
+      ...mockItem,
+      content: '\\\\server\\share\\file.txt',
+    }
+    render(<BasicContent item={itemWithUNC as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', '`\\\\server\\share\\file.txt`')
+  })
+
+  it('does not wrap content in backticks if it already is', () => {
+    const itemWithBackticks = {
+      ...mockItem,
+      content: '`\\\\server\\share\\file.txt`',
+    }
+    render(<BasicContent item={itemWithBackticks as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', '`\\\\server\\share\\file.txt`')
+  })
+
+  it('does not wrap backslash strings that are not UNC paths', () => {
+    const itemWithBackslashes = {
+      ...mockItem,
+      content: '\\not-a-unc',
+    }
+    render(<BasicContent item={itemWithBackslashes as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', '\\not-a-unc')
+  })
+
+  it('applies error class when isError is true', () => {
+    const errorItem = {
+      ...mockItem,
+      isError: true,
+    }
+    render(<BasicContent item={errorItem as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveClass('!text-[#F04438]')
+  })
+
+  it('renders non-string content without attempting to wrap (covers typeof !== "string" branch)', () => {
+    const itemWithNonStringContent = {
+      ...mockItem,
+      content: 12345,
+    }
+    render(<BasicContent item={itemWithNonStringContent as unknown as ChatItem} />)
+    const markdown = screen.getByTestId('basic-content-markdown')
+    expect(markdown).toHaveAttribute('data-content', '12345')
+  })
+})
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 cda2dd6ffb..15c1125b0f 100644
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -15,8 +15,14 @@ const BasicContent: FC<BasicContentProps> = ({
     content,
   } = item
 
-  if (annotation?.logAnnotation)
-    return <Markdown content={annotation?.logAnnotation.content || ''} />
+  if (annotation?.logAnnotation) {
+    return (
+      <Markdown
+        content={annotation?.logAnnotation.content || ''}
+        data-testid="basic-content-markdown"
+      />
+    )
+  }
 
   // Preserve Windows UNC paths and similar backslash-heavy strings by
   // wrapping them in inline code so Markdown renders backslashes verbatim.
@@ -31,6 +37,7 @@ const BasicContent: FC<BasicContentProps> = ({
         item.isError && '!text-[#F04438]',
       )}
       content={displayContent}
+      data-testid="basic-content-markdown"
     />
   )
 }
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx
new file mode 100644
index 0000000000..2c762f37b5
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx
@@ -0,0 +1,111 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import ContentItem from './content-item'
+
+vi.mock('@/app/components/base/markdown', () => ({
+  Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,
+}))
+
+describe('ContentItem', () => {
+  const mockOnInputChange = vi.fn()
+  const mockFormInputFields: FormInputItem[] = [
+    {
+      type: 'paragraph',
+      output_variable_name: 'user_bio',
+      default: {
+        type: 'constant',
+        value: '',
+        selector: [],
+      },
+    } as FormInputItem,
+  ]
+  const mockInputs = {
+    user_bio: 'Initial bio',
+  }
+
+  it('should render Markdown for literal content', () => {
+    render(
+      <ContentItem
+        content="Hello world"
+        formInputFields={[]}
+        inputs={{}}
+        onInputChange={mockOnInputChange}
+      />,
+    )
+
+    expect(screen.getByTestId('mock-markdown')).toHaveTextContent('Hello world')
+    expect(screen.queryByTestId('content-item-textarea')).not.toBeInTheDocument()
+  })
+
+  it('should render Textarea for valid output variable content', () => {
+    render(
+      <ContentItem
+        content="{{#$output.user_bio#}}"
+        formInputFields={mockFormInputFields}
+        inputs={mockInputs}
+        onInputChange={mockOnInputChange}
+      />,
+    )
+
+    const textarea = screen.getByTestId('content-item-textarea')
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveValue('Initial bio')
+    expect(screen.queryByTestId('mock-markdown')).not.toBeInTheDocument()
+  })
+
+  it('should call onInputChange when textarea value changes', async () => {
+    const user = userEvent.setup()
+    render(
+      <ContentItem
+        content="{{#$output.user_bio#}}"
+        formInputFields={mockFormInputFields}
+        inputs={mockInputs}
+        onInputChange={mockOnInputChange}
+      />,
+    )
+
+    const textarea = screen.getByTestId('content-item-textarea')
+    await user.type(textarea, 'x')
+
+    expect(mockOnInputChange).toHaveBeenCalledWith('user_bio', 'Initial biox')
+  })
+
+  it('should render nothing if field name is valid but not found in formInputFields', () => {
+    const { container } = render(
+      <ContentItem
+        content="{{#$output.unknown_field#}}"
+        formInputFields={mockFormInputFields}
+        inputs={mockInputs}
+        onInputChange={mockOnInputChange}
+      />,
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render nothing if input type is not supported', () => {
+    const { container } = render(
+      <ContentItem
+        content="{{#$output.user_bio#}}"
+        formInputFields={[
+          {
+            type: 'text-input',
+            output_variable_name: 'user_bio',
+            default: {
+              type: 'constant',
+              value: '',
+              selector: [],
+            },
+          } as FormInputItem,
+        ]}
+        inputs={mockInputs}
+        onInputChange={mockOnInputChange}
+      />,
+    )
+
+    expect(container.querySelector('[data-testid="content-item-textarea"]')).not.toBeInTheDocument()
+    expect(container.querySelector('.py-3')?.textContent).toBe('')
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx
index 3c9cd617d0..9649a92167 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx
@@ -45,6 +45,7 @@ const ContentItem = ({
           className="h-[104px] sm:text-xs"
           value={inputs[fieldName]}
           onChange={(e) => { onInputChange(fieldName, e.target.value) }}
+          data-testid="content-item-textarea"
         />
       )}
     </div>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx
new file mode 100644
index 0000000000..36f264a834
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import ContentWrapper from './content-wrapper'
+
+describe('ContentWrapper', () => {
+  const defaultProps = {
+    nodeTitle: 'Human Input Node',
+    children: <div data-testid="child-content">Child Content</div>,
+  }
+
+  it('should render node title and children by default when not collapsible', () => {
+    render(<ContentWrapper {...defaultProps} />)
+
+    expect(screen.getByText('Human Input Node')).toBeInTheDocument()
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+    expect(screen.queryByTestId('expand-icon')).not.toBeInTheDocument()
+  })
+
+  it('should show/hide content when toggling expansion', async () => {
+    const user = userEvent.setup()
+    render(<ContentWrapper {...defaultProps} showExpandIcon={true} expanded={false} />)
+
+    // Initially collapsed
+    expect(screen.queryByTestId('child-content')).not.toBeInTheDocument()
+    const expandToggle = screen.getByTestId('expand-icon')
+    expect(expandToggle.querySelector('.i-ri-arrow-right-s-line')).toBeInTheDocument()
+
+    // Expand
+    await user.click(expandToggle)
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+    expect(expandToggle.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+
+    // Collapse
+    await user.click(expandToggle)
+    expect(screen.queryByTestId('child-content')).not.toBeInTheDocument()
+  })
+
+  it('should render children initially if expanded is true', () => {
+    render(<ContentWrapper {...defaultProps} showExpandIcon={true} expanded={true} />)
+
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+    const expandToggle = screen.getByTestId('expand-icon')
+    expect(expandToggle.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
index acd154e30a..85d8affb71 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
@@ -1,4 +1,3 @@
-import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
@@ -26,26 +25,33 @@ const ContentWrapper = ({
   }, [isExpanded])
 
   return (
-    <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-background-section p-2 shadow-md', className)}>
+    <div
+      className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-background-section p-2 shadow-md', className)}
+      data-testid="content-wrapper"
+    >
       <div className="flex items-center gap-2 p-2">
         {/* node icon */}
         <BlockIcon type={BlockEnum.HumanInput} className="shrink-0" />
         {/* node name */}
         <div
-          className="system-sm-semibold-uppercase grow truncate text-text-primary"
+          className="grow truncate text-text-primary system-sm-semibold-uppercase"
           title={nodeTitle}
         >
           {nodeTitle}
         </div>
         {showExpandIcon && (
-          <div className="shrink-0 cursor-pointer" onClick={handleToggleExpand}>
+          <div
+            className="shrink-0 cursor-pointer"
+            onClick={handleToggleExpand}
+            data-testid="expand-icon"
+          >
             {
               isExpanded
                 ? (
-                    <RiArrowDownSLine className="size-4" />
+                    <div className="i-ri-arrow-down-s-line size-4" />
                   )
                 : (
-                    <RiArrowRightSLine className="size-4" />
+                    <div className="i-ri-arrow-right-s-line size-4" />
                   )
             }
           </div>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx
new file mode 100644
index 0000000000..3f2e6e4beb
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ExecutedAction from './executed-action'
+
+describe('ExecutedAction', () => {
+  it('should render the triggered action information', () => {
+    const executedAction = {
+      id: 'btn_1',
+      title: 'Submit',
+    }
+
+    render(<ExecutedAction executedAction={executedAction} />)
+
+    expect(screen.getByTestId('executed-action')).toBeInTheDocument()
+
+    // Trans component mock from i18n-mock.ts renders a span with data-i18n-key
+    const trans = screen.getByTestId('executed-action').querySelector('span')
+    expect(trans).toHaveAttribute('data-i18n-key', 'nodes.humanInput.userActions.triggered')
+
+    // Check for the trigger icon class
+    expect(screen.getByTestId('executed-action').querySelector('.i-custom-vender-workflow-trigger-all')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
index ccdfcb624b..a063fee777 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
@@ -2,7 +2,6 @@ import type { ExecutedAction as ExecutedActionType } from './type'
 import { memo } from 'react'
 import { Trans } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 
 type ExecutedActionProps = {
   executedAction: ExecutedActionType
@@ -12,14 +11,14 @@ const ExecutedAction = ({
   executedAction,
 }: ExecutedActionProps) => {
   return (
-    <div className="flex flex-col gap-y-1 py-1">
+    <div className="flex flex-col gap-y-1 py-1" data-testid="executed-action">
       <Divider className="mb-2 mt-1 w-[30px]" />
-      <div className="system-xs-regular flex items-center gap-x-1 text-text-tertiary">
-        <TriggerAll className="size-3.5 shrink-0" />
+      <div className="flex items-center gap-x-1 text-text-tertiary system-xs-regular">
+        <div className="i-custom-vender-workflow-trigger-all size-3.5 shrink-0" />
         <Trans
           i18nKey="nodes.humanInput.userActions.triggered"
           ns="workflow"
-          components={{ strong: <span className="system-xs-medium text-text-secondary"></span> }}
+          components={{ strong: <span className="text-text-secondary system-xs-medium"></span> }}
           values={{ actionName: executedAction.id }}
         />
       </div>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx
new file mode 100644
index 0000000000..fdf3a3244b
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ExpirationTime from './expiration-time'
+import * as utils from './utils'
+
+// Mock utils to control time-based logic
+vi.mock('./utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./utils')>()
+  return {
+    ...actual,
+    getRelativeTime: vi.fn(),
+    isRelativeTimeSameOrAfter: vi.fn(),
+  }
+})
+
+describe('ExpirationTime', () => {
+  it('should render "Future" state with relative time', () => {
+    vi.mocked(utils.getRelativeTime).mockReturnValue('in 2 hours')
+    vi.mocked(utils.isRelativeTimeSameOrAfter).mockReturnValue(true)
+
+    const { container } = render(<ExpirationTime expirationTime={1234567890} />)
+
+    expect(screen.getByTestId('expiration-time')).toHaveClass('text-text-tertiary')
+    expect(screen.getByText('share.humanInput.expirationTimeNowOrFuture:{"relativeTime":"in 2 hours"}')).toBeInTheDocument()
+    expect(container.querySelector('.i-ri-time-line')).toBeInTheDocument()
+  })
+
+  it('should render "Expired" state when time is in the past', () => {
+    vi.mocked(utils.getRelativeTime).mockReturnValue('2 hours ago')
+    vi.mocked(utils.isRelativeTimeSameOrAfter).mockReturnValue(false)
+
+    const { container } = render(<ExpirationTime expirationTime={1234567890} />)
+
+    expect(screen.getByTestId('expiration-time')).toHaveClass('text-text-warning')
+    expect(screen.getByText('share.humanInput.expiredTip')).toBeInTheDocument()
+    expect(container.querySelector('.i-ri-alert-fill')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
index 786440dc6b..c3a2f2fdfa 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { RiAlertFill, RiTimeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useLocale } from '@/context/i18n'
 import { cn } from '@/utils/classnames'
@@ -19,8 +18,9 @@ const ExpirationTime = ({
 
   return (
     <div
+      data-testid="expiration-time"
       className={cn(
-        'system-xs-regular mt-1 flex items-center gap-x-1 text-text-tertiary',
+        'mt-1 flex items-center gap-x-1 text-text-tertiary system-xs-regular',
         !isSameOrAfter && 'text-text-warning',
       )}
     >
@@ -28,13 +28,13 @@ const ExpirationTime = ({
         isSameOrAfter
           ? (
               <>
-                <RiTimeLine className="size-3.5" />
+                <div className="i-ri-time-line size-3.5" />
                 <span>{t('humanInput.expirationTimeNowOrFuture', { relativeTime, ns: 'share' })}</span>
               </>
             )
           : (
               <>
-                <RiAlertFill className="size-3.5" />
+                <div className="i-ri-alert-fill size-3.5" />
                 <span>{t('humanInput.expiredTip', { ns: 'share' })}</span>
               </>
             )
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.spec.tsx
new file mode 100644
index 0000000000..e9d6fdee3c
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.spec.tsx
@@ -0,0 +1,132 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { HumanInputFormData } from '@/types/workflow'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import HumanInputForm from './human-input-form'
+
+vi.mock('./content-item', () => ({
+  default: ({ content, onInputChange }: { content: string, onInputChange: (name: string, value: string) => void }) => (
+    <div data-testid="mock-content-item">
+      {content}
+      <button data-testid="update-input" onClick={() => onInputChange('field1', 'new value')}>Update</button>
+    </div>
+  ),
+}))
+
+describe('HumanInputForm', () => {
+  const mockFormData: HumanInputFormData = {
+    form_id: 'form_1',
+    node_id: 'node_1',
+    node_title: 'Title',
+    display_in_ui: true,
+    expiration_time: 0,
+    form_token: 'token_123',
+    form_content: 'Part 1 {{#$output.field1#}} Part 2',
+    inputs: [
+      {
+        type: 'paragraph',
+        output_variable_name: 'field1',
+        default: { type: 'constant', value: 'initial', selector: [] },
+      } as FormInputItem,
+    ],
+    actions: [
+      { id: 'action_1', title: 'Submit', button_style: UserActionButtonType.Primary },
+      { id: 'action_2', title: 'Cancel', button_style: UserActionButtonType.Default },
+      { id: 'action_3', title: 'Accent', button_style: UserActionButtonType.Accent },
+      { id: 'action_4', title: 'Ghost', button_style: UserActionButtonType.Ghost },
+    ],
+    resolved_default_values: {},
+  }
+
+  it('should render content parts and action buttons', () => {
+    render(<HumanInputForm formData={mockFormData} />)
+
+    // splitByOutputVar should yield 3 parts: "Part 1 ", "{{#$output.field1#}}", " Part 2"
+    const contentItems = screen.getAllByTestId('mock-content-item')
+    expect(contentItems).toHaveLength(3)
+    expect(contentItems[0]).toHaveTextContent('Part 1')
+    expect(contentItems[1]).toHaveTextContent('{{#$output.field1#}}')
+    expect(contentItems[2]).toHaveTextContent('Part 2')
+
+    const buttons = screen.getAllByTestId('action-button')
+    expect(buttons).toHaveLength(4)
+    expect(buttons[0]).toHaveTextContent('Submit')
+    expect(buttons[1]).toHaveTextContent('Cancel')
+    expect(buttons[2]).toHaveTextContent('Accent')
+    expect(buttons[3]).toHaveTextContent('Ghost')
+  })
+
+  it('should handle input changes and submit correctly', async () => {
+    const user = userEvent.setup()
+    const mockOnSubmit = vi.fn().mockResolvedValue(undefined)
+    render(<HumanInputForm formData={mockFormData} onSubmit={mockOnSubmit} />)
+
+    // Update input via mock ContentItem
+    await user.click(screen.getAllByTestId('update-input')[0])
+
+    // Submit
+    const submitButton = screen.getByRole('button', { name: 'Submit' })
+    await user.click(submitButton)
+
+    expect(mockOnSubmit).toHaveBeenCalledWith('token_123', {
+      action: 'action_1',
+      inputs: { field1: 'new value' },
+    })
+  })
+
+  it('should disable buttons during submission', async () => {
+    const user = userEvent.setup()
+    let resolveSubmit: (value: void | PromiseLike<void>) => void
+    const submitPromise = new Promise<void>((resolve) => {
+      resolveSubmit = resolve
+    })
+    const mockOnSubmit = vi.fn().mockReturnValue(submitPromise)
+
+    render(<HumanInputForm formData={mockFormData} onSubmit={mockOnSubmit} />)
+
+    const submitButton = screen.getByRole('button', { name: 'Submit' })
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' })
+
+    await user.click(submitButton)
+
+    expect(submitButton).toBeDisabled()
+    expect(cancelButton).toBeDisabled()
+
+    // Finish submission
+    await act(async () => {
+      resolveSubmit!(undefined)
+    })
+
+    expect(submitButton).not.toBeDisabled()
+    expect(cancelButton).not.toBeDisabled()
+  })
+
+  it('should handle missing resolved_default_values', () => {
+    const formDataWithoutDefaults = { ...mockFormData, resolved_default_values: undefined }
+    render(<HumanInputForm formData={formDataWithoutDefaults as unknown as HumanInputFormData} />)
+    expect(screen.getAllByTestId('mock-content-item')).toHaveLength(3)
+  })
+
+  it('should handle unsupported input types in initializeInputs', () => {
+    const formDataWithUnsupported = {
+      ...mockFormData,
+      inputs: [
+        {
+          type: 'text-input',
+          output_variable_name: 'field2',
+          default: { type: 'variable', value: '', selector: [] },
+        } as FormInputItem,
+        {
+          type: 'number',
+          output_variable_name: 'field3',
+          default: { type: 'constant', value: '0', selector: [] },
+        } as FormInputItem,
+      ],
+      resolved_default_values: { field2: 'default value' },
+    }
+    render(<HumanInputForm formData={formDataWithUnsupported} />)
+    expect(screen.getAllByTestId('mock-content-item')).toHaveLength(3)
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
index 0b5d54ab7e..2c22fabdb5 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -49,6 +49,7 @@ const HumanInputForm = ({
             disabled={isSubmitting}
             variant={getButtonStyle(action.button_style) as ButtonProps['variant']}
             onClick={() => submit(formToken, action.id, inputs)}
+            data-testid="action-button"
           >
             {action.title}
           </Button>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.spec.tsx
new file mode 100644
index 0000000000..f56b081370
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.spec.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import SubmittedContent from './submitted-content'
+
+vi.mock('@/app/components/base/markdown', () => ({
+  Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,
+}))
+
+describe('SubmittedContent', () => {
+  it('should render Markdown with the provided content', () => {
+    const content = '## Test Content'
+    render(<SubmittedContent content={content} />)
+
+    expect(screen.getByTestId('submitted-content')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-markdown')).toHaveTextContent(content)
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx
index 68d55f7d64..d56ca4676d 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx
@@ -9,7 +9,9 @@ const SubmittedContent = ({
   content,
 }: SubmittedContentProps) => {
   return (
-    <Markdown content={content} />
+    <div data-testid="submitted-content">
+      <Markdown content={content} />
+    </div>
   )
 }
 
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx
new file mode 100644
index 0000000000..3ea4a25fcd
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx
@@ -0,0 +1,31 @@
+import type { HumanInputFilledFormData } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { SubmittedHumanInputContent } from './submitted'
+
+vi.mock('@/app/components/base/markdown', () => ({
+  Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,
+}))
+
+describe('SubmittedHumanInputContent Integration', () => {
+  const mockFormData: HumanInputFilledFormData = {
+    rendered_content: 'Rendered **Markdown** content',
+    action_id: 'btn_1',
+    action_text: 'Submit Action',
+    node_id: 'node_1',
+    node_title: 'Node Title',
+  }
+
+  it('should render both content and executed action', () => {
+    render(<SubmittedHumanInputContent formData={mockFormData} />)
+
+    // Verify SubmittedContent rendering
+    expect(screen.getByTestId('submitted-content')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-markdown')).toHaveTextContent('Rendered **Markdown** content')
+
+    // Verify ExecutedAction rendering
+    expect(screen.getByTestId('executed-action')).toBeInTheDocument()
+    // Trans component for triggered action. The mock usually renders the key.
+    expect(screen.getByText('nodes.humanInput.userActions.triggered')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/tips.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/tips.spec.tsx
new file mode 100644
index 0000000000..44a92f0e0b
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/tips.spec.tsx
@@ -0,0 +1,83 @@
+import type { AppContextValue } from '@/context/app-context'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { useSelector } from '@/context/app-context'
+import Tips from './tips'
+
+// Mock AppContext's useSelector to control user profile data
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useSelector: vi.fn(),
+  }
+})
+
+describe('Tips', () => {
+  const mockEmail = 'test@example.com'
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useSelector).mockImplementation((selector: (value: AppContextValue) => unknown) => {
+      return selector({
+        userProfile: {
+          email: mockEmail,
+        },
+      } as AppContextValue)
+    })
+  })
+
+  it('should render email tip in normal mode', () => {
+    render(
+      <Tips
+        showEmailTip={true}
+        isEmailDebugMode={false}
+        showDebugModeTip={false}
+      />,
+    )
+
+    expect(screen.getByText('workflow.common.humanInputEmailTip')).toBeInTheDocument()
+    expect(screen.queryByText('common.humanInputEmailTipInDebugMode')).not.toBeInTheDocument()
+    expect(screen.queryByText('workflow.common.humanInputWebappTip')).not.toBeInTheDocument()
+  })
+
+  it('should render email tip in debug mode', () => {
+    render(
+      <Tips
+        showEmailTip={true}
+        isEmailDebugMode={true}
+        showDebugModeTip={false}
+      />,
+    )
+
+    expect(screen.getByText('common.humanInputEmailTipInDebugMode')).toBeInTheDocument()
+    expect(screen.queryByText('workflow.common.humanInputEmailTip')).not.toBeInTheDocument()
+  })
+
+  it('should render debug mode tip', () => {
+    render(
+      <Tips
+        showEmailTip={false}
+        isEmailDebugMode={false}
+        showDebugModeTip={true}
+      />,
+    )
+
+    expect(screen.getByText('workflow.common.humanInputWebappTip')).toBeInTheDocument()
+    expect(screen.queryByText('workflow.common.humanInputEmailTip')).not.toBeInTheDocument()
+  })
+
+  it('should render nothing when all flags are false', () => {
+    const { container } = render(
+      <Tips
+        showEmailTip={false}
+        isEmailDebugMode={false}
+        showDebugModeTip={false}
+      />,
+    )
+
+    expect(screen.queryByTestId('tips')).toBeEmptyDOMElement()
+    // Divider is outside of tips container, but within the fragment
+    expect(container.querySelector('.v-divider')).toBeDefined()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx b/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
index 54cfc8c5a5..9fac47a4a6 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
@@ -20,12 +20,12 @@ const Tips = ({
   return (
     <>
       <Divider className="!my-2 w-[30px]" />
-      <div className="space-y-1 pt-1">
+      <div className="space-y-1 pt-1" data-testid="tips">
         {showEmailTip && !isEmailDebugMode && (
-          <div className="system-xs-regular text-text-secondary">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
+          <div className="text-text-secondary system-xs-regular">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
         )}
         {showEmailTip && isEmailDebugMode && (
-          <div className="system-xs-regular text-text-secondary">
+          <div className="text-text-secondary system-xs-regular">
             <Trans
               i18nKey="common.humanInputEmailTipInDebugMode"
               ns="workflow"
@@ -34,7 +34,7 @@ const Tips = ({
             />
           </div>
         )}
-        {showDebugModeTip && <div className="system-xs-medium text-text-warning">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
+        {showDebugModeTip && <div className="text-text-warning system-xs-medium">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
       </div>
     </>
   )
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx
new file mode 100644
index 0000000000..192b4f08b4
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx
@@ -0,0 +1,212 @@
+import type { InputVarType } from '@/app/components/workflow/types'
+import type { AppContextValue } from '@/context/app-context'
+import type { HumanInputFormData } from '@/types/workflow'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import { useSelector } from '@/context/app-context'
+import { UnsubmittedHumanInputContent } from './unsubmitted'
+
+// Mock AppContext's useSelector to control user profile data
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useSelector: vi.fn(),
+  }
+})
+
+describe('UnsubmittedHumanInputContent Integration', () => {
+  const user = userEvent.setup()
+
+  // Helper to create valid form data
+  const createMockFormData = (overrides = {}): HumanInputFormData => ({
+    form_id: 'form_123',
+    node_id: 'node_456',
+    node_title: 'Input Form',
+    form_content: 'Fill this out: {{#$output.user_name#}}',
+    inputs: [
+      {
+        type: 'paragraph' as InputVarType,
+        output_variable_name: 'user_name',
+        default: {
+          type: 'constant',
+          value: 'Default value',
+          selector: [],
+        },
+      },
+    ],
+    actions: [
+      { id: 'btn_1', title: 'Submit', button_style: UserActionButtonType.Primary },
+    ],
+    form_token: 'token_123',
+    resolved_default_values: {},
+    expiration_time: Math.floor(Date.now() / 1000) + 3600, // 1 hour from now
+    display_in_ui: true,
+    ...overrides,
+  } as unknown as HumanInputFormData)
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useSelector).mockImplementation((selector: (value: AppContextValue) => unknown) => {
+      return selector({
+        userProfile: {
+          id: 'user_123',
+          name: 'Test User',
+          email: 'test@example.com',
+          avatar: '',
+          avatar_url: '',
+          is_password_set: false,
+        },
+      } as AppContextValue)
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render form, tips, and expiration time when all conditions met', () => {
+      render(
+        <UnsubmittedHumanInputContent
+          formData={createMockFormData()}
+          showEmailTip={true}
+          showDebugModeTip={true}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('Submit')).toBeInTheDocument()
+      expect(screen.getByTestId('tips')).toBeInTheDocument()
+      expect(screen.getByTestId('expiration-time')).toBeInTheDocument()
+      expect(screen.getByText('workflow.common.humanInputWebappTip')).toBeInTheDocument()
+    })
+
+    it('should hide ExpirationTime when expiration_time is not a number', () => {
+      const data = createMockFormData({ expiration_time: undefined })
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={vi.fn()} />)
+
+      expect(screen.queryByTestId('expiration-time')).not.toBeInTheDocument()
+    })
+
+    it('should hide Tips when both tip flags are false', () => {
+      render(
+        <UnsubmittedHumanInputContent
+          formData={createMockFormData()}
+          showEmailTip={false}
+          showDebugModeTip={false}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      expect(screen.queryByTestId('tips')).not.toBeInTheDocument()
+    })
+
+    it('should render different email tips based on debug mode', () => {
+      const { rerender } = render(
+        <UnsubmittedHumanInputContent
+          formData={createMockFormData()}
+          showEmailTip={true}
+          isEmailDebugMode={false}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('workflow.common.humanInputEmailTip')).toBeInTheDocument()
+
+      rerender(
+        <UnsubmittedHumanInputContent
+          formData={createMockFormData()}
+          showEmailTip={true}
+          isEmailDebugMode={true}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('common.humanInputEmailTipInDebugMode')).toBeInTheDocument()
+    })
+
+    it('should render "Expired" state when expiration time is in the past', () => {
+      const data = createMockFormData({ expiration_time: Math.floor(Date.now() / 1000) - 3600 })
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={vi.fn()} />)
+
+      expect(screen.getByText('share.humanInput.expiredTip')).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should update input values and call onSubmit', async () => {
+      const handleSubmit = vi.fn().mockImplementation(() => Promise.resolve())
+      const data = createMockFormData()
+
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={handleSubmit} />)
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New Value')
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' })
+      await user.click(submitBtn)
+
+      expect(handleSubmit).toHaveBeenCalledWith('token_123', {
+        action: 'btn_1',
+        inputs: { user_name: 'New Value' },
+      })
+    })
+
+    it('should handle loading state during submission', async () => {
+      let resolveSubmit: (value: void | PromiseLike<void>) => void
+      const handleSubmit = vi.fn().mockImplementation(() => new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      }))
+      const data = createMockFormData()
+
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={handleSubmit} />)
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' })
+      await user.click(submitBtn)
+
+      expect(submitBtn).toBeDisabled()
+      expect(handleSubmit).toHaveBeenCalled()
+
+      await waitFor(() => {
+        resolveSubmit!()
+      })
+
+      await waitFor(() => expect(submitBtn).not.toBeDisabled())
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle missing resolved_default_values', () => {
+      const data = createMockFormData({ resolved_default_values: undefined })
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={vi.fn()} />)
+      expect(screen.getByText('Submit')).toBeInTheDocument()
+    })
+
+    it('should return null in ContentItem if field is not found', () => {
+      const data = createMockFormData({
+        form_content: '{{#$output.unknown_field#}}',
+        inputs: [],
+      })
+      const { container } = render(<UnsubmittedHumanInputContent formData={data} onSubmit={vi.fn()} />)
+      // The form will be empty (except for buttons) because unknown_field is not in inputs
+      expect(container.querySelector('textarea')).not.toBeInTheDocument()
+    })
+
+    it('should render text-input type in initializeInputs correctly', () => {
+      const data = createMockFormData({
+        inputs: [
+          {
+            type: 'text-input',
+            output_variable_name: 'var1',
+            label: 'Var 1',
+            required: true,
+            default: { type: 'fixed', value: 'fixed_val' },
+          },
+        ],
+      })
+      render(<UnsubmittedHumanInputContent formData={data} onSubmit={vi.fn()} />)
+      // initializeInputs is tested indirectly here.
+      // We can't easily assert the internal state of HumanInputForm, but we can verify it doesn't crash.
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-filled-form-list.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-filled-form-list.spec.tsx
new file mode 100644
index 0000000000..5eceddd444
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-filled-form-list.spec.tsx
@@ -0,0 +1,58 @@
+import type { HumanInputFilledFormData } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import HumanInputFilledFormList from './human-input-filled-form-list'
+
+/**
+ * Type-safe factory.
+ * Forces test data to match real interface.
+ */
+const createFormData = (
+  overrides: Partial<HumanInputFilledFormData> = {},
+): HumanInputFilledFormData => ({
+  node_id: 'node-1',
+  node_title: 'Node Title',
+
+  // 👇 IMPORTANT
+  // DO NOT guess properties like `inputs`
+  // Only include fields that actually exist in your project type.
+  // Leave everything else empty via spread.
+  ...overrides,
+} as HumanInputFilledFormData)
+
+describe('HumanInputFilledFormList', () => {
+  it('renders nothing when list is empty', () => {
+    render(<HumanInputFilledFormList humanInputFilledFormDataList={[]} />)
+
+    expect(screen.queryByText('Node Title')).not.toBeInTheDocument()
+  })
+
+  it('renders one form item', () => {
+    const data = [createFormData()]
+
+    render(<HumanInputFilledFormList humanInputFilledFormDataList={data} />)
+
+    expect(screen.getByText('Node Title')).toBeInTheDocument()
+  })
+
+  it('renders multiple form items', () => {
+    const data = [
+      createFormData({ node_id: '1', node_title: 'First' }),
+      createFormData({ node_id: '2', node_title: 'Second' }),
+    ]
+
+    render(<HumanInputFilledFormList humanInputFilledFormDataList={data} />)
+
+    expect(screen.getByText('First')).toBeInTheDocument()
+    expect(screen.getByText('Second')).toBeInTheDocument()
+  })
+
+  it('renders wrapper container', () => {
+    const { container } = render(
+      <HumanInputFilledFormList humanInputFilledFormDataList={[createFormData()]} />,
+    )
+
+    expect(container.firstChild).toHaveClass('flex')
+    expect(container.firstChild).toHaveClass('flex-col')
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-form-list.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-form-list.spec.tsx
new file mode 100644
index 0000000000..4bfd3a7d97
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-form-list.spec.tsx
@@ -0,0 +1,131 @@
+import type { HumanInputFormData } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'
+import HumanInputFormList from './human-input-form-list'
+
+// Mock child components
+vi.mock('./human-input-content/content-wrapper', () => ({
+  default: ({ children, nodeTitle }: { children: React.ReactNode, nodeTitle: string }) => (
+    <div data-testid="content-wrapper" data-nodetitle={nodeTitle}>
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('./human-input-content/unsubmitted', () => ({
+  UnsubmittedHumanInputContent: ({ showEmailTip, isEmailDebugMode, showDebugModeTip }: { showEmailTip: boolean, isEmailDebugMode: boolean, showDebugModeTip: boolean }) => (
+    <div data-testid="unsubmitted-content">
+      <span data-testid="email-tip">{showEmailTip ? 'true' : 'false'}</span>
+      <span data-testid="email-debug">{isEmailDebugMode ? 'true' : 'false'}</span>
+      <span data-testid="debug-tip">{showDebugModeTip ? 'true' : 'false'}</span>
+    </div>
+  ),
+}))
+
+describe('HumanInputFormList', () => {
+  const mockFormData = [
+    {
+      form_id: 'form1',
+      node_id: 'node1',
+      node_title: 'Title 1',
+      display_in_ui: true,
+    },
+    {
+      form_id: 'form2',
+      node_id: 'node2',
+      node_title: 'Title 2',
+      display_in_ui: false,
+    },
+  ]
+
+  const mockGetNodeData = vi.fn()
+
+  it('should render empty list when no form data is provided', () => {
+    render(<HumanInputFormList humanInputFormDataList={[]} />)
+    expect(screen.getByTestId('human-input-form-list')).toBeEmptyDOMElement()
+  })
+
+  it('should render only items with display_in_ui set to true', () => {
+    mockGetNodeData.mockReturnValue({
+      data: {
+        delivery_methods: [],
+      },
+    })
+    render(
+      <HumanInputFormList
+        humanInputFormDataList={mockFormData as HumanInputFormData[]}
+        getHumanInputNodeData={mockGetNodeData}
+      />,
+    )
+    const items = screen.getAllByTestId('human-input-form-item')
+    expect(items).toHaveLength(1)
+    expect(screen.getByTestId('content-wrapper')).toHaveAttribute('data-nodetitle', 'Title 1')
+  })
+
+  describe('Delivery Methods Config', () => {
+    it('should set default tips when node data is not found', () => {
+      mockGetNodeData.mockReturnValue(undefined)
+      render(
+        <HumanInputFormList
+          humanInputFormDataList={[mockFormData[0]] as HumanInputFormData[]}
+          getHumanInputNodeData={mockGetNodeData}
+        />,
+      )
+      expect(screen.getByTestId('email-tip')).toHaveTextContent('false')
+      expect(screen.getByTestId('email-debug')).toHaveTextContent('false')
+      expect(screen.getByTestId('debug-tip')).toHaveTextContent('false')
+    })
+
+    it('should set default tips when delivery_methods is empty', () => {
+      mockGetNodeData.mockReturnValue({ data: { delivery_methods: [] } })
+      render(
+        <HumanInputFormList
+          humanInputFormDataList={[mockFormData[0]] as HumanInputFormData[]}
+          getHumanInputNodeData={mockGetNodeData}
+        />,
+      )
+      expect(screen.getByTestId('email-tip')).toHaveTextContent('false')
+      expect(screen.getByTestId('email-debug')).toHaveTextContent('false')
+      expect(screen.getByTestId('debug-tip')).toHaveTextContent('false')
+    })
+
+    it('should show tips correctly based on delivery methods', () => {
+      mockGetNodeData.mockReturnValue({
+        data: {
+          delivery_methods: [
+            { type: DeliveryMethodType.WebApp, enabled: true },
+            { type: DeliveryMethodType.Email, enabled: true, config: { debug_mode: true } },
+          ],
+        },
+      })
+      render(
+        <HumanInputFormList
+          humanInputFormDataList={[mockFormData[0]] as HumanInputFormData[]}
+          getHumanInputNodeData={mockGetNodeData}
+        />,
+      )
+      expect(screen.getByTestId('email-tip')).toHaveTextContent('true')
+      expect(screen.getByTestId('email-debug')).toHaveTextContent('true')
+      expect(screen.getByTestId('debug-tip')).toHaveTextContent('false') // WebApp is enabled
+    })
+
+    it('should show debug mode tip if WebApp is disabled', () => {
+      mockGetNodeData.mockReturnValue({
+        data: {
+          delivery_methods: [
+            { type: DeliveryMethodType.WebApp, enabled: false },
+            { type: DeliveryMethodType.Email, enabled: false },
+          ],
+        },
+      })
+      render(
+        <HumanInputFormList
+          humanInputFormDataList={[mockFormData[0]] as HumanInputFormData[]}
+          getHumanInputNodeData={mockGetNodeData}
+        />,
+      )
+      expect(screen.getByTestId('email-tip')).toHaveTextContent('false')
+      expect(screen.getByTestId('debug-tip')).toHaveTextContent('true')
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/human-input-form-list.tsx b/web/app/components/base/chat/chat/answer/human-input-form-list.tsx
index 1403bcb600..47dcd72094 100644
--- a/web/app/components/base/chat/chat/answer/human-input-form-list.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-form-list.tsx
@@ -45,22 +45,28 @@ const HumanInputFormList = ({
   const filteredHumanInputFormDataList = humanInputFormDataList.filter(formData => formData.display_in_ui)
 
   return (
-    <div className="mt-2 flex flex-col gap-y-2">
+    <div
+      className="mt-2 flex flex-col gap-y-2"
+      data-testid="human-input-form-list"
+    >
       {
         filteredHumanInputFormDataList.map(formData => (
-          <ContentWrapper
+          <div
             key={formData.form_id}
-            nodeTitle={formData.node_title}
+            data-testid="human-input-form-item"
           >
-            <UnsubmittedHumanInputContent
-              key={formData.form_id}
-              formData={formData}
-              showEmailTip={!!deliveryMethodsConfig[formData.node_id]?.showEmailTip}
-              isEmailDebugMode={!!deliveryMethodsConfig[formData.node_id]?.isEmailDebugMode}
-              showDebugModeTip={!!deliveryMethodsConfig[formData.node_id]?.showDebugModeTip}
-              onSubmit={onHumanInputFormSubmit}
-            />
-          </ContentWrapper>
+            <ContentWrapper
+              nodeTitle={formData.node_title}
+            >
+              <UnsubmittedHumanInputContent
+                formData={formData}
+                showEmailTip={!!deliveryMethodsConfig[formData.node_id]?.showEmailTip}
+                isEmailDebugMode={!!deliveryMethodsConfig[formData.node_id]?.isEmailDebugMode}
+                showDebugModeTip={!!deliveryMethodsConfig[formData.node_id]?.showDebugModeTip}
+                onSubmit={onHumanInputFormSubmit}
+              />
+            </ContentWrapper>
+          </div>
         ))
       }
     </div>
diff --git a/web/app/components/base/chat/chat/answer/more.spec.tsx b/web/app/components/base/chat/chat/answer/more.spec.tsx
new file mode 100644
index 0000000000..551c15e659
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/more.spec.tsx
@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react'
+import More from './more'
+
+describe('More', () => {
+  const mockMoreData = {
+    latency: 0.5,
+    tokens: 100,
+    tokens_per_second: 200,
+    time: '2023-10-27 10:00:00',
+  }
+
+  it('should render all details when all data is provided', () => {
+    render(<More more={mockMoreData} />)
+
+    expect(screen.getByTestId('more-container')).toBeInTheDocument()
+
+    // Check latency
+    expect(screen.getByTestId('more-latency')).toBeInTheDocument()
+    expect(screen.getByText(/timeConsuming/i)).toBeInTheDocument()
+    expect(screen.getByText(/0.5/)).toBeInTheDocument()
+    expect(screen.getByText(/second/i)).toBeInTheDocument()
+
+    // Check tokens
+    expect(screen.getByTestId('more-tokens')).toBeInTheDocument()
+    expect(screen.getByText(/tokenCost/i)).toBeInTheDocument()
+    expect(screen.getByText(/100/)).toBeInTheDocument()
+
+    // Check tokens per second
+    expect(screen.getByTestId('more-tps')).toBeInTheDocument()
+    expect(screen.getByText(/200 tokens\/s/i)).toBeInTheDocument()
+
+    // Check time
+    expect(screen.getByTestId('more-time')).toBeInTheDocument()
+    expect(screen.getByText('2023-10-27 10:00:00')).toBeInTheDocument()
+  })
+
+  it('should not render tokens per second when it is missing', () => {
+    const dataWithoutTPS = { ...mockMoreData, tokens_per_second: 0 }
+    render(<More more={dataWithoutTPS} />)
+
+    expect(screen.queryByTestId('more-tps')).not.toBeInTheDocument()
+  })
+
+  it('should render nothing inside container if more prop is missing', () => {
+    render(<More more={undefined} />)
+    const containerDiv = screen.getByTestId('more-container')
+    expect(containerDiv).toBeInTheDocument()
+    expect(containerDiv.children.length).toBe(0)
+  })
+
+  it('should apply group-hover opacity classes', () => {
+    render(<More more={mockMoreData} />)
+    const container = screen.getByTestId('more-container')
+    expect(container).toHaveClass('opacity-0')
+    expect(container).toHaveClass('group-hover:opacity-100')
+  })
+
+  it('should correctly format large token counts', () => {
+    const dataWithLargeTokens = { ...mockMoreData, tokens: 1234567 }
+    render(<More more={dataWithLargeTokens} />)
+
+    // formatNumber(1234567) should return '1,234,567'
+    expect(screen.getByText(/1,234,567/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/more.tsx b/web/app/components/base/chat/chat/answer/more.tsx
index c091418cef..700c548ee4 100644
--- a/web/app/components/base/chat/chat/answer/more.tsx
+++ b/web/app/components/base/chat/chat/answer/more.tsx
@@ -13,19 +13,24 @@ const More: FC<MoreProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="system-xs-regular mt-1 flex items-center text-text-quaternary opacity-0 group-hover:opacity-100">
+    <div
+      className="mt-1 flex items-center text-text-quaternary opacity-0 system-xs-regular group-hover:opacity-100"
+      data-testid="more-container"
+    >
       {
         more && (
           <>
             <div
               className="mr-2 max-w-[25%] shrink-0 truncate"
               title={`${t('detail.timeConsuming', { ns: 'appLog' })} ${more.latency}${t('detail.second', { ns: 'appLog' })}`}
+              data-testid="more-latency"
             >
               {`${t('detail.timeConsuming', { ns: 'appLog' })} ${more.latency}${t('detail.second', { ns: 'appLog' })}`}
             </div>
             <div
               className="mr-2 max-w-[25%] shrink-0 truncate"
               title={`${t('detail.tokenCost', { ns: 'appLog' })} ${formatNumber(more.tokens)}`}
+              data-testid="more-tokens"
             >
               {`${t('detail.tokenCost', { ns: 'appLog' })} ${formatNumber(more.tokens)}`}
             </div>
@@ -33,6 +38,7 @@ const More: FC<MoreProps> = ({
               <div
                 className="mr-2 max-w-[25%] shrink-0 truncate"
                 title={`${more.tokens_per_second} tokens/s`}
+                data-testid="more-tps"
               >
                 {`${more.tokens_per_second} tokens/s`}
               </div>
@@ -41,6 +47,7 @@ const More: FC<MoreProps> = ({
             <div
               className="max-w-[25%] shrink-0 truncate"
               title={more.time}
+              data-testid="more-time"
             >
               {more.time}
             </div>
diff --git a/web/app/components/base/chat/chat/answer/operation.spec.tsx b/web/app/components/base/chat/chat/answer/operation.spec.tsx
new file mode 100644
index 0000000000..eb52dffe8f
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/operation.spec.tsx
@@ -0,0 +1,726 @@
+import type { ChatConfig, ChatItem } from '../../types'
+import type { ChatContextValue } from '../context'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import copy from 'copy-to-clipboard'
+import * as React from 'react'
+import { vi } from 'vitest'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import Operation from './operation'
+
+const {
+  mockSetShowAnnotationFullModal,
+  mockProviderContext,
+  mockT,
+  mockAddAnnotation,
+} = vi.hoisted(() => {
+  return {
+    mockAddAnnotation: vi.fn(),
+    mockSetShowAnnotationFullModal: vi.fn(),
+    mockT: vi.fn((key: string): string => key),
+    mockProviderContext: {
+      plan: {
+        usage: { annotatedResponse: 0 },
+        total: { annotatedResponse: 100 },
+      },
+      enableBilling: false,
+    },
+  }
+})
+
+vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: vi.fn() },
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowAnnotationFullModal: mockSetShowAnnotationFullModal,
+  }),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderContext,
+}))
+
+vi.mock('@/service/annotation', () => ({
+  addAnnotation: mockAddAnnotation,
+}))
+
+vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+  AudioPlayerManager: {
+    getInstance: vi.fn(() => ({
+      getAudioPlayer: vi.fn(() => ({
+        playAudio: vi.fn(),
+        pauseAudio: vi.fn(),
+      })),
+    })),
+  },
+}))
+
+vi.mock('@/app/components/app/annotation/edit-annotation-modal', () => ({
+  default: ({ isShow, onHide, onEdited, onAdded, onRemove }: {
+    isShow: boolean
+    onHide: () => void
+    onEdited: (q: string, a: string) => void
+    onAdded: (id: string, name: string, q: string, a: string) => void
+    onRemove: () => void
+  }) =>
+    isShow
+      ? (
+          <div data-testid="edit-reply-modal">
+            <button data-testid="modal-hide" onClick={onHide}>Close</button>
+            <button data-testid="modal-edit" onClick={() => onEdited('eq', 'ea')}>Edit</button>
+            <button data-testid="modal-add" onClick={() => onAdded('a1', 'author', 'eq', 'ea')}>Add</button>
+            <button data-testid="modal-remove" onClick={onRemove}>Remove</button>
+          </div>
+        )
+      : null,
+}))
+
+vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button', () => ({
+  default: function AnnotationCtrlMock({ onAdded, onEdit, cached }: {
+    onAdded: (id: string, authorName: string) => void
+    onEdit: () => void
+    cached: boolean
+  }) {
+    const { setShowAnnotationFullModal } = useModalContext()
+    const { plan, enableBilling } = useProviderContext()
+    const handleAdd = () => {
+      if (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse) {
+        setShowAnnotationFullModal()
+        return
+      }
+      onAdded('ann-new', 'Test User')
+    }
+    return (
+      <div data-testid="annotation-ctrl">
+        {cached
+          ? (
+              <button data-testid="annotation-edit-btn" onClick={onEdit}>Edit</button>
+            )
+          : (
+              <button data-testid="annotation-add-btn" onClick={handleAdd}>Add</button>
+            )}
+      </div>
+    )
+  },
+}))
+
+vi.mock('@/app/components/base/new-audio-button', () => ({
+  default: () => <button data-testid="audio-btn">Play</button>,
+}))
+
+vi.mock('@/app/components/base/chat/chat/log', () => ({
+  default: () => <button data-testid="log-btn"><div className="i-ri-file-list-3-line" /></button>,
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: vi.fn(() => ({ appId: 'test-app' })),
+  usePathname: vi.fn(() => '/apps/test-app'),
+}))
+
+const makeChatConfig = (overrides: Partial<ChatConfig> = {}): ChatConfig => ({
+  opening_statement: '',
+  pre_prompt: '',
+  prompt_type: 'simple' as ChatConfig['prompt_type'],
+  user_input_form: [],
+  dataset_query_variable: '',
+  more_like_this: { enabled: false },
+  suggested_questions_after_answer: { enabled: false },
+  speech_to_text: { enabled: false },
+  text_to_speech: { enabled: false },
+  retriever_resource: { enabled: false },
+  sensitive_word_avoidance: { enabled: false },
+  agent_mode: { enabled: false, tools: [] },
+  dataset_configs: { retrieval_model: 'single' } as ChatConfig['dataset_configs'],
+  system_parameters: {
+    audio_file_size_limit: 10,
+    file_size_limit: 10,
+    image_file_size_limit: 10,
+    video_file_size_limit: 10,
+    workflow_file_upload_limit: 10,
+  },
+  supportFeedback: false,
+  supportAnnotation: false,
+  ...overrides,
+} as ChatConfig)
+
+const mockContextValue: ChatContextValue = {
+  chatList: [],
+  config: makeChatConfig({ supportFeedback: true }),
+  onFeedback: vi.fn().mockResolvedValue(undefined),
+  onRegenerate: vi.fn(),
+  onAnnotationAdded: vi.fn(),
+  onAnnotationEdited: vi.fn(),
+  onAnnotationRemoved: vi.fn(),
+}
+
+vi.mock('../context', () => ({
+  useChatContext: () => mockContextValue,
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: mockT,
+  }),
+}))
+
+type OperationProps = {
+  item: ChatItem
+  question: string
+  index: number
+  showPromptLog?: boolean
+  maxSize: number
+  contentWidth: number
+  hasWorkflowProcess: boolean
+  noChatInput?: boolean
+}
+
+const baseItem: ChatItem = {
+  id: 'msg-1',
+  content: 'Hello world',
+  isAnswer: true,
+}
+
+const baseProps: OperationProps = {
+  item: baseItem,
+  question: 'What is this?',
+  index: 0,
+  maxSize: 500,
+  contentWidth: 300,
+  hasWorkflowProcess: false,
+}
+
+describe('Operation', () => {
+  const renderOperation = (props = baseProps) => {
+    return render(
+      <div className="group">
+        <Operation {...props} />
+      </div>,
+    )
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockContextValue.config = makeChatConfig({ supportFeedback: true })
+    mockContextValue.onFeedback = vi.fn().mockResolvedValue(undefined)
+    mockContextValue.onRegenerate = vi.fn()
+    mockContextValue.onAnnotationAdded = vi.fn()
+    mockContextValue.onAnnotationEdited = vi.fn()
+    mockContextValue.onAnnotationRemoved = vi.fn()
+    mockProviderContext.plan.usage.annotatedResponse = 0
+    mockProviderContext.enableBilling = false
+    mockAddAnnotation.mockResolvedValue({ id: 'ann-new', account: { name: 'Test User' } })
+  })
+
+  describe('Rendering', () => {
+    it('should hide action buttons for opening statements', () => {
+      const item = { ...baseItem, isOpeningStatement: true }
+      renderOperation({ ...baseProps, item })
+      expect(screen.queryByTestId('operation-actions')).not.toBeInTheDocument()
+    })
+
+    it('should show copy and regenerate buttons', () => {
+      renderOperation()
+      expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
+      expect(screen.getByTestId('regenerate-btn')).toBeInTheDocument()
+    })
+
+    it('should hide regenerate button when noChatInput is true', () => {
+      renderOperation({ ...baseProps, noChatInput: true })
+      expect(screen.queryByTestId('regenerate-btn')).not.toBeInTheDocument()
+    })
+
+    it('should show TTS button when text_to_speech is enabled', () => {
+      mockContextValue.config = makeChatConfig({ text_to_speech: { enabled: true } })
+      renderOperation()
+      expect(screen.getByTestId('audio-btn')).toBeInTheDocument()
+    })
+
+    it('should show annotation button when config supports it', () => {
+      mockContextValue.config = makeChatConfig({
+        supportAnnotation: true,
+        annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+      })
+      renderOperation()
+      expect(screen.getByTestId('annotation-ctrl')).toBeInTheDocument()
+    })
+
+    it('should show prompt log when showPromptLog is true', () => {
+      renderOperation({ ...baseProps, showPromptLog: true })
+      expect(screen.getByTestId('log-btn')).toBeInTheDocument()
+    })
+
+    it('should not show prompt log for opening statements', () => {
+      const item = { ...baseItem, isOpeningStatement: true }
+      renderOperation({ ...baseProps, item, showPromptLog: true })
+      expect(screen.queryByTestId('log-btn')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Copy functionality', () => {
+    it('should copy content on copy click', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      await user.click(screen.getByTestId('copy-btn'))
+      expect(copy).toHaveBeenCalledWith('Hello world')
+    })
+
+    it('should aggregate agent_thoughts for copy content', async () => {
+      const user = userEvent.setup()
+      const item: ChatItem = {
+        ...baseItem,
+        content: 'ignored',
+        agent_thoughts: [
+          { id: '1', thought: 'Hello ', tool: '', tool_input: '', observation: '', message_id: '', conversation_id: '', position: 0 },
+          { id: '2', thought: 'World', tool: '', tool_input: '', observation: '', message_id: '', conversation_id: '', position: 1 },
+        ],
+      }
+      renderOperation({ ...baseProps, item })
+      await user.click(screen.getByTestId('copy-btn'))
+      expect(copy).toHaveBeenCalledWith('Hello World')
+    })
+  })
+
+  describe('Regenerate', () => {
+    it('should call onRegenerate on regenerate click', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      await user.click(screen.getByTestId('regenerate-btn'))
+      expect(mockContextValue.onRegenerate).toHaveBeenCalledWith(baseItem)
+    })
+  })
+
+  describe('Hiding controls with humanInputFormDataList', () => {
+    it('should hide TTS/copy/annotation when humanInputFormDataList is present', () => {
+      mockContextValue.config = makeChatConfig({
+        supportFeedback: false,
+        text_to_speech: { enabled: true },
+        supportAnnotation: true,
+        annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+      })
+      const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+      renderOperation({ ...baseProps, item })
+      expect(screen.queryByTestId('audio-btn')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('copy-btn')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('User feedback (no annotation support)', () => {
+    beforeEach(() => {
+      mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: false })
+    })
+
+    it('should show like/dislike buttons', () => {
+      renderOperation()
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.i-ri-thumb-up-line')).toBeInTheDocument()
+      expect(bar.querySelector('.i-ri-thumb-down-line')).toBeInTheDocument()
+    })
+
+    it('should call onFeedback with like on like click', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+      await user.click(thumbUp)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+    })
+
+    it('should open feedback modal on dislike click', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should submit dislike feedback from modal', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      const textarea = screen.getByRole('textbox')
+      await user.type(textarea, 'Bad response')
+      const confirmBtn = screen.getByText(/submit/i)
+      await user.click(confirmBtn)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: 'Bad response' })
+    })
+
+    it('should cancel feedback modal', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      const cancelBtn = screen.getByText(/cancel/i)
+      await user.click(cancelBtn)
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should show existing like feedback and allow undo', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, feedback: { rating: 'like' as const } }
+      renderOperation({ ...baseProps, item })
+      const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+      await user.click(thumbUp)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should show existing dislike feedback and allow undo', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, feedback: { rating: 'dislike' as const, content: 'bad' } }
+      renderOperation({ ...baseProps, item })
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should undo like when already liked', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      // First click to like
+      const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+      await user.click(thumbUp)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+
+      // Second click to undo - re-query as it might be a different node
+      const thumbUpUndo = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+      await user.click(thumbUpUndo)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should undo dislike when already disliked', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      const submitBtn = screen.getByText(/submit/i)
+      await user.click(submitBtn)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: '' })
+
+      // Re-query for undo
+      const thumbDownUndo = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDownUndo)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should show tooltip with dislike and content', () => {
+      const item = { ...baseItem, feedback: { rating: 'dislike' as const, content: 'Too slow' } }
+      renderOperation({ ...baseProps, item })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.i-ri-thumb-down-line')).toBeInTheDocument()
+    })
+
+    it('should show tooltip with only rating', () => {
+      const item = { ...baseItem, feedback: { rating: 'like' as const } }
+      renderOperation({ ...baseProps, item })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.i-ri-thumb-up-line')).toBeInTheDocument()
+    })
+
+    it('should not show feedback bar for opening statements', () => {
+      const item = { ...baseItem, isOpeningStatement: true }
+      renderOperation({ ...baseProps, item })
+      expect(screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+    })
+
+    it('should not show user feedback bar when humanInputFormDataList is present', () => {
+      const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+      renderOperation({ ...baseProps, item })
+      expect(screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+    })
+
+    it('should not call feedback when supportFeedback is disabled', async () => {
+      mockContextValue.config = makeChatConfig({ supportFeedback: false })
+      mockContextValue.onFeedback = undefined
+      renderOperation()
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBe(0)
+    })
+  })
+
+  describe('Admin feedback (with annotation support)', () => {
+    beforeEach(() => {
+      mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: true })
+    })
+
+    it('should show admin like/dislike buttons', () => {
+      renderOperation()
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBeGreaterThanOrEqual(1)
+      expect(bar.querySelectorAll('.i-ri-thumb-down-line').length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should call onFeedback with like for admin', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+      const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+      await user.click(adminThumb)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+    })
+
+    it('should open feedback modal on admin dislike click', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+      const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+      await user.click(adminThumb)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should show user feedback read-only in admin bar when user has liked', () => {
+      const item = { ...baseItem, feedback: { rating: 'like' as const } }
+      renderOperation({ ...baseProps, item })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('should show separator in admin bar when user has feedback', () => {
+      const item = { ...baseItem, feedback: { rating: 'dislike' as const } }
+      renderOperation({ ...baseProps, item })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.bg-components-actionbar-border')).toBeInTheDocument()
+    })
+
+    it('should show existing admin like feedback and allow undo', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, adminFeedback: { rating: 'like' as const } }
+      renderOperation({ ...baseProps, item })
+      const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+      await user.click(thumbUp)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should show existing admin dislike and allow undo', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, adminFeedback: { rating: 'dislike' as const } }
+      renderOperation({ ...baseProps, item })
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should undo admin like when already liked', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+      const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+      await user.click(adminThumb)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+
+      const thumbsUndo = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+      const adminThumbUndo = thumbsUndo[thumbsUndo.length - 1].closest('button')!
+      await user.click(adminThumbUndo)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should undo admin dislike when already disliked', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+      const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+      await user.click(adminThumb)
+      const submitBtn = screen.getByText(/submit/i)
+      await user.click(submitBtn)
+
+      const thumbsUndo = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+      const adminThumbUndo = thumbsUndo[thumbsUndo.length - 1].closest('button')!
+      await user.click(adminThumbUndo)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+    })
+
+    it('should not show admin feedback bar when humanInputFormDataList is present', () => {
+      const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+      renderOperation({ ...baseProps, item })
+      expect(screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line').length).toBe(0)
+    })
+  })
+
+  describe('Positioning and layout', () => {
+    it('should position right when operationWidth < maxSize', () => {
+      renderOperation({ ...baseProps, maxSize: 500 })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.style.left).toBeTruthy()
+    })
+
+    it('should position bottom when operationWidth >= maxSize', () => {
+      renderOperation({ ...baseProps, maxSize: 1 })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.style.left).toBeFalsy()
+    })
+
+    it('should apply workflow process class when hasWorkflowProcess is true', () => {
+      renderOperation({ ...baseProps, hasWorkflowProcess: true })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.className).toContain('-bottom-4')
+    })
+
+    it('should calculate width correctly for all features combined', () => {
+      mockContextValue.config = makeChatConfig({
+        text_to_speech: { enabled: true },
+        supportAnnotation: true,
+        annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+        supportFeedback: true,
+      })
+      const item = { ...baseItem, feedback: { rating: 'like' as const }, adminFeedback: { rating: 'dislike' as const } }
+      renderOperation({ ...baseProps, item, showPromptLog: true })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar).toBeInTheDocument()
+    })
+
+    it('should show separator when user has feedback in admin mode', () => {
+      mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: true })
+      const item = { ...baseItem, feedback: { rating: 'like' as const } }
+      renderOperation({ ...baseProps, item })
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.bg-components-actionbar-border')).toBeInTheDocument()
+    })
+
+    it('should handle missing translation fallbacks in buildFeedbackTooltip', () => {
+      // Mock t to return null for specific keys
+      mockT.mockImplementation((key: string): string => {
+        if (key.includes('Rate') || key.includes('like'))
+          return '' // Safe string fallback
+
+        return key
+      })
+
+      renderOperation()
+      expect(screen.getByTestId('operation-bar')).toBeInTheDocument()
+
+      // Reset to default behavior
+      mockT.mockImplementation(key => key)
+    })
+  })
+
+  describe('Annotation integration', () => {
+    beforeEach(() => {
+      mockContextValue.config = makeChatConfig({
+        supportAnnotation: true,
+        annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+        appId: 'test-app',
+      })
+    })
+
+    it('should add annotation via annotation ctrl button', async () => {
+      const user = userEvent.setup()
+      renderOperation()
+      const addBtn = screen.getByTestId('annotation-add-btn')
+      await user.click(addBtn)
+      expect(mockContextValue.onAnnotationAdded).toHaveBeenCalledWith('ann-new', 'Test User', 'What is this?', 'Hello world', 0)
+    })
+
+    it('should show annotation full modal when limit reached', async () => {
+      const user = userEvent.setup()
+      mockProviderContext.enableBilling = true
+      mockProviderContext.plan.usage.annotatedResponse = 100
+      renderOperation()
+      const addBtn = screen.getByTestId('annotation-add-btn')
+      await user.click(addBtn)
+      expect(mockSetShowAnnotationFullModal).toHaveBeenCalled()
+      expect(mockAddAnnotation).not.toHaveBeenCalled()
+    })
+
+    it('should open edit reply modal when cached annotation exists', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+      renderOperation({ ...baseProps, item })
+      const editBtn = screen.getByTestId('annotation-edit-btn')
+      await user.click(editBtn)
+      expect(screen.getByTestId('edit-reply-modal')).toBeInTheDocument()
+    })
+
+    it('should call onAnnotationEdited from edit reply modal', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+      renderOperation({ ...baseProps, item })
+      const editBtn = screen.getByTestId('annotation-edit-btn')
+      await user.click(editBtn)
+      await user.click(screen.getByTestId('modal-edit'))
+      expect(mockContextValue.onAnnotationEdited).toHaveBeenCalledWith('eq', 'ea', 0)
+    })
+
+    it('should call onAnnotationAdded from edit reply modal', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+      renderOperation({ ...baseProps, item })
+      const editBtn = screen.getByTestId('annotation-edit-btn')
+      await user.click(editBtn)
+      await user.click(screen.getByTestId('modal-add'))
+      expect(mockContextValue.onAnnotationAdded).toHaveBeenCalledWith('a1', 'author', 'eq', 'ea', 0)
+    })
+
+    it('should call onAnnotationRemoved from edit reply modal', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+      renderOperation({ ...baseProps, item })
+      const editBtn = screen.getByTestId('annotation-edit-btn')
+      await user.click(editBtn)
+      await user.click(screen.getByTestId('modal-remove'))
+      expect(mockContextValue.onAnnotationRemoved).toHaveBeenCalledWith(0)
+    })
+
+    it('should close edit reply modal via onHide', async () => {
+      const user = userEvent.setup()
+      const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+      renderOperation({ ...baseProps, item })
+      const editBtn = screen.getByTestId('annotation-edit-btn')
+      await user.click(editBtn)
+      expect(screen.getByTestId('edit-reply-modal')).toBeInTheDocument()
+      await user.click(screen.getByTestId('modal-hide'))
+      expect(screen.queryByTestId('edit-reply-modal')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('TTS audio button', () => {
+    beforeEach(() => {
+      mockContextValue.config = makeChatConfig({ text_to_speech: { enabled: true, voice: 'test-voice' } })
+    })
+
+    it('should show audio play button when TTS enabled', () => {
+      renderOperation()
+      expect(screen.getByTestId('audio-btn')).toBeInTheDocument()
+    })
+
+    it('should not show audio button for humanInputFormDataList', () => {
+      const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+      renderOperation({ ...baseProps, item })
+      expect(screen.queryByTestId('audio-btn')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle feedback content with only whitespace', async () => {
+      const user = userEvent.setup()
+      mockContextValue.config = makeChatConfig({ supportFeedback: true })
+      renderOperation()
+      const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+      await user.click(thumbDown)
+      const textarea = screen.getByRole('textbox')
+      await user.type(textarea, '   ')
+      const confirmBtn = screen.getByText(/submit/i)
+      await user.click(confirmBtn)
+      expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: '   ' })
+    })
+
+    it('should handle missing onFeedback callback gracefully', async () => {
+      mockContextValue.onFeedback = undefined
+      mockContextValue.config = makeChatConfig({ supportFeedback: true })
+      renderOperation()
+      const bar = screen.getByTestId('operation-bar')
+      expect(bar.querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty agent_thoughts array', async () => {
+      const user = userEvent.setup()
+      const item: ChatItem = { ...baseItem, agent_thoughts: [] }
+      renderOperation({ ...baseProps, item })
+      await user.click(screen.getByTestId('copy-btn'))
+      expect(copy).toHaveBeenCalledWith('Hello world')
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 4acf107232..f0d077975c 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -3,12 +3,6 @@ import type {
   ChatItem,
   Feedback,
 } from '../../types'
-import {
-  RiClipboardLine,
-  RiResetLeftLine,
-  RiThumbDownLine,
-  RiThumbUpLine,
-} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -127,20 +121,10 @@ const Operation: FC<OperationProps> = ({
   }
 
   const handleLikeClick = (target: 'user' | 'admin') => {
-    const currentRating = target === 'admin' ? adminLocalFeedback?.rating : displayUserFeedback?.rating
-    if (currentRating === 'like') {
-      handleFeedback(null, undefined, target)
-      return
-    }
     handleFeedback('like', undefined, target)
   }
 
   const handleDislikeClick = (target: 'user' | 'admin') => {
-    const currentRating = target === 'admin' ? adminLocalFeedback?.rating : displayUserFeedback?.rating
-    if (currentRating === 'dislike') {
-      handleFeedback(null, undefined, target)
-      return
-    }
     setFeedbackTarget(target)
     setIsShowFeedbackModal(true)
   }
@@ -186,6 +170,7 @@ const Operation: FC<OperationProps> = ({
           !hasWorkflowProcess && positionRight && '!top-[9px]',
         )}
         style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
+        data-testid="operation-bar"
       >
         {shouldShowUserFeedbackBar && !humanInputFormDataList?.length && (
           <div className={cn(
@@ -204,8 +189,8 @@ const Operation: FC<OperationProps> = ({
                       onClick={() => handleFeedback(null, undefined, 'user')}
                     >
                       {displayUserFeedback?.rating === 'like'
-                        ? <RiThumbUpLine className="h-4 w-4" />
-                        : <RiThumbDownLine className="h-4 w-4" />}
+                        ? <div className="i-ri-thumb-up-line h-4 w-4" />
+                        : <div className="i-ri-thumb-down-line h-4 w-4" />}
                     </ActionButton>
                   </Tooltip>
                 )
@@ -215,13 +200,13 @@ const Operation: FC<OperationProps> = ({
                       state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                       onClick={() => handleLikeClick('user')}
                     >
-                      <RiThumbUpLine className="h-4 w-4" />
+                      <div className="i-ri-thumb-up-line h-4 w-4" />
                     </ActionButton>
                     <ActionButton
                       state={displayUserFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                       onClick={() => handleDislikeClick('user')}
                     >
-                      <RiThumbDownLine className="h-4 w-4" />
+                      <div className="i-ri-thumb-down-line h-4 w-4" />
                     </ActionButton>
                   </>
                 )}
@@ -242,12 +227,12 @@ const Operation: FC<OperationProps> = ({
                 {displayUserFeedback.rating === 'like'
                   ? (
                       <ActionButton state={ActionButtonState.Active}>
-                        <RiThumbUpLine className="h-4 w-4" />
+                        <div className="i-ri-thumb-up-line h-4 w-4" />
                       </ActionButton>
                     )
                   : (
                       <ActionButton state={ActionButtonState.Destructive}>
-                        <RiThumbDownLine className="h-4 w-4" />
+                        <div className="i-ri-thumb-down-line h-4 w-4" />
                       </ActionButton>
                     )}
               </Tooltip>
@@ -266,8 +251,8 @@ const Operation: FC<OperationProps> = ({
                       onClick={() => handleFeedback(null, undefined, 'admin')}
                     >
                       {adminLocalFeedback?.rating === 'like'
-                        ? <RiThumbUpLine className="h-4 w-4" />
-                        : <RiThumbDownLine className="h-4 w-4" />}
+                        ? <div className="i-ri-thumb-up-line h-4 w-4" />
+                        : <div className="i-ri-thumb-down-line h-4 w-4" />}
                     </ActionButton>
                   </Tooltip>
                 )
@@ -281,7 +266,7 @@ const Operation: FC<OperationProps> = ({
                         state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                         onClick={() => handleLikeClick('admin')}
                       >
-                        <RiThumbUpLine className="h-4 w-4" />
+                        <div className="i-ri-thumb-up-line h-4 w-4" />
                       </ActionButton>
                     </Tooltip>
                     <Tooltip
@@ -292,7 +277,7 @@ const Operation: FC<OperationProps> = ({
                         state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                         onClick={() => handleDislikeClick('admin')}
                       >
-                        <RiThumbDownLine className="h-4 w-4" />
+                        <div className="i-ri-thumb-down-line h-4 w-4" />
                       </ActionButton>
                     </Tooltip>
                   </>
@@ -305,7 +290,7 @@ const Operation: FC<OperationProps> = ({
           </div>
         )}
         {!isOpeningStatement && (
-          <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex">
+          <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex" data-testid="operation-actions">
             {(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (
               <NewAudioButton
                 id={id}
@@ -314,17 +299,19 @@ const Operation: FC<OperationProps> = ({
               />
             )}
             {!humanInputFormDataList?.length && (
-              <ActionButton onClick={() => {
-                copy(content)
-                Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
-              }}
+              <ActionButton
+                onClick={() => {
+                  copy(content)
+                  Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                }}
+                data-testid="copy-btn"
               >
-                <RiClipboardLine className="h-4 w-4" />
+                <div className="i-ri-clipboard-line h-4 w-4" />
               </ActionButton>
             )}
             {!noChatInput && (
-              <ActionButton onClick={() => onRegenerate?.(item)}>
-                <RiResetLeftLine className="h-4 w-4" />
+              <ActionButton onClick={() => onRegenerate?.(item)} data-testid="regenerate-btn">
+                <div className="i-ri-reset-left-line h-4 w-4" />
               </ActionButton>
             )}
             {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
@@ -366,7 +353,7 @@ const Operation: FC<OperationProps> = ({
         >
           <div className="space-y-3">
             <div>
-              <label className="system-sm-semibold mb-2 block text-text-secondary">
+              <label className="mb-2 block text-text-secondary system-sm-semibold">
                 {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
               </label>
               <Textarea
diff --git a/web/app/components/base/chat/chat/answer/suggested-questions.spec.tsx b/web/app/components/base/chat/chat/answer/suggested-questions.spec.tsx
new file mode 100644
index 0000000000..85a8a28609
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.spec.tsx
@@ -0,0 +1,83 @@
+import type { Mock } from 'vitest' // Or 'jest' if using Jest
+import type { IChatItem } from '../type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useChatContext } from '../context'
+import SuggestedQuestions from './suggested-questions'
+
+// Mock the chat context
+vi.mock('../context', () => ({
+  useChatContext: vi.fn(),
+}))
+
+describe('SuggestedQuestions', () => {
+  const mockOnSend = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Use 'as Mock' instead of 'as any'
+    (useChatContext as Mock).mockReturnValue({
+      onSend: mockOnSend,
+      readonly: false,
+    })
+  })
+
+  const mockItem: IChatItem = {
+    id: '1',
+    content: '',
+    isAnswer: true,
+    isOpeningStatement: true,
+    suggestedQuestions: ['What is Dify?', 'How to use it?', '  ', ''],
+  }
+
+  it('should render suggested questions and filter out empty ones', () => {
+    render(<SuggestedQuestions item={mockItem} />)
+
+    const questions = screen.getAllByTestId('suggested-question')
+    expect(questions).toHaveLength(2)
+    expect(questions[0]).toHaveTextContent('What is Dify?')
+    expect(questions[1]).toHaveTextContent('How to use it?')
+  })
+
+  it('should call onSend when a question is clicked', async () => {
+    const user = userEvent.setup()
+    render(<SuggestedQuestions item={mockItem} />)
+
+    const questions = screen.getAllByTestId('suggested-question')
+    await user.click(questions[0])
+
+    expect(mockOnSend).toHaveBeenCalledWith('What is Dify?')
+  })
+
+  it('should not render if isOpeningStatement is false', () => {
+    render(<SuggestedQuestions item={{ ...mockItem, isOpeningStatement: false }} />)
+    expect(screen.queryByTestId('suggested-question')).not.toBeInTheDocument()
+  })
+
+  it('should not render if suggestedQuestions is missing or empty', () => {
+    render(<SuggestedQuestions item={{ ...mockItem, suggestedQuestions: [] }} />)
+    expect(screen.queryByTestId('suggested-question')).not.toBeInTheDocument()
+
+    // Use 'as IChatItem' instead of 'as any'
+    render(<SuggestedQuestions item={{ ...mockItem, suggestedQuestions: undefined } as IChatItem} />)
+    expect(screen.queryByTestId('suggested-question')).not.toBeInTheDocument()
+  })
+
+  it('should be disabled and not call onSend when readonly is true', async () => {
+    const user = userEvent.setup();
+    // Use 'as Mock' instead of 'as any'
+    (useChatContext as Mock).mockReturnValue({
+      onSend: mockOnSend,
+      readonly: true,
+    })
+
+    render(<SuggestedQuestions item={mockItem} />)
+
+    const questions = screen.getAllByTestId('suggested-question')
+    expect(questions[0]).toHaveClass('pointer-events-none')
+    expect(questions[0]).toHaveClass('opacity-50')
+
+    await user.click(questions[0])
+    expect(mockOnSend).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/suggested-questions.tsx b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
index ce997a49b6..ff462f09a0 100644
--- a/web/app/components/base/chat/chat/answer/suggested-questions.tsx
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
@@ -26,10 +26,11 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
         <div
           key={index}
           className={cn(
-            'system-sm-medium mr-1 mt-1 inline-flex max-w-full shrink-0 cursor-pointer flex-wrap rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 py-2 text-components-button-secondary-accent-text shadow-xs last:mr-0 hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
+            'mr-1 mt-1 inline-flex max-w-full shrink-0 cursor-pointer flex-wrap rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 py-2 text-components-button-secondary-accent-text shadow-xs system-sm-medium last:mr-0 hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
             readonly && 'pointer-events-none opacity-50',
           )}
           onClick={() => !readonly && onSend?.(question)}
+          data-testid="suggested-question"
         >
           {question}
         </div>
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.spec.tsx b/web/app/components/base/chat/chat/answer/tool-detail.spec.tsx
new file mode 100644
index 0000000000..774adcc6e4
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/tool-detail.spec.tsx
@@ -0,0 +1,74 @@
+import type { ToolInfoInThought } from '../type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ToolDetail from './tool-detail'
+
+describe('ToolDetail', () => {
+  const mockPayload: ToolInfoInThought = {
+    name: 'test_tool',
+    label: 'Test Tool Label',
+    input: 'test input content',
+    output: 'test output content',
+    isFinished: true,
+  }
+
+  const datasetPayload: ToolInfoInThought = {
+    ...mockPayload,
+    name: 'dataset_123',
+    label: 'Dataset Label',
+  }
+
+  it('should render the tool label and "used" state when finished', () => {
+    render(<ToolDetail payload={mockPayload} />)
+
+    expect(screen.getByText('Test Tool Label')).toBeInTheDocument()
+    expect(screen.getByText('tools.thought.used')).toBeInTheDocument()
+  })
+
+  it('should render the knowledge label and "using" state when not finished and name is a dataset', () => {
+    render(<ToolDetail payload={{ ...datasetPayload, isFinished: false }} />)
+
+    expect(screen.getByText('dataset.knowledge')).toBeInTheDocument()
+    expect(screen.getByText('tools.thought.using')).toBeInTheDocument()
+  })
+
+  it('should toggle expansion and show request/response details on click', async () => {
+    const user = userEvent.setup()
+    render(<ToolDetail payload={mockPayload} />)
+
+    // Initially collapsed: request/response titles should not be visible
+    expect(screen.queryByText('tools.thought.requestTitle')).not.toBeInTheDocument()
+    expect(screen.queryByText(mockPayload.input)).not.toBeInTheDocument()
+
+    // Click to expand
+    const label = screen.getByText('Test Tool Label')
+    await user.click(label)
+
+    // Now expanded
+    expect(screen.getByText('tools.thought.requestTitle')).toBeInTheDocument()
+    expect(screen.getByText(mockPayload.input)).toBeInTheDocument()
+    expect(screen.getByText('tools.thought.responseTitle')).toBeInTheDocument()
+    expect(screen.getByText(mockPayload.output)).toBeInTheDocument()
+
+    // Click again to collapse
+    await user.click(label)
+    expect(screen.queryByText('tools.thought.requestTitle')).not.toBeInTheDocument()
+  })
+
+  it('should apply different styles when expanded', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<ToolDetail payload={mockPayload} />)
+    const rootDiv = container.firstChild as HTMLElement
+    const label = screen.getByText('Test Tool Label')
+    const headerDiv = label.parentElement!
+
+    // Initial styles
+    expect(rootDiv).toHaveClass('bg-workflow-process-bg')
+    expect(headerDiv).not.toHaveClass('pb-1.5')
+
+    // Expand
+    await user.click(label)
+    expect(rootDiv).toHaveClass('bg-background-section-burn')
+    expect(headerDiv).toHaveClass('pb-1.5')
+  })
+})
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.spec.tsx b/web/app/components/base/chat/chat/answer/workflow-process.spec.tsx
new file mode 100644
index 0000000000..30fdb954ea
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/workflow-process.spec.tsx
@@ -0,0 +1,109 @@
+import type { WorkflowProcess } from '../../types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import WorkflowProcessItem from './workflow-process'
+
+// Mock TracingPanel as it's a complex child component
+vi.mock('@/app/components/workflow/run/tracing-panel', () => ({
+  default: () => <div data-testid="tracing-panel">Tracing Panel</div>,
+}))
+
+describe('WorkflowProcessItem', () => {
+  const mockData = {
+    status: WorkflowRunningStatus.Succeeded,
+    tracing: [
+      { id: '1', title: 'Start' },
+      { id: '2', title: 'End' },
+    ],
+  }
+
+  it('should render the latest node title when collapsed', () => {
+    render(<WorkflowProcessItem data={mockData as WorkflowProcess} expand={false} />)
+    expect(screen.getByTestId('workflow-process-title')).toHaveTextContent('End')
+    expect(screen.queryByTestId('tracing-panel')).not.toBeInTheDocument()
+  })
+
+  it('should render "Workflow Process" title and TracingPanel when expanded', () => {
+    // We expect t('common.workflowProcess', { ns: 'workflow' }) to be called
+    render(<WorkflowProcessItem data={mockData as WorkflowProcess} expand={true} />)
+    expect(screen.getByText(/workflowProcess/i)).toBeInTheDocument()
+    expect(screen.getByTestId('tracing-panel')).toBeInTheDocument()
+  })
+
+  it('should toggle collapse state on header click', async () => {
+    const user = userEvent.setup()
+    render(<WorkflowProcessItem data={mockData as WorkflowProcess} expand={false} />)
+
+    const header = screen.getByTestId('workflow-process-header')
+
+    // Expand
+    await user.click(header)
+    expect(screen.getByTestId('tracing-panel')).toBeInTheDocument()
+    expect(screen.getByText(/workflowProcess/i)).toBeInTheDocument()
+
+    // Collapse
+    await user.click(header)
+    expect(screen.queryByTestId('tracing-panel')).not.toBeInTheDocument()
+    expect(screen.getByTestId('workflow-process-title')).toHaveTextContent('End')
+  })
+
+  it('should render nothing if readonly is true', () => {
+    const { container } = render(<WorkflowProcessItem data={mockData as WorkflowProcess} readonly={true} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  describe('Status Icons', () => {
+    it('should show running spinner when status is Running', () => {
+      render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Running } as WorkflowProcess} />)
+      expect(screen.getByTestId('status-icon-running')).toBeInTheDocument()
+    })
+
+    it('should show success circle when status is Succeeded', () => {
+      render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Succeeded } as WorkflowProcess} />)
+      expect(screen.getByTestId('status-icon-success')).toBeInTheDocument()
+    })
+
+    it('should show error warning when status is Failed', () => {
+      render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Failed } as WorkflowProcess} />)
+      expect(screen.getByTestId('status-icon-failed')).toBeInTheDocument()
+    })
+
+    it('should show error warning when status is Stopped', () => {
+      render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Stopped } as WorkflowProcess} />)
+      expect(screen.getByTestId('status-icon-failed')).toBeInTheDocument()
+    })
+
+    it('should show pause circle when status is Paused', () => {
+      render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Paused } as WorkflowProcess} />)
+      expect(screen.getByTestId('status-icon-paused')).toBeInTheDocument()
+    })
+  })
+
+  describe('Background Colors', () => {
+    it('should apply correct background when collapsed for different statuses', () => {
+      const { rerender } = render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Succeeded } as WorkflowProcess} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-workflow-process-bg')
+
+      rerender(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Paused } as WorkflowProcess} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-workflow-process-paused-bg')
+
+      rerender(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Failed } as WorkflowProcess} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-workflow-process-failed-bg')
+    })
+
+    it('should apply correct background when expanded for different statuses', () => {
+      const { rerender } = render(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Running } as WorkflowProcess} expand={true} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-background-section-burn')
+
+      rerender(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Succeeded } as WorkflowProcess} expand={true} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-state-success-hover')
+
+      rerender(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Failed } as WorkflowProcess} expand={true} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-state-destructive-hover')
+
+      rerender(<WorkflowProcessItem data={{ ...mockData, status: WorkflowRunningStatus.Paused } as WorkflowProcess} expand={true} />)
+      expect(screen.getByTestId('workflow-process-item')).toHaveClass('bg-state-warning-hover')
+    })
+  })
+})
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 65027fd853..cab841d192 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -1,16 +1,10 @@
 import type { ChatItem, WorkflowProcess } from '../../types'
-import {
-  RiArrowRightSLine,
-  RiErrorWarningFill,
-  RiLoader2Line,
-  RiPauseCircleFill,
-} from '@remixicon/react'
+
 import {
   useEffect,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
@@ -58,35 +52,52 @@ const WorkflowProcessItem = ({
         collapse && paused && 'bg-workflow-process-paused-bg',
         collapse && failed && 'bg-workflow-process-failed-bg',
       )}
+      data-testid="workflow-process-item"
     >
       <div
         className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5')}
         onClick={() => setCollapse(!collapse)}
+        data-testid="workflow-process-header"
       >
         {
           running && (
-            <RiLoader2Line className="mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary" />
+            <div
+              className="i-ri-loader-2-line mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary"
+              data-testid="status-icon-running"
+            />
           )
         }
         {
           succeeded && (
-            <CheckCircle className="mr-1 h-3.5 w-3.5 shrink-0 text-text-success" />
+            <div
+              className="i-custom-vender-solid-general-check-circle mr-1 h-3.5 w-3.5 shrink-0 text-text-success"
+              data-testid="status-icon-success"
+            />
           )
         }
         {
           failed && (
-            <RiErrorWarningFill className="mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive" />
+            <div
+              className="i-ri-error-warning-fill mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive"
+              data-testid="status-icon-failed"
+            />
           )
         }
         {
           paused && (
-            <RiPauseCircleFill className="mr-1 h-3.5 w-3.5 shrink-0 text-text-warning-secondary" />
+            <div
+              className="i-ri-pause-circle-fill mr-1 h-3.5 w-3.5 shrink-0 text-text-warning-secondary"
+              data-testid="status-icon-paused"
+            />
           )
         }
-        <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
+        <div
+          className={cn('text-text-secondary system-xs-medium', !collapse && 'grow')}
+          data-testid="workflow-process-title"
+        >
           {!collapse ? t('common.workflowProcess', { ns: 'workflow' }) : latestNode?.title}
         </div>
-        <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
+        <div className={cn('i-ri-arrow-right-s-line ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
       </div>
       {
         !collapse && (
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/index.spec.tsx
new file mode 100644
index 0000000000..11827f5291
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-input-area/index.spec.tsx
@@ -0,0 +1,568 @@
+import type { FileUpload } from '@/app/components/base/features/types'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import type { TransferMethod } from '@/types/app'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { vi } from 'vitest'
+import ChatInputArea from './index'
+
+// ---------------------------------------------------------------------------
+// Hoist shared mock references so they are available inside vi.mock factories
+// ---------------------------------------------------------------------------
+const { mockGetPermission, mockNotify } = vi.hoisted(() => ({
+  mockGetPermission: vi.fn().mockResolvedValue(undefined),
+  mockNotify: vi.fn(),
+}))
+
+// ---------------------------------------------------------------------------
+// External dependency mocks
+// ---------------------------------------------------------------------------
+
+vi.mock('js-audio-recorder', () => ({
+  default: class {
+    static getPermission = mockGetPermission
+    start = vi.fn()
+    stop = vi.fn()
+    getWAVBlob = vi.fn().mockReturnValue(new Blob([''], { type: 'audio/wav' }))
+    getRecordAnalyseData = vi.fn().mockReturnValue(new Uint8Array(128))
+  },
+}))
+
+vi.mock('@/service/share', () => ({
+  audioToText: vi.fn().mockResolvedValue({ text: 'Converted text' }),
+  AppSourceType: { webApp: 'webApp', installedApp: 'installedApp' },
+}))
+
+// ---------------------------------------------------------------------------
+// File-uploader store – shared mutable state so individual tests can mutate it
+// ---------------------------------------------------------------------------
+const mockFileStore: { files: FileEntity[], setFiles: ReturnType<typeof vi.fn> } = {
+  files: [],
+  setFiles: vi.fn(),
+}
+
+vi.mock('@/app/components/base/file-uploader/store', () => ({
+  useFileStore: () => ({ getState: () => mockFileStore }),
+  useStore: (selector: (s: typeof mockFileStore) => unknown) => selector(mockFileStore),
+  FileContextProvider: ({ children }: { children: React.ReactNode }) =>
+    React.createElement(React.Fragment, null, children),
+}))
+
+// ---------------------------------------------------------------------------
+// File-uploader hooks – provide stable drag/drop handlers
+// ---------------------------------------------------------------------------
+vi.mock('@/app/components/base/file-uploader/hooks', () => ({
+  useFile: () => ({
+    handleDragFileEnter: vi.fn(),
+    handleDragFileLeave: vi.fn(),
+    handleDragFileOver: vi.fn(),
+    handleDropFile: vi.fn(),
+    handleClipboardPasteFile: vi.fn(),
+    isDragActive: false,
+  }),
+}))
+
+// ---------------------------------------------------------------------------
+// Features context hook – avoids needing FeaturesContext.Provider in the tree
+// ---------------------------------------------------------------------------
+// FeatureBar calls: useFeatures(s => s.features)
+// So the selector receives the store state object; we must nest the features
+// under a `features` key to match what the real store exposes.
+const mockFeaturesState = {
+  features: {
+    moreLikeThis: { enabled: false },
+    opening: { enabled: false },
+    moderation: { enabled: false },
+    speech2text: { enabled: false },
+    text2speech: { enabled: false },
+    file: { enabled: false },
+    suggested: { enabled: false },
+    citation: { enabled: false },
+    annotationReply: { enabled: false },
+  },
+}
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeatures: (selector: (s: typeof mockFeaturesState) => unknown) =>
+    selector(mockFeaturesState),
+}))
+
+// ---------------------------------------------------------------------------
+// Toast context
+// ---------------------------------------------------------------------------
+vi.mock('@/app/components/base/toast', async () => {
+  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>(
+    '@/app/components/base/toast',
+  )
+  return {
+    ...actual,
+    useToastContext: () => ({ notify: mockNotify }),
+  }
+})
+
+// ---------------------------------------------------------------------------
+// Internal layout hook – controls single/multi-line textarea mode
+// ---------------------------------------------------------------------------
+let mockIsMultipleLine = false
+
+vi.mock('./hooks', () => ({
+  useTextAreaHeight: () => ({
+    wrapperRef: { current: document.createElement('div') },
+    textareaRef: { current: document.createElement('textarea') },
+    textValueRef: { current: document.createElement('div') },
+    holdSpaceRef: { current: document.createElement('div') },
+    handleTextareaResize: vi.fn(),
+    get isMultipleLine() {
+      return mockIsMultipleLine
+    },
+  }),
+}))
+
+// ---------------------------------------------------------------------------
+// Input-forms validation hook – always passes by default
+// ---------------------------------------------------------------------------
+vi.mock('../check-input-forms-hooks', () => ({
+  useCheckInputsForms: () => ({
+    checkInputsForm: vi.fn().mockReturnValue(true),
+  }),
+}))
+
+// ---------------------------------------------------------------------------
+// Next.js navigation
+// ---------------------------------------------------------------------------
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ token: 'test-token' }),
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/test',
+}))
+
+// ---------------------------------------------------------------------------
+// Shared fixture – typed as FileUpload to avoid implicit any
+// ---------------------------------------------------------------------------
+// const mockVisionConfig: FileUpload = {
+//   fileUploadConfig: {
+//     image_file_size_limit: 10,
+//     file_size_limit: 10,
+//     audio_file_size_limit: 10,
+//     video_file_size_limit: 10,
+//     workflow_file_upload_limit: 10,
+//   },
+//   allowed_file_types: [],
+//   allowed_file_extensions: [],
+//   enabled: true,
+//   number_limits: 3,
+//   transfer_methods: ['local_file', 'remote_url'],
+// } as FileUpload
+
+const mockVisionConfig: FileUpload = {
+  // Required because of '& EnabledOrDisabled' at the end of your type
+  enabled: true,
+
+  // The nested config object
+  fileUploadConfig: {
+    image_file_size_limit: 10,
+    file_size_limit: 10,
+    audio_file_size_limit: 10,
+    video_file_size_limit: 10,
+    workflow_file_upload_limit: 10,
+    batch_count_limit: 0,
+    image_file_batch_limit: 0,
+    single_chunk_attachment_limit: 0,
+    attachment_image_file_size_limit: 0,
+    file_upload_limit: 0,
+  },
+
+  // These match the keys in your FileUpload type
+  allowed_file_types: [],
+  allowed_file_extensions: [],
+  number_limits: 3,
+
+  // NOTE: Your type defines 'allowed_file_upload_methods',
+  // not 'transfer_methods' at the top level.
+  allowed_file_upload_methods: ['local_file', 'remote_url'] as TransferMethod[],
+
+  // If you wanted to define specific image/video behavior:
+  image: {
+    enabled: true,
+    number_limits: 3,
+    transfer_methods: ['local_file', 'remote_url'] as TransferMethod[],
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Minimal valid FileEntity fixture – avoids undefined `type` crash in FileItem
+// ---------------------------------------------------------------------------
+const makeFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
+  id: 'file-1',
+  name: 'photo.png',
+  type: 'image/png', // required: FileItem calls type.split('/')[0]
+  size: 1024,
+  progress: 100,
+  transferMethod: 'local_file',
+  uploadedId: 'uploaded-ok',
+  ...overrides,
+} as FileEntity)
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const getTextarea = () => screen.getByPlaceholderText(/inputPlaceholder/i)
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('ChatInputArea', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFileStore.files = []
+    mockIsMultipleLine = false
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render the textarea with default placeholder', () => {
+      render(<ChatInputArea visionConfig={mockVisionConfig} />)
+      expect(getTextarea()).toBeInTheDocument()
+    })
+
+    it('should render the readonly placeholder when readonly prop is set', () => {
+      render(<ChatInputArea visionConfig={mockVisionConfig} readonly />)
+      expect(screen.getByPlaceholderText(/inputDisabledPlaceholder/i)).toBeInTheDocument()
+    })
+
+    it('should render the send button', () => {
+      render(<ChatInputArea visionConfig={mockVisionConfig} />)
+      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+    })
+
+    it('should apply disabled styles when the disabled prop is true', () => {
+      const { container } = render(<ChatInputArea visionConfig={mockVisionConfig} disabled />)
+      const disabledWrapper = container.querySelector('.pointer-events-none')
+      expect(disabledWrapper).toBeInTheDocument()
+    })
+
+    it('should render the operation section inline when single-line', () => {
+      // mockIsMultipleLine is false by default
+      render(<ChatInputArea visionConfig={mockVisionConfig} />)
+      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+    })
+
+    it('should render the operation section below the textarea when multi-line', () => {
+      mockIsMultipleLine = true
+      render(<ChatInputArea visionConfig={mockVisionConfig} />)
+      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Typing', () => {
+    it('should update textarea value as the user types', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello world')
+
+      expect(getTextarea()).toHaveValue('Hello world')
+    })
+
+    it('should clear the textarea after a message is successfully sent', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello world')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(getTextarea()).toHaveValue('')
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Sending Messages', () => {
+    it('should call onSend with query and files when clicking the send button', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello world')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).toHaveBeenCalledTimes(1)
+      expect(onSend).toHaveBeenCalledWith('Hello world', [])
+    })
+
+    it('should call onSend and reset the input when pressing Enter', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello world{Enter}')
+
+      expect(onSend).toHaveBeenCalledWith('Hello world', [])
+      expect(getTextarea()).toHaveValue('')
+    })
+
+    it('should NOT call onSend when pressing Shift+Enter (inserts newline instead)', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello world{Shift>}{Enter}{/Shift}')
+
+      expect(onSend).not.toHaveBeenCalled()
+      expect(getTextarea()).toHaveValue('Hello world\n')
+    })
+
+    it('should NOT call onSend in readonly mode', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} readonly />)
+
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+    })
+
+    it('should pass already-uploaded files to onSend', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+
+      // makeFile ensures `type` is always a proper MIME string
+      const uploadedFile = makeFile({ id: 'file-1', name: 'photo.png', uploadedId: 'uploaded-123' })
+      mockFileStore.files = [uploadedFile]
+
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+      await user.type(getTextarea(), 'With attachment')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).toHaveBeenCalledWith('With attachment', [uploadedFile])
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('History Navigation', () => {
+    it('should restore the last sent message when pressing Cmd+ArrowUp once', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+      const textarea = getTextarea()
+
+      await user.type(textarea, 'First{Enter}')
+      await user.type(textarea, 'Second{Enter}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}')
+
+      expect(textarea).toHaveValue('Second')
+    })
+
+    it('should go further back in history with repeated Cmd+ArrowUp', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+      const textarea = getTextarea()
+
+      await user.type(textarea, 'First{Enter}')
+      await user.type(textarea, 'Second{Enter}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}')
+
+      expect(textarea).toHaveValue('First')
+    })
+
+    it('should move forward in history when pressing Cmd+ArrowDown', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+      const textarea = getTextarea()
+
+      await user.type(textarea, 'First{Enter}')
+      await user.type(textarea, 'Second{Enter}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // → Second
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // → First
+      await user.type(textarea, '{Meta>}{ArrowDown}{/Meta}') // → Second
+
+      expect(textarea).toHaveValue('Second')
+    })
+
+    it('should clear the input when navigating past the most recent history entry', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+      const textarea = getTextarea()
+
+      await user.type(textarea, 'First{Enter}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // → First
+      await user.type(textarea, '{Meta>}{ArrowDown}{/Meta}') // → past end → ''
+
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should not go below the start of history when pressing Cmd+ArrowUp at the boundary', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea onSend={vi.fn()} visionConfig={mockVisionConfig} />)
+      const textarea = getTextarea()
+
+      await user.type(textarea, 'Only{Enter}')
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // → Only
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // → '' (seed at index 0)
+      await user.type(textarea, '{Meta>}{ArrowUp}{/Meta}') // boundary – should stay at ''
+
+      expect(textarea).toHaveValue('')
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Voice Input', () => {
+    it('should render the voice input button when speech-to-text is enabled', () => {
+      render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
+      expect(screen.getByTestId('voice-input-button')).toBeInTheDocument()
+    })
+
+    it('should NOT render the voice input button when speech-to-text is disabled', () => {
+      render(<ChatInputArea speechToTextConfig={{ enabled: false }} visionConfig={mockVisionConfig} />)
+      expect(screen.queryByTestId('voice-input-button')).not.toBeInTheDocument()
+    })
+
+    it('should request microphone permission when the voice button is clicked', async () => {
+      const user = userEvent.setup()
+      render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
+
+      await user.click(screen.getByTestId('voice-input-button'))
+
+      expect(mockGetPermission).toHaveBeenCalledTimes(1)
+    })
+
+    it('should notify with an error when microphone permission is denied', async () => {
+      const user = userEvent.setup()
+      mockGetPermission.mockRejectedValueOnce(new Error('Permission denied'))
+      render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
+
+      await user.click(screen.getByTestId('voice-input-button'))
+
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      })
+    })
+
+    it('should NOT invoke onSend while voice input is being activated', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(
+        <ChatInputArea
+          onSend={onSend}
+          speechToTextConfig={{ enabled: true }}
+          visionConfig={mockVisionConfig}
+        />,
+      )
+
+      await user.click(screen.getByTestId('voice-input-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Validation', () => {
+    it('should notify and NOT call onSend when the query is blank', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
+    })
+
+    it('should notify and NOT call onSend when the query contains only whitespace', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), '   ')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
+    })
+
+    it('should notify and NOT call onSend while the bot is already responding', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+      render(<ChatInputArea onSend={onSend} isResponding visionConfig={mockVisionConfig} />)
+
+      await user.type(getTextarea(), 'Hello')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
+    })
+
+    it('should notify and NOT call onSend while a file upload is still in progress', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+
+      // uploadedId is empty string → upload not yet finished
+      mockFileStore.files = [
+        makeFile({ id: 'file-upload', uploadedId: '', progress: 50 }),
+      ]
+
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+      await user.type(getTextarea(), 'Hello')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
+    })
+
+    it('should call onSend normally when all uploaded files have completed', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+
+      // uploadedId is present → upload finished
+      mockFileStore.files = [makeFile({ uploadedId: 'uploaded-ok' })]
+
+      render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
+      await user.type(getTextarea(), 'With completed file')
+      await user.click(screen.getByTestId('send-button'))
+
+      expect(onSend).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // -------------------------------------------------------------------------
+  describe('Feature Bar', () => {
+    it('should render the FeatureBar section when showFeatureBar is true', () => {
+      const { container } = render(
+        <ChatInputArea visionConfig={mockVisionConfig} showFeatureBar />,
+      )
+      // FeatureBar renders a rounded-bottom container beneath the input
+      expect(container.querySelector('[class*="rounded-b"]')).toBeInTheDocument()
+    })
+
+    it('should NOT render the FeatureBar when showFeatureBar is false', () => {
+      const { container } = render(
+        <ChatInputArea visionConfig={mockVisionConfig} showFeatureBar={false} />,
+      )
+      expect(container.querySelector('[class*="rounded-b"]')).not.toBeInTheDocument()
+    })
+
+    it('should not invoke onFeatureBarClick when the component is in readonly mode', async () => {
+      const user = userEvent.setup()
+      const onFeatureBarClick = vi.fn()
+      render(
+        <ChatInputArea
+          visionConfig={mockVisionConfig}
+          showFeatureBar
+          readonly
+          onFeatureBarClick={onFeatureBarClick}
+        />,
+      )
+
+      // In readonly mode the FeatureBar receives `noop` as its click handler.
+      // Click every button that is not a named test-id button to exercise the guard.
+      const buttons = screen.queryAllByRole('button')
+      for (const btn of buttons) {
+        if (!btn.dataset.testid)
+          await user.click(btn)
+      }
+
+      expect(onFeatureBarClick).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.spec.tsx
new file mode 100644
index 0000000000..914811015f
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.spec.tsx
@@ -0,0 +1,170 @@
+import type { EnableType } from '../../types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Theme } from '../../embedded-chatbot/theme/theme-context'
+import Operation from './operation'
+
+vi.mock('@/app/components/base/file-uploader', () => ({
+  FileUploaderInChatInput: ({ readonly }: { readonly?: boolean }) => (
+    <div data-testid="file-uploader" data-readonly={readonly} />
+  ),
+}))
+
+const createMockTheme = (overrides?: Partial<Theme>): Theme => {
+  const theme = new Theme()
+  theme.primaryColor = 'rgb(255, 0, 0)'
+  return Object.assign(theme, overrides || {})
+}
+
+describe('Operation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render send button always', () => {
+      render(<Operation onSend={vi.fn()} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render file uploader when fileConfig.enabled is true', () => {
+      const fileConfig: FileUpload = { enabled: true } as FileUpload
+
+      render(
+        <Operation
+          onSend={vi.fn()}
+          fileConfig={fileConfig}
+        />,
+      )
+
+      expect(screen.getByTestId('file-uploader')).toBeInTheDocument()
+    })
+
+    it('should not render file uploader when fileConfig is undefined', () => {
+      render(<Operation onSend={vi.fn()} />)
+
+      expect(screen.queryByTestId('file-uploader')).not.toBeInTheDocument()
+    })
+
+    it('should render voice input button when speechToTextConfig.enabled is true', () => {
+      const speechConfig: EnableType = { enabled: true }
+
+      render(
+        <Operation
+          onSend={vi.fn()}
+          speechToTextConfig={speechConfig}
+        />,
+      )
+
+      expect(screen.getAllByRole('button')).toHaveLength(2)
+    })
+
+    it('should not render voice input button when speechToTextConfig.enabled is false', () => {
+      const speechConfig: EnableType = { enabled: false }
+
+      render(
+        <Operation
+          onSend={vi.fn()}
+          speechToTextConfig={speechConfig}
+        />,
+      )
+
+      expect(screen.getAllByRole('button')).toHaveLength(1)
+    })
+  })
+
+  describe('Send Button Behavior', () => {
+    it('should call onSend when clicked and not readonly', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+
+      render(<Operation onSend={onSend} />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(onSend).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onSend when readonly is true', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn()
+
+      render(<Operation onSend={onSend} readonly />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(onSend).not.toHaveBeenCalled()
+    })
+
+    it('should apply theme primaryColor as background style when theme is provided', () => {
+      render(
+        <Operation
+          onSend={vi.fn()}
+          theme={createMockTheme()}
+        />,
+      )
+
+      expect(screen.getByRole('button')).toHaveStyle({
+        backgroundColor: 'rgb(255, 0, 0)',
+      })
+    })
+
+    it('should not apply background style when theme is null', () => {
+      render(
+        <Operation
+          onSend={vi.fn()}
+          theme={null}
+        />,
+      )
+
+      expect(screen.getByRole('button').style.backgroundColor).toBe('')
+    })
+  })
+
+  describe('Voice Input Button', () => {
+    it('should call onShowVoiceInput when clicked', async () => {
+      const user = userEvent.setup()
+      const onShowVoiceInput = vi.fn()
+
+      render(
+        <Operation
+          onSend={vi.fn()}
+          speechToTextConfig={{ enabled: true }}
+          onShowVoiceInput={onShowVoiceInput}
+        />,
+      )
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons[0]
+
+      await user.click(voiceButton)
+
+      expect(onShowVoiceInput).toHaveBeenCalledTimes(1)
+    })
+
+    it('should disable voice button when readonly is true', async () => {
+      const user = userEvent.setup()
+      const onShowVoiceInput = vi.fn()
+
+      render(
+        <Operation
+          onSend={vi.fn()}
+          speechToTextConfig={{ enabled: true }}
+          onShowVoiceInput={onShowVoiceInput}
+          readonly
+        />,
+      )
+
+      const buttons = screen.getAllByRole('button')
+      const voiceButton = buttons[0]
+
+      expect(voiceButton).toBeDisabled()
+
+      await user.click(voiceButton)
+
+      expect(onShowVoiceInput).not.toHaveBeenCalled()
+    })
+  })
+})
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 5bce827754..6800daedbe 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
@@ -51,6 +51,7 @@ const Operation: FC<OperationProps> = ({
                 size="l"
                 disabled={readonly}
                 onClick={onShowVoiceInput}
+                data-testid="voice-input-button"
               >
                 <RiMicLine className="h-5 w-5" />
               </ActionButton>
@@ -61,6 +62,7 @@ const Operation: FC<OperationProps> = ({
           className="ml-3 w-8 px-0"
           variant="primary"
           onClick={readonly ? noop : onSend}
+          data-testid="send-button"
           style={
             theme
               ? {
diff --git a/web/app/components/base/chat/chat/citation/index.spec.tsx b/web/app/components/base/chat/chat/citation/index.spec.tsx
new file mode 100644
index 0000000000..dbf90d005c
--- /dev/null
+++ b/web/app/components/base/chat/chat/citation/index.spec.tsx
@@ -0,0 +1,364 @@
+import type { CitationItem } from '../type'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import Citation from './index'
+
+vi.mock('./popup', () => ({
+  default: ({ data, showHitInfo }: { data: { documentName: string }, showHitInfo?: boolean }) => (
+    <div data-testid="popup" data-show-hit-info={String(!!showHitInfo)}>
+      {data.documentName}
+    </div>
+  ),
+}))
+
+const originalClientWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+
+type ClientWidthConfig = {
+  container: number
+  item: number
+}
+
+const mockClientWidths = ({ container, item }: ClientWidthConfig) => {
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    get() {
+      const el = this as HTMLElement
+      if (el.className?.includes?.('chat-answer-container') || el.className?.includes?.('my-custom-container'))
+        return container
+      if (el.dataset?.testid === 'citation-measurement-item')
+        return item
+      return 0
+    },
+    configurable: true,
+  })
+}
+
+const restoreClientWidth = () => {
+  if (originalClientWidthDescriptor)
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidthDescriptor)
+}
+
+afterAll(() => {
+  restoreClientWidth()
+})
+
+const makeCitationItem = (overrides: Partial<CitationItem> = {}): CitationItem => ({
+  document_id: 'doc-1',
+  document_name: 'Document One',
+  data_source_type: 'upload_file',
+  segment_id: 'seg-1',
+  content: 'Some content',
+  dataset_id: 'dataset-1',
+  dataset_name: 'Dataset One',
+  segment_position: 1,
+  word_count: 100,
+  hit_count: 5,
+  index_node_hash: 'abc123',
+  score: 0.95,
+  ...overrides,
+})
+
+const setupContainer = (className = 'chat-answer-container') => {
+  const wrapper = document.createElement('div')
+  wrapper.className = className
+  document.body.appendChild(wrapper)
+  return wrapper
+}
+
+describe('Citation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = ''
+    restoreClientWidth()
+  })
+
+  describe('Rendering', () => {
+    it('should render the citation title section', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem()]} />)
+      expect(screen.getByTestId('citation-title')).toBeInTheDocument()
+    })
+
+    it('should render one measurement ghost item per unique document', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1', document_name: 'Alpha' }),
+          makeCitationItem({ document_id: 'doc-2', document_name: 'Beta' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(2)
+    })
+
+    it('should display the document name inside each measurement item', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem({ document_name: 'My Report' })]} />)
+      expect(screen.getByTestId('citation-measurement-item')).toHaveTextContent('My Report')
+    })
+
+    it('should render a popup for each resource that fits within the container', () => {
+      mockClientWidths({ container: 840, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1' }),
+          makeCitationItem({ document_id: 'doc-2' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('popup')).toHaveLength(2)
+    })
+
+    it('should render the citation title i18n key', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem()]} />)
+      expect(screen.getByText(/citation\.title/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should use chat-answer-container as the default containerClassName', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem()]} />)
+      expect(screen.getByTestId('citation-title')).toBeInTheDocument()
+    })
+
+    it('should use a custom containerClassName to resolve the container element', () => {
+      mockClientWidths({ container: 600, item: 50 })
+      setupContainer('my-custom-container')
+      render(<Citation data={[makeCitationItem()]} containerClassName="my-custom-container" />)
+      expect(screen.getByTestId('citation-title')).toBeInTheDocument()
+    })
+
+    it('should forward showHitInfo=true to each rendered Popup', () => {
+      mockClientWidths({ container: 840, item: 50 })
+      setupContainer()
+      render(
+        <Citation
+          data={[
+            makeCitationItem({ document_id: 'doc-1' }),
+            makeCitationItem({ document_id: 'doc-2' }),
+          ]}
+          showHitInfo={true}
+        />,
+      )
+      screen.getAllByTestId('popup').forEach(p =>
+        expect(p).toHaveAttribute('data-show-hit-info', 'true'),
+      )
+    })
+
+    it('should forward showHitInfo=false when prop is omitted', () => {
+      mockClientWidths({ container: 840, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem({ document_id: 'doc-1' })]} />)
+      screen.getAllByTestId('popup').forEach(p =>
+        expect(p).toHaveAttribute('data-show-hit-info', 'false'),
+      )
+    })
+  })
+
+  describe('Resource Grouping', () => {
+    it('should merge citations with the same document_id into one resource', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'shared', segment_id: 'seg-1' }),
+          makeCitationItem({ document_id: 'shared', segment_id: 'seg-2' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(1)
+    })
+
+    it('should create a separate resource for each distinct document_id', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-a' }),
+          makeCitationItem({ document_id: 'doc-b' }),
+          makeCitationItem({ document_id: 'doc-c' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(3)
+    })
+
+    it('should handle mixed shared and unique document_ids correctly', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-x', segment_id: 'seg-1' }),
+          makeCitationItem({ document_id: 'doc-y', segment_id: 'seg-2' }),
+          makeCitationItem({ document_id: 'doc-x', segment_id: 'seg-3' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(2)
+    })
+  })
+
+  describe('Layout Adjustment – all resources fit', () => {
+    it('should show all popups and no more-toggle when every item fits within container', () => {
+      // effective containerWidth = 840 - 40 = 800; each item = 50px → all 3 fit
+      mockClientWidths({ container: 840, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1' }),
+          makeCitationItem({ document_id: 'doc-2' }),
+          makeCitationItem({ document_id: 'doc-3' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('popup')).toHaveLength(3)
+      expect(screen.queryByTestId('citation-more-toggle')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Layout Adjustment – overflow branch: setLimitNumberInOneLine(i - 1)', () => {
+    it('should show more-toggle when backed-out totalWidth + 34 still exceeds containerWidth', () => {
+      // effective = 140 - 40 = 100
+      // i=0: total=80, 80+0=80 ≤ 100 → limit=1
+      // i=1: total=160, 160+4=164 > 100 → overflow; back-out=80; 80+34=114 > 100 → setLimit(0)
+      // 0 < 2 → toggle shown
+      mockClientWidths({ container: 140, item: 80 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1', document_name: 'Doc A' }),
+          makeCitationItem({ document_id: 'doc-2', document_name: 'Doc B' }),
+        ]}
+        />,
+      )
+      expect(screen.getByTestId('citation-more-toggle')).toBeInTheDocument()
+    })
+  })
+
+  describe('Layout Adjustment – overflow branch: setLimitNumberInOneLine(i)', () => {
+    it('should show more-toggle and limit=i when backed-out totalWidth + 34 fits within containerWidth', () => {
+      // effective = 240 - 40 = 200
+      // i=0: 80+0=80 ≤ 200 → limit=1
+      // i=1: 160+4=164 ≤ 200 → limit=2
+      // i=2: 240+8=248 > 200 → overflow; back-out=160; 160+34=194 ≤ 200 → setLimit(2)
+      // 2 < 3 → toggle shown; 2 popups visible
+      mockClientWidths({ container: 240, item: 80 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1', document_name: 'Doc A' }),
+          makeCitationItem({ document_id: 'doc-2', document_name: 'Doc B' }),
+          makeCitationItem({ document_id: 'doc-3', document_name: 'Doc C' }),
+        ]}
+        />,
+      )
+      expect(screen.getByTestId('citation-more-toggle')).toBeInTheDocument()
+      expect(screen.getAllByTestId('popup')).toHaveLength(2)
+    })
+  })
+
+  describe('Show More / Show Less Toggle', () => {
+    const renderOverflowScenario = () => {
+      // effective = 140 - 40 = 100; items=80px
+      // i=0: 80 ≤ 100 → limit=1
+      // i=1: 160+4=164 > 100 → overflow; back-out=80; 80+34=114 > 100 → setLimit(0)
+      // 0 < 3 → toggle shown; 0 popups visible (slice(0, 0) = [])
+      mockClientWidths({ container: 140, item: 80 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'doc-1', document_name: 'Doc A' }),
+          makeCitationItem({ document_id: 'doc-2', document_name: 'Doc B' }),
+          makeCitationItem({ document_id: 'doc-3', document_name: 'Doc C' }),
+        ]}
+        />,
+      )
+      return screen.getByTestId('citation-more-toggle')
+    }
+
+    it('should show the overflow count label matching /+\\s*\\d+/ on the more-toggle in collapsed state', () => {
+      renderOverflowScenario()
+      expect(screen.getByTestId('citation-more-toggle').textContent).toMatch(/^\+\s*\d+$/)
+    })
+
+    it('should display the collapse icon div after clicking more-toggle to expand', async () => {
+      const user = userEvent.setup()
+      renderOverflowScenario()
+
+      await user.click(screen.getByTestId('citation-more-toggle'))
+
+      expect(document.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+    })
+
+    it('should return to the count label after clicking the toggle a second time to collapse', async () => {
+      const user = userEvent.setup()
+      renderOverflowScenario()
+
+      await user.click(screen.getByTestId('citation-more-toggle'))
+      await user.click(screen.getByTestId('citation-more-toggle'))
+
+      expect(screen.getByTestId('citation-more-toggle').textContent).toMatch(/^\+\s*\d+$/)
+    })
+
+    it('should show all resource popups after expanding via the more-toggle', async () => {
+      const user = userEvent.setup()
+      renderOverflowScenario()
+
+      await user.click(screen.getByTestId('citation-more-toggle'))
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('popup')).toHaveLength(3)
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without crashing when data is an empty array', () => {
+      mockClientWidths({ container: 500, item: 0 })
+      setupContainer()
+      render(<Citation data={[]} />)
+      expect(screen.getByTestId('citation-title')).toBeInTheDocument()
+      expect(screen.queryAllByTestId('citation-measurement-item')).toHaveLength(0)
+      expect(screen.queryByTestId('citation-more-toggle')).not.toBeInTheDocument()
+    })
+
+    it('should render correctly with a single citation item that fits', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(<Citation data={[makeCitationItem()]} />)
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(1)
+      expect(screen.queryByTestId('citation-more-toggle')).not.toBeInTheDocument()
+    })
+
+    it('should handle all citations sharing one document_id as a single resource', () => {
+      mockClientWidths({ container: 500, item: 50 })
+      setupContainer()
+      render(
+        <Citation data={[
+          makeCitationItem({ document_id: 'only', segment_id: 's1' }),
+          makeCitationItem({ document_id: 'only', segment_id: 's2' }),
+          makeCitationItem({ document_id: 'only', segment_id: 's3' }),
+        ]}
+        />,
+      )
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(1)
+    })
+
+    it('should handle a large number of citation items without throwing', () => {
+      mockClientWidths({ container: 5000, item: 50 })
+      setupContainer()
+      const data = Array.from({ length: 20 }, (_, i) =>
+        makeCitationItem({ document_id: `doc-${i}`, document_name: `Document ${i}` }))
+      expect(() => render(<Citation data={data} />)).not.toThrow()
+      expect(screen.getAllByTestId('citation-measurement-item')).toHaveLength(20)
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/citation/index.tsx b/web/app/components/base/chat/chat/citation/index.tsx
index 22aeec2597..1123497878 100644
--- a/web/app/components/base/chat/chat/citation/index.tsx
+++ b/web/app/components/base/chat/chat/citation/index.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import type { CitationItem } from '../type'
-import { RiArrowDownSLine } from '@remixicon/react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Popup from './popup'
@@ -47,37 +46,36 @@ const Citation: FC<CitationProps> = ({
     return prev
   }, []), [data])
 
-  const handleAdjustResourcesLayout = () => {
+  useEffect(() => {
     const containerWidth = document.querySelector(`.${containerClassName}`)!.clientWidth - 40
     let totalWidth = 0
+    let limit = 0
     for (let i = 0; i < resources.length; i++) {
       totalWidth += elesRef.current[i].clientWidth
 
-      if (totalWidth + i * 4 > containerWidth!) {
+      if (totalWidth + i * 4 > containerWidth) {
         totalWidth -= elesRef.current[i].clientWidth
 
-        if (totalWidth + 34 > containerWidth!)
-          setLimitNumberInOneLine(i - 1)
+        if (totalWidth + 34 > containerWidth)
+          limit = i - 1
         else
-          setLimitNumberInOneLine(i)
+          limit = i
 
         break
       }
       else {
-        setLimitNumberInOneLine(i + 1)
+        limit = i + 1
       }
     }
-  }
-
-  useEffect(() => {
-    handleAdjustResourcesLayout()
+    setLimitNumberInOneLine(limit)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const resourcesLength = resources.length
 
   return (
     <div className="-mb-1 mt-3">
-      <div className="system-xs-medium mb-2 flex items-center text-text-tertiary">
+      <div data-testid="citation-title" className="mb-2 flex items-center text-text-tertiary system-xs-medium">
         {t('chat.citation.title', { ns: 'common' })}
         <div className="ml-2 h-px grow bg-divider-regular" />
       </div>
@@ -85,17 +83,18 @@ const Citation: FC<CitationProps> = ({
         {
           resources.map((res, index) => (
             <div
-              key={index}
+              key={res.documentId}
+              data-testid="citation-measurement-item"
               className="absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0"
-              ref={(ele: any) => (elesRef.current[index] = ele!)}
+              ref={(ele: HTMLDivElement | null) => { elesRef.current[index] = ele! }}
             >
               {res.documentName}
             </div>
           ))
         }
         {
-          resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map((res, index) => (
-            <div key={index} className="mb-1 mr-1 cursor-pointer">
+          resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map(res => (
+            <div key={res.documentId} className="mb-1 mr-1 cursor-pointer">
               <Popup
                 data={res}
                 showHitInfo={showHitInfo}
@@ -106,13 +105,14 @@ const Citation: FC<CitationProps> = ({
         {
           limitNumberInOneLine < resourcesLength && (
             <div
-              className="system-xs-medium flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary"
+              data-testid="citation-more-toggle"
+              className="flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary system-xs-medium"
               onClick={() => setShowMore(v => !v)}
             >
               {
                 !showMore
                   ? `+ ${resourcesLength - limitNumberInOneLine}`
-                  : <RiArrowDownSLine className="h-4 w-4 rotate-180 text-text-tertiary" />
+                  : <div className="i-ri-arrow-down-s-line h-4 w-4 rotate-180 text-text-tertiary" />
               }
             </div>
           )
diff --git a/web/app/components/base/chat/chat/citation/popup.spec.tsx b/web/app/components/base/chat/chat/citation/popup.spec.tsx
new file mode 100644
index 0000000000..4e211eafed
--- /dev/null
+++ b/web/app/components/base/chat/chat/citation/popup.spec.tsx
@@ -0,0 +1,609 @@
+import type { Resources } from './index'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDocumentDownload } from '@/service/knowledge/use-document'
+
+import { downloadUrl } from '@/utils/download'
+import Popup from './popup'
+
+vi.mock('@/service/knowledge/use-document', () => ({
+  useDocumentDownload: vi.fn(),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: vi.fn(),
+}))
+
+vi.mock('@/app/components/base/file-icon', () => ({
+  default: ({ type }: { type: string }) => <div data-testid="file-icon" data-type={type} />,
+}))
+
+vi.mock('./progress-tooltip', () => ({
+  default: ({ data }: { data: number }) => <div data-testid="progress-tooltip">{data}</div>,
+}))
+
+vi.mock('./tooltip', () => ({
+  default: ({ text, data }: { text: string, data: number | string }) => (
+    <div data-testid="citation-tooltip" data-text={text}>{data}</div>
+  ),
+}))
+
+const mockDownloadDocument = vi.fn()
+const mockUseDocumentDownload = vi.mocked(useDocumentDownload)
+const mockDownloadUrl = vi.mocked(downloadUrl)
+
+const makeSource = (overrides: Partial<Resources['sources'][number]> = {}): Resources['sources'][number] => ({
+  dataset_id: 'ds-1',
+  dataset_name: 'Test Dataset',
+  document_id: 'doc-1',
+  segment_id: 'seg-1',
+  segment_position: 1,
+  content: 'Source content here',
+  word_count: 120,
+  hit_count: 3,
+  index_node_hash: 'abcdef1234567',
+  score: 0.85,
+  data_source_type: 'upload_file',
+  document_name: 'test.pdf',
+  ...overrides,
+} as Resources['sources'][number])
+
+const makeData = (overrides: Partial<Resources> = {}): Resources => ({
+  documentId: 'doc-1',
+  documentName: 'report.pdf',
+  dataSourceType: 'upload_file',
+  sources: [makeSource()],
+  ...overrides,
+})
+
+const openPopup = async (user: ReturnType<typeof userEvent.setup>) => {
+  await user.click(screen.getByTestId('popup-trigger'))
+}
+
+describe('Popup', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseDocumentDownload.mockReturnValue({
+      mutateAsync: mockDownloadDocument,
+      isPending: false,
+    } as unknown as ReturnType<typeof useDocumentDownload>)
+  })
+
+  describe('Rendering – Trigger', () => {
+    it('should render the trigger element', () => {
+      render(<Popup data={makeData()} />)
+      expect(screen.getByTestId('popup-trigger')).toBeInTheDocument()
+    })
+
+    it('should show the document name in the trigger', () => {
+      render(<Popup data={makeData({ documentName: 'My Report.pdf' })} />)
+      expect(screen.getByTestId('popup-trigger')).toHaveTextContent('My Report.pdf')
+    })
+
+    it('should pass the extracted file extension to FileIcon for non-notion sources', () => {
+      render(<Popup data={makeData({ documentName: 'report.pdf', dataSourceType: 'upload_file' })} />)
+      expect(screen.getAllByTestId('file-icon')[0]).toHaveAttribute('data-type', 'pdf')
+    })
+
+    it('should pass notion as fileType to FileIcon for notion sources', () => {
+      render(<Popup data={makeData({ documentName: 'Notion Page', dataSourceType: 'notion' })} />)
+      expect(screen.getAllByTestId('file-icon')[0]).toHaveAttribute('data-type', 'notion')
+    })
+
+    it('should pass empty string as fileType when document has no extension', () => {
+      render(<Popup data={makeData({ documentName: 'nodotfile', dataSourceType: 'upload_file' })} />)
+      expect(screen.getAllByTestId('file-icon')[0]).toHaveAttribute('data-type', '')
+    })
+
+    it('should not render popup content before trigger is clicked', () => {
+      render(<Popup data={makeData()} />)
+      expect(screen.queryByTestId('popup-content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Popup Open / Close', () => {
+    it('should open the popup content on trigger click', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-content')).toBeInTheDocument()
+    })
+
+    it('should close the popup on second trigger click', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} />)
+
+      await openPopup(user)
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-content')).not.toBeInTheDocument()
+    })
+
+    it('should re-open popup after open → close → open cycle', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} />)
+
+      await openPopup(user)
+      await openPopup(user)
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-content')).toBeInTheDocument()
+    })
+  })
+
+  describe('Popup Header – Download Button', () => {
+    it('should render download button in header for upload_file dataSourceType with dataset_id', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-download-btn')).toBeInTheDocument()
+    })
+
+    it('should render download button in header for file dataSourceType with dataset_id', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          dataSourceType: 'file',
+          sources: [makeSource({ data_source_type: 'file', dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-download-btn')).toBeInTheDocument()
+    })
+
+    it('should render plain document name in header (no button) for notion type', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          documentName: 'Notion Doc',
+          dataSourceType: 'notion',
+          sources: [makeSource({ dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+    })
+
+    it('should render plain document name in header when dataset_id is absent', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          dataSourceType: 'upload_file',
+          sources: [makeSource({ dataset_id: '' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+    })
+
+    it('should disable the download button while isDownloading is true', async () => {
+      mockUseDocumentDownload.mockReturnValue({
+        mutateAsync: mockDownloadDocument,
+        isPending: true,
+      } as unknown as ReturnType<typeof useDocumentDownload>)
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-download-btn')).toBeDisabled()
+    })
+  })
+
+  describe('Source Items', () => {
+    it('should render one source item per source entry', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource(), makeSource({ segment_id: 'seg-2' })] })} />)
+
+      await openPopup(user)
+
+      expect(screen.getAllByTestId('popup-source-item')).toHaveLength(2)
+    })
+
+    it('should render source content text', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ content: 'Unique content text' })] })} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-source-content')).toHaveTextContent('Unique content text')
+    })
+
+    it('should show segment_position when it is truthy', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ segment_position: 7 })] })} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-segment-position')).toHaveTextContent('7')
+    })
+
+    it('should fall back to index + 1 when segment_position is 0', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ segment_position: 0 })] })} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-segment-position')).toHaveTextContent('1')
+    })
+  })
+
+  describe('Source Dividers', () => {
+    it('should render a divider between multiple sources', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          sources: [makeSource(), makeSource({ segment_id: 'seg-2' }), makeSource({ segment_id: 'seg-3' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.getAllByTestId('popup-source-divider')).toHaveLength(2)
+    })
+
+    it('should not render any divider for a single source', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource()] })} />)
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-source-divider')).not.toBeInTheDocument()
+    })
+
+    it('should render exactly n-1 dividers for n sources', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          sources: [
+            makeSource({ segment_id: 's1' }),
+            makeSource({ segment_id: 's2' }),
+            makeSource({ segment_id: 's3' }),
+            makeSource({ segment_id: 's4' }),
+          ],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.getAllByTestId('popup-source-divider')).toHaveLength(3)
+    })
+  })
+
+  describe('showHitInfo=false (default)', () => {
+    it('should not render the dataset link when showHitInfo is false', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} showHitInfo={false} />)
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-dataset-link')).not.toBeInTheDocument()
+    })
+
+    it('should not render hit info section when showHitInfo is false', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} showHitInfo={false} />)
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-hit-info')).not.toBeInTheDocument()
+    })
+
+    it('should not render Tooltip components when showHitInfo is false', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} showHitInfo={false} />)
+
+      await openPopup(user)
+
+      expect(screen.queryAllByTestId('citation-tooltip')).toHaveLength(0)
+    })
+
+    it('should not render ProgressTooltip when showHitInfo is false', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData()} showHitInfo={false} />)
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('progress-tooltip')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('showHitInfo=true', () => {
+    const dataWithScore = makeData({ sources: [makeSource({ score: 0.85 })] })
+
+    it('should render the dataset link when showHitInfo is true', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={dataWithScore} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-dataset-link')).toBeInTheDocument()
+    })
+
+    it('should render the dataset link with correct href', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={dataWithScore} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-dataset-link')).toHaveAttribute(
+        'href',
+        `/datasets/${dataWithScore.sources[0].dataset_id}/documents/${dataWithScore.sources[0].document_id}`,
+      )
+    })
+
+    it('should render the linkToDataset i18n key in the link', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={dataWithScore} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-dataset-link')).toHaveTextContent(/linkToDataset/i)
+    })
+
+    it('should render hit info section when showHitInfo is true', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={dataWithScore} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('popup-hit-info')).toBeInTheDocument()
+    })
+
+    it('should render three Tooltip components (characters, hitCount, vectorHash)', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={dataWithScore} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getAllByTestId('citation-tooltip')).toHaveLength(3)
+    })
+
+    it('should render ProgressTooltip when source score is greater than 0', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ score: 0.9 })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('progress-tooltip')).toBeInTheDocument()
+    })
+
+    it('should not render ProgressTooltip when source score is 0', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ score: 0 })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('progress-tooltip')).not.toBeInTheDocument()
+    })
+
+    it('should pass score rounded to 2 decimal places to ProgressTooltip', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ score: 0.856 })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      expect(screen.getByTestId('progress-tooltip')).toHaveTextContent('0.86')
+    })
+
+    it('should pass word_count to the characters Tooltip', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ word_count: 250 })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      const tooltips = screen.getAllByTestId('citation-tooltip')
+      expect(tooltips[0]).toHaveTextContent('250')
+    })
+
+    it('should pass hit_count to the hitCount Tooltip', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ hit_count: 7 })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      const tooltips = screen.getAllByTestId('citation-tooltip')
+      expect(tooltips[1]).toHaveTextContent('7')
+    })
+
+    it('should pass truncated index_node_hash (first 7 chars) to vectorHash Tooltip', async () => {
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ sources: [makeSource({ index_node_hash: 'abcdef1234567' })] })} showHitInfo={true} />)
+
+      await openPopup(user)
+
+      const tooltips = screen.getAllByTestId('citation-tooltip')
+      expect(tooltips[2]).toHaveTextContent('abcdef1')
+    })
+
+    it('should render hit info for each source when multiple sources are present', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup
+          data={makeData({
+            sources: [makeSource({ score: 0.9 }), makeSource({ segment_id: 'seg-2', score: 0.7 })],
+          })}
+          showHitInfo={true}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.getAllByTestId('popup-hit-info')).toHaveLength(2)
+    })
+  })
+
+  describe('handleDownloadUploadFile', () => {
+    it('should call downloadDocument and downloadUrl on successful download', async () => {
+      mockDownloadDocument.mockResolvedValue({ url: 'https://example.com/file.pdf' })
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      await waitFor(() => {
+        expect(mockDownloadDocument).toHaveBeenCalledWith({ datasetId: 'ds-1', documentId: 'doc-1' })
+        expect(mockDownloadUrl).toHaveBeenCalledWith({ url: 'https://example.com/file.pdf', fileName: 'report.pdf' })
+      })
+    })
+
+    it('should not call downloadUrl when res.url is absent', async () => {
+      mockDownloadDocument.mockResolvedValue({ url: '' })
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      await waitFor(() => expect(mockDownloadDocument).toHaveBeenCalled())
+      expect(mockDownloadUrl).not.toHaveBeenCalled()
+    })
+
+    it('should not call downloadDocument when dataSourceType is not upload_file or file', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          dataSourceType: 'notion',
+          sources: [makeSource({ dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+      expect(mockDownloadDocument).not.toHaveBeenCalled()
+    })
+
+    it('should not call downloadDocument when isDownloading is true', async () => {
+      mockUseDocumentDownload.mockReturnValue({
+        mutateAsync: mockDownloadDocument,
+        isPending: true,
+      } as unknown as ReturnType<typeof useDocumentDownload>)
+      const user = userEvent.setup()
+      render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      expect(mockDownloadDocument).not.toHaveBeenCalled()
+    })
+
+    it('should use documentId from data.documentId as priority over sources[0].document_id', async () => {
+      mockDownloadDocument.mockResolvedValue({ url: 'https://example.com/file.pdf' })
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          documentId: 'primary-doc-id',
+          dataSourceType: 'upload_file',
+          sources: [makeSource({ document_id: 'fallback-doc-id', dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      await waitFor(() => {
+        expect(mockDownloadDocument).toHaveBeenCalledWith({ datasetId: 'ds-1', documentId: 'primary-doc-id' })
+      })
+    })
+
+    it('should work with file dataSourceType the same as upload_file', async () => {
+      mockDownloadDocument.mockResolvedValue({ url: 'https://example.com/file.pdf' })
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          dataSourceType: 'file',
+          sources: [makeSource({ data_source_type: 'file', dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      await waitFor(() => {
+        expect(mockDownloadDocument).toHaveBeenCalled()
+        expect(mockDownloadUrl).toHaveBeenCalled()
+      })
+    })
+
+    it('should not call downloadDocument when both data.documentId and sources[0].document_id are empty', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup data={makeData({
+          documentId: '',
+          dataSourceType: 'upload_file',
+          sources: [makeSource({ document_id: '', dataset_id: 'ds-1' })],
+        })}
+        />,
+      )
+
+      await openPopup(user)
+      await user.click(screen.getByTestId('popup-download-btn'))
+
+      expect(mockDownloadDocument).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without crashing with minimum required props', () => {
+      expect(() => render(<Popup data={makeData()} />)).not.toThrow()
+    })
+
+    it('should render without crashing with an empty sources array', () => {
+      expect(() => render(<Popup data={makeData({ sources: [] })} />)).not.toThrow()
+    })
+
+    it('should render correctly when source has no score (undefined)', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup
+          data={makeData({
+            sources: [makeSource({ score: undefined })],
+          })}
+          showHitInfo={true}
+        />,
+      )
+
+      await openPopup(user)
+
+      expect(screen.queryByTestId('progress-tooltip')).not.toBeInTheDocument()
+    })
+
+    it('should render correctly when index_node_hash is undefined', async () => {
+      const user = userEvent.setup()
+      render(
+        <Popup
+          data={makeData({
+            sources: [makeSource({ index_node_hash: undefined })],
+          })}
+          showHitInfo={true}
+        />,
+      )
+
+      await openPopup(user)
+
+      const tooltips = screen.getAllByTestId('citation-tooltip')
+      expect(tooltips[2]).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 88d66f28b9..7dc2baeb88 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -4,15 +4,6 @@ import Link from 'next/link'
 import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FileIcon from '@/app/components/base/file-icon'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import {
-  BezierCurve03,
-  TypeSquare,
-} from '@/app/components/base/icons/src/vender/line/editor'
-import {
-  Hash02,
-  Target04,
-} from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -40,23 +31,16 @@ const Popup: FC<PopupProps> = ({
 
   const { mutateAsync: downloadDocument, isPending: isDownloading } = useDocumentDownload()
 
-  /**
-   * Download the original uploaded file for citations whose data source is upload-file.
-   * We request a signed URL from the dataset document download endpoint, then trigger browser download.
-   */
   const handleDownloadUploadFile = async (e: MouseEvent<HTMLElement>) => {
-    // Prevent toggling the citation popup when user clicks the download link.
     e.preventDefault()
     e.stopPropagation()
 
-    // Only upload-file citations can be downloaded this way (needs dataset/document ids).
     const isUploadFile = data.dataSourceType === 'upload_file' || data.dataSourceType === 'file'
     const datasetId = data.sources?.[0]?.dataset_id
     const documentId = data.documentId || data.sources?.[0]?.document_id
     if (!isUploadFile || !datasetId || !documentId || isDownloading)
       return
 
-    // Fetch signed URL (usually points to `/files/<id>/file-preview?...&as_attachment=true`).
     const res = await downloadDocument({ datasetId, documentId })
     if (res?.url)
       downloadUrl({ url: res.url, fileName: data.documentName })
@@ -73,22 +57,21 @@ const Popup: FC<PopupProps> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className="flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2">
+        <div data-testid="popup-trigger" className="flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2">
           <FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
-          {/* Keep the trigger purely for opening the popup (no download link here). */}
           <div className="truncate text-xs text-text-tertiary">{data.documentName}</div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
+        <div data-testid="popup-content" 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" />
-              <div className="system-xs-medium truncate text-text-tertiary">
-                {/* If it's an upload-file reference, the title becomes a download link. */}
+              <div className="truncate text-text-tertiary system-xs-medium">
                 {(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
                   ? (
                       <button
+                        data-testid="popup-download-btn"
                         type="button"
                         className="cursor-pointer truncate text-text-tertiary hover:underline"
                         onClick={handleDownloadUploadFile}
@@ -104,63 +87,71 @@ const Popup: FC<PopupProps> = ({
           <div className="max-h-[450px] overflow-y-auto rounded-lg bg-components-panel-bg px-4 py-0.5">
             <div className="w-full">
               {
-                data.sources.map((source, index) => (
-                  <Fragment key={index}>
-                    <div className="group py-3">
-                      <div className="mb-2 flex items-center justify-between">
-                        <div className="flex h-5 items-center rounded-md border border-divider-subtle px-1.5">
-                          <Hash02 className="mr-0.5 h-3 w-3 text-text-quaternary" />
-                          <div className="text-[11px] font-medium text-text-tertiary">
-                            {source.segment_position || index + 1}
+                data.sources.map((source, index) => {
+                  const itemKey = source.document_id
+                    ? `${source.document_id}-${source.segment_position ?? index}`
+                    : source.index_node_hash ?? `${data.documentId ?? 'doc'}-${index}`
+
+                  return (
+                    <Fragment key={itemKey}>
+                      <div data-testid="popup-source-item" className="group py-3">
+                        <div className="mb-2 flex items-center justify-between">
+                          <div className="flex h-5 items-center rounded-md border border-divider-subtle px-1.5">
+                            {/* replaced svg component with tailwind icon class per lint rule */}
+                            <i className="i-custom-vender-line-general-hash-02 mr-0.5 h-3 w-3 text-text-quaternary" aria-hidden />
+                            <div data-testid="popup-segment-position" className="text-[11px] font-medium text-text-tertiary">
+                              {source.segment_position || index + 1}
+                            </div>
                           </div>
+                          {
+                            showHitInfo && (
+                              <Link
+                                data-testid="popup-dataset-link"
+                                href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
+                                className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
+                              >
+                                {t('chat.citation.linkToDataset', { ns: 'common' })}
+                                <i className="i-custom-vender-line-arrows-arrow-up-right ml-1 h-3 w-3" aria-hidden />
+                              </Link>
+                            )
+                          }
                         </div>
+                        <div data-testid="popup-source-content" className="break-words text-[13px] text-text-secondary">{source.content}</div>
                         {
                           showHitInfo && (
-                            <Link
-                              href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
-                              className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
-                            >
-                              {t('chat.citation.linkToDataset', { ns: 'common' })}
-                              <ArrowUpRight className="ml-1 h-3 w-3" />
-                            </Link>
+                            <div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center text-text-quaternary system-xs-medium">
+                              <Tooltip
+                                text={t('chat.citation.characters', { ns: 'common' })}
+                                data={source.word_count}
+                                icon={<i className="i-custom-vender-line-editor-type-square mr-1 h-3 w-3" aria-hidden />}
+                              />
+                              <Tooltip
+                                text={t('chat.citation.hitCount', { ns: 'common' })}
+                                data={source.hit_count}
+                                icon={<i className="i-custom-vender-line-general-target-04 mr-1 h-3 w-3" aria-hidden />}
+                              />
+                              <Tooltip
+                                text={t('chat.citation.vectorHash', { ns: 'common' })}
+                                data={source.index_node_hash?.substring(0, 7)}
+                                icon={<i className="i-custom-vender-line-editor-bezier-curve-03 mr-1 h-3 w-3" aria-hidden />}
+                              />
+                              {
+                                !!source.score && (
+                                  <ProgressTooltip data={Number(source.score.toFixed(2))} />
+                                )
+                              }
+                            </div>
                           )
                         }
                       </div>
-                      <div className="break-words text-[13px] text-text-secondary">{source.content}</div>
                       {
-                        showHitInfo && (
-                          <div className="system-xs-medium mt-2 flex flex-wrap items-center text-text-quaternary">
-                            <Tooltip
-                              text={t('chat.citation.characters', { ns: 'common' })}
-                              data={source.word_count}
-                              icon={<TypeSquare className="mr-1 h-3 w-3" />}
-                            />
-                            <Tooltip
-                              text={t('chat.citation.hitCount', { ns: 'common' })}
-                              data={source.hit_count}
-                              icon={<Target04 className="mr-1 h-3 w-3" />}
-                            />
-                            <Tooltip
-                              text={t('chat.citation.vectorHash', { ns: 'common' })}
-                              data={source.index_node_hash?.substring(0, 7)}
-                              icon={<BezierCurve03 className="mr-1 h-3 w-3" />}
-                            />
-                            {
-                              !!source.score && (
-                                <ProgressTooltip data={Number(source.score.toFixed(2))} />
-                              )
-                            }
-                          </div>
+                        index !== data.sources.length - 1 && (
+                          <div data-testid="popup-source-divider" className="my-1 h-px bg-divider-regular" />
                         )
                       }
-                    </div>
-                    {
-                      index !== data.sources.length - 1 && (
-                        <div className="my-1 h-px bg-divider-regular" />
-                      )
-                    }
-                  </Fragment>
-                ))
+                    </Fragment>
+                  )
+                })
               }
             </div>
           </div>
diff --git a/web/app/components/base/chat/chat/citation/progress-tooltip.spec.tsx b/web/app/components/base/chat/chat/citation/progress-tooltip.spec.tsx
new file mode 100644
index 0000000000..a24c60c614
--- /dev/null
+++ b/web/app/components/base/chat/chat/citation/progress-tooltip.spec.tsx
@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import ProgressTooltip from './progress-tooltip'
+
+describe('ProgressTooltip', () => {
+  describe('Rendering', () => {
+    it('should render the trigger content', () => {
+      render(<ProgressTooltip data={0.75} />)
+      expect(screen.getByTestId('progress-trigger-content')).toBeInTheDocument()
+    })
+
+    it('should render the data value in the trigger', () => {
+      render(<ProgressTooltip data={0.75} />)
+      expect(screen.getByTestId('progress-trigger-content')).toHaveTextContent('0.75')
+    })
+
+    it('should render the progress bar fill element', () => {
+      render(<ProgressTooltip data={0.5} />)
+      expect(screen.getByTestId('progress-bar-fill')).toBeInTheDocument()
+    })
+
+    it('should not render the tooltip popup before hovering', () => {
+      render(<ProgressTooltip data={0.5} />)
+      expect(screen.queryByTestId('progress-tooltip-popup')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Progress Bar Width', () => {
+    it('should set fill width to data * 100 percent', () => {
+      render(<ProgressTooltip data={0.75} />)
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '75%' })
+    })
+
+    it('should set fill width to 0% when data is 0', () => {
+      render(<ProgressTooltip data={0} />)
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '0%' })
+    })
+
+    it('should set fill width to 100% when data is 1', () => {
+      render(<ProgressTooltip data={1} />)
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '100%' })
+    })
+
+    it('should set fill width to 50% when data is 0.5', () => {
+      render(<ProgressTooltip data={0.5} />)
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '50%' })
+    })
+  })
+
+  describe('Tooltip Visibility', () => {
+    it('should show the tooltip popup on mouse enter', async () => {
+      const user = userEvent.setup()
+      render(<ProgressTooltip data={0.8} />)
+
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+
+      expect(screen.getByTestId('progress-tooltip-popup')).toBeInTheDocument()
+    })
+
+    it('should hide the tooltip popup on mouse leave', async () => {
+      const user = userEvent.setup()
+      render(<ProgressTooltip data={0.8} />)
+
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+      await user.unhover(screen.getByTestId('progress-trigger-content'))
+
+      expect(screen.queryByTestId('progress-tooltip-popup')).not.toBeInTheDocument()
+    })
+
+    it('should show the hitScore i18n key in the tooltip', async () => {
+      const user = userEvent.setup()
+      render(<ProgressTooltip data={0.8} />)
+
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+
+      expect(screen.getByTestId('progress-tooltip-popup')).toHaveTextContent(/hitScore/i)
+    })
+
+    it('should show the data value inside the tooltip popup', async () => {
+      const user = userEvent.setup()
+      render(<ProgressTooltip data={0.8} />)
+
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+
+      expect(screen.getByTestId('progress-tooltip-popup')).toHaveTextContent('0.8')
+    })
+  })
+
+  describe('Props', () => {
+    it('should render correctly with a small fractional value', () => {
+      render(<ProgressTooltip data={0.12} />)
+      expect(screen.getByTestId('progress-bar-fill').getAttribute('style')).toMatch(/width:\s*12/)
+      expect(screen.getByTestId('progress-trigger-content')).toHaveTextContent('0.12')
+    })
+
+    it('should render correctly with a value close to 1', () => {
+      render(<ProgressTooltip data={0.99} />)
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '99%' })
+    })
+
+    it('should update displayed data when prop changes', () => {
+      const { rerender } = render(<ProgressTooltip data={0.3} />)
+      expect(screen.getByTestId('progress-trigger-content')).toHaveTextContent('0.3')
+
+      rerender(<ProgressTooltip data={0.9} />)
+      expect(screen.getByTestId('progress-trigger-content')).toHaveTextContent('0.9')
+      expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ width: '90%' })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without crashing when data is exactly 0', () => {
+      expect(() => render(<ProgressTooltip data={0} />)).not.toThrow()
+    })
+
+    it('should render without crashing when data is exactly 1', () => {
+      expect(() => render(<ProgressTooltip data={1} />)).not.toThrow()
+    })
+
+    it('should re-show tooltip after hover → unhover → hover cycle', async () => {
+      const user = userEvent.setup()
+      render(<ProgressTooltip data={0.5} />)
+
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+      await user.unhover(screen.getByTestId('progress-trigger-content'))
+      await user.hover(screen.getByTestId('progress-trigger-content'))
+
+      expect(screen.getByTestId('progress-tooltip-popup')).toBeInTheDocument()
+    })
+
+    it('should keep tooltip closed without any interaction', () => {
+      render(<ProgressTooltip data={0.42} />)
+      expect(screen.queryByTestId('progress-tooltip-popup')).not.toBeInTheDocument()
+    })
+
+    it('should not call any external handlers by default', () => {
+      const consoleError = vi.spyOn(console, 'error')
+      render(<ProgressTooltip data={0.5} />)
+      expect(consoleError).not.toHaveBeenCalled()
+      consoleError.mockRestore()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
index e1ee3871f8..7915a09d20 100644
--- a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
@@ -27,15 +27,20 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
-        <div className="flex grow items-center">
+        <div data-testid="progress-trigger-content" className="flex grow items-center">
           <div className="mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-components-progress-gray-border">
-            <div className="h-full bg-components-progress-gray-progress" style={{ width: `${data * 100}%` }}></div>
+            <div
+              data-testid="progress-bar-fill"
+              className="h-full bg-components-progress-gray-progress"
+              style={{ width: `${data * 100}%` }}
+            >
+            </div>
           </div>
           {data}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className="system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg">
+        <div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
           {t('chat.citation.hitScore', { ns: 'common' })}
           {' '}
           {data}
diff --git a/web/app/components/base/chat/chat/citation/tooltip.spec.tsx b/web/app/components/base/chat/chat/citation/tooltip.spec.tsx
new file mode 100644
index 0000000000..d5c1b57d76
--- /dev/null
+++ b/web/app/components/base/chat/chat/citation/tooltip.spec.tsx
@@ -0,0 +1,155 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import Tooltip from './tooltip'
+
+const renderTooltip = (data: number | string = 42, text = 'Characters', icon = <span data-testid="mock-icon">icon</span>) =>
+  render(<Tooltip data={data} text={text} icon={icon} />)
+
+describe('Tooltip', () => {
+  describe('Rendering', () => {
+    it('should render the trigger content wrapper', () => {
+      renderTooltip()
+      expect(screen.getByTestId('tooltip-trigger-content')).toBeInTheDocument()
+    })
+
+    it('should render the icon inside the trigger', () => {
+      renderTooltip(42, 'Characters', <span data-testid="mock-icon">icon</span>)
+      expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+    })
+
+    it('should render a numeric data value in the trigger', () => {
+      renderTooltip(123)
+      expect(screen.getByTestId('tooltip-trigger-content')).toHaveTextContent('123')
+    })
+
+    it('should render a string data value in the trigger', () => {
+      renderTooltip('abc123')
+      expect(screen.getByTestId('tooltip-trigger-content')).toHaveTextContent('abc123')
+    })
+
+    it('should not render the tooltip popup before hovering', () => {
+      renderTooltip()
+      expect(screen.queryByTestId('tooltip-popup')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should render the provided text label when tooltip is open', async () => {
+      const user = userEvent.setup()
+      renderTooltip(10, 'Word Count')
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.getByTestId('tooltip-popup')).toHaveTextContent('Word Count')
+    })
+
+    it('should render the data value inside the tooltip popup', async () => {
+      const user = userEvent.setup()
+      renderTooltip(99, 'Hit Count')
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.getByTestId('tooltip-popup')).toHaveTextContent('99')
+    })
+
+    it('should render a string data value inside the tooltip popup', async () => {
+      const user = userEvent.setup()
+      renderTooltip('abc1234', 'Vector Hash')
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.getByTestId('tooltip-popup')).toHaveTextContent('abc1234')
+    })
+
+    it('should render both text and data together inside the tooltip popup', async () => {
+      const user = userEvent.setup()
+      renderTooltip(55, 'Characters')
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      const popup = screen.getByTestId('tooltip-popup')
+      expect(popup).toHaveTextContent('Characters')
+      expect(popup).toHaveTextContent('55')
+    })
+
+    it('should render any arbitrary ReactNode as icon', () => {
+      render(<Tooltip data={1} text="text" icon={<div data-testid="custom-icon">★</div>} />)
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+
+    it('should update displayed data when prop changes', () => {
+      const { rerender } = render(<Tooltip data={10} text="Words" icon={<span />} />)
+      expect(screen.getByTestId('tooltip-trigger-content')).toHaveTextContent('10')
+
+      rerender(<Tooltip data={20} text="Words" icon={<span />} />)
+      expect(screen.getByTestId('tooltip-trigger-content')).toHaveTextContent('20')
+    })
+
+    it('should update displayed text in popup when prop changes and tooltip is open', async () => {
+      const user = userEvent.setup()
+      const { rerender } = render(<Tooltip data={10} text="Original" icon={<span />} />)
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+      expect(screen.getByTestId('tooltip-popup')).toHaveTextContent('Original')
+
+      rerender(<Tooltip data={10} text="Updated" icon={<span />} />)
+      expect(screen.getByTestId('tooltip-popup')).toHaveTextContent('Updated')
+    })
+  })
+
+  describe('Tooltip Visibility', () => {
+    it('should show the tooltip popup on mouse enter', async () => {
+      const user = userEvent.setup()
+      renderTooltip()
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.getByTestId('tooltip-popup')).toBeInTheDocument()
+    })
+
+    it('should hide the tooltip popup on mouse leave', async () => {
+      const user = userEvent.setup()
+      renderTooltip()
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+      await user.unhover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.queryByTestId('tooltip-popup')).not.toBeInTheDocument()
+    })
+
+    it('should re-show tooltip after hover → unhover → hover cycle', async () => {
+      const user = userEvent.setup()
+      renderTooltip()
+
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+      await user.unhover(screen.getByTestId('tooltip-trigger-content'))
+      await user.hover(screen.getByTestId('tooltip-trigger-content'))
+
+      expect(screen.getByTestId('tooltip-popup')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without crashing when data is 0', () => {
+      expect(() => render(<Tooltip data={0} text="score" icon={<span />} />)).not.toThrow()
+    })
+
+    it('should render without crashing when data is an empty string', () => {
+      expect(() => render(<Tooltip data="" text="label" icon={<span />} />)).not.toThrow()
+    })
+
+    it('should render without crashing when text is an empty string', () => {
+      expect(() => render(<Tooltip data={1} text="" icon={<span />} />)).not.toThrow()
+    })
+
+    it('should keep tooltip closed without any interaction', () => {
+      renderTooltip(0.5)
+      expect(screen.queryByTestId('tooltip-popup')).not.toBeInTheDocument()
+    })
+
+    it('should render data value 0 in the trigger', () => {
+      render(<Tooltip data={0} text="score" icon={<span />} />)
+      expect(screen.getByTestId('tooltip-trigger-content')).toHaveTextContent('0')
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/citation/tooltip.tsx b/web/app/components/base/chat/chat/citation/tooltip.tsx
index a4ac64c82f..d23234a660 100644
--- a/web/app/components/base/chat/chat/citation/tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/tooltip.tsx
@@ -30,13 +30,13 @@ const Tooltip: FC<TooltipProps> = ({
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
       >
-        <div className="mr-6 flex items-center">
+        <div data-testid="tooltip-trigger-content" className="mr-6 flex items-center">
           {icon}
           {data}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className="system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg">
+        <div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
           {text}
           {' '}
           {data}
diff --git a/web/app/components/base/chat/chat/content-switch.spec.tsx b/web/app/components/base/chat/chat/content-switch.spec.tsx
new file mode 100644
index 0000000000..5f87ceb6f2
--- /dev/null
+++ b/web/app/components/base/chat/chat/content-switch.spec.tsx
@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import ContentSwitch from './content-switch'
+
+describe('ContentSwitch', () => {
+  const defaultProps = {
+    count: 3,
+    currentIndex: 1,
+    prevDisabled: false,
+    nextDisabled: false,
+    switchSibling: vi.fn(),
+  }
+
+  it('renders nothing when count is 1 or less', () => {
+    const { container } = render(<ContentSwitch {...defaultProps} count={1} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when currentIndex is undefined', () => {
+    const { container } = render(<ContentSwitch {...defaultProps} currentIndex={undefined} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders correctly with current page and total count', () => {
+    render(<ContentSwitch {...defaultProps} currentIndex={0} count={5} />)
+    expect(screen.getByText(/1[^\n\r/\u2028\u2029]*\/.*5/)).toBeInTheDocument()
+  })
+
+  it('calls switchSibling with "prev" when left button is clicked', async () => {
+    const user = userEvent.setup()
+    const switchSibling = vi.fn()
+    render(<ContentSwitch {...defaultProps} switchSibling={switchSibling} />)
+
+    const prevButton = screen.getByRole('button', { name: /previous/i })
+    await user.click(prevButton)
+
+    expect(switchSibling).toHaveBeenCalledWith('prev')
+  })
+
+  it('calls switchSibling with "next" when right button is clicked', async () => {
+    const user = userEvent.setup()
+    const switchSibling = vi.fn()
+    render(<ContentSwitch {...defaultProps} switchSibling={switchSibling} />)
+
+    const nextButton = screen.getByRole('button', { name: /next/i })
+    await user.click(nextButton)
+
+    expect(switchSibling).toHaveBeenCalledWith('next')
+  })
+
+  it('applies disabled styles and prevents clicks when prevDisabled is true', async () => {
+    const user = userEvent.setup()
+    const switchSibling = vi.fn()
+    render(<ContentSwitch {...defaultProps} prevDisabled={true} switchSibling={switchSibling} />)
+
+    const prevButton = screen.getByRole('button', { name: /previous/i })
+
+    expect(prevButton).toHaveClass('opacity-30')
+    expect(prevButton).toBeDisabled()
+
+    await user.click(prevButton)
+    expect(switchSibling).not.toHaveBeenCalled()
+  })
+
+  it('applies disabled styles and prevents clicks when nextDisabled is true', async () => {
+    const user = userEvent.setup()
+    const switchSibling = vi.fn()
+    render(<ContentSwitch {...defaultProps} nextDisabled={true} switchSibling={switchSibling} />)
+
+    const nextButton = screen.getByRole('button', { name: /next/i })
+
+    expect(nextButton).toHaveClass('opacity-30')
+    expect(nextButton).toBeDisabled()
+
+    await user.click(nextButton)
+    expect(switchSibling).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/base/chat/chat/content-switch.tsx b/web/app/components/base/chat/chat/content-switch.tsx
index e17d3de019..ee735c61fd 100644
--- a/web/app/components/base/chat/chat/content-switch.tsx
+++ b/web/app/components/base/chat/chat/content-switch.tsx
@@ -18,6 +18,7 @@ export default function ContentSwitch({
       <div className="flex items-center justify-center pt-3.5 text-sm">
         <button
           type="button"
+          aria-label="Previous" // Added for accessibility and testing
           className={`${prevDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={prevDisabled}
           onClick={() => !prevDisabled && switchSibling('prev')}
@@ -32,6 +33,7 @@ export default function ContentSwitch({
         </span>
         <button
           type="button"
+          aria-label="Next" // Added for accessibility and testing
           className={`${nextDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={nextDisabled}
           onClick={() => !nextDisabled && switchSibling('next')}
diff --git a/web/app/components/base/chat/chat/context.spec.tsx b/web/app/components/base/chat/chat/context.spec.tsx
new file mode 100644
index 0000000000..de65a4d606
--- /dev/null
+++ b/web/app/components/base/chat/chat/context.spec.tsx
@@ -0,0 +1,94 @@
+import type { ChatItem } from '../types'
+import type { ChatContextValue } from './context'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { ChatContextProvider, useChatContext } from './context'
+
+const TestConsumer = () => {
+  const context = useChatContext()
+
+  return (
+    <div>
+      <div data-testid="isResponding">{String(context.isResponding)}</div>
+      <div data-testid="readonly">{String(context.readonly)}</div>
+      <div data-testid="chatListCount">{context.chatList.length}</div>
+      <div data-testid="questionIcon">{context.questionIcon}</div>
+      <button onClick={() => context.onSend?.('test message', [])}>Send Button</button>
+      <button onClick={() => context.onRegenerate?.({ id: '1' } as ChatItem, { message: 'retry' })}>Regenerate Button</button>
+    </div>
+  )
+}
+
+describe('ChatContextProvider', () => {
+  const mockOnSend = vi.fn()
+  const mockOnRegenerate = vi.fn()
+
+  const defaultProps: ChatContextValue = {
+    config: {} as ChatContextValue['config'],
+    isResponding: false,
+    chatList: [{ id: '1', content: 'hello' } as ChatItem],
+    showPromptLog: false,
+    questionIcon: <span data-testid="custom-icon">Icon</span>,
+    answerIcon: null,
+    onSend: mockOnSend,
+    onRegenerate: mockOnRegenerate,
+    onAnnotationEdited: vi.fn(),
+    onAnnotationAdded: vi.fn(),
+    onAnnotationRemoved: vi.fn(),
+    disableFeedback: false,
+    onFeedback: vi.fn(),
+    getHumanInputNodeData: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should provide context values to children', () => {
+    render(
+      <ChatContextProvider {...defaultProps} readonly={true}>
+        <TestConsumer />
+      </ChatContextProvider>,
+    )
+
+    expect(screen.getByTestId('isResponding')).toHaveTextContent('false')
+    expect(screen.getByTestId('readonly')).toHaveTextContent('true')
+    expect(screen.getByTestId('chatListCount')).toHaveTextContent('1')
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+  })
+
+  it('should use default values for optional props', () => {
+    const minimalProps = { ...defaultProps, chatList: undefined as unknown as ChatItem[] }
+
+    render(
+      <ChatContextProvider {...minimalProps}>
+        <TestConsumer />
+      </ChatContextProvider>,
+    )
+
+    expect(screen.getByTestId('chatListCount')).toHaveTextContent('0')
+    expect(screen.getByTestId('readonly')).toHaveTextContent('false')
+  })
+
+  it('should handle callbacks correctly via the hook', async () => {
+    const user = userEvent.setup()
+    render(
+      <ChatContextProvider {...defaultProps}>
+        <TestConsumer />
+      </ChatContextProvider>,
+    )
+
+    const sendBtn = screen.getByRole('button', { name: /send button/i })
+    const regenBtn = screen.getByRole('button', { name: /regenerate button/i })
+
+    await user.click(sendBtn)
+    expect(mockOnSend).toHaveBeenCalledWith('test message', [])
+
+    await user.click(regenBtn)
+    expect(mockOnRegenerate).toHaveBeenCalledWith(
+      expect.objectContaining({ id: '1' }),
+      expect.objectContaining({ message: 'retry' }),
+    )
+  })
+})
diff --git a/web/app/components/base/chat/chat/index.spec.tsx b/web/app/components/base/chat/chat/index.spec.tsx
new file mode 100644
index 0000000000..73c4aa8207
--- /dev/null
+++ b/web/app/components/base/chat/chat/index.spec.tsx
@@ -0,0 +1,606 @@
+import type { ChatConfig, ChatItem, OnSend } from '../types'
+import type { ChatProps } from './index'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Chat from './index'
+
+// ─── Why each mock exists ─────────────────────────────────────────────────────
+//
+// Answer        – transitively pulls Markdown (rehype/remark/katex), AgentContent,
+//                 WorkflowProcessItem and Operation; none can resolve in jsdom.
+// Question      – pulls Markdown, copy-to-clipboard, react-textarea-autosize.
+// ChatInputArea – pulls js-audio-recorder (requires Web Audio API unavailable in
+//                 jsdom) and VoiceInput / FileContextProvider chains.
+// PromptLogModal– pulls CopyFeedbackNew and deep modal dep chain.
+// AgentLogModal – pulls @remixicon/react (causes lint push error), useClickAway
+//                 from ahooks, and AgentLogDetail (workflow graph renderer).
+// es-toolkit/compat – debounce must return a fn with .cancel() or the cleanup
+//                 effect throws on unmount.
+//
+// NOT mocked (run real):
+//   ChatContextProvider – plain context wrapper, zero side-effects.
+//   TryToAsk            – only uses Button (base), Divider (base), i18n (global mock).
+// ─────────────────────────────────────────────────────────────────────────────
+
+vi.mock('./answer', () => ({
+  default: ({ item, responding }: { item: ChatItem, responding?: boolean }) => (
+    <div
+      data-testid="answer-item"
+      data-id={item.id}
+      data-responding={String(!!responding)}
+    >
+      {item.content}
+    </div>
+  ),
+}))
+
+vi.mock('./question', () => ({
+  default: ({ item }: { item: ChatItem }) => (
+    <div data-testid="question-item" data-id={item.id}>{item.content}</div>
+  ),
+}))
+
+vi.mock('./chat-input-area', () => ({
+  default: ({ disabled, readonly }: { disabled?: boolean, readonly?: boolean }) => (
+    <div
+      data-testid="chat-input-area"
+      data-disabled={String(!!disabled)}
+      data-readonly={String(!!readonly)}
+    />
+  ),
+}))
+
+vi.mock('@/app/components/base/prompt-log-modal', () => ({
+  default: ({ onCancel }: { onCancel: () => void }) => (
+    <div data-testid="prompt-log-modal">
+      <button data-testid="prompt-log-cancel" onClick={onCancel}>cancel</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/base/agent-log-modal', () => ({
+  default: ({ onCancel }: { onCancel: () => void }) => (
+    <div data-testid="agent-log-modal">
+      <button data-testid="agent-log-cancel" onClick={onCancel}>cancel</button>
+    </div>
+  ),
+}))
+
+vi.mock('es-toolkit/compat', () => ({
+  debounce: (fn: (...args: unknown[]) => void) => {
+    const debounced = (...args: unknown[]) => fn(...args)
+    debounced.cancel = vi.fn()
+    return debounced
+  },
+}))
+
+// ─── ResizeObserver capture ───────────────────────────────────────────────────
+
+type ResizeCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void
+let capturedResizeCallbacks: ResizeCallback[] = []
+
+const makeResizeEntry = (blockSize: number, inlineSize: number): ResizeObserverEntry => ({
+  borderBoxSize: [{ blockSize, inlineSize } as ResizeObserverSize],
+  contentBoxSize: [{ blockSize, inlineSize } as ResizeObserverSize],
+  contentRect: new DOMRect(0, 0, inlineSize, blockSize),
+  devicePixelContentBoxSize: [{ blockSize, inlineSize } as ResizeObserverSize],
+  target: document.createElement('div'),
+})
+
+// ─── Factories ────────────────────────────────────────────────────────────────
+
+const makeChatItem = (overrides: Partial<ChatItem> = {}): ChatItem => ({
+  id: `item-${Math.random().toString(36).slice(2)}`,
+  content: 'Test content',
+  isAnswer: false,
+  ...overrides,
+})
+
+const mockSetCurrentLogItem = vi.fn()
+const mockSetShowPromptLogModal = vi.fn()
+const mockSetShowAgentLogModal = vi.fn()
+
+const baseStoreState = {
+  currentLogItem: undefined,
+  setCurrentLogItem: mockSetCurrentLogItem,
+  showPromptLogModal: false,
+  setShowPromptLogModal: mockSetShowPromptLogModal,
+  showAgentLogModal: false,
+  setShowAgentLogModal: mockSetShowAgentLogModal,
+}
+
+const renderChat = (props: Partial<ChatProps> = {}) =>
+  render(<Chat chatList={[]} {...props} />)
+
+// ─── Suite ────────────────────────────────────────────────────────────────────
+
+describe('Chat', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedResizeCallbacks = []
+
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      cb(0)
+      return 0
+    })
+
+    vi.stubGlobal('ResizeObserver', class {
+      private cb: ResizeCallback
+      constructor(cb: ResizeCallback) {
+        this.cb = cb
+        capturedResizeCallbacks.push(cb)
+      }
+
+      observe() { }
+      unobserve() { }
+      disconnect() { }
+    })
+
+    useAppStore.setState(baseStoreState)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing with an empty chatList', () => {
+      renderChat()
+      expect(screen.getByTestId('chat-root')).toBeInTheDocument()
+    })
+
+    it('should render chatNode when provided', () => {
+      renderChat({ chatNode: <div data-testid="slot-node">slot</div> })
+      expect(screen.getByTestId('slot-node')).toBeInTheDocument()
+    })
+
+    it('should apply flex-col to root when isTryApp=true', () => {
+      renderChat({ isTryApp: true })
+      expect(screen.getByTestId('chat-root')).toHaveClass('flex', 'flex-col')
+    })
+
+    it('should not have flex-col when isTryApp is falsy', () => {
+      renderChat({ isTryApp: false })
+      expect(screen.getByTestId('chat-root')).not.toHaveClass('flex-col')
+    })
+
+    it('should apply chatContainerClassName to the scroll container', () => {
+      renderChat({ chatContainerClassName: 'my-custom-class' })
+      expect(screen.getByTestId('chat-container')).toHaveClass('my-custom-class')
+    })
+
+    it('should apply px-8 spacing by default', () => {
+      const { container } = renderChat({ noSpacing: false })
+      expect(container.querySelector('.w-full')).toHaveClass('px-8')
+    })
+
+    it('should omit px-8 when noSpacing=true', () => {
+      const { container } = renderChat({ noSpacing: true })
+      expect(container.querySelector('.w-full')).not.toHaveClass('px-8')
+    })
+  })
+
+  describe('Chat List', () => {
+    it('should render a Question for a non-answer item', () => {
+      renderChat({ chatList: [makeChatItem({ id: 'q1', isAnswer: false })] })
+      expect(screen.getByTestId('question-item')).toBeInTheDocument()
+    })
+
+    it('should render an Answer for an answer item', () => {
+      renderChat({ chatList: [makeChatItem({ id: 'a1', isAnswer: true })] })
+      expect(screen.getByTestId('answer-item')).toBeInTheDocument()
+    })
+
+    it('should render both Question and Answer from a mixed chatList', () => {
+      renderChat({
+        chatList: [
+          makeChatItem({ id: 'q1', isAnswer: false }),
+          makeChatItem({ id: 'a1', isAnswer: true }),
+        ],
+      })
+      expect(screen.getByTestId('question-item')).toBeInTheDocument()
+      expect(screen.getByTestId('answer-item')).toBeInTheDocument()
+    })
+
+    it('should pass responding=true only to the last answer when isResponding=true', () => {
+      renderChat({
+        isResponding: true,
+        chatList: [
+          makeChatItem({ id: 'q1', isAnswer: false }),
+          makeChatItem({ id: 'a1', isAnswer: true }),
+          makeChatItem({ id: 'q2', isAnswer: false }),
+          makeChatItem({ id: 'a2', isAnswer: true }),
+        ],
+      })
+      const answers = screen.getAllByTestId('answer-item')
+      expect(answers[0]).toHaveAttribute('data-responding', 'false')
+      expect(answers[1]).toHaveAttribute('data-responding', 'true')
+    })
+
+    it('should pass responding=false to all answers when isResponding=false', () => {
+      renderChat({
+        isResponding: false,
+        chatList: [
+          makeChatItem({ id: 'a1', isAnswer: true }),
+          makeChatItem({ id: 'a2', isAnswer: true }),
+        ],
+      })
+      screen.getAllByTestId('answer-item').forEach(el =>
+        expect(el).toHaveAttribute('data-responding', 'false'),
+      )
+    })
+
+    it('should render correct counts for a long mixed chatList', () => {
+      const chatList = Array.from({ length: 6 }, (_, i) =>
+        makeChatItem({ id: `item-${i}`, isAnswer: i % 2 === 1 }))
+      renderChat({ chatList })
+      expect(screen.getAllByTestId('question-item')).toHaveLength(3)
+      expect(screen.getAllByTestId('answer-item')).toHaveLength(3)
+    })
+  })
+
+  describe('Stop Responding Button', () => {
+    it('should show the stop button when isResponding=true and noStopResponding is falsy', () => {
+      renderChat({ isResponding: true, noStopResponding: false })
+      expect(screen.getByTestId('stop-responding-container')).toBeInTheDocument()
+    })
+
+    it('should hide the stop button when noStopResponding=true', () => {
+      renderChat({ isResponding: true, noStopResponding: true })
+      expect(screen.queryByTestId('stop-responding-container')).not.toBeInTheDocument()
+    })
+
+    it('should hide the stop button when isResponding=false', () => {
+      renderChat({ isResponding: false, noStopResponding: false })
+      expect(screen.queryByTestId('stop-responding-container')).not.toBeInTheDocument()
+    })
+
+    it('should call onStopResponding when the stop button is clicked', async () => {
+      const user = userEvent.setup()
+      const onStopResponding = vi.fn()
+      renderChat({ isResponding: true, noStopResponding: false, onStopResponding })
+
+      await user.click(screen.getByText(/stopResponding/i))
+
+      expect(onStopResponding).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render the stopResponding i18n key', () => {
+      renderChat({ isResponding: true, noStopResponding: false })
+      expect(screen.getByText(/stopResponding/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('TryToAsk (real component)', () => {
+    const tryToAskConfig: ChatConfig = {
+      suggested_questions_after_answer: { enabled: true },
+    } as ChatConfig
+
+    const mockOnSend = vi.fn() as unknown as OnSend
+
+    it('should render the tryToAsk i18n key when all conditions are met', () => {
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: ['What is AI?'],
+        onSend: mockOnSend,
+      })
+      expect(screen.getByText(/tryToAsk/i)).toBeInTheDocument()
+    })
+
+    it('should render each suggested question as a button', () => {
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: ['First question', 'Second question'],
+        onSend: mockOnSend,
+      })
+      expect(screen.getByText('First question')).toBeInTheDocument()
+      expect(screen.getByText('Second question')).toBeInTheDocument()
+    })
+
+    it('should call onSend with the question text when a suggestion button is clicked', async () => {
+      const user = userEvent.setup()
+      const onSend = vi.fn() as unknown as OnSend
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: ['Ask this'],
+        onSend,
+      })
+
+      await user.click(screen.getByText('Ask this'))
+
+      expect(onSend).toHaveBeenCalledWith('Ask this')
+    })
+
+    it('should not render TryToAsk when suggested_questions_after_answer is disabled', () => {
+      renderChat({
+        config: { suggested_questions_after_answer: { enabled: false } } as ChatConfig,
+        suggestedQuestions: ['q1'],
+        onSend: mockOnSend,
+      })
+      expect(screen.queryByText(/tryToAsk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render TryToAsk when suggestedQuestions is an empty array', () => {
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: [],
+        onSend: mockOnSend,
+      })
+      expect(screen.queryByText(/tryToAsk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render TryToAsk when suggestedQuestions is undefined', () => {
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: undefined,
+        onSend: mockOnSend,
+      })
+      expect(screen.queryByText(/tryToAsk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render TryToAsk when onSend is undefined', () => {
+      renderChat({
+        config: tryToAskConfig,
+        suggestedQuestions: ['q1'],
+        onSend: undefined,
+      })
+      expect(screen.queryByText(/tryToAsk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render TryToAsk when config is undefined', () => {
+      renderChat({
+        config: undefined,
+        suggestedQuestions: ['q1'],
+        onSend: mockOnSend,
+      })
+      expect(screen.queryByText(/tryToAsk/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('ChatInputArea', () => {
+    it('should render when noChatInput is falsy', () => {
+      renderChat({ noChatInput: false })
+      expect(screen.getByTestId('chat-input-area')).toBeInTheDocument()
+    })
+
+    it('should not render when noChatInput=true', () => {
+      renderChat({ noChatInput: true })
+      expect(screen.queryByTestId('chat-input-area')).not.toBeInTheDocument()
+    })
+
+    it('should pass disabled=true when inputDisabled=true', () => {
+      renderChat({ inputDisabled: true })
+      expect(screen.getByTestId('chat-input-area')).toHaveAttribute('data-disabled', 'true')
+    })
+
+    it('should pass disabled=false when inputDisabled is falsy', () => {
+      renderChat({ inputDisabled: false })
+      expect(screen.getByTestId('chat-input-area')).toHaveAttribute('data-disabled', 'false')
+    })
+
+    it('should pass readonly=true to ChatInputArea when readonly=true', () => {
+      renderChat({ readonly: true })
+      expect(screen.getByTestId('chat-input-area')).toHaveAttribute('data-readonly', 'true')
+    })
+  })
+
+  describe('PromptLogModal', () => {
+    it('should render when showPromptLogModal=true and hideLogModal is falsy', () => {
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: true })
+      renderChat({ hideLogModal: false })
+      expect(screen.getByTestId('prompt-log-modal')).toBeInTheDocument()
+    })
+
+    it('should not render when showPromptLogModal=false', () => {
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: false })
+      renderChat()
+      expect(screen.queryByTestId('prompt-log-modal')).not.toBeInTheDocument()
+    })
+
+    it('should not render when hideLogModal=true even if showPromptLogModal=true', () => {
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: true })
+      renderChat({ hideLogModal: true })
+      expect(screen.queryByTestId('prompt-log-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call setCurrentLogItem and setShowPromptLogModal(false) on cancel', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: true })
+      renderChat({ hideLogModal: false })
+
+      await user.click(screen.getByTestId('prompt-log-cancel'))
+
+      expect(mockSetCurrentLogItem).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPromptLogModal).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('AgentLogModal', () => {
+    it('should render when showAgentLogModal=true and hideLogModal is falsy', () => {
+      useAppStore.setState({ ...baseStoreState, showAgentLogModal: true })
+      renderChat({ hideLogModal: false })
+      expect(screen.getByTestId('agent-log-modal')).toBeInTheDocument()
+    })
+
+    it('should not render when showAgentLogModal=false', () => {
+      useAppStore.setState({ ...baseStoreState, showAgentLogModal: false })
+      renderChat()
+      expect(screen.queryByTestId('agent-log-modal')).not.toBeInTheDocument()
+    })
+
+    it('should not render when hideLogModal=true even if showAgentLogModal=true', () => {
+      useAppStore.setState({ ...baseStoreState, showAgentLogModal: true })
+      renderChat({ hideLogModal: true })
+      expect(screen.queryByTestId('agent-log-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call setCurrentLogItem and setShowAgentLogModal(false) on cancel', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ ...baseStoreState, showAgentLogModal: true })
+      renderChat({ hideLogModal: false })
+
+      await user.click(screen.getByTestId('agent-log-cancel'))
+
+      expect(mockSetCurrentLogItem).toHaveBeenCalledTimes(1)
+      expect(mockSetShowAgentLogModal).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('Window Resize', () => {
+    it('should register a resize listener on mount', () => {
+      const addSpy = vi.spyOn(window, 'addEventListener')
+      renderChat()
+      expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+    })
+
+    it('should remove the resize listener on unmount', () => {
+      const removeSpy = vi.spyOn(window, 'removeEventListener')
+      const { unmount } = renderChat()
+      unmount()
+      expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+    })
+
+    it('should not throw when the resize event fires', () => {
+      renderChat()
+      expect(() => window.dispatchEvent(new Event('resize'))).not.toThrow()
+    })
+  })
+
+  describe('ResizeObserver Callbacks', () => {
+    it('should set paddingBottom on chatContainer from the footer blockSize', () => {
+      renderChat({
+        chatList: [
+          makeChatItem({ id: 'q1', isAnswer: false }),
+          makeChatItem({ id: 'a1', isAnswer: true }),
+        ],
+      })
+      const containerCb = capturedResizeCallbacks[0]
+      if (containerCb) {
+        act(() => containerCb([makeResizeEntry(80, 400)], {} as ResizeObserver))
+        expect(screen.getByTestId('chat-container').style.paddingBottom).toBe('80px')
+      }
+    })
+
+    it('should set footer width from the container inlineSize', () => {
+      renderChat()
+      const footerCb = capturedResizeCallbacks[1]
+      if (footerCb) {
+        act(() => footerCb([makeResizeEntry(50, 600)], {} as ResizeObserver))
+        expect(screen.getByTestId('chat-footer').style.width).toBe('600px')
+      }
+    })
+
+    it('should disconnect both observers on unmount', () => {
+      const disconnectSpy = vi.fn()
+      vi.stubGlobal('ResizeObserver', class {
+        observe() { }
+        unobserve() { }
+        disconnect = disconnectSpy
+      })
+      const { unmount } = renderChat()
+      unmount()
+      expect(disconnectSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('Scroll Behavior', () => {
+    it('should not throw when chatList has 1 item (scroll guard: length > 1 not met)', () => {
+      expect(() => renderChat({ chatList: [makeChatItem({ id: 'q1' })] })).not.toThrow()
+    })
+
+    it('should not throw when a scroll event fires on the container', () => {
+      renderChat()
+      expect(() =>
+        screen.getByTestId('chat-container').dispatchEvent(new Event('scroll')),
+      ).not.toThrow()
+    })
+
+    it('should set userScrolled when distanceToBottom exceeds threshold', () => {
+      renderChat()
+      const container = screen.getByTestId('chat-container')
+      Object.defineProperty(container, 'scrollHeight', { value: 1000, configurable: true })
+      Object.defineProperty(container, 'clientHeight', { value: 400, configurable: true })
+      Object.defineProperty(container, 'scrollTop', { value: 0, configurable: true })
+      expect(() => container.dispatchEvent(new Event('scroll'))).not.toThrow()
+    })
+
+    it('should not set userScrolled when distanceToBottom is within threshold', () => {
+      renderChat()
+      const container = screen.getByTestId('chat-container')
+      Object.defineProperty(container, 'scrollHeight', { value: 500, configurable: true })
+      Object.defineProperty(container, 'clientHeight', { value: 400, configurable: true })
+      Object.defineProperty(container, 'scrollTop', { value: 99, configurable: true })
+      expect(() => container.dispatchEvent(new Event('scroll'))).not.toThrow()
+    })
+  })
+
+  describe('ChatList Scroll Reset', () => {
+    it('should not throw with empty chatList (length <= 1 branch)', () => {
+      expect(() => renderChat({ chatList: [] })).not.toThrow()
+    })
+
+    it('should not throw with exactly one item (length <= 1 branch)', () => {
+      expect(() => renderChat({ chatList: [makeChatItem({ id: 'msg-1' })] })).not.toThrow()
+    })
+
+    it('should reset scroll state when the first message ID changes on rerender', () => {
+      const { rerender } = renderChat({
+        chatList: [makeChatItem({ id: 'first' }), makeChatItem({ id: 'second' })],
+      })
+      expect(() =>
+        rerender(<Chat chatList={[makeChatItem({ id: 'new-first' }), makeChatItem({ id: 'new-second' })]} />),
+      ).not.toThrow()
+    })
+
+    it('should not reset scroll when the first message ID is unchanged', () => {
+      const item1 = makeChatItem({ id: 'stable-id' })
+      const { rerender } = renderChat({ chatList: [item1, makeChatItem({ id: 'second' })] })
+      expect(() =>
+        rerender(<Chat chatList={[item1, makeChatItem({ id: 'third' })]} />),
+      ).not.toThrow()
+    })
+  })
+
+  describe('Sidebar Collapse State', () => {
+    it('should schedule a resize via setTimeout when sidebarCollapseState becomes false', () => {
+      vi.useFakeTimers()
+      const { rerender } = renderChat({ sidebarCollapseState: true })
+      rerender(<Chat chatList={[]} sidebarCollapseState={false} />)
+      expect(() => vi.runAllTimers()).not.toThrow()
+      vi.useRealTimers()
+    })
+
+    it('should not schedule a resize when sidebarCollapseState stays true', () => {
+      vi.useFakeTimers()
+      renderChat({ sidebarCollapseState: true })
+      expect(() => vi.runAllTimers()).not.toThrow()
+      vi.useRealTimers()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without crashing with no optional props', () => {
+      expect(() => render(<Chat chatList={[]} />)).not.toThrow()
+    })
+
+    it('should handle readonly=true without crashing', () => {
+      expect(() => renderChat({ readonly: true })).not.toThrow()
+    })
+
+    it('should render no modals when both modal flags are false', () => {
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: false, showAgentLogModal: false })
+      renderChat()
+      expect(screen.queryByTestId('prompt-log-modal')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('agent-log-modal')).not.toBeInTheDocument()
+    })
+
+    it('should render both modals when both flags are true and hideLogModal is false', () => {
+      useAppStore.setState({ ...baseStoreState, showPromptLogModal: true, showAgentLogModal: true })
+      renderChat({ hideLogModal: false })
+      expect(screen.getByTestId('prompt-log-modal')).toBeInTheDocument()
+      expect(screen.getByTestId('agent-log-modal')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index e9669ba3f8..a77911d895 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -26,7 +26,6 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import AgentLogModal from '@/app/components/base/agent-log-modal'
 import Button from '@/app/components/base/button'
-import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { cn } from '@/utils/classnames'
 import Answer from './answer'
@@ -188,7 +187,6 @@ const Chat: FC<ChatProps> = ({
 
   useEffect(() => {
     if (chatFooterRef.current && chatContainerRef.current) {
-      // container padding bottom
       const resizeContainerObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const { blockSize } = entry.borderBoxSize[0]
@@ -198,7 +196,6 @@ const Chat: FC<ChatProps> = ({
       })
       resizeContainerObserver.observe(chatFooterRef.current)
 
-      // footer width
       const resizeFooterObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const { inlineSize } = entry.borderBoxSize[0]
@@ -237,20 +234,19 @@ const Chat: FC<ChatProps> = ({
     return () => container.removeEventListener('scroll', setUserScrolled)
   }, [])
 
-  // Reset user scroll state when conversation changes or a new chat starts
-  // Track the first message ID to detect conversation switches (fixes #29820)
   const prevFirstMessageIdRef = useRef<string | undefined>(undefined)
   useEffect(() => {
     const firstMessageId = chatList[0]?.id
-    // Reset when: new chat (length <= 1) OR conversation switched (first message ID changed)
     if (chatList.length <= 1 || (firstMessageId && prevFirstMessageIdRef.current !== firstMessageId))
       userScrolledRef.current = false
     prevFirstMessageIdRef.current = firstMessageId
   }, [chatList])
 
   useEffect(() => {
-    if (!sidebarCollapseState)
-      setTimeout(() => handleWindowResize(), 200)
+    if (!sidebarCollapseState) {
+      const timer = setTimeout(() => handleWindowResize(), 200)
+      return () => clearTimeout(timer)
+    }
   }, [handleWindowResize, sidebarCollapseState])
 
   const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend
@@ -273,8 +269,9 @@ const Chat: FC<ChatProps> = ({
       onFeedback={onFeedback}
       getHumanInputNodeData={getHumanInputNodeData}
     >
-      <div className={cn('relative h-full', isTryApp && 'flex flex-col')}>
+      <div data-testid="chat-root" className={cn('relative h-full', isTryApp && 'flex flex-col')}>
         <div
+          data-testid="chat-container"
           ref={chatContainerRef}
           className={cn('relative h-full overflow-y-auto overflow-x-hidden', isTryApp && 'h-0 grow', chatContainerClassName)}
         >
@@ -323,6 +320,7 @@ const Chat: FC<ChatProps> = ({
           </div>
         </div>
         <div
+          data-testid="chat-footer"
           className={`absolute bottom-0 z-10 flex justify-center bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
           ref={chatFooterRef}
         >
@@ -332,9 +330,10 @@ const Chat: FC<ChatProps> = ({
           >
             {
               !noStopResponding && isResponding && (
-                <div className="mb-2 flex justify-center">
+                <div data-testid="stop-responding-container" className="mb-2 flex justify-center">
                   <Button className="border-components-panel-border bg-components-panel-bg text-components-button-secondary-text" onClick={onStopResponding}>
-                    <StopCircle className="mr-[5px] h-3.5 w-3.5" />
+                    {/* eslint-disable-next-line tailwindcss/no-unknown-classes */}
+                    <div className="i-custom-vender-solid-mediaanddevices-stop-circle mr-[5px] h-3.5 w-3.5" />
                     <span className="text-xs font-normal">{t('operation.stopResponding', { ns: 'appDebug' })}</span>
                   </Button>
                 </div>
diff --git a/web/app/components/base/chat/chat/loading-anim/index.spec.tsx b/web/app/components/base/chat/chat/loading-anim/index.spec.tsx
new file mode 100644
index 0000000000..ddba3e38ca
--- /dev/null
+++ b/web/app/components/base/chat/chat/loading-anim/index.spec.tsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react'
+import LoadingAnim from './index'
+
+describe('LoadingAnim', () => {
+  it('should render correctly with text type', () => {
+    const { container } = render(<LoadingAnim type="text" />)
+    const element = container.firstChild as HTMLElement
+
+    expect(element).toBeInTheDocument()
+    expect(element.className).toMatch(/dot-flashing/)
+    expect(element.className).toMatch(/text/)
+  })
+
+  it('should render correctly with avatar type', () => {
+    const { container } = render(<LoadingAnim type="avatar" />)
+    const element = container.firstChild as HTMLElement
+
+    expect(element).toBeInTheDocument()
+    expect(element.className).toMatch(/dot-flashing/)
+    expect(element.className).toMatch(/avatar/)
+  })
+})
diff --git a/web/app/components/base/chat/chat/log/index.spec.tsx b/web/app/components/base/chat/chat/log/index.spec.tsx
new file mode 100644
index 0000000000..b74195bccb
--- /dev/null
+++ b/web/app/components/base/chat/chat/log/index.spec.tsx
@@ -0,0 +1,129 @@
+import type { IChatItem, ThoughtItem } from '@/app/components/base/chat/chat/type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Log from './index'
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: vi.fn(),
+}))
+
+describe('Log', () => {
+  const mockSetCurrentLogItem = vi.fn()
+  const mockSetShowPromptLogModal = vi.fn()
+  const mockSetShowAgentLogModal = vi.fn()
+  const mockSetShowMessageLogModal = vi.fn()
+
+  const createLogItem = (overrides?: Partial<IChatItem>): IChatItem => ({
+    id: '1',
+    content: 'test',
+    isAnswer: true, // Required per your IChatItem type
+    workflow_run_id: '',
+    agent_thoughts: [],
+    message_files: [],
+    ...overrides,
+  })
+
+  beforeEach(() => {
+    vi.mocked(useAppStore).mockImplementation(selector => selector({
+      // State properties
+      appSidebarExpand: 'expand',
+      currentLogModalActiveTab: 'question',
+      showPromptLogModal: false,
+      showAgentLogModal: false,
+      showMessageLogModal: false,
+      showAppConfigureFeaturesModal: false, // Fixed: Added missing required property
+      currentLogItem: null,
+      // Action functions
+      setCurrentLogItem: mockSetCurrentLogItem,
+      setShowPromptLogModal: mockSetShowPromptLogModal,
+      setShowAgentLogModal: mockSetShowAgentLogModal,
+      setShowMessageLogModal: mockSetShowMessageLogModal,
+    } as unknown as Parameters<typeof selector>[0])) // Fixed: Double cast to avoid overlap error
+  })
+
+  it('should render correctly', () => {
+    render(<Log logItem={createLogItem()} />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('should show message log modal when workflow_run_id exists', async () => {
+    const user = userEvent.setup()
+    const logItem = createLogItem({ workflow_run_id: 'run-123' })
+
+    render(<Log logItem={logItem} />)
+    const container = screen.getByRole('button').parentElement
+    if (container)
+      await user.click(container)
+
+    expect(mockSetCurrentLogItem).toHaveBeenCalledWith(logItem)
+    expect(mockSetShowMessageLogModal).toHaveBeenCalledWith(true)
+  })
+
+  it('should show agent log modal when agent_thoughts exists and workflow_run_id is missing', async () => {
+    const user = userEvent.setup()
+    const thought: ThoughtItem = {
+      id: 't1',
+      tool: 'test',
+      thought: 'thinking',
+      tool_input: '',
+      message_id: 'm1',
+      conversation_id: 'c1',
+      observation: '',
+      position: 1,
+    }
+    const logItem = createLogItem({
+      workflow_run_id: '',
+      agent_thoughts: [thought],
+    })
+
+    render(<Log logItem={logItem} />)
+    const container = screen.getByRole('button').parentElement
+    if (container)
+      await user.click(container)
+
+    expect(mockSetCurrentLogItem).toHaveBeenCalledWith(logItem)
+    expect(mockSetShowAgentLogModal).toHaveBeenCalledWith(true)
+  })
+
+  it('should show prompt log modal when both workflow_run_id and agent_thoughts are missing', async () => {
+    const user = userEvent.setup()
+    const logItem = createLogItem({
+      workflow_run_id: '',
+      agent_thoughts: [],
+    })
+
+    render(<Log logItem={logItem} />)
+    const container = screen.getByRole('button').parentElement
+    if (container)
+      await user.click(container)
+
+    expect(mockSetCurrentLogItem).toHaveBeenCalledWith(logItem)
+    expect(mockSetShowPromptLogModal).toHaveBeenCalledWith(true)
+  })
+
+  it('should prevent event propagation on click', async () => {
+    const user = userEvent.setup()
+
+    // 1. Spy on both the standard propagation and the immediate propagation
+    const stopPropagationSpy = vi.spyOn(Event.prototype, 'stopPropagation')
+    const stopImmediatePropagationSpy = vi.spyOn(Event.prototype, 'stopImmediatePropagation')
+
+    render(<Log logItem={createLogItem()} />)
+
+    // Find the container div that has the onClick handler
+    const container = screen.getByRole('button').parentElement
+
+    if (container)
+      await user.click(container)
+
+    // 2. Assert that both were called
+    expect(stopPropagationSpy).toHaveBeenCalled()
+    expect(stopImmediatePropagationSpy).toHaveBeenCalled()
+
+    // 3. Clean up spies (Good practice to avoid interfering with other tests)
+    stopPropagationSpy.mockRestore()
+    stopImmediatePropagationSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/base/chat/chat/question.spec.tsx b/web/app/components/base/chat/chat/question.spec.tsx
new file mode 100644
index 0000000000..2f8714ef77
--- /dev/null
+++ b/web/app/components/base/chat/chat/question.spec.tsx
@@ -0,0 +1,267 @@
+import type { Theme } from '../embedded-chatbot/theme/theme-context'
+import type { ChatConfig, ChatItem, OnRegenerate } from '../types'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import copy from 'copy-to-clipboard'
+import * as React from 'react'
+import { vi } from 'vitest'
+
+import Toast from '../../toast'
+import { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
+import { ChatContextProvider } from './context'
+import Question from './question'
+
+// Global Mocks
+vi.mock('@react-aria/interactions', () => ({
+  useFocusVisible: () => ({ isFocusVisible: false }),
+}))
+vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
+
+// Mock ResizeObserver and capture lifecycle for targeted coverage
+const observeMock = vi.fn()
+const unobserveMock = vi.fn()
+const disconnectMock = vi.fn()
+let resizeCallback: ResizeObserverCallback | null = null
+
+class MockResizeObserver {
+  constructor(callback: ResizeObserverCallback) {
+    resizeCallback = callback
+  }
+
+  observe = observeMock
+  unobserve = unobserveMock
+  disconnect = disconnectMock
+}
+vi.stubGlobal('ResizeObserver', MockResizeObserver)
+
+type RenderProps = {
+  theme?: Theme | null
+  questionIcon?: React.ReactNode
+  enableEdit?: boolean
+  switchSibling?: (siblingMessageId: string) => void
+  hideAvatar?: boolean
+  answerIcon?: React.ReactNode
+}
+
+const makeItem = (overrides: Partial<ChatItem> = {}): ChatItem => ({
+  id: 'q-1',
+  content: 'This is the question content',
+  message_files: [],
+  siblingCount: 3,
+  siblingIndex: 0,
+  prevSibling: null,
+  nextSibling: 'q-2',
+  ...overrides,
+} as unknown as ChatItem)
+
+const renderWithProvider = (
+  item: ChatItem,
+  onRegenerate: OnRegenerate = vi.fn() as unknown as OnRegenerate,
+  props: RenderProps = {},
+) => {
+  return render(
+    <ChatContextProvider
+      config={{} as unknown as (ChatConfig | undefined)}
+      isResponding={false}
+      chatList={[]}
+      showPromptLog={false}
+      questionIcon={props.questionIcon}
+      answerIcon={props.answerIcon}
+      onSend={vi.fn()}
+      onRegenerate={onRegenerate}
+      onAnnotationEdited={vi.fn()}
+      onAnnotationAdded={vi.fn()}
+      onAnnotationRemoved={vi.fn()}
+      disableFeedback={false}
+      onFeedback={vi.fn()}
+      getHumanInputNodeData={vi.fn()}
+    >
+      <Question
+        item={item}
+        theme={props.theme}
+        questionIcon={props.questionIcon}
+        enableEdit={props.enableEdit}
+        switchSibling={props.switchSibling}
+        hideAvatar={props.hideAvatar}
+      />
+    </ChatContextProvider>,
+  )
+}
+
+describe('Question component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    resizeCallback = null
+  })
+
+  it('should render the question content container and default avatar when hideAvatar is false', () => {
+    const { container } = renderWithProvider(makeItem())
+
+    const markdown = container.querySelector('.markdown-body')
+    expect(markdown).toBeInTheDocument()
+
+    const avatar = container.querySelector('.h-10.w-10') || container.querySelector('.h-10.w-10.shrink-0')
+    expect(avatar).toBeTruthy()
+  })
+
+  it('should hide avatar when hideAvatar is true', () => {
+    const { container } = renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { hideAvatar: true })
+    const avatar = container.querySelector('.h-10.w-10')
+    expect(avatar).toBeNull()
+  })
+
+  it('should observe content width resize and update layout accurately', () => {
+    renderWithProvider(makeItem())
+
+    expect(observeMock).toHaveBeenCalled()
+    expect(resizeCallback).not.toBeNull()
+
+    // Mock HTML element clientWidth to trigger logic mapping line coverage
+    const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 500 })
+
+    act(() => {
+      if (resizeCallback) {
+        resizeCallback([], {} as ResizeObserver)
+      }
+    })
+
+    const actionContainer = screen.getByTestId('action-container')
+    // 500 width + 8 offset defined in styles
+    expect(actionContainer).toHaveStyle({ right: '508px' })
+
+    // Restore original
+    if (originalClientWidth) {
+      Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth)
+    }
+  })
+
+  it('should disconnect ResizeObserver on component unmount', () => {
+    const { unmount } = renderWithProvider(makeItem())
+    unmount()
+    expect(disconnectMock).toHaveBeenCalled()
+  })
+
+  it('should call copy-to-clipboard and show a toast when copy action is clicked', async () => {
+    const user = userEvent.setup()
+    const toastSpy = vi.spyOn(Toast, 'notify')
+
+    renderWithProvider(makeItem())
+
+    const copyBtn = screen.getByTestId('copy-btn')
+    await user.click(copyBtn)
+
+    await waitFor(() => {
+      expect(copy).toHaveBeenCalledWith('This is the question content')
+      expect(toastSpy).toHaveBeenCalled()
+    })
+  })
+
+  it('should not show edit action when enableEdit is false', () => {
+    renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { enableEdit: false })
+
+    expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
+    expect(screen.queryByTestId('edit-btn')).not.toBeInTheDocument()
+  })
+
+  it('should enter edit mode when edit action clicked, allow editing and call onRegenerate on resend', async () => {
+    const user = userEvent.setup()
+    const onRegenerate = vi.fn() as unknown as OnRegenerate
+
+    renderWithProvider(makeItem(), onRegenerate)
+
+    const editBtn = screen.getByTestId('edit-btn')
+    await user.click(editBtn)
+
+    const textbox = await screen.findByRole('textbox')
+    expect(textbox).toHaveValue('This is the question content')
+
+    await user.clear(textbox)
+    await user.type(textbox, 'Edited question')
+
+    const resendBtn = screen.getByRole('button', { name: /chat.resend/i })
+    await user.click(resendBtn)
+
+    await waitFor(() => {
+      expect(onRegenerate).toHaveBeenCalledWith(makeItem(), { message: 'Edited question', files: [] })
+    })
+  })
+
+  it('should cancel editing and revert to original markdown when cancel is clicked', async () => {
+    const user = userEvent.setup()
+    const { container } = renderWithProvider(makeItem())
+
+    const editBtn = screen.getByTestId('edit-btn')
+    await user.click(editBtn)
+
+    const textbox = await screen.findByRole('textbox')
+    await user.clear(textbox)
+    await user.type(textbox, 'Edited question')
+
+    const cancelBtn = screen.getByRole('button', { name: /operation.cancel/i })
+    await user.click(cancelBtn)
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+      const md = container.querySelector('.markdown-body')
+      expect(md).toBeInTheDocument()
+    })
+  })
+
+  it('should switch siblings when prev/next buttons are clicked', async () => {
+    const user = userEvent.setup()
+    const switchSibling = vi.fn()
+    const item = makeItem({ prevSibling: 'q-prev', nextSibling: 'q-next', siblingIndex: 1 })
+
+    renderWithProvider(item, vi.fn() as unknown as OnRegenerate, { switchSibling })
+
+    const prevBtn = screen.getByRole('button', { name: /previous/i })
+    const nextBtn = screen.getByRole('button', { name: /next/i })
+
+    await user.click(prevBtn)
+    await user.click(nextBtn)
+
+    expect(switchSibling).toHaveBeenCalledTimes(2)
+    expect(switchSibling).toHaveBeenCalledWith('q-prev')
+    expect(switchSibling).toHaveBeenCalledWith('q-next')
+  })
+
+  it('should render prev disabled when no prevSibling is provided', () => {
+    const item = makeItem({ prevSibling: undefined, nextSibling: 'q-next', siblingIndex: 0, siblingCount: 2 })
+    renderWithProvider(item, vi.fn() as unknown as OnRegenerate)
+
+    const prevBtn = screen.getByRole('button', { name: /previous/i })
+    const nextBtn = screen.getByRole('button', { name: /next/i })
+
+    expect(prevBtn).toBeDisabled()
+    expect(nextBtn).not.toBeDisabled()
+  })
+
+  it('should render message files block when message_files provided (audio file branch covered)', () => {
+    const files = [
+      {
+        name: 'audio1.mp3',
+        url: 'https://example.com/audio1.mp3',
+        type: 'audio/mpeg',
+        previewUrl: 'https://example.com/audio1.mp3',
+        size: 1234,
+      } as unknown as FileEntity,
+    ]
+
+    renderWithProvider(makeItem({ message_files: files }))
+
+    expect(screen.getByText(/audio1.mp3/i)).toBeInTheDocument()
+  })
+
+  it('should apply theme bubble styles when theme provided', () => {
+    const themeBuilder = new ThemeBuilder()
+    themeBuilder.buildTheme('#ff0000', false)
+    const theme = themeBuilder.theme
+
+    renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { theme })
+
+    const contentContainer = screen.getByTestId('question-content')
+    expect(contentContainer.getAttribute('style')).not.toBeNull()
+  })
+})
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index ff7571ef6e..4c8c7f262d 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -4,7 +4,6 @@ import type {
 } from 'react'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import type { ChatItem } from '../types'
-import { RiClipboardLine, RiEditLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -16,7 +15,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
-import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
 import { cn } from '@/utils/classnames'
 import ActionButton from '../../action-button'
@@ -107,25 +105,29 @@ const Question: FC<QuestionProps> = ({
       <div className={cn('group relative mr-4 flex max-w-full items-start overflow-x-hidden pl-14', isEditing && 'flex-1')}>
         <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
           <div
+            data-testid="action-container"
             className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex"
             style={{ right: contentWidth + 8 }}
           >
-            <ActionButton onClick={() => {
-              copy(content)
-              Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
-            }}
+            <ActionButton
+              data-testid="copy-btn"
+              onClick={() => {
+                copy(content)
+                Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+              }}
             >
-              <RiClipboardLine className="h-4 w-4" />
+              <div className="i-ri-clipboard-line h-4 w-4" />
             </ActionButton>
             {enableEdit && (
-              <ActionButton onClick={handleEdit}>
-                <RiEditLine className="h-4 w-4" />
+              <ActionButton data-testid="edit-btn" onClick={handleEdit}>
+                <div className="i-ri-edit-line h-4 w-4" />
               </ActionButton>
             )}
           </div>
         </div>
         <div
           ref={contentRef}
+          data-testid="question-content"
           className="w-full rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 px-4 py-3 text-sm text-text-primary"
           style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
         >
@@ -150,7 +152,7 @@ const Question: FC<QuestionProps> = ({
                   <div className="max-h-[158px] overflow-y-auto overflow-x-hidden">
                     <Textarea
                       className={cn(
-                        'body-lg-regular w-full p-1 leading-6 text-text-tertiary outline-none',
+                        'w-full p-1 leading-6 text-text-tertiary outline-none body-lg-regular',
                       )}
                       autoFocus
                       minRows={1}
@@ -181,7 +183,7 @@ const Question: FC<QuestionProps> = ({
           {
             questionIcon || (
               <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
-                <User className="h-full w-full" />
+                <div className="i-custom-public-avatar-user h-full w-full" />
               </div>
             )
           }
diff --git a/web/app/components/base/chat/chat/thought/index.spec.tsx b/web/app/components/base/chat/chat/thought/index.spec.tsx
new file mode 100644
index 0000000000..d6a2993f0a
--- /dev/null
+++ b/web/app/components/base/chat/chat/thought/index.spec.tsx
@@ -0,0 +1,345 @@
+import type { ThoughtItem } from '../type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Thought from './index'
+
+describe('Thought', () => {
+  const createThought = (overrides?: Partial<ThoughtItem>): ThoughtItem => ({
+    id: 'test-id',
+    tool: 'test-tool',
+    tool_input: 'test input',
+    observation: 'test output',
+    ...overrides,
+  } as ThoughtItem)
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render single tool thought in collapsed state', () => {
+      const thought = createThought()
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText(/used/i)).toBeInTheDocument()
+      expect(screen.getByText('test-tool')).toBeInTheDocument()
+    })
+
+    it('should render multiple tool thoughts from JSON array', () => {
+      const thought = createThought({
+        tool: JSON.stringify(['tool1', 'tool2']),
+        tool_input: JSON.stringify(['input1', 'input2']),
+        observation: JSON.stringify(['output1', 'output2']),
+      })
+
+      render(<Thought thought={thought} isFinished={false} />)
+
+      expect(screen.getAllByText(/using/i)).toHaveLength(2)
+      expect(screen.getByText('tool1')).toBeInTheDocument()
+      expect(screen.getByText('tool2')).toBeInTheDocument()
+    })
+
+    it('should show input and output when expanded', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool_input: 'test input data',
+        observation: 'test output data',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.queryByText('test input data')).not.toBeInTheDocument()
+      expect(screen.queryByText('test output data')).not.toBeInTheDocument()
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText('test input data')).toBeInTheDocument()
+      expect(screen.getByText('test output data')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should show finished state with correct text', () => {
+      const thought = createThought()
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText(/used/i)).toBeInTheDocument()
+    })
+
+    it('should show in-progress state with correct text', () => {
+      const thought = createThought()
+
+      render(<Thought thought={thought} isFinished={false} />)
+
+      expect(screen.getByText(/using/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Tool labels', () => {
+    it('should use tool name when no labels provided', () => {
+      const thought = createThought({
+        tool: 'custom-tool',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('custom-tool')).toBeInTheDocument()
+    })
+
+    it('should fallback to tool name when tool_labels is undefined', () => {
+      const thought = createThought({
+        tool: 'fallback-tool',
+        tool_labels: undefined,
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('fallback-tool')).toBeInTheDocument()
+    })
+
+    it('should fallback to tool name when toolName property is missing', () => {
+      const thought = createThought({
+        tool: 'another-tool',
+        tool_labels: {},
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('another-tool')).toBeInTheDocument()
+    })
+
+    it('should fallback to tool name when language property is missing', () => {
+      const thought = createThought({
+        tool: 'test-tool',
+        tool_labels: {
+          toolName: {
+            en_US: 'English Label',
+            zh_Hans: '中文标签',
+          },
+        },
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('test-tool')).toBeInTheDocument()
+    })
+
+    it('should show knowledge label for dataset tools', () => {
+      const thought = createThought({
+        tool: 'dataset_123',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText(/knowledge/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Value parsing', () => {
+    it('should handle invalid JSON in tool field', () => {
+      const thought = createThought({
+        tool: 'invalid-json-{',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('invalid-json-{')).toBeInTheDocument()
+    })
+
+    it('should handle non-array JSON in tool field', () => {
+      const thought = createThought({
+        tool: JSON.stringify({ name: 'object-tool' }),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText('{"name":"object-tool"}')).toBeInTheDocument()
+    })
+
+    it('should handle invalid JSON in tool_input when parsing array', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: JSON.stringify(['tool1']),
+        tool_input: 'invalid-json-{',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText('invalid-json-{')).toBeInTheDocument()
+    })
+
+    it('should handle invalid JSON in observation when parsing array', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: JSON.stringify(['tool1']),
+        observation: 'invalid-json-[',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText('invalid-json-[')).toBeInTheDocument()
+    })
+
+    it('should extract correct values from JSON arrays by index', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: JSON.stringify(['tool1', 'tool2', 'tool3']),
+        tool_input: JSON.stringify(['input1', 'input2', 'input3']),
+        observation: JSON.stringify(['output1', 'output2', 'output3']),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      const toolSections = screen.getAllByText(/used/i)
+      expect(toolSections).toHaveLength(3)
+
+      await user.click(toolSections[0])
+      expect(screen.getByText('input1')).toBeInTheDocument()
+      expect(screen.getByText('output1')).toBeInTheDocument()
+
+      await user.click(toolSections[1])
+      expect(screen.getByText('input2')).toBeInTheDocument()
+      expect(screen.getByText('output2')).toBeInTheDocument()
+
+      await user.click(toolSections[2])
+      expect(screen.getByText('input3')).toBeInTheDocument()
+      expect(screen.getByText('output3')).toBeInTheDocument()
+    })
+
+    it('should use original value when isValueArray is false', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: 'single-tool',
+        tool_input: 'regular input',
+        observation: 'regular output',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText('regular input')).toBeInTheDocument()
+      expect(screen.getByText('regular output')).toBeInTheDocument()
+    })
+  })
+
+  describe('User interactions', () => {
+    it('should toggle expand state on click', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool_input: 'test input',
+        observation: 'test output',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.queryByText('test input')).not.toBeInTheDocument()
+
+      await user.click(screen.getByText(/used/i))
+      expect(screen.getByText('test input')).toBeInTheDocument()
+
+      await user.click(screen.getByText(/used/i))
+      expect(screen.queryByText('test input')).not.toBeInTheDocument()
+    })
+
+    it('should expand multiple tools independently', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: JSON.stringify(['tool1', 'tool2']),
+        tool_input: JSON.stringify(['input1', 'input2']),
+        observation: JSON.stringify(['output1', 'output2']),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      const toolHeaders = screen.getAllByText(/used/i)
+
+      await user.click(toolHeaders[0])
+      expect(screen.getByText('input1')).toBeInTheDocument()
+      expect(screen.queryByText('input2')).not.toBeInTheDocument()
+
+      await user.click(toolHeaders[1])
+      expect(screen.getByText('input1')).toBeInTheDocument()
+      expect(screen.getByText('input2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Multiple tools with labels', () => {
+    it('should render multiple tools with dataset prefix', () => {
+      const thought = createThought({
+        tool: JSON.stringify(['dataset_123', 'dataset_456']),
+        tool_input: JSON.stringify(['input1', 'input2']),
+        observation: JSON.stringify(['output1', 'output2']),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getAllByText(/knowledge/i)).toHaveLength(2)
+    })
+
+    it('should handle mixed dataset and regular tools', () => {
+      const thought = createThought({
+        tool: JSON.stringify(['dataset_123', 'regular-tool']),
+        tool_input: JSON.stringify(['input1', 'input2']),
+        observation: JSON.stringify(['output1', 'output2']),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      expect(screen.getByText(/knowledge/i)).toBeInTheDocument()
+      expect(screen.getByText('regular-tool')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle empty tool_input', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool_input: '',
+        observation: 'output',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText(/requestTitle/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty observation', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool_input: 'input',
+        observation: '',
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      await user.click(screen.getByText(/used/i))
+
+      expect(screen.getByText(/responseTitle/i)).toBeInTheDocument()
+    })
+
+    it('should handle JSON array with undefined elements', async () => {
+      const user = userEvent.setup()
+      const thought = createThought({
+        tool: JSON.stringify(['tool1', 'tool2']),
+        tool_input: JSON.stringify(['input1']),
+        observation: JSON.stringify(['output1']),
+      })
+
+      render(<Thought thought={thought} isFinished={true} />)
+
+      const toolHeaders = screen.getAllByText(/used/i)
+      await user.click(toolHeaders[1])
+
+      expect(screen.getByText('tool2')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat/try-to-ask.spec.tsx b/web/app/components/base/chat/chat/try-to-ask.spec.tsx
new file mode 100644
index 0000000000..caeae028c6
--- /dev/null
+++ b/web/app/components/base/chat/chat/try-to-ask.spec.tsx
@@ -0,0 +1,102 @@
+import type { OnSend } from '../types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import TryToAsk from './try-to-ask'
+
+describe('TryToAsk', () => {
+  const mockOnSend: OnSend = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders the component with header text', () => {
+    render(
+      <TryToAsk
+        suggestedQuestions={['Question 1']}
+        onSend={mockOnSend}
+      />,
+    )
+    expect(screen.getByText(/tryToAsk/i)).toBeInTheDocument()
+  })
+
+  it('renders all suggested questions as buttons', () => {
+    const questions = ['What is AI?', 'How does it work?', 'Tell me more']
+
+    render(
+      <TryToAsk
+        suggestedQuestions={questions}
+        onSend={mockOnSend}
+      />,
+    )
+
+    questions.forEach((question) => {
+      expect(screen.getByRole('button', { name: question })).toBeInTheDocument()
+    })
+  })
+
+  it('calls onSend with the correct question when button is clicked', async () => {
+    const user = userEvent.setup()
+    const questions = ['Question 1', 'Question 2', 'Question 3']
+
+    render(
+      <TryToAsk
+        suggestedQuestions={questions}
+        onSend={mockOnSend}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Question 2' }))
+
+    expect(mockOnSend).toHaveBeenCalledTimes(1)
+    expect(mockOnSend).toHaveBeenCalledWith('Question 2')
+  })
+
+  it('calls onSend for each button click', async () => {
+    const user = userEvent.setup()
+    const questions = ['First', 'Second', 'Third']
+
+    render(
+      <TryToAsk
+        suggestedQuestions={questions}
+        onSend={mockOnSend}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'First' }))
+    await user.click(screen.getByRole('button', { name: 'Third' }))
+
+    expect(mockOnSend).toHaveBeenCalledTimes(2)
+    expect(mockOnSend).toHaveBeenNthCalledWith(1, 'First')
+    expect(mockOnSend).toHaveBeenNthCalledWith(2, 'Third')
+  })
+
+  it('renders no buttons when suggestedQuestions is empty', () => {
+    render(
+      <TryToAsk
+        suggestedQuestions={[]}
+        onSend={mockOnSend}
+      />,
+    )
+
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
+  })
+
+  it('renders single question correctly', async () => {
+    const user = userEvent.setup()
+    const question = 'Single question'
+
+    render(
+      <TryToAsk
+        suggestedQuestions={[question]}
+        onSend={mockOnSend}
+      />,
+    )
+
+    const button = screen.getByRole('button', { name: question })
+    expect(button).toBeInTheDocument()
+
+    await user.click(button)
+    expect(mockOnSend).toHaveBeenCalledWith(question)
+  })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 285cef2018..f94012c899 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1460,26 +1460,6 @@
       "count": 1
     }
   },
-  "app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/answer/human-input-content/executed-action.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/answer/human-input-content/tips.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/chat/chat/answer/human-input-content/utils.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -1496,21 +1476,6 @@
       "count": 1
     }
   },
-  "app/components/base/chat/chat/answer/more.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/answer/operation.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/answer/suggested-questions.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/chat/answer/tool-detail.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 5
@@ -1519,9 +1484,6 @@
   "app/components/base/chat/chat/answer/workflow-process.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/chat/chat-input-area/index.tsx": {
@@ -1539,27 +1501,6 @@
   },
   "app/components/base/chat/chat/citation/index.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
-      "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/citation/popup.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/chat/chat/citation/progress-tooltip.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/citation/tooltip.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
@@ -1584,11 +1525,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/chat/question.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/chat/try-to-ask.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1

From a1991c51e4eb8a1647221998f09a7b56d5cc4e1a Mon Sep 17 00:00:00 2001
From: longway <longwei.llw@gmail.com>
Date: Tue, 24 Feb 2026 20:17:55 +0800
Subject: [PATCH 21/26] fix: add explicit return type annotations to BaseVector
 abstract methods (#32516)

---
 api/core/rag/datasource/vdb/vector_base.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/api/core/rag/datasource/vdb/vector_base.py b/api/core/rag/datasource/vdb/vector_base.py
index acf3465c5f..f29b270e40 100644
--- a/api/core/rag/datasource/vdb/vector_base.py
+++ b/api/core/rag/datasource/vdb/vector_base.py
@@ -19,7 +19,7 @@ class BaseVector(ABC):
         raise NotImplementedError
 
     @abstractmethod
-    def add_texts(self, documents: list[Document], embeddings: list[list[float]], **kwargs):
+    def add_texts(self, documents: list[Document], embeddings: list[list[float]], **kwargs) -> list[str]:
         raise NotImplementedError
 
     @abstractmethod
@@ -27,14 +27,14 @@ class BaseVector(ABC):
         raise NotImplementedError
 
     @abstractmethod
-    def delete_by_ids(self, ids: list[str]):
+    def delete_by_ids(self, ids: list[str]) -> None:
         raise NotImplementedError
 
     def get_ids_by_metadata_field(self, key: str, value: str):
         raise NotImplementedError
 
     @abstractmethod
-    def delete_by_metadata_field(self, key: str, value: str):
+    def delete_by_metadata_field(self, key: str, value: str) -> None:
         raise NotImplementedError
 
     @abstractmethod
@@ -46,7 +46,7 @@ class BaseVector(ABC):
         raise NotImplementedError
 
     @abstractmethod
-    def delete(self):
+    def delete(self) -> None:
         raise NotImplementedError
 
     def _filter_duplicate_texts(self, texts: list[Document]) -> list[Document]:

From bcd5dd0f81179c238dda5376e541a451a93253ba Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Tue, 24 Feb 2026 18:27:47 +0530
Subject: [PATCH 22/26] test(web): increase coverage for files in folder
 plugin-page and model-provider-page (#32377)

---
 .../add-model-button.spec.tsx                 |  17 ++
 .../cooldown-timer.spec.tsx                   |  33 +++
 .../credential-panel.spec.tsx                 | 145 ++++++++++
 .../provider-added-card/index.spec.tsx        | 137 +++++++++
 .../model-list-item.spec.tsx                  | 130 +++++++++
 .../provider-added-card/model-list.spec.tsx   | 108 +++++++
 .../model-load-balancing-configs.spec.tsx     | 191 +++++++++++++
 .../model-load-balancing-modal.spec.tsx       | 268 ++++++++++++++++++
 .../priority-selector.spec.tsx                |  29 ++
 .../priority-use-tip.spec.tsx                 |  14 +
 .../provider-added-card/quota-panel.spec.tsx  | 138 +++++++++
 11 files changed, 1210 insertions(+)
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/index.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.spec.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.spec.tsx

diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
new file mode 100644
index 0000000000..c0c5daece1
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
@@ -0,0 +1,17 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AddModelButton from './add-model-button'
+
+describe('AddModelButton', () => {
+  it('should render button with text', () => {
+    render(<AddModelButton onClick={vi.fn()} />)
+    expect(screen.getByText('common.modelProvider.addModel')).toBeInTheDocument()
+  })
+
+  it('should call onClick when clicked', () => {
+    const handleClick = vi.fn()
+    render(<AddModelButton onClick={handleClick} />)
+    const button = screen.getByText('common.modelProvider.addModel')
+    fireEvent.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.spec.tsx
new file mode 100644
index 0000000000..983f9e8f2c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.spec.tsx
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react'
+import CooldownTimer from './cooldown-timer'
+
+describe('CooldownTimer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render timer when secondsRemaining is positive', () => {
+    const { container } = render(<CooldownTimer secondsRemaining={10} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('should not render when secondsRemaining is zero', () => {
+    const { container } = render(<CooldownTimer secondsRemaining={0} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should not render when secondsRemaining is undefined', () => {
+    const { container } = render(<CooldownTimer />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should call onFinish after countdown completes', () => {
+    vi.useFakeTimers()
+    const onFinish = vi.fn()
+    render(<CooldownTimer secondsRemaining={1} onFinish={onFinish} />)
+
+    vi.advanceTimersByTime(2000)
+    expect(onFinish).toHaveBeenCalled()
+    vi.useRealTimers()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
new file mode 100644
index 0000000000..554efc93d2
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
@@ -0,0 +1,145 @@
+import type { ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { changeModelProviderPriority } from '@/service/common'
+import { ConfigurationMethodEnum } from '../declarations'
+import CredentialPanel from './credential-panel'
+
+const mockEventEmitter = { emit: vi.fn() }
+const mockNotify = vi.fn()
+const mockUpdateModelList = vi.fn()
+const mockUpdateModelProviders = vi.fn()
+const mockCredentialStatus = {
+  hasCredential: true,
+  authorized: true,
+  authRemoved: false,
+  current_credential_name: 'test-credential',
+  notAllowedToUse: false,
+}
+
+vi.mock('@/config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config')>()
+  return {
+    ...actual,
+    IS_CLOUD_EDITION: true,
+  }
+})
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: mockEventEmitter,
+  }),
+}))
+
+vi.mock('@/service/common', () => ({
+  changeModelProviderPriority: vi.fn(),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
+  ConfigProvider: () => <div data-testid="config-provider" />,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth/hooks', () => ({
+  useCredentialStatus: () => mockCredentialStatus,
+}))
+
+vi.mock('../hooks', () => ({
+  useUpdateModelList: () => mockUpdateModelList,
+  useUpdateModelProviders: () => mockUpdateModelProviders,
+}))
+
+vi.mock('./priority-selector', () => ({
+  default: ({ value, onSelect }: { value: string, onSelect: (key: string) => void }) => (
+    <button data-testid="priority-selector" onClick={() => onSelect('custom')}>
+      Priority Selector
+      {' '}
+      {value}
+    </button>
+  ),
+}))
+
+vi.mock('./priority-use-tip', () => ({
+  default: () => <div data-testid="priority-use-tip">Priority Tip</div>,
+}))
+
+vi.mock('@/app/components/header/indicator', () => ({
+  default: ({ color }: { color: string }) => <div data-testid="indicator">{color}</div>,
+}))
+
+describe('CredentialPanel', () => {
+  const mockProvider: ModelProvider = {
+    provider: 'test-provider',
+    provider_credential_schema: true,
+    custom_configuration: { status: 'active' },
+    system_configuration: { enabled: true },
+    preferred_provider_type: 'system',
+    configurate_methods: [ConfigurationMethodEnum.predefinedModel],
+    supported_model_types: ['gpt-4'],
+  } as unknown as ModelProvider
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    Object.assign(mockCredentialStatus, {
+      hasCredential: true,
+      authorized: true,
+      authRemoved: false,
+      current_credential_name: 'test-credential',
+      notAllowedToUse: false,
+    })
+  })
+
+  it('should show credential name and configuration actions', () => {
+    render(<CredentialPanel provider={mockProvider} />)
+
+    expect(screen.getByText('test-credential')).toBeInTheDocument()
+    expect(screen.getByTestId('config-provider')).toBeInTheDocument()
+    expect(screen.getByTestId('priority-selector')).toBeInTheDocument()
+  })
+
+  it('should show unauthorized status label when credential is missing', () => {
+    mockCredentialStatus.hasCredential = false
+    render(<CredentialPanel provider={mockProvider} />)
+
+    expect(screen.getByText(/modelProvider\.auth\.unAuthorized/)).toBeInTheDocument()
+  })
+
+  it('should show removed credential label and priority tip for custom preference', () => {
+    mockCredentialStatus.authorized = false
+    mockCredentialStatus.authRemoved = true
+    render(<CredentialPanel provider={{ ...mockProvider, preferred_provider_type: 'custom' } as ModelProvider} />)
+
+    expect(screen.getByText(/modelProvider\.auth\.authRemoved/)).toBeInTheDocument()
+    expect(screen.getByTestId('priority-use-tip')).toBeInTheDocument()
+  })
+
+  it('should change priority and refresh related data after success', async () => {
+    const mockChangePriority = changeModelProviderPriority as ReturnType<typeof vi.fn>
+    mockChangePriority.mockResolvedValue({ result: 'success' })
+    render(<CredentialPanel provider={mockProvider} />)
+
+    fireEvent.click(screen.getByTestId('priority-selector'))
+
+    await waitFor(() => {
+      expect(mockChangePriority).toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalled()
+      expect(mockUpdateModelProviders).toHaveBeenCalled()
+      expect(mockUpdateModelList).toHaveBeenCalledWith('gpt-4')
+      expect(mockEventEmitter.emit).toHaveBeenCalled()
+    })
+  })
+
+  it('should render standalone priority selector without provider schema', () => {
+    const providerNoSchema = {
+      ...mockProvider,
+      provider_credential_schema: null,
+    } as unknown as ModelProvider
+    render(<CredentialPanel provider={providerNoSchema} />)
+    expect(screen.getByTestId('priority-selector')).toBeInTheDocument()
+    expect(screen.queryByTestId('config-provider')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.spec.tsx
new file mode 100644
index 0000000000..a1c1eb277c
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.spec.tsx
@@ -0,0 +1,137 @@
+import type { ModelItem, ModelProvider } from '../declarations'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fetchModelProviderModelList } from '@/service/common'
+import { ConfigurationMethodEnum } from '../declarations'
+import ProviderAddedCard from './index'
+
+let mockIsCurrentWorkspaceManager = true
+type SubscriptionPayload = { type?: string, payload?: string } | unknown
+let subscriptionHandler: ((value: SubscriptionPayload) => void) | undefined
+const mockEventEmitter: { useSubscription: unknown, emit: unknown } = {
+  useSubscription: vi.fn((handler: (value: SubscriptionPayload) => void) => {
+    subscriptionHandler = handler
+  }),
+  emit: vi.fn(),
+}
+
+vi.mock('@/service/common', () => ({
+  fetchModelProviderModelList: vi.fn(),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager,
+  }),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: mockEventEmitter,
+  }),
+}))
+
+vi.mock('./credential-panel', () => ({
+  default: () => <div data-testid="credential-panel" />,
+}))
+
+vi.mock('./model-list', () => ({
+  default: ({ onCollapse, onChange }: { onCollapse: () => void, onChange: (provider: string) => void }) => (
+    <div data-testid="model-list">
+      <button type="button" onClick={onCollapse}>collapse list</button>
+      <button type="button" onClick={() => onChange('langgenius/openai/openai')}>refresh list</button>
+    </div>
+  ),
+}))
+
+vi.mock('../provider-icon', () => ({
+  default: () => <div data-testid="provider-icon" />,
+}))
+
+vi.mock('../model-badge', () => ({
+  default: ({ children }: { children: string }) => <div data-testid="model-badge">{children}</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
+  AddCustomModel: () => <div data-testid="add-custom-model" />,
+  ManageCustomModelCredentials: () => <div data-testid="manage-custom-model" />,
+}))
+
+describe('ProviderAddedCard', () => {
+  const mockProvider = {
+    provider: 'langgenius/openai/openai',
+    configurate_methods: ['predefinedModel'],
+    system_configuration: { enabled: true },
+    supported_model_types: ['llm'],
+  } as unknown as ModelProvider
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCurrentWorkspaceManager = true
+    subscriptionHandler = undefined
+  })
+
+  it('should render provider added card component', () => {
+    const { container } = render(<ProviderAddedCard provider={mockProvider} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('should open and refresh model list from user actions', async () => {
+    vi.mocked(fetchModelProviderModelList).mockResolvedValue({ data: [{ model: 'gpt-4' }] } as unknown as { data: ModelItem[] })
+    render(<ProviderAddedCard provider={mockProvider} />)
+
+    const showModelsBtn = screen.getAllByText('common.modelProvider.showModels')[1]
+    fireEvent.click(showModelsBtn)
+
+    await screen.findByTestId('model-list')
+    expect(fetchModelProviderModelList).toHaveBeenCalledWith(`/workspaces/current/model-providers/${mockProvider.provider}/models`)
+
+    fireEvent.click(screen.getByRole('button', { name: 'refresh list' }))
+    await waitFor(() => {
+      expect(fetchModelProviderModelList).toHaveBeenCalledTimes(2)
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'collapse list' }))
+    expect(screen.getAllByText(/common\.modelProvider\.showModelsNum:\{"num":1\}/).length).toBeGreaterThan(0)
+  })
+
+  it('should render configure tip when provider is not in quota list and not configured', () => {
+    const providerWithoutQuota = {
+      ...mockProvider,
+      provider: 'custom/provider',
+    } as unknown as ModelProvider
+    render(<ProviderAddedCard provider={providerWithoutQuota} notConfigured />)
+    expect(screen.getByText('common.modelProvider.configureTip')).toBeInTheDocument()
+  })
+
+  it('should refresh model list on matching event subscription', async () => {
+    vi.mocked(fetchModelProviderModelList).mockResolvedValue({ data: [{ model: 'gpt-4' }] } as unknown as { data: ModelItem[] })
+    render(<ProviderAddedCard provider={mockProvider} notConfigured />)
+
+    expect(subscriptionHandler).toBeTruthy()
+    await act(async () => {
+      subscriptionHandler?.({
+        type: 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST',
+        payload: mockProvider.provider,
+      })
+    })
+
+    await waitFor(() => {
+      expect(fetchModelProviderModelList).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should render custom model actions only for workspace managers', () => {
+    const customConfigProvider = {
+      ...mockProvider,
+      configurate_methods: [ConfigurationMethodEnum.customizableModel],
+    } as unknown as ModelProvider
+    const { rerender } = render(<ProviderAddedCard provider={customConfigProvider} />)
+
+    expect(screen.getByTestId('manage-custom-model')).toBeInTheDocument()
+    expect(screen.getByTestId('add-custom-model')).toBeInTheDocument()
+
+    mockIsCurrentWorkspaceManager = false
+    rerender(<ProviderAddedCard provider={customConfigProvider} />)
+    expect(screen.queryByTestId('manage-custom-model')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.spec.tsx
new file mode 100644
index 0000000000..6ed82ed095
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.spec.tsx
@@ -0,0 +1,130 @@
+import type { ModelItem, ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { disableModel, enableModel } from '@/service/common'
+import { ModelStatusEnum } from '../declarations'
+import ModelListItem from './model-list-item'
+
+let mockModelLoadBalancingEnabled = false
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceManager: true,
+  }),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: { type: 'pro' },
+  }),
+  useProviderContextSelector: () => mockModelLoadBalancingEnabled,
+}))
+
+vi.mock('@/service/common', () => ({
+  enableModel: vi.fn(),
+  disableModel: vi.fn(),
+}))
+
+vi.mock('../hooks', () => ({
+  useUpdateModelList: () => vi.fn(),
+}))
+
+vi.mock('../model-icon', () => ({
+  default: () => <div data-testid="model-icon" />,
+}))
+
+vi.mock('../model-name', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div data-testid="model-name">{children}</div>,
+}))
+
+vi.mock('../model-auth', () => ({
+  ConfigModel: ({ onClick }: { onClick: () => void }) => (
+    <button type="button" onClick={onClick}>modify load balancing</button>
+  ),
+}))
+
+describe('ModelListItem', () => {
+  const mockProvider = {
+    provider: 'test-provider',
+  } as unknown as ModelProvider
+
+  const mockModel = {
+    model: 'gpt-4',
+    model_type: 'llm',
+    fetch_from: 'system',
+    status: 'active',
+    deprecated: false,
+    load_balancing_enabled: false,
+    has_invalid_load_balancing_configs: false,
+  } as unknown as ModelItem
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockModelLoadBalancingEnabled = false
+  })
+
+  it('should render model item with icon and name', () => {
+    render(
+      <ModelListItem
+        model={mockModel}
+        provider={mockProvider}
+        isConfigurable={false}
+      />,
+    )
+    expect(screen.getByTestId('model-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('model-name')).toBeInTheDocument()
+  })
+
+  it('should disable an active model when switch is clicked', async () => {
+    const onChange = vi.fn()
+    render(
+      <ModelListItem
+        model={mockModel}
+        provider={mockProvider}
+        isConfigurable={false}
+        onChange={onChange}
+      />,
+    )
+    fireEvent.click(screen.getByRole('switch'))
+
+    await waitFor(() => {
+      expect(disableModel).toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith('test-provider')
+    }, { timeout: 2000 })
+  })
+
+  it('should enable a disabled model when switch is clicked', async () => {
+    const onChange = vi.fn()
+    const disabledModel = { ...mockModel, status: ModelStatusEnum.disabled }
+    render(
+      <ModelListItem
+        model={disabledModel}
+        provider={mockProvider}
+        isConfigurable={false}
+        onChange={onChange}
+      />,
+    )
+    fireEvent.click(screen.getByRole('switch'))
+
+    await waitFor(() => {
+      expect(enableModel).toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith('test-provider')
+    }, { timeout: 2000 })
+  })
+
+  it('should open load balancing config action when available', () => {
+    mockModelLoadBalancingEnabled = true
+    const onModifyLoadBalancing = vi.fn()
+
+    render(
+      <ModelListItem
+        model={mockModel}
+        provider={mockProvider}
+        isConfigurable={false}
+        onModifyLoadBalancing={onModifyLoadBalancing}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'modify load balancing' }))
+    expect(onModifyLoadBalancing).toHaveBeenCalledWith(mockModel)
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.spec.tsx
new file mode 100644
index 0000000000..2133c5e2db
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.spec.tsx
@@ -0,0 +1,108 @@
+import type { ModelItem, ModelProvider } from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ModelList from './model-list'
+
+const mockSetShowModelLoadBalancingModal = vi.fn()
+let mockIsCurrentWorkspaceManager = true
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager,
+  }),
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (state: { setShowModelLoadBalancingModal: typeof mockSetShowModelLoadBalancingModal }) => unknown) =>
+    selector({ setShowModelLoadBalancingModal: mockSetShowModelLoadBalancingModal }),
+}))
+
+vi.mock('./model-list-item', () => ({
+  default: ({ model, onModifyLoadBalancing }: { model: ModelItem, onModifyLoadBalancing: (model: ModelItem) => void }) => (
+    <button type="button" onClick={() => onModifyLoadBalancing(model)}>
+      {model.model}
+    </button>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
+  ManageCustomModelCredentials: () => <div data-testid="manage-credentials" />,
+  AddCustomModel: () => <div data-testid="add-custom-model" />,
+}))
+
+describe('ModelList', () => {
+  const mockProvider = {
+    provider: 'test-provider',
+    configurate_methods: ['customizableModel'],
+  } as unknown as ModelProvider
+
+  const mockModels = [
+    { model: 'gpt-4', model_type: 'llm', fetch_from: 'system' },
+    { model: 'gpt-3.5', model_type: 'llm', fetch_from: 'system' },
+  ] as unknown as ModelItem[]
+
+  const mockOnCollapse = vi.fn()
+  const mockOnChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCurrentWorkspaceManager = true
+  })
+
+  it('should render model count and model items', () => {
+    render(
+      <ModelList
+        provider={mockProvider}
+        models={mockModels}
+        onCollapse={mockOnCollapse}
+        onChange={mockOnChange}
+      />,
+    )
+    expect(screen.getAllByText(/modelProvider\.modelsNum/).length).toBeGreaterThan(0)
+    expect(screen.getByRole('button', { name: 'gpt-4' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'gpt-3.5' })).toBeInTheDocument()
+  })
+
+  it('should trigger collapse when collapsed label is clicked', () => {
+    render(
+      <ModelList
+        provider={mockProvider}
+        models={mockModels}
+        onCollapse={mockOnCollapse}
+        onChange={mockOnChange}
+      />,
+    )
+
+    const countElements = screen.getAllByText(/modelProvider\.modelsNum/)
+    fireEvent.click(countElements[1])
+    expect(mockOnCollapse).toHaveBeenCalled()
+  })
+
+  it('should open load balancing modal for selected model', () => {
+    render(
+      <ModelList
+        provider={mockProvider}
+        models={mockModels}
+        onCollapse={mockOnCollapse}
+        onChange={mockOnChange}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'gpt-4' }))
+    expect(mockSetShowModelLoadBalancingModal).toHaveBeenCalled()
+  })
+
+  it('should hide custom model actions for non-manager', () => {
+    mockIsCurrentWorkspaceManager = false
+    render(
+      <ModelList
+        provider={mockProvider}
+        models={mockModels}
+        onCollapse={mockOnCollapse}
+        onChange={mockOnChange}
+      />,
+    )
+
+    expect(screen.queryByTestId('manage-credentials')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('add-custom-model')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.spec.tsx
new file mode 100644
index 0000000000..0cceccb1f0
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.spec.tsx
@@ -0,0 +1,191 @@
+import type {
+  Credential,
+  CustomModelCredential,
+  ModelCredential,
+  ModelLoadBalancingConfig,
+  ModelProvider,
+} from '../declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { ConfigurationMethodEnum } from '../declarations'
+import ModelLoadBalancingConfigs from './model-load-balancing-configs'
+
+let mockModelLoadBalancingEnabled = true
+
+vi.mock('@/config', () => ({
+  IS_CE_EDITION: false,
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContextSelector: () => mockModelLoadBalancingEnabled,
+}))
+
+vi.mock('./cooldown-timer', () => ({
+  default: ({ secondsRemaining, onFinish }: { secondsRemaining?: number, onFinish?: () => void }) => (
+    <button type="button" onClick={onFinish}>
+      {secondsRemaining}
+      s
+    </button>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
+  AddCredentialInLoadBalancing: ({ onSelectCredential, onUpdate, onRemove }: {
+    onSelectCredential: (credential: Credential) => void
+    onUpdate?: (payload?: unknown, formValues?: Record<string, unknown>) => void
+    onRemove?: (credentialId: string) => void
+  }) => (
+    <div>
+      <button
+        type="button"
+        onClick={() => onSelectCredential({ credential_id: 'cred-2', credential_name: 'Key 2' } as Credential)}
+      >
+        add credential
+      </button>
+      <button
+        type="button"
+        onClick={() => onUpdate?.({ credential: { credential_id: 'cred-2' } }, { __authorization_name__: 'Key 2' })}
+      >
+        trigger update
+      </button>
+      <button
+        type="button"
+        onClick={() => onRemove?.('cred-2')}
+      >
+        trigger remove
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/billing/upgrade-btn', () => ({
+  default: () => <div>upgrade</div>,
+}))
+
+describe('ModelLoadBalancingConfigs', () => {
+  const mockProvider = {
+    provider: 'test-provider',
+  } as unknown as ModelProvider
+
+  const mockModelCredential = {
+    available_credentials: [
+      {
+        credential_id: 'cred-1',
+        credential_name: 'Key 1',
+        not_allowed_to_use: false,
+      },
+      {
+        credential_id: 'cred-2',
+        credential_name: 'Key 2',
+        not_allowed_to_use: false,
+      },
+    ],
+  } as unknown as ModelCredential
+
+  const createDraftConfig = (enabled = true): ModelLoadBalancingConfig => ({
+    enabled,
+    configs: [
+      {
+        id: 'cfg-1',
+        credential_id: 'cred-1',
+        enabled: true,
+        name: 'Key 1',
+      },
+    ],
+  } as ModelLoadBalancingConfig)
+
+  const StatefulHarness = ({
+    initialConfig,
+    withSwitch = false,
+    onUpdate,
+    onRemove,
+  }: {
+    initialConfig: ModelLoadBalancingConfig
+    withSwitch?: boolean
+    onUpdate?: (payload?: unknown, formValues?: Record<string, unknown>) => void
+    onRemove?: (credentialId: string) => void
+  }) => {
+    const [draftConfig, setDraftConfig] = useState<ModelLoadBalancingConfig | undefined>(initialConfig)
+    return (
+      <ModelLoadBalancingConfigs
+        draftConfig={draftConfig}
+        setDraftConfig={setDraftConfig}
+        provider={mockProvider}
+        configurationMethod={ConfigurationMethodEnum.predefinedModel}
+        modelCredential={mockModelCredential}
+        model={{ model: 'gpt-4', model_type: 'llm' } as CustomModelCredential}
+        withSwitch={withSwitch}
+        onUpdate={onUpdate}
+        onRemove={onRemove}
+      />
+    )
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockModelLoadBalancingEnabled = true
+  })
+
+  it('should render nothing when draft config is missing', () => {
+    const { container } = render(
+      <ModelLoadBalancingConfigs
+        draftConfig={undefined}
+        setDraftConfig={vi.fn()}
+        provider={mockProvider}
+        configurationMethod={ConfigurationMethodEnum.predefinedModel}
+        modelCredential={mockModelCredential}
+        model={{ model: 'gpt-4', model_type: 'llm' } as CustomModelCredential}
+      />,
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should show current configs and low key warning when enabled', () => {
+    render(<StatefulHarness initialConfig={createDraftConfig(true)} />)
+
+    expect(screen.getAllByText(/modelProvider\.loadBalancing/).length).toBeGreaterThan(0)
+    expect(screen.getByText('Key 1')).toBeInTheDocument()
+    expect(screen.getByText(/modelProvider\.loadBalancingLeastKeyWarning/)).toBeInTheDocument()
+  })
+
+  it('should enable load balancing by clicking the panel when disabled', () => {
+    render(<StatefulHarness initialConfig={createDraftConfig(false)} />)
+
+    fireEvent.click(screen.getAllByText(/modelProvider\.loadBalancing/)[0])
+
+    expect(screen.getByText('Key 1')).toBeInTheDocument()
+  })
+
+  it('should add and remove credentials from the visible list', () => {
+    const onUpdate = vi.fn()
+    const onRemove = vi.fn()
+    const draftConfig = {
+      enabled: true,
+      configs: [
+        { id: 'cfg-1', credential_id: 'cred-1', enabled: true, name: 'Key 1', in_cooldown: true, ttl: 30 },
+        { id: 'cfg-2', credential_id: 'cred-2', enabled: true, name: '__inherit__' },
+      ],
+    } as unknown as ModelLoadBalancingConfig
+    render(<StatefulHarness initialConfig={draftConfig} withSwitch onUpdate={onUpdate} onRemove={onRemove} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '30s' }))
+
+    fireEvent.click(screen.getByRole('button', { name: 'add credential' }))
+    expect(screen.getByText('Key 2')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'trigger update' }))
+    expect(onUpdate).toHaveBeenCalled()
+
+    fireEvent.click(screen.getByRole('button', { name: 'trigger remove' }))
+    expect(onRemove).toHaveBeenCalledWith('cred-2')
+    expect(screen.queryByText('Key 2')).not.toBeInTheDocument()
+    fireEvent.click(screen.getAllByRole('switch')[0])
+  })
+
+  it('should show upgrade prompt when feature is unavailable', () => {
+    mockModelLoadBalancingEnabled = false
+    render(<StatefulHarness initialConfig={createDraftConfig(true)} withSwitch />)
+
+    expect(screen.getByText(/modelProvider\.upgradeForLoadBalancing/)).toBeInTheDocument()
+    expect(screen.getByText('upgrade')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
new file mode 100644
index 0000000000..ea78234612
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
@@ -0,0 +1,268 @@
+import type { ModelItem, ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { ConfigurationMethodEnum } from '../declarations'
+import ModelLoadBalancingModal from './model-load-balancing-modal'
+
+type CredentialData = {
+  load_balancing: {
+    enabled: boolean
+    configs: Array<{
+      id: string
+      credential_id: string
+      enabled: boolean
+      name: string
+      credentials: { api_key: string }
+    }>
+  }
+  current_credential_id: string
+  available_credentials: Array<{ credential_id: string, credential_name: string }>
+  current_credential_name: string
+}
+
+const mockNotify = vi.fn()
+const mockMutateAsync = vi.fn()
+const mockRefetch = vi.fn()
+const mockHandleRefreshModel = vi.fn()
+const mockHandleConfirmDelete = vi.fn()
+const mockOpenConfirmDelete = vi.fn()
+
+let mockDeleteModel: unknown = null
+let mockCredentialData: CredentialData | undefined = {
+  load_balancing: {
+    enabled: true,
+    configs: [
+      { id: 'cfg-1', credential_id: 'cred-1', enabled: true, name: 'Default', credentials: { api_key: 'same-key' } },
+      { id: 'cfg-2', credential_id: 'cred-2', enabled: true, name: 'Backup', credentials: { api_key: 'backup-key' } },
+    ],
+  },
+  current_credential_id: 'cred-1',
+  available_credentials: [
+    { credential_id: 'cred-1', credential_name: 'Default' },
+    { credential_id: 'cred-2', credential_name: 'Backup' },
+  ],
+  current_credential_name: 'Default',
+}
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+vi.mock('@/service/use-models', () => ({
+  useGetModelCredential: () => ({
+    isLoading: false,
+    data: mockCredentialData,
+    refetch: mockRefetch,
+  }),
+  useUpdateModelLoadBalancingConfig: () => ({
+    mutateAsync: mockMutateAsync,
+  }),
+}))
+
+vi.mock('../model-auth/hooks/use-auth', () => ({
+  useAuth: () => ({
+    doingAction: false,
+    deleteModel: mockDeleteModel,
+    openConfirmDelete: mockOpenConfirmDelete,
+    closeConfirmDelete: vi.fn(),
+    handleConfirmDelete: mockHandleConfirmDelete,
+  }),
+}))
+
+vi.mock('../hooks', () => ({
+  useRefreshModel: () => ({ handleRefreshModel: mockHandleRefreshModel }),
+}))
+
+vi.mock('./model-load-balancing-configs', () => ({
+  default: ({ onUpdate, onRemove }: {
+    onUpdate?: (payload?: unknown, formValues?: Record<string, unknown>) => void
+    onRemove?: (credentialId: string) => void
+  }) => (
+    <div>
+      <button type="button" onClick={() => onUpdate?.(undefined, { __authorization_name__: 'New Key' })}>config add credential</button>
+      <button type="button" onClick={() => onUpdate?.({ credential: { credential_id: 'cred-1' } }, { __authorization_name__: 'Renamed Key' })}>config rename credential</button>
+      <button type="button" onClick={() => onRemove?.('cred-1')}>config remove</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
+  SwitchCredentialInLoadBalancing: ({ onUpdate }: { onUpdate: () => void }) => (
+    <button type="button" onClick={onUpdate}>switch credential</button>
+  ),
+}))
+
+vi.mock('../model-icon', () => ({
+  default: () => <div>model-icon</div>,
+}))
+
+vi.mock('../model-name', () => ({
+  default: () => <div>model-name</div>,
+}))
+
+describe('ModelLoadBalancingModal', () => {
+  const mockProvider = {
+    provider: 'test-provider',
+    provider_credential_schema: {
+      credential_form_schemas: [{ type: 'secret-input', variable: 'api_key' }],
+    },
+    model_credential_schema: {
+      credential_form_schemas: [{ type: 'secret-input', variable: 'api_key' }],
+    },
+  } as unknown as ModelProvider
+
+  const mockModel = {
+    model: 'gpt-4',
+    model_type: 'llm',
+    fetch_from: 'predefined-model',
+  } as unknown as ModelItem
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDeleteModel = null
+    mockCredentialData = {
+      load_balancing: {
+        enabled: true,
+        configs: [
+          { id: 'cfg-1', credential_id: 'cred-1', enabled: true, name: 'Default', credentials: { api_key: 'same-key' } },
+          { id: 'cfg-2', credential_id: 'cred-2', enabled: true, name: 'Backup', credentials: { api_key: 'backup-key' } },
+        ],
+      },
+      current_credential_id: 'cred-1',
+      available_credentials: [
+        { credential_id: 'cred-1', credential_name: 'Default' },
+        { credential_id: 'cred-2', credential_name: 'Backup' },
+      ],
+      current_credential_name: 'Default',
+    }
+    mockMutateAsync.mockResolvedValue({ result: 'success' })
+    mockRefetch.mockResolvedValue({ data: mockCredentialData })
+  })
+
+  it('should show loading area while draft config is not ready', () => {
+    mockCredentialData = undefined
+
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.predefinedModel}
+        model={mockModel}
+        open
+      />,
+    )
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should render predefined model content', () => {
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.predefinedModel}
+        model={mockModel}
+        open
+      />,
+    )
+
+    expect(screen.getByText(/modelProvider\.auth\.configLoadBalancing/)).toBeInTheDocument()
+    expect(screen.getByText(/modelProvider\.auth\.providerManaged$/)).toBeInTheDocument()
+    expect(screen.getByText(/operation\.save/)).toBeInTheDocument()
+  })
+
+  it('should render custom model actions and close when update has no credentials', async () => {
+    const onClose = vi.fn()
+    mockRefetch.mockResolvedValue({ data: { available_credentials: [] } })
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.customizableModel}
+        model={mockModel}
+        open
+        onClose={onClose}
+      />,
+    )
+
+    expect(screen.getByText(/modelProvider\.auth\.removeModel/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'switch credential' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'config add credential' }))
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should save load balancing config and close modal', async () => {
+    const onSave = vi.fn()
+    const onClose = vi.fn()
+
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.predefinedModel}
+        model={mockModel}
+        open
+        onSave={onSave}
+        onClose={onClose}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'config add credential' }))
+    fireEvent.click(screen.getByRole('button', { name: 'config rename credential' }))
+    fireEvent.click(screen.getByText(/operation\.save/))
+
+    await waitFor(() => {
+      expect(mockRefetch).toHaveBeenCalled()
+      expect(mockMutateAsync).toHaveBeenCalled()
+      const payload = mockMutateAsync.mock.calls[0][0] as { load_balancing: { configs: Array<{ credentials: { api_key: string } }> } }
+      expect(payload.load_balancing.configs[0].credentials.api_key).toBe('[__HIDDEN__]')
+      expect(mockNotify).toHaveBeenCalled()
+      expect(mockHandleRefreshModel).toHaveBeenCalled()
+      expect(onSave).toHaveBeenCalledWith('test-provider')
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should close modal when switching credential yields no available credentials', async () => {
+    const onClose = vi.fn()
+    mockRefetch.mockResolvedValue({ data: { available_credentials: [] } })
+
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.customizableModel}
+        model={mockModel}
+        open
+        onClose={onClose}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'switch credential' }))
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should confirm model deletion and close modal', async () => {
+    const onClose = vi.fn()
+    mockDeleteModel = { model: 'gpt-4' }
+
+    render(
+      <ModelLoadBalancingModal
+        provider={mockProvider}
+        configurateMethod={ConfigurationMethodEnum.customizableModel}
+        model={mockModel}
+        open
+        onClose={onClose}
+      />,
+    )
+
+    fireEvent.click(screen.getByText(/modelProvider\.auth\.removeModel/))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+    await waitFor(() => {
+      expect(mockOpenConfirmDelete).toHaveBeenCalled()
+      expect(mockHandleConfirmDelete).toHaveBeenCalled()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.spec.tsx
new file mode 100644
index 0000000000..3d4dc24a79
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.spec.tsx
@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import PrioritySelector from './priority-selector'
+
+describe('PrioritySelector', () => {
+  const mockOnSelect = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render selector button', () => {
+    render(<PrioritySelector value="system" onSelect={mockOnSelect} />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('should call onSelect when option clicked', () => {
+    render(<PrioritySelector value="system" onSelect={mockOnSelect} />)
+    fireEvent.click(screen.getByRole('button'))
+    const option = screen.getByText('common.modelProvider.apiKey')
+    fireEvent.click(option)
+    expect(mockOnSelect).toHaveBeenCalled()
+  })
+
+  it('should display priority use header in popover', () => {
+    render(<PrioritySelector value="custom" onSelect={mockOnSelect} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(screen.getByText('common.modelProvider.card.priorityUse')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.spec.tsx
new file mode 100644
index 0000000000..86e51c4a53
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.spec.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react'
+import PriorityUseTip from './priority-use-tip'
+
+describe('PriorityUseTip', () => {
+  it('should render tooltip with icon content', () => {
+    const { container } = render(<PriorityUseTip />)
+    expect(container.querySelector('[data-state]')).toBeInTheDocument()
+  })
+
+  it('should render the component without crashing', () => {
+    const { container } = render(<PriorityUseTip />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.spec.tsx
new file mode 100644
index 0000000000..1088114a59
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.spec.tsx
@@ -0,0 +1,138 @@
+import type { ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import QuotaPanel from './quota-panel'
+
+let mockWorkspace = {
+  trial_credits: 100,
+  trial_credits_used: 30,
+  next_credit_reset_date: '2024-12-31',
+}
+let mockTrialModels: string[] = ['langgenius/openai/openai']
+let mockPlugins = [{
+  plugin_id: 'langgenius/openai',
+  latest_package_identifier: 'openai@1.0.0',
+}]
+
+vi.mock('@/app/components/base/icons/src/public/llm', () => {
+  const Icon = ({ label }: { label: string }) => <span>{label}</span>
+  return {
+    OpenaiSmall: () => <Icon label="openai" />,
+    AnthropicShortLight: () => <Icon label="anthropic" />,
+    Gemini: () => <Icon label="gemini" />,
+    Grok: () => <Icon label="x" />,
+    Deepseek: () => <Icon label="deepseek" />,
+    Tongyi: () => <Icon label="tongyi" />,
+  }
+})
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    currentWorkspace: mockWorkspace,
+  }),
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { trial_models: string[] } }) => unknown) => selector({
+    systemFeatures: {
+      trial_models: mockTrialModels,
+    },
+  }),
+}))
+
+vi.mock('../hooks', () => ({
+  useMarketplaceAllPlugins: () => ({
+    plugins: mockPlugins,
+  }),
+}))
+
+vi.mock('@/hooks/use-timestamp', () => ({
+  default: () => ({
+    formatTime: () => '2024-12-31',
+  }),
+}))
+
+vi.mock('@/app/components/plugins/install-plugin/install-from-marketplace', () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <div>
+      <span>install modal</span>
+      <button type="button" onClick={onClose}>close install</button>
+    </div>
+  ),
+}))
+
+describe('QuotaPanel', () => {
+  const mockProviders = [
+    {
+      provider: 'langgenius/openai/openai',
+      preferred_provider_type: 'custom',
+      custom_configuration: { available_credentials: [{ id: '1' }] },
+    },
+  ] as unknown as ModelProvider[]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkspace = {
+      trial_credits: 100,
+      trial_credits_used: 30,
+      next_credit_reset_date: '2024-12-31',
+    }
+    mockTrialModels = ['langgenius/openai/openai']
+    mockPlugins = [{ plugin_id: 'langgenius/openai', latest_package_identifier: 'openai@1.0.0' }]
+  })
+
+  it('should render loading state', () => {
+    render(
+      <QuotaPanel
+        providers={mockProviders}
+        isLoading
+      />,
+    )
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('should show remaining credits and reset date', () => {
+    render(
+      <QuotaPanel
+        providers={mockProviders}
+      />,
+    )
+
+    expect(screen.getByText(/modelProvider\.quota/)).toBeInTheDocument()
+    expect(screen.getByText('70')).toBeInTheDocument()
+    expect(screen.getByText(/modelProvider\.resetDate/)).toBeInTheDocument()
+  })
+
+  it('should floor credits at zero when usage is higher than quota', () => {
+    mockWorkspace = {
+      trial_credits: 10,
+      trial_credits_used: 999,
+      next_credit_reset_date: '',
+    }
+
+    render(<QuotaPanel providers={mockProviders} />)
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+    expect(screen.queryByText(/modelProvider\.resetDate/)).not.toBeInTheDocument()
+  })
+
+  it('should open install modal when clicking an unsupported trial provider', () => {
+    render(<QuotaPanel providers={[]} />)
+
+    fireEvent.click(screen.getByText('openai'))
+
+    expect(screen.getByText('install modal')).toBeInTheDocument()
+  })
+
+  it('should close install modal when provider becomes installed', async () => {
+    const { rerender } = render(<QuotaPanel providers={[]} />)
+
+    fireEvent.click(screen.getByText('openai'))
+    expect(screen.getByText('install modal')).toBeInTheDocument()
+
+    rerender(<QuotaPanel providers={mockProviders} />)
+
+    await waitFor(() => {
+      expect(screen.queryByText('install modal')).not.toBeInTheDocument()
+    })
+  })
+})

From b8fbd7b0f6eb039510805c1cafa3a582f6528ee8 Mon Sep 17 00:00:00 2001
From: Poojan <poojan@infocusp.com>
Date: Tue, 24 Feb 2026 18:28:45 +0530
Subject: [PATCH 23/26] test: add unit tests for chat/embedded-chatbot
 components (#32361)

Co-authored-by: akashseth-ifp <akash.seth@infocusp.com>
---
 .../embedded-chatbot/chat-wrapper.spec.tsx    | 400 ++++++++++++++++++
 .../embedded-chatbot/header/index.spec.tsx    | 362 ++++++++++++++++
 .../chat/embedded-chatbot/header/index.tsx    |  33 +-
 .../base/chat/embedded-chatbot/index.spec.tsx | 240 +++++++++++
 .../inputs-form/content.spec.tsx              | 263 ++++++++++++
 .../embedded-chatbot/inputs-form/content.tsx  |  10 +-
 .../inputs-form/index.spec.tsx                | 121 ++++++
 .../embedded-chatbot/inputs-form/index.tsx    |  31 +-
 .../inputs-form/view-form-dropdown.spec.tsx   |  53 +++
 .../inputs-form/view-form-dropdown.tsx        |  32 +-
 web/eslint-suppressions.json                  |  18 -
 11 files changed, 1504 insertions(+), 59 deletions(-)
 create mode 100644 web/app/components/base/chat/embedded-chatbot/chat-wrapper.spec.tsx
 create mode 100644 web/app/components/base/chat/embedded-chatbot/header/index.spec.tsx
 create mode 100644 web/app/components/base/chat/embedded-chatbot/index.spec.tsx
 create mode 100644 web/app/components/base/chat/embedded-chatbot/inputs-form/content.spec.tsx
 create mode 100644 web/app/components/base/chat/embedded-chatbot/inputs-form/index.spec.tsx
 create mode 100644 web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.spec.tsx

diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.spec.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.spec.tsx
new file mode 100644
index 0000000000..d0b23627f0
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.spec.tsx
@@ -0,0 +1,400 @@
+import type { ChatConfig, ChatItem, ChatItemInTree } from '../types'
+import type { EmbeddedChatbotContextValue } from './context'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import { InputVarType } from '@/app/components/workflow/types'
+import {
+  AppSourceType,
+  fetchSuggestedQuestions,
+  submitHumanInputForm,
+} from '@/service/share'
+import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
+import { useChat } from '../chat/hooks'
+import ChatWrapper from './chat-wrapper'
+import { useEmbeddedChatbotContext } from './context'
+
+vi.mock('./context', () => ({
+  useEmbeddedChatbotContext: vi.fn(),
+}))
+
+vi.mock('../chat/hooks', () => ({
+  useChat: vi.fn(),
+}))
+
+vi.mock('./inputs-form', () => ({
+  __esModule: true,
+  default: () => <div>inputs form</div>,
+}))
+
+vi.mock('../chat', () => ({
+  __esModule: true,
+  default: ({
+    chatNode,
+    chatList,
+    inputDisabled,
+    questionIcon,
+    answerIcon,
+    onSend,
+    onRegenerate,
+    switchSibling,
+    onHumanInputFormSubmit,
+    onStopResponding,
+  }: {
+    chatNode: React.ReactNode
+    chatList: ChatItem[]
+    inputDisabled: boolean
+    questionIcon?: React.ReactNode
+    answerIcon?: React.ReactNode
+    onSend: (message: string) => void
+    onRegenerate: (chatItem: ChatItem, editedQuestion?: { message: string, files?: never[] }) => void
+    switchSibling: (siblingMessageId: string) => void
+    onHumanInputFormSubmit: (formToken: string, formData: Record<string, string>) => Promise<void>
+    onStopResponding: () => void
+  }) => (
+    <div>
+      <div>{chatNode}</div>
+      {answerIcon}
+      {chatList.map(item => <div key={item.id}>{item.content}</div>)}
+      <div>
+        chat count:
+        {' '}
+        {chatList.length}
+      </div>
+      {questionIcon}
+      <button onClick={() => onSend('hello world')}>send through chat</button>
+      <button onClick={() => onRegenerate({ id: 'answer-1', isAnswer: true, content: 'answer', parentMessageId: 'question-1' })}>regenerate answer</button>
+      <button onClick={() => switchSibling('sibling-2')}>switch sibling</button>
+      <button disabled={inputDisabled}>send message</button>
+      <button onClick={onStopResponding}>stop responding</button>
+      <button onClick={() => onHumanInputFormSubmit('form-token', { answer: 'ok' })}>submit human input</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/service/share', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/share')>()
+  return {
+    ...actual,
+    fetchSuggestedQuestions: vi.fn(),
+    getUrl: vi.fn(() => '/chat-messages'),
+    stopChatMessageResponding: vi.fn(),
+    submitHumanInputForm: vi.fn(),
+  }
+})
+
+vi.mock('@/service/workflow', () => ({
+  submitHumanInputForm: vi.fn(),
+}))
+
+const mockIsDify = vi.fn(() => false)
+vi.mock('./utils', () => ({
+  isDify: () => mockIsDify(),
+}))
+
+type UseChatReturn = ReturnType<typeof useChat>
+
+const createContextValue = (overrides: Partial<EmbeddedChatbotContextValue> = {}): EmbeddedChatbotContextValue => ({
+  appMeta: { tool_icons: {} },
+  appData: {
+    app_id: 'app-1',
+    can_replace_logo: true,
+    custom_config: {
+      remove_webapp_brand: false,
+      replace_webapp_logo: '',
+    },
+    enable_site: true,
+    end_user_id: 'user-1',
+    site: {
+      title: 'Embedded App',
+      icon_type: 'emoji',
+      icon: 'bot',
+      icon_background: '#000000',
+      icon_url: '',
+      use_icon_as_answer_icon: false,
+    },
+  },
+  appParams: {} as ChatConfig,
+  appChatListDataLoading: false,
+  currentConversationId: '',
+  currentConversationItem: undefined,
+  appPrevChatList: [],
+  pinnedConversationList: [],
+  conversationList: [],
+  newConversationInputs: {},
+  newConversationInputsRef: { current: {} },
+  handleNewConversationInputsChange: vi.fn(),
+  inputsForms: [],
+  handleNewConversation: vi.fn(),
+  handleStartChat: vi.fn(),
+  handleChangeConversation: vi.fn(),
+  handleNewConversationCompleted: vi.fn(),
+  chatShouldReloadKey: 'reload-key',
+  isMobile: false,
+  isInstalledApp: false,
+  appSourceType: AppSourceType.webApp,
+  allowResetChat: true,
+  appId: 'app-1',
+  disableFeedback: false,
+  handleFeedback: vi.fn(),
+  currentChatInstanceRef: { current: { handleStop: vi.fn() } },
+  themeBuilder: undefined,
+  clearChatList: false,
+  setClearChatList: vi.fn(),
+  isResponding: false,
+  setIsResponding: vi.fn(),
+  currentConversationInputs: {},
+  setCurrentConversationInputs: vi.fn(),
+  allInputsHidden: false,
+  initUserVariables: {},
+  ...overrides,
+})
+
+const createUseChatReturn = (overrides: Partial<UseChatReturn> = {}): UseChatReturn => ({
+  chatList: [],
+  setTargetMessageId: vi.fn() as UseChatReturn['setTargetMessageId'],
+  handleSend: vi.fn(),
+  handleResume: vi.fn(),
+  setIsResponding: vi.fn() as UseChatReturn['setIsResponding'],
+  handleStop: vi.fn(),
+  handleSwitchSibling: vi.fn(),
+  isResponding: false,
+  suggestedQuestions: [],
+  handleRestart: vi.fn(),
+  handleAnnotationEdited: vi.fn(),
+  handleAnnotationAdded: vi.fn(),
+  handleAnnotationRemoved: vi.fn(),
+  ...overrides,
+})
+
+describe('EmbeddedChatbot chat-wrapper', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue())
+    vi.mocked(useChat).mockReturnValue(createUseChatReturn())
+  })
+
+  describe('Welcome behavior', () => {
+    it('should show opening message and suggested question for a new chat', () => {
+      const handleSwitchSibling = vi.fn()
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        handleSwitchSibling,
+        chatList: [{ id: 'opening-1', isAnswer: true, isOpeningStatement: true, content: 'Welcome to the app', suggestedQuestions: ['How does it work?'] }],
+      }))
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        appPrevChatList: [
+          {
+            id: 'parent-node',
+            content: 'parent',
+            isAnswer: true,
+            children: [
+              {
+                id: 'paused-workflow',
+                content: 'paused',
+                isAnswer: true,
+                workflow_run_id: 'run-1',
+                humanInputFormDataList: [{ label: 'Need info' }],
+              } as unknown as ChatItem,
+            ],
+          } as unknown as ChatItem,
+        ],
+      }))
+
+      render(<ChatWrapper />)
+
+      expect(screen.getByText('How does it work?')).toBeInTheDocument()
+      expect(handleSwitchSibling).toHaveBeenCalledWith('paused-workflow', expect.objectContaining({
+        isPublicAPI: true,
+      }))
+      const resumeOptions = handleSwitchSibling.mock.calls[0]?.[1] as { onGetSuggestedQuestions: (responseItemId: string) => void }
+      resumeOptions.onGetSuggestedQuestions('resume-1')
+      expect(fetchSuggestedQuestions).toHaveBeenCalledWith('resume-1', AppSourceType.webApp, 'app-1')
+    })
+
+    it('should hide or show welcome content based on chat state', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        inputsForms: [{ variable: 'name', label: 'Name', required: true, type: InputVarType.textInput }],
+        currentConversationId: '',
+        allInputsHidden: false,
+      }))
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        chatList: [{ id: 'opening-1', isAnswer: true, isOpeningStatement: true, content: 'Welcome to the app' }],
+      }))
+
+      render(<ChatWrapper />)
+
+      expect(screen.queryByText('Welcome to the app')).not.toBeInTheDocument()
+      expect(screen.getByText('inputs form')).toBeInTheDocument()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        inputsForms: [],
+        currentConversationId: '',
+        allInputsHidden: true,
+      }))
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        chatList: [{ id: 'opening-2', isAnswer: true, isOpeningStatement: true, content: 'Fallback welcome' }],
+      }))
+
+      render(<ChatWrapper />)
+      expect(screen.queryByText('inputs form')).not.toBeInTheDocument()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        appData: null,
+      }))
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        isResponding: false,
+        chatList: [{ id: 'opening-3', isAnswer: true, isOpeningStatement: true, content: 'Should be hidden' }],
+      }))
+
+      render(<ChatWrapper />)
+      expect(screen.queryByText('Should be hidden')).not.toBeInTheDocument()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue())
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        isResponding: true,
+        chatList: [{ id: 'opening-4', isAnswer: true, isOpeningStatement: true, content: 'Should be hidden while responding' }],
+      }))
+      render(<ChatWrapper />)
+      expect(screen.queryByText('Should be hidden while responding')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Input and avatar behavior', () => {
+    it('should disable sending when required fields are incomplete or uploading', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        inputsForms: [{ variable: 'email', label: 'Email', required: true, type: InputVarType.textInput }],
+        newConversationInputsRef: { current: {} },
+      }))
+
+      render(<ChatWrapper />)
+
+      expect(screen.getByRole('button', { name: 'send message' })).toBeDisabled()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        inputsForms: [{ variable: 'file', label: 'File', required: true, type: InputVarType.multiFiles }],
+        newConversationInputsRef: {
+          current: {
+            file: [
+              {
+                transferMethod: 'local_file',
+              },
+            ],
+          },
+        },
+      }))
+
+      render(<ChatWrapper />)
+      expect(screen.getByRole('button', { name: 'send message' })).toBeDisabled()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        inputsForms: [{ variable: 'singleFile', label: 'Single file', required: true, type: InputVarType.singleFile }],
+        newConversationInputsRef: {
+          current: {
+            singleFile: {
+              transferMethod: 'local_file',
+            },
+          },
+        },
+      }))
+      render(<ChatWrapper />)
+      expect(screen.getByRole('button', { name: 'send message' })).toBeDisabled()
+    })
+
+    it('should show the user name when avatar data is provided', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        initUserVariables: {
+          avatar_url: 'https://example.com/avatar.png',
+          name: 'Alice',
+        },
+      }))
+
+      render(<ChatWrapper />)
+
+      expect(screen.getByRole('img', { name: 'Alice' })).toBeInTheDocument()
+    })
+  })
+
+  describe('Human input submit behavior', () => {
+    it('should submit via installed app service when the app is installed', async () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        isInstalledApp: true,
+      }))
+
+      render(<ChatWrapper />)
+      fireEvent.click(screen.getByRole('button', { name: 'submit human input' }))
+
+      await waitFor(() => {
+        expect(submitHumanInputFormService).toHaveBeenCalledWith('form-token', { answer: 'ok' })
+      })
+      expect(submitHumanInputForm).not.toHaveBeenCalled()
+    })
+
+    it('should submit via share service and support chat actions in web app mode', async () => {
+      const handleSend = vi.fn()
+      const handleSwitchSibling = vi.fn()
+      const handleStop = vi.fn()
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        handleSend,
+        handleSwitchSibling,
+        handleStop,
+        chatList: [
+          { id: 'opening-1', isAnswer: true, isOpeningStatement: true, content: 'Welcome' },
+          { id: 'question-1', isAnswer: false, content: 'Question' },
+          { id: 'answer-1', isAnswer: true, content: 'Answer', parentMessageId: 'question-1' },
+        ] as ChatItemInTree[],
+      }))
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        isInstalledApp: false,
+        appSourceType: AppSourceType.tryApp,
+        isMobile: true,
+        inputsForms: [{ variable: 'topic', label: 'Topic', required: false, type: InputVarType.textInput }],
+        currentConversationId: 'conversation-1',
+      }))
+      mockIsDify.mockReturnValue(true)
+
+      render(<ChatWrapper />)
+
+      expect(screen.getByText('chat count: 3')).toBeInTheDocument()
+      expect(screen.queryByText('inputs form')).not.toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'send through chat' }))
+      fireEvent.click(screen.getByRole('button', { name: 'regenerate answer' }))
+      fireEvent.click(screen.getByRole('button', { name: 'switch sibling' }))
+      fireEvent.click(screen.getByRole('button', { name: 'stop responding' }))
+      fireEvent.click(screen.getByRole('button', { name: 'submit human input' }))
+
+      await waitFor(() => {
+        expect(submitHumanInputForm).toHaveBeenCalledWith('form-token', { answer: 'ok' })
+      })
+      expect(handleSend).toHaveBeenCalledTimes(2)
+      const sendOptions = handleSend.mock.calls[0]?.[2] as { onGetSuggestedQuestions: (responseItemId: string) => void }
+      sendOptions.onGetSuggestedQuestions('resp-1')
+      expect(handleSwitchSibling).toHaveBeenCalledWith('sibling-2', expect.objectContaining({
+        isPublicAPI: false,
+      }))
+      const switchOptions = handleSwitchSibling.mock.calls.find(call => call[0] === 'sibling-2')?.[1] as { onGetSuggestedQuestions: (responseItemId: string) => void }
+      switchOptions.onGetSuggestedQuestions('resp-2')
+      expect(fetchSuggestedQuestions).toHaveBeenCalledWith('resp-1', AppSourceType.tryApp, 'app-1')
+      expect(fetchSuggestedQuestions).toHaveBeenCalledWith('resp-2', AppSourceType.tryApp, 'app-1')
+      expect(handleStop).toHaveBeenCalled()
+      expect(screen.queryByRole('img', { name: 'Alice' })).not.toBeInTheDocument()
+
+      cleanup()
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue(createContextValue({
+        isMobile: true,
+        currentConversationId: '',
+        inputsForms: [{ variable: 'topic', label: 'Topic', required: false, type: InputVarType.textInput }],
+      }))
+      vi.mocked(useChat).mockReturnValue(createUseChatReturn({
+        chatList: [{ id: 'opening-mobile', isAnswer: true, isOpeningStatement: true, content: 'Mobile welcome' }],
+      }))
+
+      render(<ChatWrapper />)
+      expect(screen.getByText('inputs form')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.spec.tsx
new file mode 100644
index 0000000000..31323c7196
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.spec.tsx
@@ -0,0 +1,362 @@
+/* eslint-disable next/no-img-element */
+import type { ImgHTMLAttributes } from 'react'
+import type { EmbeddedChatbotContextValue } from '../context'
+import type { AppData } from '@/models/share'
+import type { SystemFeatures } from '@/types/feature'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { InstallationScope, LicenseStatus } from '@/types/feature'
+import { useEmbeddedChatbotContext } from '../context'
+import Header from './index'
+
+vi.mock('../context', () => ({
+  useEmbeddedChatbotContext: vi.fn(),
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: vi.fn(),
+}))
+
+vi.mock('@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown', () => ({
+  default: () => <div data-testid="view-form-dropdown" />,
+}))
+
+// Mock next/image to render a normal img tag for testing
+vi.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) => {
+    const { unoptimized: _, ...rest } = props
+    return <img {...rest} />
+  },
+}))
+
+type GlobalPublicStoreMock = {
+  systemFeatures: SystemFeatures
+  setSystemFeatures: (systemFeatures: SystemFeatures) => void
+}
+
+describe('EmbeddedChatbot Header', () => {
+  const defaultAppData: AppData = {
+    app_id: 'test-app-id',
+    can_replace_logo: true,
+    custom_config: {
+      remove_webapp_brand: false,
+      replace_webapp_logo: '',
+    },
+    enable_site: true,
+    end_user_id: 'test-user-id',
+    site: {
+      title: 'Test Site',
+    },
+  }
+
+  const defaultContext: Partial<EmbeddedChatbotContextValue> = {
+    appData: defaultAppData,
+    currentConversationId: 'test-conv-id',
+    inputsForms: [],
+    allInputsHidden: false,
+  }
+
+  const defaultSystemFeatures: SystemFeatures = {
+    trial_models: [],
+    plugin_installation_permission: {
+      plugin_installation_scope: InstallationScope.ALL,
+      restrict_to_marketplace_only: false,
+    },
+    sso_enforced_for_signin: false,
+    sso_enforced_for_signin_protocol: '',
+    sso_enforced_for_web: false,
+    sso_enforced_for_web_protocol: '',
+    enable_marketplace: false,
+    enable_change_email: false,
+    enable_email_code_login: false,
+    enable_email_password_login: false,
+    enable_social_oauth_login: false,
+    is_allow_create_workspace: false,
+    is_allow_register: false,
+    is_email_setup: false,
+    license: {
+      status: LicenseStatus.NONE,
+      expired_at: '',
+    },
+    branding: {
+      enabled: true,
+      workspace_logo: '',
+      login_page_logo: '',
+      favicon: '',
+      application_title: '',
+    },
+    webapp_auth: {
+      enabled: false,
+      allow_sso: false,
+      sso_config: { protocol: '' },
+      allow_email_code_login: false,
+      allow_email_password_login: false,
+    },
+    enable_trial_app: false,
+    enable_explore_banner: false,
+  }
+
+  const setupIframe = () => {
+    const mockPostMessage = vi.fn()
+    const mockTop = { postMessage: mockPostMessage }
+    Object.defineProperty(window, 'self', { value: {}, configurable: true })
+    Object.defineProperty(window, 'top', { value: mockTop, configurable: true })
+    Object.defineProperty(window, 'parent', { value: mockTop, configurable: true })
+    return mockPostMessage
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(defaultContext as EmbeddedChatbotContextValue)
+    vi.mocked(useGlobalPublicStore).mockImplementation((selector: (s: GlobalPublicStoreMock) => unknown) => selector({
+      systemFeatures: defaultSystemFeatures,
+      setSystemFeatures: vi.fn(),
+    }))
+
+    Object.defineProperty(window, 'self', { value: window, configurable: true })
+    Object.defineProperty(window, 'top', { value: window, configurable: true })
+  })
+
+  describe('Desktop Rendering', () => {
+    it('should render desktop header with branding by default', async () => {
+      render(<Header title="Test Chatbot" />)
+
+      expect(screen.getByTestId('webapp-brand')).toBeInTheDocument()
+      expect(screen.getByText('share.chat.poweredBy')).toBeInTheDocument()
+    })
+
+    it('should render custom logo when provided in appData', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+        ...defaultContext,
+        appData: {
+          ...defaultAppData,
+          custom_config: {
+            ...defaultAppData.custom_config,
+            replace_webapp_logo: 'https://example.com/logo.png',
+          },
+        },
+      } as EmbeddedChatbotContextValue)
+
+      render(<Header title="Test Chatbot" />)
+
+      const img = screen.getByAltText('logo')
+      expect(img).toHaveAttribute('src', 'https://example.com/logo.png')
+    })
+
+    it('should render workspace logo when branding is enabled and logo exists', () => {
+      vi.mocked(useGlobalPublicStore).mockImplementation((selector: (s: GlobalPublicStoreMock) => unknown) => selector({
+        systemFeatures: {
+          ...defaultSystemFeatures,
+          branding: {
+            ...defaultSystemFeatures.branding,
+            workspace_logo: 'https://example.com/workspace.png',
+          },
+        },
+        setSystemFeatures: vi.fn(),
+      }))
+
+      render(<Header title="Test Chatbot" />)
+
+      const img = screen.getByAltText('logo')
+      expect(img).toHaveAttribute('src', 'https://example.com/workspace.png')
+    })
+
+    it('should render Dify logo by default when no branding or custom logo is provided', () => {
+      vi.mocked(useGlobalPublicStore).mockImplementation((selector: (s: GlobalPublicStoreMock) => unknown) => selector({
+        systemFeatures: {
+          ...defaultSystemFeatures,
+          branding: {
+            ...defaultSystemFeatures.branding,
+            enabled: false,
+          },
+        },
+        setSystemFeatures: vi.fn(),
+      }))
+      render(<Header title="Test Chatbot" />)
+      expect(screen.getByAltText('Dify logo')).toBeInTheDocument()
+    })
+
+    it('should NOT render branding when remove_webapp_brand is true', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+        ...defaultContext,
+        appData: {
+          ...defaultAppData,
+          custom_config: {
+            ...defaultAppData.custom_config,
+            remove_webapp_brand: true,
+          },
+        },
+      } as EmbeddedChatbotContextValue)
+
+      render(<Header title="Test Chatbot" />)
+
+      expect(screen.queryByTestId('webapp-brand')).not.toBeInTheDocument()
+    })
+
+    it('should render reset button when allowResetChat is true and conversation exists', () => {
+      render(<Header title="Test Chatbot" allowResetChat={true} />)
+
+      expect(screen.getByTestId('reset-chat-button')).toBeInTheDocument()
+    })
+
+    it('should call onCreateNewChat when reset button is clicked', async () => {
+      const user = userEvent.setup()
+      const onCreateNewChat = vi.fn()
+      render(<Header title="Test Chatbot" allowResetChat={true} onCreateNewChat={onCreateNewChat} />)
+
+      await user.click(screen.getByTestId('reset-chat-button'))
+      expect(onCreateNewChat).toHaveBeenCalled()
+    })
+
+    it('should render ViewFormDropdown when conditions are met', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+        ...defaultContext,
+        inputsForms: [{ id: '1' }],
+        allInputsHidden: false,
+      } as EmbeddedChatbotContextValue)
+
+      render(<Header title="Test Chatbot" />)
+
+      expect(screen.getByTestId('view-form-dropdown')).toBeInTheDocument()
+    })
+
+    it('should NOT render ViewFormDropdown when inputs are hidden', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+        ...defaultContext,
+        inputsForms: [{ id: '1' }],
+        allInputsHidden: true,
+      } as EmbeddedChatbotContextValue)
+
+      render(<Header title="Test Chatbot" />)
+
+      expect(screen.queryByTestId('view-form-dropdown')).not.toBeInTheDocument()
+    })
+
+    it('should NOT render ViewFormDropdown when currentConversationId is missing', () => {
+      vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+        ...defaultContext,
+        currentConversationId: '',
+        inputsForms: [{ id: '1' }],
+      } as EmbeddedChatbotContextValue)
+
+      render(<Header title="Test Chatbot" />)
+
+      expect(screen.queryByTestId('view-form-dropdown')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Mobile Rendering', () => {
+    it('should render mobile header with title', () => {
+      render(<Header title="Mobile Chatbot" isMobile />)
+
+      expect(screen.getByText('Mobile Chatbot')).toBeInTheDocument()
+    })
+
+    it('should render customer icon in mobile header', () => {
+      render(<Header title="Mobile Chatbot" isMobile customerIcon={<div data-testid="custom-icon" />} />)
+
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+
+    it('should render mobile reset button when allowed', () => {
+      render(<Header title="Mobile Chatbot" isMobile allowResetChat />)
+
+      expect(screen.getByTestId('mobile-reset-chat-button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Iframe Communication', () => {
+    it('should send dify-chatbot-iframe-ready on mount', () => {
+      const mockPostMessage = setupIframe()
+      render(<Header title="Iframe" />)
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        { type: 'dify-chatbot-iframe-ready' },
+        '*',
+      )
+    })
+
+    it('should update expand button visibility and handle click', async () => {
+      const user = userEvent.setup()
+      const mockPostMessage = setupIframe()
+      render(<Header title="Iframe" />)
+
+      window.dispatchEvent(new MessageEvent('message', {
+        origin: 'https://parent.com',
+        data: {
+          type: 'dify-chatbot-config',
+          payload: { isToggledByButton: true, isDraggable: false },
+        },
+      }))
+
+      const expandBtn = await screen.findByTestId('expand-button')
+      expect(expandBtn).toBeInTheDocument()
+
+      await user.click(expandBtn)
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        { type: 'dify-chatbot-expand-change' },
+        'https://parent.com',
+      )
+      expect(expandBtn.querySelector('.i-ri-collapse-diagonal-2-line')).toBeInTheDocument()
+    })
+
+    it('should NOT show expand button if isDraggable is true', async () => {
+      setupIframe()
+      render(<Header title="Iframe" />)
+
+      window.dispatchEvent(new MessageEvent('message', {
+        origin: 'https://parent.com',
+        data: {
+          type: 'dify-chatbot-config',
+          payload: { isToggledByButton: true, isDraggable: true },
+        },
+      }))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('expand-button')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should ignore messages from different origins after security lock', async () => {
+      setupIframe()
+      render(<Header title="Iframe" />)
+
+      window.dispatchEvent(new MessageEvent('message', {
+        origin: 'https://secure.com',
+        data: { type: 'dify-chatbot-config', payload: { isToggledByButton: true, isDraggable: false } },
+      }))
+
+      await screen.findByTestId('expand-button')
+
+      window.dispatchEvent(new MessageEvent('message', {
+        origin: 'https://malicious.com',
+        data: { type: 'dify-chatbot-config', payload: { isToggledByButton: false, isDraggable: false } },
+      }))
+
+      expect(screen.getByTestId('expand-button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle document.referrer for targetOrigin', () => {
+      const mockPostMessage = setupIframe()
+      Object.defineProperty(document, 'referrer', { value: 'https://referrer.com', configurable: true })
+      render(<Header title="Referrer" />)
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.anything(),
+        'https://referrer.com',
+      )
+    })
+
+    it('should NOT add message listener if not in iframe', () => {
+      const addSpy = vi.spyOn(window, 'addEventListener')
+      render(<Header title="Direct" />)
+      expect(addSpy).not.toHaveBeenCalledWith('message', expect.any(Function))
+    })
+  })
+})
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 fe7afc9e22..9cca48b42a 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import type { Theme } from '../theme/theme-context'
-import { RiCollapseDiagonal2Line, RiExpandDiagonal2Line, RiResetLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -89,11 +88,13 @@ const Header: FC<IHeaderProps> = ({
           {/* powered by */}
           <div className="shrink-0">
             {!appData?.custom_config?.remove_webapp_brand && (
-              <div className={cn(
-                'flex shrink-0 items-center gap-1.5 px-2',
-              )}
+              <div
+                className={cn(
+                  'flex shrink-0 items-center gap-1.5 px-2',
+                )}
+                data-testid="webapp-brand"
               >
-                <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+                <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
                 {
                   systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                     ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
@@ -112,11 +113,11 @@ const Header: FC<IHeaderProps> = ({
               <Tooltip
                 popupContent={expanded ? t('chat.collapse', { ns: 'share' }) : t('chat.expand', { ns: 'share' })}
               >
-                <ActionButton size="l" onClick={handleToggleExpand}>
+                <ActionButton size="l" onClick={handleToggleExpand} data-testid="expand-button">
                   {
                     expanded
-                      ? <RiCollapseDiagonal2Line className="h-[18px] w-[18px]" />
-                      : <RiExpandDiagonal2Line className="h-[18px] w-[18px]" />
+                      ? <div className="i-ri-collapse-diagonal-2-line h-[18px] w-[18px]" />
+                      : <div className="i-ri-expand-diagonal-2-line h-[18px] w-[18px]" />
                   }
                 </ActionButton>
               </Tooltip>
@@ -126,8 +127,8 @@ const Header: FC<IHeaderProps> = ({
             <Tooltip
               popupContent={t('chat.resetChat', { ns: 'share' })}
             >
-              <ActionButton size="l" onClick={onCreateNewChat}>
-                <RiResetLeftLine className="h-[18px] w-[18px]" />
+              <ActionButton size="l" onClick={onCreateNewChat} data-testid="reset-chat-button">
+                <div className="i-ri-reset-left-line h-[18px] w-[18px]" />
               </ActionButton>
             </Tooltip>
           )}
@@ -147,7 +148,7 @@ const Header: FC<IHeaderProps> = ({
       <div className="flex grow items-center space-x-3">
         {customerIcon}
         <div
-          className="system-md-semibold truncate"
+          className="truncate system-md-semibold"
           style={CssTransform(theme?.colorFontOnHeaderStyle ?? '')}
         >
           {title}
@@ -159,11 +160,11 @@ const Header: FC<IHeaderProps> = ({
             <Tooltip
               popupContent={expanded ? t('chat.collapse', { ns: 'share' }) : t('chat.expand', { ns: 'share' })}
             >
-              <ActionButton size="l" onClick={handleToggleExpand}>
+              <ActionButton size="l" onClick={handleToggleExpand} data-testid="mobile-expand-button">
                 {
                   expanded
-                    ? <RiCollapseDiagonal2Line className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
-                    : <RiExpandDiagonal2Line className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+                    ? <div className={cn('i-ri-collapse-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+                    : <div className={cn('i-ri-expand-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
                 }
               </ActionButton>
             </Tooltip>
@@ -173,8 +174,8 @@ const Header: FC<IHeaderProps> = ({
           <Tooltip
             popupContent={t('chat.resetChat', { ns: 'share' })}
           >
-            <ActionButton size="l" onClick={onCreateNewChat}>
-              <RiResetLeftLine className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+            <ActionButton size="l" onClick={onCreateNewChat} data-testid="mobile-reset-chat-button">
+              <div className={cn('i-ri-reset-left-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
             </ActionButton>
           </Tooltip>
         )}
diff --git a/web/app/components/base/chat/embedded-chatbot/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/index.spec.tsx
new file mode 100644
index 0000000000..48fe16f7b3
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/index.spec.tsx
@@ -0,0 +1,240 @@
+import type { RefObject } from 'react'
+import type { ChatConfig } from '../types'
+import type { AppData, AppMeta, ConversationItem } from '@/models/share'
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { defaultSystemFeatures } from '@/types/feature'
+import { useEmbeddedChatbot } from './hooks'
+import EmbeddedChatbot from './index'
+
+vi.mock('./hooks', () => ({
+  useEmbeddedChatbot: vi.fn(),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: vi.fn(),
+  MediaType: {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    pc: 'pc',
+  },
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: vi.fn(),
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: vi.fn(),
+}))
+
+vi.mock('./chat-wrapper', () => ({
+  __esModule: true,
+  default: () => <div>chat area</div>,
+}))
+
+vi.mock('./header', () => ({
+  __esModule: true,
+  default: () => <div>chat header</div>,
+}))
+
+vi.mock('./theme/theme-context', () => ({
+  useThemeContext: vi.fn(() => ({
+    buildTheme: vi.fn(),
+    theme: {
+      backgroundHeaderColorStyle: '',
+    },
+  })),
+}))
+
+const mockIsDify = vi.fn(() => false)
+vi.mock('./utils', () => ({
+  isDify: () => mockIsDify(),
+}))
+
+type EmbeddedChatbotHookReturn = ReturnType<typeof useEmbeddedChatbot>
+
+const createHookReturn = (overrides: Partial<EmbeddedChatbotHookReturn> = {}): EmbeddedChatbotHookReturn => {
+  const appData: AppData = {
+    app_id: 'app-1',
+    can_replace_logo: true,
+    custom_config: {
+      remove_webapp_brand: false,
+      replace_webapp_logo: '',
+    },
+    enable_site: true,
+    end_user_id: 'user-1',
+    site: {
+      title: 'Embedded App',
+      chat_color_theme: 'blue',
+      chat_color_theme_inverted: false,
+    },
+  }
+
+  const base: EmbeddedChatbotHookReturn = {
+    appSourceType: 'webApp' as EmbeddedChatbotHookReturn['appSourceType'],
+    isInstalledApp: false,
+    appId: 'app-1',
+    currentConversationId: '',
+    currentConversationItem: undefined,
+    removeConversationIdInfo: vi.fn(),
+    handleConversationIdInfoChange: vi.fn(),
+    appData,
+    appParams: {} as ChatConfig,
+    appMeta: { tool_icons: {} } as AppMeta,
+    appPinnedConversationData: { data: [], has_more: false, limit: 20 },
+    appConversationData: { data: [], has_more: false, limit: 20 },
+    appConversationDataLoading: false,
+    appChatListData: { data: [], has_more: false, limit: 20 },
+    appChatListDataLoading: false,
+    appPrevChatList: [],
+    pinnedConversationList: [] as ConversationItem[],
+    conversationList: [] as ConversationItem[],
+    setShowNewConversationItemInList: vi.fn(),
+    newConversationInputs: {},
+    newConversationInputsRef: { current: {} } as unknown as RefObject<Record<string, unknown>>,
+    handleNewConversationInputsChange: vi.fn(),
+    inputsForms: [],
+    handleNewConversation: vi.fn(),
+    handleStartChat: vi.fn(),
+    handleChangeConversation: vi.fn(),
+    handleNewConversationCompleted: vi.fn(),
+    newConversationId: '',
+    chatShouldReloadKey: 'reload-key',
+    allowResetChat: true,
+    handleFeedback: vi.fn(),
+    currentChatInstanceRef: { current: { handleStop: vi.fn() } },
+    clearChatList: false,
+    setClearChatList: vi.fn(),
+    isResponding: false,
+    setIsResponding: vi.fn(),
+    currentConversationInputs: {},
+    setCurrentConversationInputs: vi.fn(),
+    allInputsHidden: false,
+    initUserVariables: {},
+  }
+
+  return {
+    ...base,
+    ...overrides,
+  }
+}
+
+describe('EmbeddedChatbot index', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
+    vi.mocked(useEmbeddedChatbot).mockReturnValue(createHookReturn())
+    vi.mocked(useGlobalPublicStore).mockImplementation(selector => selector({
+      systemFeatures: {
+        ...defaultSystemFeatures,
+        branding: {
+          ...defaultSystemFeatures.branding,
+          enabled: true,
+          workspace_logo: '',
+        },
+      },
+      setSystemFeatures: vi.fn(),
+    }))
+  })
+
+  describe('Loading and chat content', () => {
+    it('should show loading state before chat content', () => {
+      vi.mocked(useEmbeddedChatbot).mockReturnValue(createHookReturn({ appChatListDataLoading: true }))
+
+      render(<EmbeddedChatbot />)
+
+      expect(screen.getByRole('status')).toBeInTheDocument()
+      expect(screen.queryByText('chat area')).not.toBeInTheDocument()
+    })
+
+    it('should render chat content when loading finishes', () => {
+      render(<EmbeddedChatbot />)
+
+      expect(screen.getByText('chat area')).toBeInTheDocument()
+    })
+  })
+
+  describe('Powered by branding', () => {
+    it('should show workspace logo on mobile when branding is enabled', () => {
+      vi.mocked(useGlobalPublicStore).mockImplementation(selector => selector({
+        systemFeatures: {
+          ...defaultSystemFeatures,
+          branding: {
+            ...defaultSystemFeatures.branding,
+            enabled: true,
+            workspace_logo: 'https://example.com/workspace-logo.png',
+          },
+        },
+        setSystemFeatures: vi.fn(),
+      }))
+
+      render(<EmbeddedChatbot />)
+
+      expect(screen.getByText('share.chat.poweredBy')).toBeInTheDocument()
+      expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/workspace-logo.png')
+    })
+
+    it('should show custom logo when workspace branding logo is unavailable', () => {
+      vi.mocked(useEmbeddedChatbot).mockReturnValue(createHookReturn({
+        appData: {
+          app_id: 'app-1',
+          can_replace_logo: true,
+          custom_config: {
+            remove_webapp_brand: false,
+            replace_webapp_logo: 'https://example.com/custom-logo.png',
+          },
+          enable_site: true,
+          end_user_id: 'user-1',
+          site: {
+            title: 'Embedded App',
+            chat_color_theme: 'blue',
+            chat_color_theme_inverted: false,
+          },
+        },
+      }))
+
+      render(<EmbeddedChatbot />)
+
+      expect(screen.getByText('share.chat.poweredBy')).toBeInTheDocument()
+      expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/custom-logo.png')
+    })
+
+    it('should hide powered by section when branding is removed', () => {
+      vi.mocked(useEmbeddedChatbot).mockReturnValue(createHookReturn({
+        appData: {
+          app_id: 'app-1',
+          can_replace_logo: true,
+          custom_config: {
+            remove_webapp_brand: true,
+            replace_webapp_logo: '',
+          },
+          enable_site: true,
+          end_user_id: 'user-1',
+          site: {
+            title: 'Embedded App',
+            chat_color_theme: 'blue',
+            chat_color_theme_inverted: false,
+          },
+        },
+      }))
+
+      render(<EmbeddedChatbot />)
+
+      expect(screen.queryByText('share.chat.poweredBy')).not.toBeInTheDocument()
+    })
+
+    it('should not show powered by section on desktop', () => {
+      vi.mocked(useBreakpoints).mockReturnValue(MediaType.pc)
+      vi.mocked(useEmbeddedChatbot).mockReturnValue(createHookReturn({ appData: null }))
+      mockIsDify.mockReturnValue(true)
+
+      render(<EmbeddedChatbot />)
+
+      expect(screen.queryByText('share.chat.poweredBy')).not.toBeInTheDocument()
+      expect(screen.getByText('chat header')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.spec.tsx
new file mode 100644
index 0000000000..de7f810fcb
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.spec.tsx
@@ -0,0 +1,263 @@
+/* eslint-disable ts/no-explicit-any */
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InputVarType } from '@/app/components/workflow/types'
+import { useEmbeddedChatbotContext } from '../context'
+import InputsFormContent from './content'
+
+vi.mock('../context', () => ({
+  useEmbeddedChatbotContext: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ token: 'test-token' }),
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({ notify: vi.fn() }),
+}))
+
+// Mock CodeEditor to trigger onChange easily
+vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
+  default: ({ value, onChange, placeholder }: { value: string, onChange: (v: string) => void, placeholder: string | React.ReactNode }) => (
+    <textarea
+      data-testid="mock-code-editor"
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      placeholder={typeof placeholder === 'string' ? placeholder : 'json-placeholder'}
+    />
+  ),
+}))
+
+// Mock FileUploaderInAttachmentWrapper to trigger onChange easily
+vi.mock('@/app/components/base/file-uploader', () => ({
+
+  FileUploaderInAttachmentWrapper: ({ value, onChange }: { value: any[], onChange: (v: any[]) => void }) => (
+    <div data-testid="mock-file-uploader">
+      <button onClick={() => onChange([new File([''], 'test.png', { type: 'image/png' })])}>Upload</button>
+      <span>{value.length > 0 ? value[0].name : 'no file'}</span>
+    </div>
+  ),
+}))
+
+const mockContextValue = {
+  appParams: {
+    system_parameters: {
+      file_size_limit: 10,
+    },
+  },
+  inputsForms: [
+    {
+      variable: 'text_var',
+      label: 'Text Label',
+      type: InputVarType.textInput,
+      required: true,
+    },
+    {
+      variable: 'num_var',
+      label: 'Number Label',
+      type: InputVarType.number,
+      required: false,
+    },
+    {
+      variable: 'para_var',
+      label: 'Paragraph Label',
+      type: InputVarType.paragraph,
+      required: true,
+    },
+    {
+      variable: 'bool_var',
+      label: 'Bool Label',
+      type: InputVarType.checkbox,
+      required: true,
+    },
+    {
+      variable: 'select_var',
+      label: 'Select Label',
+      type: InputVarType.select,
+      options: ['Option 1', 'Option 2'],
+      required: true,
+    },
+    {
+      variable: 'file_var',
+      label: 'File Label',
+      type: InputVarType.singleFile,
+      required: true,
+      allowed_file_types: ['image'],
+      allowed_file_extensions: ['.png'],
+      allowed_file_upload_methods: ['local_upload'],
+    },
+    {
+      variable: 'multi_file_var',
+      label: 'Multi File Label',
+      type: InputVarType.multiFiles,
+      required: true,
+      max_length: 5,
+      allowed_file_types: ['image'],
+      allowed_file_extensions: ['.png'],
+      allowed_file_upload_methods: ['local_upload'],
+    },
+    {
+      variable: 'json_var',
+      label: 'JSON Label',
+      type: InputVarType.jsonObject,
+      required: true,
+      json_schema: '{ "type": "object" }',
+    },
+    {
+      variable: 'hidden_var',
+      label: 'Hidden Label',
+      type: InputVarType.textInput,
+      hide: true,
+    },
+  ],
+  currentConversationId: null,
+  currentConversationInputs: {},
+  setCurrentConversationInputs: vi.fn(),
+  newConversationInputs: {},
+  newConversationInputsRef: { current: {} },
+  handleNewConversationInputsChange: vi.fn(),
+}
+
+describe('InputsFormContent', () => {
+  const user = userEvent.setup()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(mockContextValue as unknown as any)
+  })
+
+  it('should render visible input forms', () => {
+    render(<InputsFormContent />)
+
+    expect(screen.getAllByText(/Text Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/Number Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/Paragraph Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/Bool Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/Select Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/File Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/Multi File Label/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/JSON Label/i).length).toBeGreaterThan(0)
+    expect(screen.queryByText('Hidden Label')).not.toBeInTheDocument()
+  })
+
+  it('should render optional label for non-required fields', () => {
+    render(<InputsFormContent />)
+    expect(screen.queryAllByText(/panel.optional/i).length).toBeGreaterThan(0)
+  })
+
+  it('should handle text input changes', async () => {
+    render(<InputsFormContent />)
+    const inputs = screen.getAllByPlaceholderText('Text Label')
+    await user.type(inputs[0], 'hello')
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle number input changes', async () => {
+    render(<InputsFormContent />)
+    const inputs = screen.getAllByPlaceholderText('Number Label')
+    await user.type(inputs[0], '123')
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle paragraph input changes', async () => {
+    render(<InputsFormContent />)
+    const inputs = screen.getAllByPlaceholderText('Paragraph Label')
+    await user.type(inputs[0], 'long text')
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle bool input changes', async () => {
+    render(<InputsFormContent />)
+    const checkbox = screen.getByTestId(/checkbox-/i)
+    await user.click(checkbox)
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle select input changes', async () => {
+    render(<InputsFormContent />)
+    const selectTrigger = screen.getAllByText(/Select Label/i).find(el => el.tagName === 'SPAN')
+    if (!selectTrigger)
+      throw new Error('Select trigger not found')
+
+    await user.click(selectTrigger)
+    const option = screen.getByText('Option 1')
+    await user.click(option)
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle single file upload change', async () => {
+    render(<InputsFormContent />)
+    const uploadButtons = screen.getAllByText('Upload')
+    await user.click(uploadButtons[0]) // First one is single file
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle multi files upload change', async () => {
+    render(<InputsFormContent />)
+    const uploadButtons = screen.getAllByText('Upload')
+    await user.click(uploadButtons[1]) // Second one is multi files
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should handle JSON object change', async () => {
+    render(<InputsFormContent />)
+    const jsonEditor = screen.getByTestId('mock-code-editor')
+    fireEvent.change(jsonEditor, { target: { value: '{ "a": 1 }' } })
+
+    expect(mockContextValue.setCurrentConversationInputs).toHaveBeenCalled()
+    expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
+  })
+
+  it('should show tip when showTip is true', () => {
+    render(<InputsFormContent showTip />)
+    expect(screen.getByText(/chat.chatFormTip/i)).toBeInTheDocument()
+  })
+
+  it('should set initial values from context', () => {
+    const contextWithValues = {
+      ...mockContextValue,
+      newConversationInputs: {
+        text_var: 'initial value',
+      },
+    }
+
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(contextWithValues as unknown as any)
+
+    render(<InputsFormContent />)
+    expect(screen.getByDisplayValue('initial value')).toBeInTheDocument()
+  })
+
+  it('should use currentConversationInputs when currentConversationId exists', () => {
+    const contextWithConv = {
+      ...mockContextValue,
+      currentConversationId: 'conv-id',
+      currentConversationInputs: {
+        text_var: 'conv value',
+      },
+    }
+
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(contextWithConv as unknown as any)
+
+    render(<InputsFormContent />)
+    expect(screen.getByDisplayValue('conv value')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index 4f291a5ac6..de55c15a5b 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -45,12 +45,12 @@ const InputsFormContent = ({ showTip }: Props) => {
   return (
     <div className="space-y-4">
       {visibleInputsForms.map(form => (
-        <div key={form.variable} className="space-y-1">
+        <div key={form.variable} className="space-y-1" data-testid={`inputs-form-item-${form.variable}`}>
           {form.type !== InputVarType.checkbox && (
             <div className="flex h-6 items-center gap-1">
-              <div className="system-md-semibold text-text-secondary">{form.label}</div>
+              <div className="text-text-secondary system-md-semibold">{form.label}</div>
               {!form.required && (
-                <div className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</div>
+                <div className="text-text-tertiary system-xs-regular">{t('panel.optional', { ns: 'workflow' })}</div>
               )}
             </div>
           )}
@@ -125,7 +125,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={v => handleFormChange(form.variable, v)}
               noWrapper
-              className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
+              className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={
                 <div className="whitespace-pre">{form.json_schema}</div>
               }
@@ -134,7 +134,7 @@ const InputsFormContent = ({ showTip }: Props) => {
         </div>
       ))}
       {showTip && (
-        <div className="system-xs-regular text-text-tertiary">{t('chat.chatFormTip', { ns: 'share' })}</div>
+        <div className="text-text-tertiary system-xs-regular">{t('chat.chatFormTip', { ns: 'share' })}</div>
       )}
     </div>
   )
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.spec.tsx
new file mode 100644
index 0000000000..7568f606df
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.spec.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable ts/no-explicit-any */
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AppSourceType } from '@/service/share'
+import { useEmbeddedChatbotContext } from '../context'
+import InputsFormNode from './index'
+
+vi.mock('../context', () => ({
+  useEmbeddedChatbotContext: vi.fn(),
+}))
+
+// Mock InputsFormContent to avoid complex integration in this test
+vi.mock('./content', () => ({
+  default: () => <div data-testid="mock-inputs-form-content" />,
+}))
+
+const mockContextValue = {
+  appSourceType: AppSourceType.webApp,
+  isMobile: false,
+  currentConversationId: null,
+  themeBuilder: null,
+  handleStartChat: vi.fn(),
+  allInputsHidden: false,
+  inputsForms: [{ variable: 'test' }],
+}
+
+describe('InputsFormNode', () => {
+  const user = userEvent.setup()
+  const setCollapsed = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue(mockContextValue as unknown as any)
+  })
+
+  it('should return null if allInputsHidden is true', () => {
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      allInputsHidden: true,
+    } as unknown as any)
+    const { container } = render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should return null if inputsForms is empty', () => {
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      inputsForms: [],
+    } as unknown as any)
+    const { container } = render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render expanded state correctly', () => {
+    render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    expect(screen.getByText(/chat.chatSettingsTitle/i)).toBeInTheDocument()
+    expect(screen.getByTestId('mock-inputs-form-content')).toBeInTheDocument()
+    expect(screen.getByTestId('inputs-form-start-chat-button')).toBeInTheDocument()
+  })
+
+  it('should render collapsed state correctly', () => {
+    render(<InputsFormNode collapsed={true} setCollapsed={setCollapsed} />)
+    expect(screen.getByText(/chat.chatSettingsTitle/i)).toBeInTheDocument()
+    expect(screen.queryByTestId('mock-inputs-form-content')).not.toBeInTheDocument()
+    expect(screen.getByTestId('inputs-form-edit-button')).toBeInTheDocument()
+  })
+
+  it('should handle edit button click', async () => {
+    render(<InputsFormNode collapsed={true} setCollapsed={setCollapsed} />)
+    await user.click(screen.getByTestId('inputs-form-edit-button'))
+    expect(setCollapsed).toHaveBeenCalledWith(false)
+  })
+
+  it('should handle close button click', async () => {
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      currentConversationId: 'conv-123',
+    } as unknown as any)
+    render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    await user.click(screen.getByTestId('inputs-form-close-button'))
+    expect(setCollapsed).toHaveBeenCalledWith(true)
+  })
+
+  it('should handle start chat button click', async () => {
+    const handleStartChat = vi.fn(cb => cb())
+
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      handleStartChat,
+    } as unknown as any)
+    render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    await user.click(screen.getByTestId('inputs-form-start-chat-button'))
+    expect(handleStartChat).toHaveBeenCalled()
+    expect(setCollapsed).toHaveBeenCalledWith(true)
+  })
+
+  it('should apply theme primary color to start chat button', () => {
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      themeBuilder: {
+        theme: {
+          primaryColor: '#ff0000',
+        },
+      },
+    } as unknown as any)
+    render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    const button = screen.getByTestId('inputs-form-start-chat-button')
+    expect(button).toHaveStyle({ backgroundColor: '#ff0000' })
+  })
+
+  it('should apply tryApp styles when appSourceType is tryApp', () => {
+    vi.mocked(useEmbeddedChatbotContext).mockReturnValue({
+      ...mockContextValue,
+      appSourceType: AppSourceType.tryApp,
+    } as unknown as any)
+    render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
+    const mainDiv = screen.getByTestId('inputs-form-node')
+    expect(mainDiv).toHaveClass('mb-0 px-0')
+  })
+})
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 3039d69059..5f53bdec2d 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
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import Divider from '@/app/components/base/divider'
-import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import { AppSourceType } from '@/service/share'
 import { cn } from '@/utils/classnames'
 import { useEmbeddedChatbotContext } from '../context'
@@ -33,7 +32,10 @@ const InputsFormNode = ({
     return null
 
   return (
-    <div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4', isTryApp && 'mb-0 px-0')}>
+    <div
+      data-testid="inputs-form-node"
+      className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4', isTryApp && 'mb-0 px-0')}
+    >
       <div className={cn(
         'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
         collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
@@ -46,13 +48,29 @@ const InputsFormNode = ({
           isMobile && 'px-4 py-3',
         )}
         >
-          <Message3Fill className="h-6 w-6 shrink-0" />
-          <div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+          <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
+          <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
+            <Button
+              className="uppercase text-text-tertiary"
+              size="small"
+              variant="ghost"
+              onClick={() => setCollapsed(false)}
+              data-testid="inputs-form-edit-button"
+            >
+              {t('operation.edit', { ns: 'common' })}
+            </Button>
           )}
           {!collapsed && currentConversationId && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(true)}>{t('operation.close', { ns: 'common' })}</Button>
+            <Button
+              className="uppercase text-text-tertiary"
+              size="small"
+              variant="ghost"
+              onClick={() => setCollapsed(true)}
+              data-testid="inputs-form-close-button"
+            >
+              {t('operation.close', { ns: 'common' })}
+            </Button>
           )}
         </div>
         {!collapsed && (
@@ -66,6 +84,7 @@ const InputsFormNode = ({
               variant="primary"
               className="w-full"
               onClick={() => handleStartChat(() => setCollapsed(true))}
+              data-testid="inputs-form-start-chat-button"
               style={
                 themeBuilder?.theme
                   ? {
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.spec.tsx
new file mode 100644
index 0000000000..9f7fa727fd
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.spec.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ViewFormDropdown from './view-form-dropdown'
+
+// Mock InputsFormContent to avoid complex integration in this test
+vi.mock('./content', () => ({
+  default: () => <div data-testid="mock-inputs-form-content" />,
+}))
+
+// Note: PortalToFollowElem is mocked globally in vitest.setup.ts
+// to render children in the normal DOM flow when open is true.
+
+describe('ViewFormDropdown', () => {
+  const user = userEvent.setup()
+
+  it('should render the trigger button', () => {
+    render(<ViewFormDropdown />)
+    expect(screen.getByTestId('view-form-dropdown-trigger')).toBeInTheDocument()
+  })
+
+  it('should not show content initially', () => {
+    render(<ViewFormDropdown />)
+    expect(screen.queryByTestId('view-form-dropdown-content')).not.toBeInTheDocument()
+  })
+
+  it('should show content when trigger is clicked', async () => {
+    render(<ViewFormDropdown />)
+    await user.click(screen.getByTestId('view-form-dropdown-trigger'))
+
+    expect(screen.getByTestId('view-form-dropdown-content')).toBeInTheDocument()
+    expect(screen.getByText(/chat.chatSettingsTitle/i)).toBeInTheDocument()
+    expect(screen.getByTestId('mock-inputs-form-content')).toBeInTheDocument()
+  })
+
+  it('should close content when trigger is clicked again', async () => {
+    render(<ViewFormDropdown />)
+    const trigger = screen.getByTestId('view-form-dropdown-trigger')
+
+    await user.click(trigger) // Open
+    expect(screen.getByTestId('view-form-dropdown-content')).toBeInTheDocument()
+
+    await user.click(trigger) // Close
+    expect(screen.queryByTestId('view-form-dropdown-content')).not.toBeInTheDocument()
+  })
+
+  it('should apply iconColor class to the icon', async () => {
+    render(<ViewFormDropdown iconColor="text-red-500" />)
+    await user.click(screen.getByTestId('view-form-dropdown-trigger'))
+
+    const icon = screen.getByTestId('view-form-dropdown-trigger').querySelector('.i-ri-chat-settings-line')
+    expect(icon).toHaveClass('text-red-500')
+  })
+})
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 e584c873b3..50df5b0a4d 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
@@ -1,18 +1,18 @@
-import {
-  RiChatSettingsLine,
-} from '@remixicon/react'
+import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
-import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { cn } from '@/utils/classnames'
 
 type Props = {
   iconColor?: string
 }
-const ViewFormDropdown = ({ iconColor }: Props) => {
+
+const ViewFormDropdown = ({
+  iconColor,
+}: Props) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
 
@@ -26,18 +26,23 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
         crossAxis: 4,
       }}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
-      >
-        <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
-          <RiChatSettingsLine className={cn('h-[18px] w-[18px]', iconColor)} />
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <ActionButton
+          size="l"
+          state={open ? ActionButtonState.Hover : ActionButtonState.Default}
+          data-testid="view-form-dropdown-trigger"
+        >
+          <div className={cn('i-ri-chat-settings-line h-[18px] w-[18px] shrink-0', iconColor)} />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-[99]">
-        <div className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm">
+        <div
+          data-testid="view-form-dropdown-content"
+          className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm"
+        >
           <div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4">
-            <Message3Fill className="h-6 w-6 shrink-0" />
-            <div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+            <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
+            <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           </div>
           <div className="p-6">
             <InputsFormContent />
@@ -45,7 +50,6 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
-
   )
 }
 
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index f94012c899..9bb6b15490 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1553,11 +1553,6 @@
       "count": 7
     }
   },
-  "app/components/base/chat/embedded-chatbot/header/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/chat/embedded-chatbot/hooks.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 3
@@ -1569,23 +1564,10 @@
     }
   },
   "app/components/base/chat/embedded-chatbot/inputs-form/content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/base/chat/embedded-chatbot/inputs-form/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/utils.ts": {
     "ts/no-explicit-any": {
       "count": 10

From 0358925d7def96cf34b65565e5ec4b7675efc8c2 Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 18:38:57 +0530
Subject: [PATCH 24/26] test: add tests for some base components (#32415)

---
 .../base/app-icon-picker/ImageInput.spec.tsx  | 237 ++++++++++++
 .../base/app-icon-picker/ImageInput.tsx       |   6 +-
 .../base/app-icon-picker/hooks.spec.tsx       | 120 ++++++
 .../base/app-icon-picker/index.spec.tsx       | 339 ++++++++++++++++
 .../base/app-icon-picker/utils.spec.ts        | 364 ++++++++++++++++++
 .../components/base/grid-mask/index.spec.tsx  |  62 +++
 .../base/image-gallery/index.spec.tsx         | 144 +++++++
 .../base/image-uploader/image-preview.tsx     |   1 +
 .../base/param-item/index-slider.spec.tsx     |  40 ++
 .../components/base/param-item/index.spec.tsx | 179 +++++++++
 .../param-item/score-threshold-item.spec.tsx  | 145 +++++++
 .../base/param-item/score-threshold-item.tsx  |   7 +-
 .../base/param-item/top-k-item.spec.tsx       | 130 +++++++
 .../components/base/tag-input/index.spec.tsx  | 187 +++++++++
 web/app/components/base/tag-input/index.tsx   |   9 +-
 .../base/text-generation/hooks.spec.ts        | 167 ++++++++
 web/eslint-suppressions.json                  |   5 -
 17 files changed, 2129 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/base/app-icon-picker/ImageInput.spec.tsx
 create mode 100644 web/app/components/base/app-icon-picker/hooks.spec.tsx
 create mode 100644 web/app/components/base/app-icon-picker/index.spec.tsx
 create mode 100644 web/app/components/base/app-icon-picker/utils.spec.ts
 create mode 100644 web/app/components/base/grid-mask/index.spec.tsx
 create mode 100644 web/app/components/base/image-gallery/index.spec.tsx
 create mode 100644 web/app/components/base/param-item/index-slider.spec.tsx
 create mode 100644 web/app/components/base/param-item/index.spec.tsx
 create mode 100644 web/app/components/base/param-item/score-threshold-item.spec.tsx
 create mode 100644 web/app/components/base/param-item/top-k-item.spec.tsx
 create mode 100644 web/app/components/base/tag-input/index.spec.tsx
 create mode 100644 web/app/components/base/text-generation/hooks.spec.ts

diff --git a/web/app/components/base/app-icon-picker/ImageInput.spec.tsx b/web/app/components/base/app-icon-picker/ImageInput.spec.tsx
new file mode 100644
index 0000000000..8e0476823a
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/ImageInput.spec.tsx
@@ -0,0 +1,237 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import ImageInput from './ImageInput'
+
+const createObjectURLMock = vi.fn(() => 'blob:mock-url')
+const revokeObjectURLMock = vi.fn()
+const originalCreateObjectURL = globalThis.URL.createObjectURL
+const originalRevokeObjectURL = globalThis.URL.revokeObjectURL
+
+const waitForCropperContainer = async () => {
+  await waitFor(() => {
+    expect(screen.getByTestId('container')).toBeInTheDocument()
+  })
+}
+
+const loadCropperImage = async () => {
+  await waitForCropperContainer()
+  const cropperImage = screen.getByTestId('container').querySelector('img')
+  if (!cropperImage)
+    throw new Error('Could not find cropper image')
+
+  fireEvent.load(cropperImage)
+}
+
+describe('ImageInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    globalThis.URL.createObjectURL = createObjectURLMock
+    globalThis.URL.revokeObjectURL = revokeObjectURLMock
+  })
+
+  afterEach(() => {
+    globalThis.URL.createObjectURL = originalCreateObjectURL
+    globalThis.URL.revokeObjectURL = originalRevokeObjectURL
+  })
+
+  describe('Rendering', () => {
+    it('should render upload prompt when no image is selected', () => {
+      render(<ImageInput />)
+
+      expect(screen.getByText(/drop.*here/i)).toBeInTheDocument()
+      expect(screen.getByText(/browse/i)).toBeInTheDocument()
+      expect(screen.getByText(/supported/i)).toBeInTheDocument()
+    })
+
+    it('should render a hidden file input', () => {
+      render(<ImageInput />)
+
+      const input = screen.getByTestId('image-input')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveClass('hidden')
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<ImageInput className="my-custom-class" />)
+      expect(container.firstChild).toHaveClass('my-custom-class')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should trigger file input click when browse button is clicked', () => {
+      render(<ImageInput />)
+
+      const fileInput = screen.getByTestId('image-input')
+      const clickSpy = vi.spyOn(fileInput, 'click')
+
+      fireEvent.click(screen.getByText(/browse/i))
+
+      expect(clickSpy).toHaveBeenCalled()
+    })
+
+    it('should show Cropper when a static image file is selected', async () => {
+      render(<ImageInput />)
+
+      const file = new File(['image-data'], 'photo.png', { type: 'image/png' })
+      const input = screen.getByTestId('image-input')
+      fireEvent.change(input, { target: { files: [file] } })
+
+      await waitForCropperContainer()
+
+      // Upload prompt should be gone
+      expect(screen.queryByText(/browse/i)).not.toBeInTheDocument()
+    })
+
+    it('should call onImageInput with cropped data when crop completes on static image', async () => {
+      const onImageInput = vi.fn()
+      render(<ImageInput onImageInput={onImageInput} />)
+
+      const file = new File(['image-data'], 'photo.png', { type: 'image/png' })
+      const input = screen.getByTestId('image-input')
+      fireEvent.change(input, { target: { files: [file] } })
+
+      await loadCropperImage()
+
+      await waitFor(() => {
+        expect(onImageInput).toHaveBeenCalledWith(
+          true,
+          'blob:mock-url',
+          expect.objectContaining({
+            x: expect.any(Number),
+            y: expect.any(Number),
+            width: expect.any(Number),
+            height: expect.any(Number),
+          }),
+          'photo.png',
+        )
+      })
+    })
+
+    it('should show img tag and call onImageInput with isCropped=false for animated GIF', async () => {
+      const onImageInput = vi.fn()
+      render(<ImageInput onImageInput={onImageInput} />)
+
+      const gifBytes = new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x39, 0x61])
+      const file = new File([gifBytes], 'anim.gif', { type: 'image/gif' })
+      const input = screen.getByTestId('image-input')
+      fireEvent.change(input, { target: { files: [file] } })
+
+      await waitFor(() => {
+        const img = screen.queryByTestId('animated-image') as HTMLImageElement
+        expect(img).toBeInTheDocument()
+        expect(img?.src).toContain('blob:mock-url')
+      })
+
+      // Cropper should NOT be shown
+      expect(screen.queryByTestId('container')).not.toBeInTheDocument()
+      expect(onImageInput).toHaveBeenCalledWith(false, file)
+    })
+
+    it('should not crash when file input has no files', () => {
+      render(<ImageInput />)
+
+      const input = screen.getByTestId('image-input')
+      fireEvent.change(input, { target: { files: null } })
+
+      // Should still show upload prompt
+      expect(screen.getByText(/browse/i)).toBeInTheDocument()
+    })
+
+    it('should reset file input value on click', () => {
+      render(<ImageInput />)
+
+      const input = screen.getByTestId('image-input') as HTMLInputElement
+      // Simulate previous value
+      Object.defineProperty(input, 'value', { writable: true, value: 'old-file.png' })
+      fireEvent.click(input)
+      expect(input.value).toBe('')
+    })
+  })
+
+  describe('Drag and Drop', () => {
+    it('should apply active border class on drag enter', () => {
+      render(<ImageInput />)
+
+      const dropZone = screen.getByText(/browse/i).closest('[class*="border-dashed"]') as HTMLElement
+
+      fireEvent.dragEnter(dropZone)
+      expect(dropZone).toHaveClass('border-primary-600')
+    })
+
+    it('should remove active border class on drag leave', () => {
+      render(<ImageInput />)
+
+      const dropZone = screen.getByText(/browse/i).closest('[class*="border-dashed"]') as HTMLElement
+
+      fireEvent.dragEnter(dropZone)
+      expect(dropZone).toHaveClass('border-primary-600')
+
+      fireEvent.dragLeave(dropZone)
+      expect(dropZone).not.toHaveClass('border-primary-600')
+    })
+
+    it('should show image after dropping a file', async () => {
+      render(<ImageInput />)
+
+      const dropZone = screen.getByText(/browse/i).closest('[class*="border-dashed"]') as HTMLElement
+      const file = new File(['image-data'], 'dropped.png', { type: 'image/png' })
+
+      fireEvent.drop(dropZone, {
+        dataTransfer: { files: [file] },
+      })
+
+      await waitForCropperContainer()
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should call URL.revokeObjectURL on unmount when an image was set', async () => {
+      const { unmount } = render(<ImageInput />)
+
+      const file = new File(['image-data'], 'photo.png', { type: 'image/png' })
+      const input = screen.getByTestId('image-input')
+      fireEvent.change(input, { target: { files: [file] } })
+
+      await waitForCropperContainer()
+
+      unmount()
+
+      expect(revokeObjectURLMock).toHaveBeenCalledWith('blob:mock-url')
+    })
+
+    it('should not call URL.revokeObjectURL on unmount when no image was set', () => {
+      const { unmount } = render(<ImageInput />)
+      unmount()
+      expect(revokeObjectURLMock).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should not crash when onImageInput is not provided', async () => {
+      render(<ImageInput />)
+
+      const file = new File(['image-data'], 'photo.png', { type: 'image/png' })
+      const input = screen.getByTestId('image-input')
+
+      // Should not throw
+      fireEvent.change(input, { target: { files: [file] } })
+
+      await loadCropperImage()
+      await waitFor(() => {
+        expect(screen.getByTestId('cropper')).toBeInTheDocument()
+      })
+    })
+
+    it('should accept the correct file extensions', () => {
+      render(<ImageInput />)
+
+      const input = screen.getByTestId('image-input') as HTMLInputElement
+      expect(input.accept).toContain('.png')
+      expect(input.accept).toContain('.jpg')
+      expect(input.accept).toContain('.jpeg')
+      expect(input.accept).toContain('.webp')
+      expect(input.accept).toContain('.gif')
+    })
+  })
+})
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index d41f3bf232..e255b2cfe6 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -72,7 +72,8 @@ const ImageInput: FC<UploaderProps> = ({
   const handleShowImage = () => {
     if (isAnimatedImage) {
       return (
-        <img src={inputImage?.url} alt="" />
+        // eslint-disable-next-line next/no-img-element
+        <img src={inputImage?.url} alt="" data-testid="animated-image" />
       )
     }
 
@@ -107,7 +108,7 @@ const ImageInput: FC<UploaderProps> = ({
                   <div className="mb-[2px] text-sm font-medium">
                     <span className="pointer-events-none">
                       {t('imageInput.dropImageHere', { ns: 'common' })}
-&nbsp;
+                    &nbsp;
                     </span>
                     <button type="button" className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>{t('imageInput.browse', { ns: 'common' })}</button>
                     <input
@@ -117,6 +118,7 @@ const ImageInput: FC<UploaderProps> = ({
                       onClick={e => ((e.target as HTMLInputElement).value = '')}
                       accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
                       onChange={handleLocalFileInput}
+                      data-testid="image-input"
                     />
                   </div>
                   <div className="pointer-events-none">{t('imageInput.supportedFormats', { ns: 'common' })}</div>
diff --git a/web/app/components/base/app-icon-picker/hooks.spec.tsx b/web/app/components/base/app-icon-picker/hooks.spec.tsx
new file mode 100644
index 0000000000..58741a3ecf
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/hooks.spec.tsx
@@ -0,0 +1,120 @@
+import { act, renderHook } from '@testing-library/react'
+import { useDraggableUploader } from './hooks'
+
+type MockDragEventOverrides = {
+  dataTransfer?: { files: File[] }
+}
+
+const createDragEvent = (overrides: MockDragEventOverrides = {}): React.DragEvent<HTMLDivElement> => ({
+  preventDefault: vi.fn(),
+  stopPropagation: vi.fn(),
+  dataTransfer: { files: [] as unknown as FileList },
+  ...overrides,
+} as unknown as React.DragEvent<HTMLDivElement>)
+
+describe('useDraggableUploader', () => {
+  let setImageFn: ReturnType<typeof vi.fn<(file: File) => void>>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setImageFn = vi.fn<(file: File) => void>()
+  })
+
+  describe('Rendering', () => {
+    it('should return all expected handler functions and isDragActive state', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+
+      expect(result.current.handleDragEnter).toBeInstanceOf(Function)
+      expect(result.current.handleDragOver).toBeInstanceOf(Function)
+      expect(result.current.handleDragLeave).toBeInstanceOf(Function)
+      expect(result.current.handleDrop).toBeInstanceOf(Function)
+      expect(result.current.isDragActive).toBe(false)
+    })
+  })
+
+  describe('Drag Events', () => {
+    it('should set isDragActive to true on drag enter', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+      const event = createDragEvent()
+
+      act(() => {
+        result.current.handleDragEnter(event)
+      })
+
+      expect(result.current.isDragActive).toBe(true)
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should call preventDefault and stopPropagation on drag over without changing isDragActive', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+      const event = createDragEvent()
+
+      act(() => {
+        result.current.handleDragOver(event)
+      })
+
+      expect(result.current.isDragActive).toBe(false)
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should set isDragActive to false on drag leave', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+      const enterEvent = createDragEvent()
+      const leaveEvent = createDragEvent()
+
+      act(() => {
+        result.current.handleDragEnter(enterEvent)
+      })
+      expect(result.current.isDragActive).toBe(true)
+
+      act(() => {
+        result.current.handleDragLeave(leaveEvent)
+      })
+
+      expect(result.current.isDragActive).toBe(false)
+      expect(leaveEvent.preventDefault).toHaveBeenCalled()
+      expect(leaveEvent.stopPropagation).toHaveBeenCalled()
+    })
+  })
+
+  describe('Drop', () => {
+    it('should call setImageFn with the dropped file and set isDragActive to false', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+      const file = new File(['test'], 'image.png', { type: 'image/png' })
+      const event = createDragEvent({
+        dataTransfer: { files: [file] },
+      })
+
+      // First set isDragActive to true
+      act(() => {
+        result.current.handleDragEnter(createDragEvent())
+      })
+      expect(result.current.isDragActive).toBe(true)
+
+      act(() => {
+        result.current.handleDrop(event)
+      })
+
+      expect(result.current.isDragActive).toBe(false)
+      expect(setImageFn).toHaveBeenCalledWith(file)
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should not call setImageFn when no file is dropped', () => {
+      const { result } = renderHook(() => useDraggableUploader(setImageFn))
+      const event = createDragEvent({
+        dataTransfer: { files: [] },
+      })
+
+      act(() => {
+        result.current.handleDrop(event)
+      })
+
+      expect(setImageFn).not.toHaveBeenCalled()
+      expect(result.current.isDragActive).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/base/app-icon-picker/index.spec.tsx b/web/app/components/base/app-icon-picker/index.spec.tsx
new file mode 100644
index 0000000000..63d447e289
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/index.spec.tsx
@@ -0,0 +1,339 @@
+import type { Area } from 'react-easy-crop'
+import type { ImageFile } from '@/types/app'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TransferMethod } from '@/types/app'
+import AppIconPicker from './index'
+import 'vitest-canvas-mock'
+
+type LocalFileUploaderOptions = {
+  disabled?: boolean
+  limit?: number
+  onUpload: (imageFile: ImageFile) => void
+}
+
+class MockLoadedImage {
+  width = 320
+  height = 160
+  private listeners: Record<string, EventListener[]> = {}
+
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    const eventListener = typeof listener === 'function' ? listener : listener.handleEvent.bind(listener)
+    if (!this.listeners[type])
+      this.listeners[type] = []
+    this.listeners[type].push(eventListener)
+  }
+
+  setAttribute(_name: string, _value: string) { }
+
+  set src(_value: string) {
+    queueMicrotask(() => {
+      for (const listener of this.listeners.load ?? [])
+        listener(new Event('load'))
+    })
+  }
+
+  get src() {
+    return ''
+  }
+}
+
+const createImageFile = (overrides: Partial<ImageFile> = {}): ImageFile => ({
+  type: TransferMethod.local_file,
+  _id: 'test-image-id',
+  fileId: 'uploaded-image-id',
+  progress: 100,
+  url: 'https://example.com/uploaded.png',
+  ...overrides,
+})
+
+const createCanvasContextMock = (): CanvasRenderingContext2D =>
+  ({
+    translate: vi.fn(),
+    rotate: vi.fn(),
+    scale: vi.fn(),
+    drawImage: vi.fn(),
+  }) as unknown as CanvasRenderingContext2D
+
+const createCanvasElementMock = (context: CanvasRenderingContext2D | null, blob: Blob | null = new Blob(['ok'], { type: 'image/png' })) =>
+  ({
+    width: 0,
+    height: 0,
+    getContext: vi.fn(() => context),
+    toBlob: vi.fn((callback: BlobCallback) => callback(blob)),
+  }) as unknown as HTMLCanvasElement
+
+const mocks = vi.hoisted(() => ({
+  disableUpload: false,
+  uploadResult: null as ImageFile | null,
+  onUpload: null as ((imageFile: ImageFile) => void) | null,
+  handleLocalFileUpload: vi.fn<(file: File) => void>(),
+}))
+
+vi.mock('@/config', () => ({
+  get DISABLE_UPLOAD_IMAGE_AS_ICON() {
+    return mocks.disableUpload
+  },
+}))
+
+vi.mock('react-easy-crop', () => ({
+  default: ({ onCropComplete }: { onCropComplete: (_area: Area, croppedAreaPixels: Area) => void }) => (
+    <div data-testid="mock-cropper">
+      <button
+        type="button"
+        data-testid="trigger-crop"
+        onClick={() => onCropComplete(
+          { x: 0, y: 0, width: 100, height: 100 },
+          { x: 0, y: 0, width: 100, height: 100 },
+        )}
+      >
+        Trigger Crop
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('../image-uploader/hooks', () => ({
+  useLocalFileUploader: (options: LocalFileUploaderOptions) => {
+    mocks.onUpload = options.onUpload
+    return { handleLocalFileUpload: mocks.handleLocalFileUpload }
+  },
+}))
+
+vi.mock('@/utils/emoji', () => ({
+  searchEmoji: vi.fn().mockResolvedValue(['grinning', 'sunglasses']),
+}))
+
+describe('AppIconPicker', () => {
+  const originalCreateElement = document.createElement.bind(document)
+  const originalCreateObjectURL = globalThis.URL.createObjectURL
+  const originalRevokeObjectURL = globalThis.URL.revokeObjectURL
+  let originalImage: typeof Image
+
+  const mockCanvasCreation = (canvases: HTMLCanvasElement[]) => {
+    vi.spyOn(document, 'createElement').mockImplementation((...args: Parameters<Document['createElement']>) => {
+      if (args[0] === 'canvas') {
+        const nextCanvas = canvases.shift()
+        if (!nextCanvas)
+          throw new Error('Unexpected canvas creation')
+        return nextCanvas as ReturnType<Document['createElement']>
+      }
+      return originalCreateElement(...args)
+    })
+  }
+
+  const renderPicker = () => {
+    const onSelect = vi.fn()
+    const onClose = vi.fn()
+
+    const { container } = render(<AppIconPicker onSelect={onSelect} onClose={onClose} />)
+
+    return { onSelect, onClose, container }
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.disableUpload = false
+    mocks.uploadResult = createImageFile()
+    mocks.onUpload = null
+    mocks.handleLocalFileUpload.mockImplementation(() => {
+      if (mocks.uploadResult)
+        mocks.onUpload?.(mocks.uploadResult)
+    })
+
+    originalImage = globalThis.Image
+    globalThis.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    globalThis.URL.revokeObjectURL = vi.fn()
+  })
+
+  afterEach(() => {
+    globalThis.Image = originalImage
+    globalThis.URL.createObjectURL = originalCreateObjectURL
+    globalThis.URL.revokeObjectURL = originalRevokeObjectURL
+  })
+
+  describe('Rendering', () => {
+    it('should render emoji and image tabs when upload is enabled', async () => {
+      renderPicker()
+
+      expect(await screen.findByText(/emoji/i)).toBeInTheDocument()
+      expect(screen.getByText(/image/i)).toBeInTheDocument()
+      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
+      expect(screen.getByText(/ok/i)).toBeInTheDocument()
+    })
+
+    it('should hide the image tab when upload is disabled', () => {
+      mocks.disableUpload = true
+      renderPicker()
+
+      expect(screen.queryByText(/image/i)).not.toBeInTheDocument()
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onClose when cancel is clicked', async () => {
+      const { onClose } = renderPicker()
+
+      await userEvent.click(screen.getByText(/cancel/i))
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should switch between emoji and image tabs', async () => {
+      renderPicker()
+
+      await userEvent.click(screen.getByText(/image/i))
+      expect(screen.getByText(/drop.*here/i)).toBeInTheDocument()
+
+      await userEvent.click(screen.getByText(/emoji/i))
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument()
+    })
+
+    it('should call onSelect with emoji data after emoji selection', async () => {
+      const { onSelect } = renderPicker()
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId(/emoji-container-/i).length).toBeGreaterThan(0)
+      })
+
+      const firstEmoji = screen.queryAllByTestId(/emoji-container-/i)[0]
+      if (!firstEmoji)
+        throw new Error('Could not find emoji option')
+
+      await userEvent.click(firstEmoji)
+      await userEvent.click(screen.getByText(/ok/i))
+
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({
+          type: 'emoji',
+          icon: expect.any(String),
+          background: expect.any(String),
+        }))
+      })
+    })
+
+    it('should not call onSelect when no emoji has been selected', async () => {
+      const { onSelect } = renderPicker()
+
+      await userEvent.click(screen.getByText(/ok/i))
+
+      expect(onSelect).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Image Upload', () => {
+    it('should return early when image tab is active and no file has been selected', async () => {
+      const { onSelect } = renderPicker()
+
+      await userEvent.click(screen.getByText(/image/i))
+      await userEvent.click(screen.getByText(/ok/i))
+
+      expect(mocks.handleLocalFileUpload).not.toHaveBeenCalled()
+      expect(onSelect).not.toHaveBeenCalled()
+    })
+
+    it('should upload cropped static image and emit selected image metadata', async () => {
+      globalThis.Image = MockLoadedImage as unknown as typeof Image
+
+      const sourceCanvas = createCanvasElementMock(createCanvasContextMock())
+      const croppedBlob = new Blob(['cropped-image'], { type: 'image/png' })
+      const croppedCanvas = createCanvasElementMock(createCanvasContextMock(), croppedBlob)
+      mockCanvasCreation([sourceCanvas, croppedCanvas])
+
+      const { onSelect } = renderPicker()
+      await userEvent.click(screen.getByText(/image/i))
+
+      const input = screen.queryByTestId('image-input')
+      if (!input)
+        throw new Error('Could not find image input')
+
+      fireEvent.change(input, { target: { files: [new File(['png'], 'avatar.png', { type: 'image/png' })] } })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('mock-cropper')).toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByTestId('trigger-crop'))
+      await userEvent.click(screen.getByText(/ok/i))
+
+      await waitFor(() => {
+        expect(mocks.handleLocalFileUpload).toHaveBeenCalledTimes(1)
+      })
+
+      const uploadedFile = mocks.handleLocalFileUpload.mock.calls[0][0]
+      expect(uploadedFile).toBeInstanceOf(File)
+      expect(uploadedFile.name).toBe('avatar.png')
+      expect(uploadedFile.type).toBe('image/png')
+
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalledWith({
+          type: 'image',
+          fileId: 'uploaded-image-id',
+          url: 'https://example.com/uploaded.png',
+        })
+      })
+    })
+
+    it('should upload animated image directly without crop', async () => {
+      const { onSelect } = renderPicker()
+      await userEvent.click(screen.getByText(/image/i))
+
+      const gifBytes = new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x39, 0x61])
+      const gifFile = new File([gifBytes], 'animated.gif', { type: 'image/gif' })
+
+      const input = screen.queryByTestId('image-input')
+      if (!input)
+        throw new Error('Could not find image input')
+
+      fireEvent.change(input, { target: { files: [gifFile] } })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('mock-cropper')).not.toBeInTheDocument()
+        const preview = screen.queryByTestId('animated-image')
+        expect(preview).toBeInTheDocument()
+        expect(preview?.getAttribute('src')).toContain('blob:mock-url')
+      })
+
+      await userEvent.click(screen.getByText(/ok/i))
+
+      await waitFor(() => {
+        expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(gifFile)
+      })
+
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalledWith({
+          type: 'image',
+          fileId: 'uploaded-image-id',
+          url: 'https://example.com/uploaded.png',
+        })
+      })
+    })
+
+    it('should not call onSelect when upload callback returns image without fileId', async () => {
+      mocks.uploadResult = createImageFile({ fileId: '' })
+      const { onSelect } = renderPicker()
+      await userEvent.click(screen.getByText(/image/i))
+
+      const gifBytes = new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x39, 0x61])
+      const gifFile = new File([gifBytes], 'no-file-id.gif', { type: 'image/gif' })
+
+      const input = screen.queryByTestId('image-input')
+      if (!input)
+        throw new Error('Could not find image input')
+
+      fireEvent.change(input, { target: { files: [gifFile] } })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('mock-cropper')).not.toBeInTheDocument()
+      })
+
+      await userEvent.click(screen.getByText(/ok/i))
+
+      await waitFor(() => {
+        expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(gifFile)
+      })
+      expect(onSelect).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/app-icon-picker/utils.spec.ts b/web/app/components/base/app-icon-picker/utils.spec.ts
new file mode 100644
index 0000000000..778d384910
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/utils.spec.ts
@@ -0,0 +1,364 @@
+import getCroppedImg, { checkIsAnimatedImage, createImage, getMimeType, getRadianAngle, rotateSize } from './utils'
+
+type ImageLoadEventType = 'load' | 'error'
+
+class MockImageElement {
+  static nextEvent: ImageLoadEventType = 'load'
+  width = 320
+  height = 160
+  crossOriginValue = ''
+  srcValue = ''
+  private listeners: Record<string, EventListener[]> = {}
+
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    const eventListener = typeof listener === 'function' ? listener : listener.handleEvent.bind(listener)
+    if (!this.listeners[type])
+      this.listeners[type] = []
+    this.listeners[type].push(eventListener)
+  }
+
+  setAttribute(name: string, value: string) {
+    if (name === 'crossOrigin')
+      this.crossOriginValue = value
+  }
+
+  set src(value: string) {
+    this.srcValue = value
+    queueMicrotask(() => {
+      const event = new Event(MockImageElement.nextEvent)
+      for (const listener of this.listeners[MockImageElement.nextEvent] ?? [])
+        listener(event)
+    })
+  }
+
+  get src() {
+    return this.srcValue
+  }
+}
+
+type CanvasMock = {
+  element: HTMLCanvasElement
+  getContextMock: ReturnType<typeof vi.fn>
+  toBlobMock: ReturnType<typeof vi.fn>
+}
+
+const createCanvasMock = (context: CanvasRenderingContext2D | null, blob: Blob | null = new Blob(['ok'])): CanvasMock => {
+  const getContextMock = vi.fn(() => context)
+  const toBlobMock = vi.fn((callback: BlobCallback) => callback(blob))
+  return {
+    element: {
+      width: 0,
+      height: 0,
+      getContext: getContextMock,
+      toBlob: toBlobMock,
+    } as unknown as HTMLCanvasElement,
+    getContextMock,
+    toBlobMock,
+  }
+}
+
+const createCanvasContextMock = (): CanvasRenderingContext2D =>
+  ({
+    translate: vi.fn(),
+    rotate: vi.fn(),
+    scale: vi.fn(),
+    drawImage: vi.fn(),
+  }) as unknown as CanvasRenderingContext2D
+
+describe('utils', () => {
+  const originalCreateElement = document.createElement.bind(document)
+  let originalImage: typeof Image
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    originalImage = globalThis.Image
+    MockImageElement.nextEvent = 'load'
+  })
+
+  afterEach(() => {
+    globalThis.Image = originalImage
+    vi.restoreAllMocks()
+  })
+
+  const mockCanvasCreation = (canvases: HTMLCanvasElement[]) => {
+    vi.spyOn(document, 'createElement').mockImplementation((...args: Parameters<Document['createElement']>) => {
+      if (args[0] === 'canvas') {
+        const nextCanvas = canvases.shift()
+        if (!nextCanvas)
+          throw new Error('Unexpected canvas creation')
+        return nextCanvas as ReturnType<Document['createElement']>
+      }
+      return originalCreateElement(...args)
+    })
+  }
+
+  describe('createImage', () => {
+    it('should resolve image when load event fires', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const image = await createImage('https://example.com/image.png')
+      const mockImage = image as unknown as MockImageElement
+
+      expect(mockImage.crossOriginValue).toBe('anonymous')
+      expect(mockImage.src).toBe('https://example.com/image.png')
+    })
+
+    it('should reject when error event fires', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+      MockImageElement.nextEvent = 'error'
+
+      await expect(createImage('https://example.com/broken.png')).rejects.toBeInstanceOf(Event)
+    })
+  })
+
+  describe('getMimeType', () => {
+    it('should return image/png for .png files', () => {
+      expect(getMimeType('photo.png')).toBe('image/png')
+    })
+
+    it('should return image/jpeg for .jpg files', () => {
+      expect(getMimeType('photo.jpg')).toBe('image/jpeg')
+    })
+
+    it('should return image/jpeg for .jpeg files', () => {
+      expect(getMimeType('photo.jpeg')).toBe('image/jpeg')
+    })
+
+    it('should return image/gif for .gif files', () => {
+      expect(getMimeType('animation.gif')).toBe('image/gif')
+    })
+
+    it('should return image/webp for .webp files', () => {
+      expect(getMimeType('photo.webp')).toBe('image/webp')
+    })
+
+    it('should return image/jpeg as default for unknown extensions', () => {
+      expect(getMimeType('file.bmp')).toBe('image/jpeg')
+    })
+
+    it('should return image/jpeg for files with no extension', () => {
+      expect(getMimeType('file')).toBe('image/jpeg')
+    })
+
+    it('should handle uppercase extensions via toLowerCase', () => {
+      expect(getMimeType('photo.PNG')).toBe('image/png')
+    })
+  })
+
+  describe('getRadianAngle', () => {
+    it('should return 0 for 0 degrees', () => {
+      expect(getRadianAngle(0)).toBe(0)
+    })
+
+    it('should return PI/2 for 90 degrees', () => {
+      expect(getRadianAngle(90)).toBeCloseTo(Math.PI / 2)
+    })
+
+    it('should return PI for 180 degrees', () => {
+      expect(getRadianAngle(180)).toBeCloseTo(Math.PI)
+    })
+
+    it('should return 2*PI for 360 degrees', () => {
+      expect(getRadianAngle(360)).toBeCloseTo(2 * Math.PI)
+    })
+
+    it('should handle negative angles', () => {
+      expect(getRadianAngle(-90)).toBeCloseTo(-Math.PI / 2)
+    })
+  })
+
+  describe('rotateSize', () => {
+    it('should return same dimensions for 0 degree rotation', () => {
+      const result = rotateSize(100, 200, 0)
+      expect(result.width).toBeCloseTo(100)
+      expect(result.height).toBeCloseTo(200)
+    })
+
+    it('should swap dimensions for 90 degree rotation', () => {
+      const result = rotateSize(100, 200, 90)
+      expect(result.width).toBeCloseTo(200)
+      expect(result.height).toBeCloseTo(100)
+    })
+
+    it('should return same dimensions for 180 degree rotation', () => {
+      const result = rotateSize(100, 200, 180)
+      expect(result.width).toBeCloseTo(100)
+      expect(result.height).toBeCloseTo(200)
+    })
+
+    it('should handle square dimensions', () => {
+      const result = rotateSize(100, 100, 45)
+      // 45° rotation of a square produces a larger bounding box
+      const expected = Math.abs(Math.cos(Math.PI / 4) * 100) + Math.abs(Math.sin(Math.PI / 4) * 100)
+      expect(result.width).toBeCloseTo(expected)
+      expect(result.height).toBeCloseTo(expected)
+    })
+  })
+
+  describe('getCroppedImg', () => {
+    it('should return a blob when canvas operations succeed', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const sourceContext = createCanvasContextMock()
+      const croppedContext = createCanvasContextMock()
+      const sourceCanvas = createCanvasMock(sourceContext)
+      const expectedBlob = new Blob(['cropped'], { type: 'image/webp' })
+      const croppedCanvas = createCanvasMock(croppedContext, expectedBlob)
+      mockCanvasCreation([sourceCanvas.element, croppedCanvas.element])
+
+      const result = await getCroppedImg(
+        'https://example.com/image.webp',
+        { x: 10, y: 20, width: 50, height: 40 },
+        'avatar.webp',
+        90,
+        { horizontal: true, vertical: false },
+      )
+
+      expect(result).toBe(expectedBlob)
+      expect(croppedCanvas.toBlobMock).toHaveBeenCalledWith(expect.any(Function), 'image/webp')
+      expect(sourceContext.translate).toHaveBeenCalled()
+      expect(sourceContext.rotate).toHaveBeenCalled()
+      expect(sourceContext.scale).toHaveBeenCalledWith(-1, 1)
+      expect(croppedContext.drawImage).toHaveBeenCalled()
+    })
+
+    it('should apply vertical flip when vertical option is true', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const sourceContext = createCanvasContextMock()
+      const croppedContext = createCanvasContextMock()
+      const sourceCanvas = createCanvasMock(sourceContext)
+      const croppedCanvas = createCanvasMock(croppedContext)
+      mockCanvasCreation([sourceCanvas.element, croppedCanvas.element])
+
+      await getCroppedImg(
+        'https://example.com/image.png',
+        { x: 0, y: 0, width: 20, height: 20 },
+        'avatar.png',
+        0,
+        { horizontal: false, vertical: true },
+      )
+
+      expect(sourceContext.scale).toHaveBeenCalledWith(1, -1)
+    })
+
+    it('should throw when source canvas context is unavailable', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const sourceCanvas = createCanvasMock(null)
+      mockCanvasCreation([sourceCanvas.element])
+
+      await expect(
+        getCroppedImg('https://example.com/image.png', { x: 0, y: 0, width: 10, height: 10 }, 'avatar.png'),
+      ).rejects.toThrow('Could not create a canvas context')
+    })
+
+    it('should throw when cropped canvas context is unavailable', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const sourceCanvas = createCanvasMock(createCanvasContextMock())
+      const croppedCanvas = createCanvasMock(null)
+      mockCanvasCreation([sourceCanvas.element, croppedCanvas.element])
+
+      await expect(
+        getCroppedImg('https://example.com/image.png', { x: 0, y: 0, width: 10, height: 10 }, 'avatar.png'),
+      ).rejects.toThrow('Could not create a canvas context')
+    })
+
+    it('should reject when blob creation fails', async () => {
+      globalThis.Image = MockImageElement as unknown as typeof Image
+
+      const sourceCanvas = createCanvasMock(createCanvasContextMock())
+      const croppedCanvas = createCanvasMock(createCanvasContextMock(), null)
+      mockCanvasCreation([sourceCanvas.element, croppedCanvas.element])
+
+      await expect(
+        getCroppedImg('https://example.com/image.jpg', { x: 0, y: 0, width: 10, height: 10 }, 'avatar.jpg'),
+      ).rejects.toThrow('Could not create a blob')
+    })
+  })
+
+  describe('checkIsAnimatedImage', () => {
+    let originalFileReader: typeof FileReader
+    beforeEach(() => {
+      originalFileReader = globalThis.FileReader
+    })
+
+    afterEach(() => {
+      globalThis.FileReader = originalFileReader
+    })
+    it('should return true for .gif files', async () => {
+      const gifFile = new File([new Uint8Array([0x47, 0x49, 0x46])], 'animation.gif', { type: 'image/gif' })
+      const result = await checkIsAnimatedImage(gifFile)
+      expect(result).toBe(true)
+    })
+
+    it('should return false for non-gif, non-webp files', async () => {
+      const pngFile = new File([new Uint8Array([0x89, 0x50, 0x4E, 0x47])], 'image.png', { type: 'image/png' })
+      const result = await checkIsAnimatedImage(pngFile)
+      expect(result).toBe(false)
+    })
+
+    it('should return true for animated WebP files with ANIM chunk', async () => {
+      // Build a minimal WebP header with ANIM chunk
+      // RIFF....WEBP....ANIM
+      const bytes = new Uint8Array(20)
+      // RIFF signature
+      bytes[0] = 0x52 // R
+      bytes[1] = 0x49 // I
+      bytes[2] = 0x46 // F
+      bytes[3] = 0x46 // F
+      // WEBP signature
+      bytes[8] = 0x57 // W
+      bytes[9] = 0x45 // E
+      bytes[10] = 0x42 // B
+      bytes[11] = 0x50 // P
+      // ANIM chunk at offset 12
+      bytes[12] = 0x41 // A
+      bytes[13] = 0x4E // N
+      bytes[14] = 0x49 // I
+      bytes[15] = 0x4D // M
+
+      const webpFile = new File([bytes], 'animated.webp', { type: 'image/webp' })
+      const result = await checkIsAnimatedImage(webpFile)
+      expect(result).toBe(true)
+    })
+
+    it('should return false for static WebP files without ANIM chunk', async () => {
+      const bytes = new Uint8Array(20)
+      // RIFF signature
+      bytes[0] = 0x52
+      bytes[1] = 0x49
+      bytes[2] = 0x46
+      bytes[3] = 0x46
+      // WEBP signature
+      bytes[8] = 0x57
+      bytes[9] = 0x45
+      bytes[10] = 0x42
+      bytes[11] = 0x50
+      // No ANIM chunk
+
+      const webpFile = new File([bytes], 'static.webp', { type: 'image/webp' })
+      const result = await checkIsAnimatedImage(webpFile)
+      expect(result).toBe(false)
+    })
+
+    it('should reject when FileReader encounters an error', async () => {
+      const file = new File([], 'test.png', { type: 'image/png' })
+
+      globalThis.FileReader = class {
+        onerror: ((error: ProgressEvent<FileReader>) => void) | null = null
+        onload: ((event: ProgressEvent<FileReader>) => void) | null = null
+
+        readAsArrayBuffer(_blob: Blob) {
+          const errorEvent = new ProgressEvent('error') as ProgressEvent<FileReader>
+          setTimeout(() => {
+            this.onerror?.(errorEvent)
+          }, 0)
+        }
+      } as unknown as typeof FileReader
+
+      await expect(checkIsAnimatedImage(file)).rejects.toBeInstanceOf(ProgressEvent)
+    })
+  })
+})
diff --git a/web/app/components/base/grid-mask/index.spec.tsx b/web/app/components/base/grid-mask/index.spec.tsx
new file mode 100644
index 0000000000..28d806a69b
--- /dev/null
+++ b/web/app/components/base/grid-mask/index.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import GridMask from './index'
+import Style from './style.module.css'
+
+function renderGridMask(props: Partial<React.ComponentProps<typeof GridMask>> = {}, children: React.ReactNode = <span>Child</span>) {
+  const { container } = render(<GridMask {...props}>{children}</GridMask>)
+  const wrapper = container.firstElementChild as HTMLElement
+  const canvasLayer = wrapper.children[0] as HTMLElement
+  const gradientLayer = wrapper.children[1] as HTMLElement
+  const contentLayer = wrapper.children[2] as HTMLElement
+  return { container, wrapper, canvasLayer, gradientLayer, contentLayer }
+}
+
+describe('GridMask', () => {
+  describe('Rendering', () => {
+    it('should render children in the content layer', () => {
+      renderGridMask({}, <button>Run</button>)
+      expect(screen.getByRole('button', { name: 'Run' })).toBeInTheDocument()
+    })
+
+    it('should render correctly without optional className props', () => {
+      const { wrapper, canvasLayer, gradientLayer, contentLayer } = renderGridMask({}, <span>Plain child</span>)
+
+      expect(wrapper).toHaveClass('bg-saas-background')
+      expect(canvasLayer).toHaveClass('absolute')
+      expect(gradientLayer).toHaveClass('absolute')
+      expect(contentLayer).toHaveTextContent('Plain child')
+    })
+
+    it('should render wrapper, canvas, gradient and content layers in order', () => {
+      const { wrapper, canvasLayer, gradientLayer, contentLayer } = renderGridMask({}, <span>Content</span>)
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper.children).toHaveLength(3)
+      expect(canvasLayer).toHaveClass('z-0')
+      expect(gradientLayer).toHaveClass('z-[1]')
+      expect(contentLayer).toHaveClass('z-[2]')
+      expect(contentLayer).toHaveTextContent('Content')
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply wrapperClassName to wrapper element', () => {
+      const { wrapper } = renderGridMask({ wrapperClassName: 'custom-wrapper' }, <span>Child</span>)
+      expect(wrapper).toHaveClass('custom-wrapper')
+      expect(wrapper).toHaveClass('relative')
+    })
+
+    it('should apply canvasClassName and grid background class to canvas layer', () => {
+      const { canvasLayer } = renderGridMask({ canvasClassName: 'custom-canvas' }, <span>Child</span>)
+
+      expect(canvasLayer).toHaveClass('custom-canvas')
+      expect(canvasLayer).toHaveClass(Style.gridBg)
+    })
+
+    it('should apply gradientClassName to gradient layer', () => {
+      const { gradientLayer } = renderGridMask({ gradientClassName: 'custom-gradient' }, <span>Child</span>)
+
+      expect(gradientLayer).toHaveClass('custom-gradient')
+      expect(gradientLayer).toHaveClass('bg-grid-mask-background')
+    })
+  })
+})
diff --git a/web/app/components/base/image-gallery/index.spec.tsx b/web/app/components/base/image-gallery/index.spec.tsx
new file mode 100644
index 0000000000..96967b541c
--- /dev/null
+++ b/web/app/components/base/image-gallery/index.spec.tsx
@@ -0,0 +1,144 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ImageGallery, { ImageGalleryTest } from '.'
+
+const getImages = (container: HTMLElement) => container.querySelectorAll('img')
+
+describe('ImageGallery', () => {
+  describe('Rendering', () => {
+    it('should render a single image', () => {
+      const { container } = render(<ImageGallery srcs={['https://example.com/img1.png']} />)
+
+      const imgs = getImages(container)
+      expect(imgs).toHaveLength(1)
+      expect(imgs[0]).toHaveAttribute('src', 'https://example.com/img1.png')
+    })
+
+    it('should render multiple images', () => {
+      const srcs = ['https://example.com/1.png', 'https://example.com/2.png', 'https://example.com/3.png']
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      expect(getImages(container)).toHaveLength(3)
+    })
+
+    it('should skip falsy src values', () => {
+      const srcs = ['https://example.com/1.png', '', 'https://example.com/3.png']
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      expect(getImages(container)).toHaveLength(2)
+    })
+
+    it('should render no images when srcs is empty', () => {
+      const { container } = render(<ImageGallery srcs={[]} />)
+
+      expect(getImages(container)).toHaveLength(0)
+    })
+
+    it('should not render ImagePreview initially', () => {
+      render(<ImageGallery srcs={['https://example.com/img.png']} />)
+
+      expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Width Styles', () => {
+    it('should apply maxWidth 100% for a single image', () => {
+      const { container } = render(<ImageGallery srcs={['https://example.com/1.png']} />)
+
+      const img = getImages(container)[0]
+      expect(img.style.maxWidth).toBe('100%')
+    })
+
+    it('should apply calc(50% - 4px) width for 2 images', () => {
+      const { container } = render(<ImageGallery srcs={['https://example.com/1.png', 'https://example.com/2.png']} />)
+
+      getImages(container).forEach(img => expect(img.style.width).toBe('calc(50% - 4px)'))
+    })
+
+    it('should apply calc(50% - 4px) width for 4 images', () => {
+      const srcs = Array.from({ length: 4 }, (_, i) => `https://example.com/${i}.png`)
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      getImages(container).forEach(img => expect(img.style.width).toBe('calc(50% - 4px)'))
+    })
+
+    it('should apply calc(33.3333% - 5.3333px) width for 3 images', () => {
+      const srcs = Array.from({ length: 3 }, (_, i) => `https://example.com/${i}.png`)
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      getImages(container).forEach(img => expect(img.style.width).toBe('calc(33.3333% - 5.3333px)'))
+    })
+
+    it('should apply calc(33.3333% - 5.3333px) width for 5 images', () => {
+      const srcs = Array.from({ length: 5 }, (_, i) => `https://example.com/${i}.png`)
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      getImages(container).forEach(img => expect(img.style.width).toBe('calc(33.3333% - 5.3333px)'))
+    })
+
+    it('should apply calc(33.3333% - 5.3333px) width for 6 images', () => {
+      const srcs = Array.from({ length: 6 }, (_, i) => `https://example.com/${i}.png`)
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      getImages(container).forEach(img => expect(img.style.width).toBe('calc(33.3333% - 5.3333px)'))
+    })
+  })
+
+  describe('Image Preview', () => {
+    it('should show ImagePreview when an image is clicked', async () => {
+      const user = userEvent.setup()
+      const { container } = render(<ImageGallery srcs={['https://example.com/img1.png']} />)
+      await user.click(getImages(container)[0])
+
+      const previewContainer = screen.queryByTestId('image-preview-container')
+      expect(previewContainer).toBeInTheDocument()
+      expect(previewContainer?.querySelector('img')).toHaveAttribute('src', 'https://example.com/img1.png')
+    })
+
+    it('should show preview for the specific clicked image', async () => {
+      const user = userEvent.setup()
+      const srcs = ['https://example.com/1.png', 'https://example.com/2.png']
+      const { container } = render(<ImageGallery srcs={srcs} />)
+
+      await user.click(getImages(container)[1])
+
+      const previewContainer = screen.queryByTestId('image-preview-container')
+      expect(previewContainer?.querySelector('img')).toHaveAttribute('src', 'https://example.com/2.png')
+    })
+
+    it('should hide ImagePreview when Escape is pressed', async () => {
+      const user = userEvent.setup()
+      const { container } = render(<ImageGallery srcs={['https://example.com/img1.png']} />)
+
+      await user.click(getImages(container)[0])
+      expect(screen.queryByTestId('image-preview-container')).toBeInTheDocument()
+
+      await user.keyboard('{Escape}')
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should remove image element on error', () => {
+      const { container } = render(<ImageGallery srcs={['https://example.com/broken.png']} />)
+
+      const img = getImages(container)[0]
+      fireEvent.error(img)
+
+      expect(getImages(container)).toHaveLength(0)
+    })
+  })
+})
+
+describe('ImageGalleryTest', () => {
+  it('should render multiple ImageGallery instances', () => {
+    const { container } = render(<ImageGalleryTest />)
+
+    const imgs = getImages(container)
+    // 6 images renders galleries with 1+2+3+4+5+6 = 21 images total
+    expect(imgs.length).toBe(21)
+  })
+})
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index cffbde2755..54a5fabf9c 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -196,6 +196,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       onMouseUp={handleMouseUp}
       style={{ cursor: scale > 1 ? 'move' : 'default' }}
       tabIndex={-1}
+      data-testid="image-preview-container"
     >
       { }
       {/* eslint-disable-next-line next/no-img-element */}
diff --git a/web/app/components/base/param-item/index-slider.spec.tsx b/web/app/components/base/param-item/index-slider.spec.tsx
new file mode 100644
index 0000000000..b0fa28a2d5
--- /dev/null
+++ b/web/app/components/base/param-item/index-slider.spec.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ParamItem from '.'
+
+describe('ParamItem Slider onChange', () => {
+  const defaultProps = {
+    id: 'test_param',
+    name: 'Test Param',
+    enable: true,
+    onChange: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should divide slider value by 100 when max < 5', async () => {
+    const user = userEvent.setup()
+    render(<ParamItem {...defaultProps} value={0.5} min={0} max={1} />)
+    const slider = screen.getByRole('slider')
+
+    await user.click(slider)
+    await user.keyboard('{ArrowRight}')
+
+    // max=1 < 5, so slider value change (50->51) becomes 0.51
+    expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 0.51)
+  })
+
+  it('should not divide slider value when max >= 5', async () => {
+    const user = userEvent.setup()
+    render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
+    const slider = screen.getByRole('slider')
+
+    await user.click(slider)
+    await user.keyboard('{ArrowRight}')
+
+    // max=10 >= 5, so value remains raw (5->6)
+    expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 6)
+  })
+})
diff --git a/web/app/components/base/param-item/index.spec.tsx b/web/app/components/base/param-item/index.spec.tsx
new file mode 100644
index 0000000000..45e0c2a5b3
--- /dev/null
+++ b/web/app/components/base/param-item/index.spec.tsx
@@ -0,0 +1,179 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import ParamItem from '.'
+
+describe('ParamItem', () => {
+  const defaultProps = {
+    id: 'test_param',
+    name: 'Test Param',
+    value: 0.5,
+    enable: true,
+    max: 1,
+    onChange: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the parameter name', () => {
+      render(<ParamItem {...defaultProps} />)
+
+      expect(screen.getByText('Test Param')).toBeInTheDocument()
+    })
+
+    it('should render a tooltip trigger by default', () => {
+      const { container } = render(<ParamItem {...defaultProps} tip="Some tip text" />)
+
+      // Tooltip trigger icon should be rendered (the data-state div)
+      expect(container.querySelector('[data-state]')).toBeInTheDocument()
+    })
+
+    it('should not render tooltip trigger when noTooltip is true', () => {
+      const { container } = render(<ParamItem {...defaultProps} noTooltip tip="Hidden tip" />)
+
+      // No tooltip trigger icon should be rendered
+      expect(container.querySelector('[data-state]')).not.toBeInTheDocument()
+    })
+
+    it('should render a switch when hasSwitch is true', () => {
+      render(<ParamItem {...defaultProps} hasSwitch />)
+
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should not render a switch by default', () => {
+      render(<ParamItem {...defaultProps} />)
+
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+
+    it('should render InputNumber and Slider', () => {
+      render(<ParamItem {...defaultProps} />)
+
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+      expect(screen.getByRole('slider')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<ParamItem {...defaultProps} className="my-custom-class" />)
+
+      expect(container.firstChild).toHaveClass('my-custom-class')
+    })
+
+    it('should disable InputNumber when enable is false', () => {
+      render(<ParamItem {...defaultProps} enable={false} />)
+
+      expect(screen.getByRole('spinbutton')).toBeDisabled()
+    })
+
+    it('should disable Slider when enable is false', () => {
+      render(<ParamItem {...defaultProps} enable={false} />)
+
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('should set switch value based on enable prop', () => {
+      render(<ParamItem {...defaultProps} hasSwitch enable={true} />)
+
+      const toggle = screen.getByRole('switch')
+      expect(toggle).toHaveAttribute('aria-checked', 'true')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onChange with id and value when InputNumber changes', async () => {
+      const user = userEvent.setup()
+      const StatefulParamItem = () => {
+        const [value, setValue] = useState(defaultProps.value)
+
+        return (
+          <ParamItem
+            {...defaultProps}
+            value={value}
+            onChange={(key, nextValue) => {
+              defaultProps.onChange(key, nextValue)
+              setValue(nextValue)
+            }}
+          />
+        )
+      }
+
+      render(<StatefulParamItem />)
+      const input = screen.getByRole('spinbutton')
+
+      await user.clear(input)
+      await user.type(input, '0.8')
+
+      expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 0.8)
+    })
+
+    it('should pass scaled value to slider when max < 5', () => {
+      render(<ParamItem {...defaultProps} value={0.5} />)
+      const slider = screen.getByRole('slider')
+
+      // When max < 5, slider value = value * 100 = 50
+      expect(slider).toHaveAttribute('aria-valuenow', '50')
+    })
+
+    it('should pass raw value to slider when max >= 5', () => {
+      render(<ParamItem {...defaultProps} value={5} max={10} />)
+      const slider = screen.getByRole('slider')
+
+      // When max >= 5, slider value = value = 5
+      expect(slider).toHaveAttribute('aria-valuenow', '5')
+    })
+
+    it('should call onSwitchChange with id and value when switch is toggled', async () => {
+      const user = userEvent.setup()
+      const onSwitchChange = vi.fn()
+      render(<ParamItem {...defaultProps} hasSwitch onSwitchChange={onSwitchChange} />)
+
+      await user.click(screen.getByRole('switch'))
+
+      expect(onSwitchChange).toHaveBeenCalledWith('test_param', expect.any(Boolean))
+    })
+
+    it('should call onChange with id when increment button is clicked', async () => {
+      const user = userEvent.setup()
+      render(<ParamItem {...defaultProps} value={0.5} step={0.1} />)
+      const incrementBtn = screen.getByRole('button', { name: /increment/i })
+
+      await user.click(incrementBtn)
+
+      // step=0.1, so 0.5 + 0.1 = 0.6, clamped to [0,1] → 0.6
+      expect(defaultProps.onChange).toHaveBeenCalledWith('test_param', 0.6)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should correctly scale slider value when max < 5', () => {
+      render(<ParamItem {...defaultProps} value={0.5} min={0} />)
+
+      // Slider should get value * 100 = 50, min * 100 = 0, max * 100 = 100
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveAttribute('aria-valuemax', '100')
+    })
+
+    it('should not scale slider value when max >= 5', () => {
+      render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveAttribute('aria-valuemax', '10')
+    })
+
+    it('should use default step of 0.1 and min of 0 when not provided', () => {
+      render(<ParamItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      // Component renders without error with default step/min
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+      expect(input).toHaveAttribute('step', '0.1')
+      expect(input).toHaveAttribute('min', '0')
+    })
+  })
+})
diff --git a/web/app/components/base/param-item/score-threshold-item.spec.tsx b/web/app/components/base/param-item/score-threshold-item.spec.tsx
new file mode 100644
index 0000000000..ce0a396249
--- /dev/null
+++ b/web/app/components/base/param-item/score-threshold-item.spec.tsx
@@ -0,0 +1,145 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import ScoreThresholdItem from './score-threshold-item'
+
+describe('ScoreThresholdItem', () => {
+  const defaultProps = {
+    value: 0.7,
+    enable: true,
+    onChange: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the translated parameter name', () => {
+      render(<ScoreThresholdItem {...defaultProps} />)
+
+      expect(screen.getByText('appDebug.datasetConfig.score_threshold')).toBeInTheDocument()
+    })
+
+    it('should render tooltip trigger', () => {
+      const { container } = render(<ScoreThresholdItem {...defaultProps} />)
+
+      // Tooltip trigger icon should be rendered
+      expect(container.querySelector('[data-state]')).toBeInTheDocument()
+    })
+
+    it('should render InputNumber and Slider', () => {
+      render(<ScoreThresholdItem {...defaultProps} />)
+
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+      expect(screen.getByRole('slider')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<ScoreThresholdItem {...defaultProps} className="custom-cls" />)
+
+      expect(container.firstChild).toHaveClass('custom-cls')
+    })
+
+    it('should render switch when hasSwitch is true', () => {
+      render(<ScoreThresholdItem {...defaultProps} hasSwitch />)
+
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should forward onSwitchChange to ParamItem', async () => {
+      const onSwitchChange = vi.fn()
+      render(<ScoreThresholdItem {...defaultProps} hasSwitch onSwitchChange={onSwitchChange} />)
+
+      // Verify the switch rendered (onSwitchChange forwarded internally)
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+      await userEvent.click(screen.getByRole('switch'))
+      expect(onSwitchChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should disable controls when enable is false', () => {
+      render(<ScoreThresholdItem {...defaultProps} enable={false} />)
+
+      expect(screen.getByRole('spinbutton')).toBeDisabled()
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+    })
+  })
+
+  describe('Value Clamping', () => {
+    it('should clamp values to minimum of 0', () => {
+      render(<ScoreThresholdItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('min', '0')
+    })
+
+    it('should clamp values to maximum of 1', () => {
+      render(<ScoreThresholdItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('max', '1')
+    })
+
+    it('should use step of 0.01', () => {
+      render(<ScoreThresholdItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('step', '0.01')
+    })
+
+    it('should call onChange with rounded value when input changes', async () => {
+      const user = userEvent.setup()
+      const StatefulScoreThresholdItem = () => {
+        const [value, setValue] = useState(defaultProps.value)
+
+        return (
+          <ScoreThresholdItem
+            {...defaultProps}
+            value={value}
+            onChange={(key, nextValue) => {
+              defaultProps.onChange(key, nextValue)
+              setValue(nextValue)
+            }}
+          />
+        )
+      }
+
+      render(<StatefulScoreThresholdItem />)
+      const input = screen.getByRole('spinbutton')
+
+      await user.clear(input)
+      await user.type(input, '0.55')
+
+      expect(defaultProps.onChange).toHaveBeenLastCalledWith('score_threshold', 0.55)
+    })
+
+    it('should call onChange with clamped value via increment button', async () => {
+      const user = userEvent.setup()
+      render(<ScoreThresholdItem {...defaultProps} value={0.5} />)
+      const incrementBtn = screen.getByRole('button', { name: /increment/i })
+
+      await user.click(incrementBtn)
+
+      // step=0.01, so 0.5 + 0.01 = 0.51, clamped to [0,1] → 0.51
+      expect(defaultProps.onChange).toHaveBeenCalledWith('score_threshold', 0.51)
+    })
+
+    it('should call onChange with clamped value via decrement button', async () => {
+      const user = userEvent.setup()
+      render(<ScoreThresholdItem {...defaultProps} value={0.5} />)
+      const decrementBtn = screen.getByRole('button', { name: /decrement/i })
+
+      await user.click(decrementBtn)
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('score_threshold', 0.49)
+    })
+
+    it('should clamp to max=1 when value exceeds maximum', () => {
+      render(<ScoreThresholdItem {...defaultProps} value={1.5} />)
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveValue(1)
+    })
+  })
+})
diff --git a/web/app/components/base/param-item/score-threshold-item.tsx b/web/app/components/base/param-item/score-threshold-item.tsx
index 91b1cf6b79..c6c73713d7 100644
--- a/web/app/components/base/param-item/score-threshold-item.tsx
+++ b/web/app/components/base/param-item/score-threshold-item.tsx
@@ -35,6 +35,11 @@ const ScoreThresholdItem: FC<Props> = ({
     notOutRangeValue = Math.min(VALUE_LIMIT.max, notOutRangeValue)
     onChange(key, notOutRangeValue)
   }
+  const safeValue = Math.min(
+    VALUE_LIMIT.max,
+    Math.max(VALUE_LIMIT.min, Number.parseFloat(value.toFixed(2))),
+  )
+
   return (
     <ParamItem
       className={className}
@@ -42,7 +47,7 @@ const ScoreThresholdItem: FC<Props> = ({
       name={t('datasetConfig.score_threshold', { ns: 'appDebug' })}
       tip={t('datasetConfig.score_thresholdTip', { ns: 'appDebug' }) as string}
       {...VALUE_LIMIT}
-      value={value}
+      value={safeValue}
       enable={enable}
       onChange={handleParamChange}
       hasSwitch={hasSwitch}
diff --git a/web/app/components/base/param-item/top-k-item.spec.tsx b/web/app/components/base/param-item/top-k-item.spec.tsx
new file mode 100644
index 0000000000..2031e4a83e
--- /dev/null
+++ b/web/app/components/base/param-item/top-k-item.spec.tsx
@@ -0,0 +1,130 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import TopKItem from './top-k-item'
+
+vi.mock('@/env', () => ({
+  env: {
+    NEXT_PUBLIC_TOP_K_MAX_VALUE: 10,
+  },
+}))
+
+describe('TopKItem', () => {
+  const defaultProps = {
+    value: 2,
+    enable: true,
+    onChange: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the translated parameter name', () => {
+      render(<TopKItem {...defaultProps} />)
+
+      expect(screen.getByText('appDebug.datasetConfig.top_k')).toBeInTheDocument()
+    })
+
+    it('should render tooltip trigger', () => {
+      const { container } = render(<TopKItem {...defaultProps} />)
+
+      // Tooltip trigger icon should be rendered
+      expect(container.querySelector('[data-state]')).toBeInTheDocument()
+    })
+
+    it('should render InputNumber and Slider', () => {
+      render(<TopKItem {...defaultProps} />)
+
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+      expect(screen.getByRole('slider')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<TopKItem {...defaultProps} className="custom-cls" />)
+
+      expect(container.firstChild).toHaveClass('custom-cls')
+    })
+
+    it('should disable controls when enable is false', () => {
+      render(<TopKItem {...defaultProps} enable={false} />)
+
+      expect(screen.getByRole('spinbutton')).toBeDisabled()
+      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+    })
+  })
+
+  describe('Value Limits', () => {
+    it('should use step of 1', () => {
+      render(<TopKItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('step', '1')
+    })
+
+    it('should use minimum of 1', () => {
+      render(<TopKItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('min', '1')
+    })
+
+    it('should use maximum from env (10)', () => {
+      render(<TopKItem {...defaultProps} />)
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveAttribute('max', '10')
+    })
+
+    it('should render slider with max >= 5 so no scaling is applied', () => {
+      render(<TopKItem {...defaultProps} />)
+      const slider = screen.getByRole('slider')
+
+      // max=10 >= 5 so slider shows raw values
+      expect(slider).toHaveAttribute('aria-valuemax', '10')
+    })
+
+    it('should not render a switch (no hasSwitch prop)', () => {
+      render(<TopKItem {...defaultProps} />)
+
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onChange with clamped integer value via increment button', async () => {
+      const user = userEvent.setup()
+      render(<TopKItem {...defaultProps} value={5} />)
+      const incrementBtn = screen.getByRole('button', { name: /increment/i })
+
+      await user.click(incrementBtn)
+
+      // step=1, so 5 + 1 = 6, clamped to [1,10] → 6
+      expect(defaultProps.onChange).toHaveBeenCalledWith('top_k', 6)
+    })
+
+    it('should call onChange with clamped integer value via decrement button', async () => {
+      const user = userEvent.setup()
+      render(<TopKItem {...defaultProps} value={5} />)
+      const decrementBtn = screen.getByRole('button', { name: /decrement/i })
+
+      await user.click(decrementBtn)
+
+      // step=1, so 5 - 1 = 4, clamped to [1,10] → 4
+      expect(defaultProps.onChange).toHaveBeenCalledWith('top_k', 4)
+    })
+
+    it('should call onChange with integer value when slider changes', async () => {
+      const user = userEvent.setup()
+      render(<TopKItem {...defaultProps} value={2} />)
+      const slider = screen.getByRole('slider')
+
+      await user.click(slider)
+      await user.keyboard('{ArrowRight}')
+
+      expect(defaultProps.onChange).toHaveBeenLastCalledWith('top_k', 3)
+    })
+  })
+})
diff --git a/web/app/components/base/tag-input/index.spec.tsx b/web/app/components/base/tag-input/index.spec.tsx
new file mode 100644
index 0000000000..077f938570
--- /dev/null
+++ b/web/app/components/base/tag-input/index.spec.tsx
@@ -0,0 +1,187 @@
+import type { ComponentProps } from 'react'
+import { createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import TagInput from './index'
+
+const mockNotify = vi.fn()
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+type TagInputProps = ComponentProps<typeof TagInput>
+
+const renderTagInput = (props: Partial<TagInputProps> = {}) => {
+  const onChange = vi.fn<(items: string[]) => void>()
+  const items = props.items ?? []
+
+  render(<TagInput items={items} onChange={onChange} {...props} />)
+
+  return { onChange }
+}
+
+describe('TagInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render existing tags and default placeholder', () => {
+      renderTagInput({ items: ['alpha', 'beta'] })
+
+      expect(screen.getByText('alpha')).toBeInTheDocument()
+      expect(screen.getByText('beta')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('datasetDocuments.segment.addKeyWord')).toBeInTheDocument()
+    })
+
+    it('should render special mode placeholder when confirm key is Tab', () => {
+      renderTagInput({ customizedConfirmKey: 'Tab' })
+
+      expect(screen.getByPlaceholderText('common.model.params.stop_sequencesPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should render custom placeholder when placeholder prop is provided', () => {
+      renderTagInput({ placeholder: 'Custom placeholder' })
+
+      expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument()
+    })
+
+    it('should hide input when add is disabled', () => {
+      renderTagInput({ disableAdd: true })
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should hide remove controls when remove is disabled', () => {
+      renderTagInput({ items: ['alpha'], disableRemove: true })
+
+      expect(screen.queryByTestId('remove-tag')).not.toBeInTheDocument()
+    })
+
+    it('should apply focused style in special mode when input is focused', async () => {
+      renderTagInput({ customizedConfirmKey: 'Tab' })
+      const input = screen.getByRole('textbox')
+      const inputContainer = input.parentElement
+
+      expect(inputContainer).toHaveClass('border-transparent')
+
+      await userEvent.click(input)
+
+      expect(inputContainer).toHaveClass('border-dashed')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should remove item when remove control is clicked', async () => {
+      const { onChange } = renderTagInput({ items: ['alpha', 'beta'] })
+
+      const removeControl = screen.getAllByTestId('remove-tag')[0]
+
+      await userEvent.click(removeControl)
+
+      expect(onChange).toHaveBeenCalledWith(['beta'])
+    })
+
+    it('should add trimmed tag on Enter and clear input', async () => {
+      const { onChange } = renderTagInput()
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, '  new-tag  ')
+      await userEvent.type(input, '{Enter}')
+
+      expect(onChange).toHaveBeenCalledWith(['new-tag'])
+      await waitFor(() => {
+        expect(input).toHaveValue('')
+      })
+    })
+
+    it('should add tag on blur when input has valid value', async () => {
+      const { onChange } = renderTagInput()
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, 'blur-tag')
+      await userEvent.click(document.body)
+
+      expect(onChange).toHaveBeenCalledWith(['blur-tag'])
+    })
+
+    it('should append return marker on Enter and confirm on Tab in special mode', async () => {
+      const user = userEvent.setup()
+      const { onChange } = renderTagInput({ customizedConfirmKey: 'Tab' })
+      const input = screen.getByRole('textbox')
+
+      // Type normally
+      await user.type(input, 'stop')
+      await user.keyboard('{Enter}')
+
+      expect(input).toHaveValue('stop↵')
+      expect(onChange).not.toHaveBeenCalled()
+
+      // Low-level test for preventDefault
+      const tabEvent = createEvent.keyDown(input, { key: 'Tab' })
+      tabEvent.preventDefault = vi.fn()
+
+      fireEvent(input, tabEvent)
+
+      expect(tabEvent.preventDefault).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(['stop↵'])
+    })
+  })
+
+  describe('Validation', () => {
+    it('should notify duplicate error when tag already exists', async () => {
+      const { onChange } = renderTagInput({ items: ['dup-tag'] })
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, 'dup-tag')
+      await userEvent.keyboard('{Enter}')
+
+      expect(onChange).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'datasetDocuments.segment.keywordDuplicate',
+      })
+    })
+
+    it('should notify length error when tag is longer than 20 chars', async () => {
+      const { onChange } = renderTagInput()
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, 'a'.repeat(21))
+      await userEvent.keyboard('{Enter}')
+
+      expect(onChange).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'datasetDocuments.segment.keywordError',
+      })
+    })
+
+    it('should notify required error when value is empty and required is true', async () => {
+      const { onChange } = renderTagInput({ required: true })
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, '   ')
+      await userEvent.click(document.body)
+
+      expect(onChange).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'datasetDocuments.segment.keywordEmpty',
+      })
+    })
+
+    it('should ignore empty value when required is false', async () => {
+      const { onChange } = renderTagInput({ required: false })
+      const input = screen.getByRole('textbox')
+
+      await userEvent.type(input, '   ')
+      await userEvent.click(document.body)
+
+      expect(onChange).not.toHaveBeenCalled()
+      expect(mockNotify).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index e291842a2a..1c49b026fb 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -1,5 +1,4 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
-import { RiAddLine, RiCloseLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
@@ -90,13 +89,13 @@ const TagInput: FC<TagInputProps> = ({
         (items || []).map((item, index) => (
           <div
             key={item}
-            className={cn('system-xs-regular mr-1 mt-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pl-1.5 pr-1 text-text-secondary')}
+            className={cn('mr-1 mt-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pl-1.5 pr-1 text-text-secondary system-xs-regular')}
           >
             {item}
             {
               !disableRemove && (
                 <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={() => handleRemove(index)}>
-                  <RiCloseLine className="ml-0.5 h-3.5 w-3.5 text-text-tertiary" />
+                  <span className="i-ri-close-line ml-0.5 h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
                 </div>
               )
             }
@@ -106,7 +105,7 @@ const TagInput: FC<TagInputProps> = ({
       {
         !disableAdd && (
           <div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'rounded-md border border-dashed border-divider-deep px-1.5' : '')}>
-            {!isSpecialMode && !focused && <RiAddLine className="h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
+            {!isSpecialMode && !focused && <span className="i-ri-add-line h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
             <AutosizeInput
               inputClassName={cn(
                 'appearance-none text-text-primary caret-[#295EFF] outline-none placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary',
@@ -116,7 +115,7 @@ const TagInput: FC<TagInputProps> = ({
               className={cn(
                 !isInWorkflow && 'max-w-[300px]',
                 isInWorkflow && 'max-w-[146px]',
-                'system-xs-regular overflow-hidden rounded-md py-1',
+                'overflow-hidden rounded-md py-1 system-xs-regular',
                 isSpecialMode && 'border border-transparent px-1.5',
                 focused && isSpecialMode && 'border-dashed border-divider-deep',
               )}
diff --git a/web/app/components/base/text-generation/hooks.spec.ts b/web/app/components/base/text-generation/hooks.spec.ts
new file mode 100644
index 0000000000..f25dd3b945
--- /dev/null
+++ b/web/app/components/base/text-generation/hooks.spec.ts
@@ -0,0 +1,167 @@
+import type { IOtherOptions } from '@/service/base'
+import { act, renderHook } from '@testing-library/react'
+import { useTextGeneration } from './hooks'
+
+const mockNotify = vi.fn()
+const mockSsePost = vi.fn<(url: string, fetchOptions: { body: Record<string, unknown> }, otherOptions: IOtherOptions) => void>()
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+  }),
+}))
+
+vi.mock('@/service/base', () => ({
+  ssePost: (...args: Parameters<typeof mockSsePost>) => mockSsePost(...args),
+}))
+
+const getLatestStreamOptions = (): IOtherOptions => {
+  const latestCall = mockSsePost.mock.calls[mockSsePost.mock.calls.length - 1]
+  if (!latestCall)
+    throw new Error('Expected ssePost to be called at least once')
+  return latestCall[2]
+}
+
+describe('useTextGeneration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should return expected initial state and handlers', () => {
+      const { result } = renderHook(() => useTextGeneration())
+
+      expect(result.current.completion).toBe('')
+      expect(result.current.isResponding).toBe(false)
+      expect(result.current.messageId).toBeNull()
+      expect(result.current.setIsResponding).toBeInstanceOf(Function)
+      expect(result.current.handleSend).toBeInstanceOf(Function)
+    })
+  })
+
+  describe('Send Flow', () => {
+    it('should start streaming request and return true when not responding', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+      let sendResult: boolean | undefined
+
+      await act(async () => {
+        sendResult = await result.current.handleSend('/console/api', { query: 'hello' })
+      })
+
+      expect(sendResult).toBe(true)
+      expect(result.current.isResponding).toBe(true)
+      expect(result.current.completion).toBe('')
+      expect(result.current.messageId).toBe('')
+      expect(mockSsePost).toHaveBeenCalledWith(
+        '/console/api',
+        {
+          body: {
+            response_mode: 'streaming',
+            query: 'hello',
+          },
+        },
+        expect.objectContaining({
+          onData: expect.any(Function),
+          onMessageReplace: expect.any(Function),
+          onCompleted: expect.any(Function),
+          onError: expect.any(Function),
+        }),
+      )
+    })
+
+    it('should append chunks and update messageId when onData is triggered', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+
+      await act(async () => {
+        await result.current.handleSend('/console/api', { query: 'chunk' })
+      })
+
+      const streamOptions = getLatestStreamOptions()
+      act(() => {
+        streamOptions.onData?.('Hello', true, { messageId: 'message-1' })
+      })
+
+      expect(result.current.completion).toBe('Hello')
+      expect(result.current.messageId).toBe('message-1')
+
+      act(() => {
+        streamOptions.onData?.(' world', false, { messageId: 'message-1' })
+      })
+
+      expect(result.current.completion).toBe('Hello world')
+      expect(result.current.messageId).toBe('message-1')
+    })
+
+    it('should replace completion when onMessageReplace is triggered', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+
+      await act(async () => {
+        await result.current.handleSend('/console/api', { query: 'replace' })
+      })
+
+      const streamOptions = getLatestStreamOptions()
+      act(() => {
+        streamOptions.onData?.('Old content', true, { messageId: 'message-2' })
+      })
+
+      const replaceMessage = { answer: 'New content' } as Parameters<NonNullable<IOtherOptions['onMessageReplace']>>[0]
+      act(() => {
+        streamOptions.onMessageReplace?.(replaceMessage)
+      })
+
+      expect(result.current.completion).toBe('New content')
+    })
+
+    it('should set responding to false when stream completes', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+
+      await act(async () => {
+        await result.current.handleSend('/console/api', { query: 'done' })
+      })
+      expect(result.current.isResponding).toBe(true)
+
+      const streamOptions = getLatestStreamOptions()
+      act(() => {
+        streamOptions.onCompleted?.()
+      })
+
+      expect(result.current.isResponding).toBe(false)
+    })
+
+    it('should set responding to false when stream errors', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+
+      await act(async () => {
+        await result.current.handleSend('/console/api', { query: 'error' })
+      })
+      expect(result.current.isResponding).toBe(true)
+
+      const streamOptions = getLatestStreamOptions()
+      act(() => {
+        streamOptions.onError?.('something went wrong')
+      })
+
+      expect(result.current.isResponding).toBe(false)
+    })
+
+    it('should notify and return false when called while already responding', async () => {
+      const { result } = renderHook(() => useTextGeneration())
+      let sendResult: boolean | undefined
+
+      act(() => {
+        result.current.setIsResponding(true)
+      })
+
+      await act(async () => {
+        sendResult = await result.current.handleSend('/console/api', { query: 'wait' })
+      })
+
+      expect(sendResult).toBe(false)
+      expect(mockSsePost).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'info',
+        message: 'appDebug.errorMessage.waitForResponse',
+      })
+    })
+  })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 9bb6b15490..d142f1c556 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -2607,11 +2607,6 @@
       "count": 1
     }
   },
-  "app/components/base/tag-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/tag-management/index.tsx": {
     "tailwindcss/no-unnecessary-whitespace": {
       "count": 1

From 00935fe52619e53970ab6cf483eaa67662b15a3b Mon Sep 17 00:00:00 2001
From: Saumya Talwani <68903741+saumyatalwani@users.noreply.github.com>
Date: Tue, 24 Feb 2026 18:59:28 +0530
Subject: [PATCH 25/26] test: add tests for base > image-uploader (#32416)

---
 .../image-uploader/audio-preview.spec.tsx     | 114 +++
 .../base/image-uploader/audio-preview.tsx     |   8 +-
 .../chat-image-uploader.spec.tsx              | 244 ++++++
 .../image-uploader/chat-image-uploader.tsx    |   8 +-
 .../base/image-uploader/hooks.spec.ts         | 774 ++++++++++++++++++
 .../image-uploader/image-link-input.spec.tsx  | 184 +++++
 .../base/image-uploader/image-link-input.tsx  |   1 +
 .../base/image-uploader/image-list.spec.tsx   | 291 +++++++
 .../base/image-uploader/image-list.tsx        |  19 +-
 .../image-uploader/image-preview.spec.tsx     | 414 ++++++++++
 .../base/image-uploader/image-preview.tsx     |  14 +-
 .../text-generation-image-uploader.spec.tsx   | 223 +++++
 .../text-generation-image-uploader.tsx        |   2 +-
 .../base/image-uploader/uploader.spec.tsx     | 154 ++++
 .../base/image-uploader/uploader.tsx          |   1 +
 .../base/image-uploader/utils.spec.ts         | 134 +++
 .../image-uploader/video-preview.spec.tsx     | 117 +++
 .../base/image-uploader/video-preview.tsx     |   7 +-
 18 files changed, 2676 insertions(+), 33 deletions(-)
 create mode 100644 web/app/components/base/image-uploader/audio-preview.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/chat-image-uploader.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/hooks.spec.ts
 create mode 100644 web/app/components/base/image-uploader/image-link-input.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/image-list.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/image-preview.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/text-generation-image-uploader.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/uploader.spec.tsx
 create mode 100644 web/app/components/base/image-uploader/utils.spec.ts
 create mode 100644 web/app/components/base/image-uploader/video-preview.spec.tsx

diff --git a/web/app/components/base/image-uploader/audio-preview.spec.tsx b/web/app/components/base/image-uploader/audio-preview.spec.tsx
new file mode 100644
index 0000000000..72cfa7621d
--- /dev/null
+++ b/web/app/components/base/image-uploader/audio-preview.spec.tsx
@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AudioPreview from './audio-preview'
+
+describe('AudioPreview', () => {
+  const defaultProps = {
+    url: 'https://example.com/audio.mp3',
+    title: 'Test Audio',
+    onCancel: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AudioPreview {...defaultProps} />)
+      expect(screen.getByTestId('audio-element')).toBeInTheDocument()
+    })
+
+    it('should render audio element with controls', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const audio = screen.getByTestId('audio-element')
+      expect(audio.tagName).toBe('AUDIO')
+      expect(audio).toHaveAttribute('controls')
+    })
+
+    it('should render source element with correct src', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const source = screen.getByTestId('audio-element').querySelector('source')
+      expect(source).toHaveAttribute('src', 'https://example.com/audio.mp3')
+      expect(source).toHaveAttribute('type', 'audio/mpeg')
+    })
+
+    it('should render close button', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const closeBtn = screen.getByTestId('close-preview')
+      expect(closeBtn).toBeInTheDocument()
+    })
+
+    it('should render via portal into document.body', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const overlay = screen.getByTestId('audio-preview-overlay')
+      expect(overlay).toBeInTheDocument()
+      expect(overlay.parentElement).toBe(document.body)
+    })
+  })
+
+  describe('Props', () => {
+    it('should set audio title from title prop', () => {
+      render(<AudioPreview {...defaultProps} title="My Song" />)
+      expect(screen.getByTitle('My Song')).toBeInTheDocument()
+    })
+
+    it('should set audio source from url prop', () => {
+      render(<AudioPreview {...defaultProps} url="https://example.com/song.mp3" />)
+      const source = screen.getByTestId('audio-element').querySelector('source')
+      expect(source).toHaveAttribute('src', 'https://example.com/song.mp3')
+    })
+
+    it('should set autoPlay to false', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const audio = screen.getByTestId('audio-element') as HTMLAudioElement
+      expect(audio.autoplay).toBe(false)
+    })
+
+    it('should set preload to metadata', () => {
+      render(<AudioPreview {...defaultProps} />)
+      const audio = screen.getByTestId('audio-element')
+      expect(audio).toHaveAttribute('preload', 'metadata')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCancel when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const onCancel = vi.fn()
+      render(<AudioPreview {...defaultProps} onCancel={onCancel} />)
+
+      const closeBtn = screen.getByTestId('close-preview')
+      await user.click(closeBtn)
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onCancel when overlay background is clicked', async () => {
+      const user = userEvent.setup()
+      const onCancel = vi.fn()
+      render(<AudioPreview {...defaultProps} onCancel={onCancel} />)
+
+      const overlay = screen.getByTestId('audio-preview-overlay')
+      await user.click(overlay)
+
+      // Clicking the overlay backdrop should not trigger onCancel
+      expect(onCancel).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty url', () => {
+      render(<AudioPreview {...defaultProps} url="" />)
+      const source = screen.getByTestId('audio-element').querySelector('source')
+      expect(source).toBeInTheDocument()
+    })
+
+    it('should handle empty title', () => {
+      render(<AudioPreview {...defaultProps} title="" />)
+      const audio = screen.getByTestId('audio-element')
+      expect(audio).toBeInTheDocument()
+      expect(audio).toHaveAttribute('title', '')
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
index ce0ea5ca0c..0126502ed7 100644
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ b/web/app/components/base/image-uploader/audio-preview.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import { createPortal } from 'react-dom'
 
 type AudioPreviewProps = {
@@ -13,9 +12,9 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   onCancel,
 }) => {
   return createPortal(
-    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()}>
+    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()} data-testid="audio-preview-overlay">
       <div>
-        <audio controls title={title} autoPlay={false} preload="metadata">
+        <audio controls title={title} autoPlay={false} preload="metadata" data-testid="audio-element">
           <source
             type="audio/mpeg"
             src={url}
@@ -26,8 +25,9 @@ const AudioPreview: FC<AudioPreviewProps> = ({
       <div
         className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
+        data-testid="close-preview"
       >
-        <RiCloseLine className="h-4 w-4 text-gray-500" />
+        <span className="i-ri-close-line h-4 w-4 text-gray-500" />
       </div>
     </div>,
     document.body,
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.spec.tsx b/web/app/components/base/image-uploader/chat-image-uploader.spec.tsx
new file mode 100644
index 0000000000..80ef06410d
--- /dev/null
+++ b/web/app/components/base/image-uploader/chat-image-uploader.spec.tsx
@@ -0,0 +1,244 @@
+import type { useLocalFileUploader } from './hooks'
+import type { ImageFile, VisionSettings } from '@/types/app'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Resolution, TransferMethod } from '@/types/app'
+import ChatImageUploader from './chat-image-uploader'
+
+type LocalUploaderArgs = Parameters<typeof useLocalFileUploader>[0]
+
+const mocks = vi.hoisted(() => ({
+  hookArgs: undefined as LocalUploaderArgs | undefined,
+  handleLocalFileUpload: vi.fn<(file: File) => void>(),
+}))
+
+vi.mock('./hooks', () => ({
+  useLocalFileUploader: (args: LocalUploaderArgs) => {
+    mocks.hookArgs = args
+    return {
+      disabled: args.disabled ?? false,
+      handleLocalFileUpload: mocks.handleLocalFileUpload,
+    }
+  },
+}))
+
+const createSettings = (overrides: Partial<VisionSettings> = {}): VisionSettings => ({
+  enabled: true,
+  number_limits: 5,
+  detail: Resolution.high,
+  transfer_methods: [TransferMethod.local_file],
+  image_file_size_limit: 10,
+  ...overrides,
+})
+
+const queryFileInput = () => {
+  return screen.queryByTestId('local-file-input') as HTMLInputElement | null
+}
+
+const getFileInput = () => {
+  const input = queryFileInput()
+  if (!input)
+    throw new Error('Expected file input to exist')
+  return input
+}
+
+describe('ChatImageUploader', () => {
+  const defaultOnUpload = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.hookArgs = undefined
+    mocks.handleLocalFileUpload.mockImplementation((file) => {
+      mocks.hookArgs?.onUpload({
+        type: TransferMethod.local_file,
+        _id: 'local-upload-id',
+        fileId: '',
+        progress: 0,
+        url: 'data:image/png;base64,mock',
+        file,
+      } as ImageFile)
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render UploadOnlyFromLocal when only local_file transfer method', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(queryFileInput()).toBeInTheDocument()
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+
+    it('should render UploaderButton when remote_url is a transfer method', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render UploaderButton when both transfer methods are present', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should pass limit from image_file_size_limit to uploader hook', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+        image_file_size_limit: 20,
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(mocks.hookArgs?.limit).toBe(20)
+    })
+
+    it('should convert string image_file_size_limit to number', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+        image_file_size_limit: '15',
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(mocks.hookArgs?.limit).toBe(15)
+    })
+
+    it('should pass disabled prop in local-only mode', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
+
+      expect(mocks.hookArgs?.disabled).toBe(true)
+      expect(getFileInput()).toBeDisabled()
+    })
+
+    it('should pass disabled prop in button mode', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
+
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onUpload when a local file is uploaded', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={onUpload} />)
+
+      const input = getFileInput()
+      const file = new File(['hello'], 'demo.png', { type: 'image/png' })
+      await user.upload(input, file)
+
+      expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(file)
+      expect(onUpload).toHaveBeenCalledWith(expect.objectContaining({
+        type: TransferMethod.local_file,
+      }))
+    })
+
+    it('should open popover when uploader trigger is clicked', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should call onUpload when a remote image link is submitted', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={onUpload} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.type(screen.getByTestId('image-link-input'), 'https://example.com/image.png')
+      await user.click(screen.getByRole('button', { name: 'common.operation.ok' }))
+
+      expect(onUpload).toHaveBeenCalledWith(expect.objectContaining({
+        type: TransferMethod.remote_url,
+        url: 'https://example.com/image.png',
+        progress: 0,
+      }))
+    })
+
+    it('should not open popover when uploader trigger is disabled', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should show OR separator and local uploader when both methods are available', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(screen.getByText(/OR/i)).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(queryFileInput()).toBeInTheDocument()
+    })
+
+    it('should not show OR separator or local uploader when only remote_url method', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.queryByText(/OR/i)).not.toBeInTheDocument()
+      expect(queryFileInput()).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render UploaderButton for all transfer method', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.all],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should render UploaderButton when transfer_methods is empty', () => {
+      const settings = createSettings({
+        transfer_methods: [],
+      })
+      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+})
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 44a9d5ce4f..d668247c05 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -2,8 +2,6 @@ import type { FC } from 'react'
 import type { ImageFile, VisionSettings } from '@/types/app'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Upload03 } from '@/app/components/base/icons/src/vender/line/general'
-import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -33,7 +31,7 @@ const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
             ${hovering && 'bg-gray-100'}
           `}
         >
-          <ImagePlus className="h-4 w-4 text-gray-500" />
+          <span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
         </div>
       )}
     </Uploader>
@@ -84,7 +82,7 @@ const UploaderButton: FC<UploaderButtonProps> = ({
           disabled={disabled}
           className="relative flex h-8 w-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
         >
-          <ImagePlus className="h-4 w-4 text-gray-500" />
+          <span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
         </button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
@@ -109,7 +107,7 @@ const UploaderButton: FC<UploaderButtonProps> = ({
                       hovering && 'bg-primary-50',
                     )}
                   >
-                    <Upload03 className="mr-1 h-4 w-4" />
+                    <span className="i-custom-vender-line-general-upload-03 mr-1 h-4 w-4" />
                     {t('imageUploader.uploadFromComputer', { ns: 'common' })}
                   </div>
                 )}
diff --git a/web/app/components/base/image-uploader/hooks.spec.ts b/web/app/components/base/image-uploader/hooks.spec.ts
new file mode 100644
index 0000000000..1de5691690
--- /dev/null
+++ b/web/app/components/base/image-uploader/hooks.spec.ts
@@ -0,0 +1,774 @@
+import type { ClipboardEvent, DragEvent } from 'react'
+import type { ImageFile, VisionSettings } from '@/types/app'
+import { act, renderHook } from '@testing-library/react'
+import { Resolution, TransferMethod } from '@/types/app'
+import { useClipboardUploader, useDraggableUploader, useImageFiles, useLocalFileUploader } from './hooks'
+
+const mockNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({ notify: mockNotify }),
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ token: undefined }),
+}))
+
+const { mockImageUpload, mockGetImageUploadErrorMessage } = vi.hoisted(() => ({
+  mockImageUpload: vi.fn(),
+  mockGetImageUploadErrorMessage: vi.fn(() => 'Upload error'),
+}))
+vi.mock('./utils', () => ({
+  imageUpload: mockImageUpload,
+  getImageUploadErrorMessage: mockGetImageUploadErrorMessage,
+}))
+
+let fileCounter = 0
+
+const createImageFile = (overrides: Partial<ImageFile> = {}): ImageFile => ({
+  type: TransferMethod.local_file,
+  _id: `file-${fileCounter++}`,
+  fileId: '',
+  progress: 0,
+  url: 'data:image/png;base64,abc',
+  ...overrides,
+})
+
+const createVisionSettings = (overrides: Partial<VisionSettings> = {}): VisionSettings => ({
+  enabled: true,
+  number_limits: 5,
+  detail: Resolution.high,
+  transfer_methods: [TransferMethod.local_file],
+  image_file_size_limit: 10,
+  ...overrides,
+})
+
+describe('useImageFiles', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    fileCounter = 0
+  })
+
+  it('should return empty files initially', () => {
+    const { result } = renderHook(() => useImageFiles())
+    expect(result.current.files).toEqual([])
+  })
+
+  it('should add a new file via onUpload', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1' })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    expect(result.current.files).toHaveLength(1)
+    expect(result.current.files[0]._id).toBe('file-1')
+  })
+
+  it('should update an existing file via onUpload when _id matches', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1', progress: 0 })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onUpload({ ...imageFile, progress: 50 })
+    })
+
+    expect(result.current.files).toHaveLength(1)
+    expect(result.current.files[0].progress).toBe(50)
+  })
+
+  it('should mark a file as deleted via onRemove', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1' })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+    expect(result.current.files).toHaveLength(1)
+
+    act(() => {
+      result.current.onRemove('file-1')
+    })
+
+    // filteredFiles excludes deleted files
+    expect(result.current.files).toHaveLength(0)
+  })
+
+  it('should not modify files when onRemove is called with non-existent id', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1' })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onRemove('non-existent')
+    })
+
+    expect(result.current.files).toHaveLength(1)
+  })
+
+  it('should set progress to -1 via onImageLinkLoadError', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1', progress: 0 })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onImageLinkLoadError('file-1')
+    })
+
+    expect(result.current.files[0].progress).toBe(-1)
+  })
+
+  it('should not modify files when onImageLinkLoadError is called with non-existent id', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1', progress: 0 })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onImageLinkLoadError('non-existent')
+    })
+
+    expect(result.current.files[0].progress).toBe(0)
+  })
+
+  it('should set progress to 100 via onImageLinkLoadSuccess', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1', progress: 0 })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onImageLinkLoadSuccess('file-1')
+    })
+
+    expect(result.current.files[0].progress).toBe(100)
+  })
+
+  it('should not modify files when onImageLinkLoadSuccess is called with non-existent id', () => {
+    const { result } = renderHook(() => useImageFiles())
+    const imageFile = createImageFile({ _id: 'file-1', progress: 50 })
+
+    act(() => {
+      result.current.onUpload(imageFile)
+    })
+
+    act(() => {
+      result.current.onImageLinkLoadSuccess('non-existent')
+    })
+
+    expect(result.current.files[0].progress).toBe(50)
+  })
+
+  it('should clear all files via onClear', () => {
+    const { result } = renderHook(() => useImageFiles())
+
+    act(() => {
+      result.current.onUpload(createImageFile({ _id: 'file-1' }))
+      result.current.onUpload(createImageFile({ _id: 'file-2' }))
+    })
+
+    expect(result.current.files).toHaveLength(2)
+
+    act(() => {
+      result.current.onClear()
+    })
+
+    expect(result.current.files).toHaveLength(0)
+  })
+
+  describe('onReUpload', () => {
+    it('should call imageUpload when re-uploading an existing file', () => {
+      const { result } = renderHook(() => useImageFiles())
+      const file = new File(['test'], 'test.png', { type: 'image/png' })
+      const imageFile = createImageFile({ _id: 'file-1', file, progress: -1 })
+
+      act(() => {
+        result.current.onUpload(imageFile)
+      })
+
+      act(() => {
+        result.current.onReUpload('file-1')
+      })
+
+      expect(mockImageUpload).toHaveBeenCalledTimes(1)
+      expect(mockImageUpload).toHaveBeenCalledWith(
+        expect.objectContaining({
+          file,
+          onProgressCallback: expect.any(Function),
+          onSuccessCallback: expect.any(Function),
+          onErrorCallback: expect.any(Function),
+        }),
+        false,
+      )
+    })
+
+    it('should not call imageUpload when file id does not exist', () => {
+      const { result } = renderHook(() => useImageFiles())
+
+      act(() => {
+        result.current.onReUpload('non-existent')
+      })
+
+      expect(mockImageUpload).not.toHaveBeenCalled()
+    })
+
+    it('should update progress via onProgressCallback during re-upload', () => {
+      const { result } = renderHook(() => useImageFiles())
+      const file = new File(['test'], 'test.png', { type: 'image/png' })
+      const imageFile = createImageFile({ _id: 'file-1', file, progress: -1 })
+
+      act(() => {
+        result.current.onUpload(imageFile)
+      })
+
+      act(() => {
+        result.current.onReUpload('file-1')
+      })
+
+      const uploadCall = mockImageUpload.mock.calls[0][0]
+
+      act(() => {
+        uploadCall.onProgressCallback(50)
+      })
+
+      expect(result.current.files[0].progress).toBe(50)
+    })
+
+    it('should update fileId and progress on success callback during re-upload', () => {
+      const { result } = renderHook(() => useImageFiles())
+      const file = new File(['test'], 'test.png', { type: 'image/png' })
+      const imageFile = createImageFile({ _id: 'file-1', file, progress: -1 })
+
+      act(() => {
+        result.current.onUpload(imageFile)
+      })
+
+      act(() => {
+        result.current.onReUpload('file-1')
+      })
+
+      const uploadCall = mockImageUpload.mock.calls[0][0]
+
+      act(() => {
+        uploadCall.onSuccessCallback({ id: 'server-file-123' })
+      })
+
+      expect(result.current.files[0].fileId).toBe('server-file-123')
+      expect(result.current.files[0].progress).toBe(100)
+    })
+
+    it('should set progress to -1 and notify on error callback during re-upload', () => {
+      const { result } = renderHook(() => useImageFiles())
+      const file = new File(['test'], 'test.png', { type: 'image/png' })
+      const imageFile = createImageFile({ _id: 'file-1', file, progress: -1 })
+
+      act(() => {
+        result.current.onUpload(imageFile)
+      })
+
+      act(() => {
+        result.current.onReUpload('file-1')
+      })
+
+      const uploadCall = mockImageUpload.mock.calls[0][0]
+
+      act(() => {
+        uploadCall.onErrorCallback(new Error('Network error'))
+      })
+
+      expect(result.current.files[0].progress).toBe(-1)
+      expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'Upload error' })
+    })
+  })
+
+  it('should filter out deleted files in returned files', () => {
+    const { result } = renderHook(() => useImageFiles())
+
+    act(() => {
+      result.current.onUpload(createImageFile({ _id: 'file-1' }))
+      result.current.onUpload(createImageFile({ _id: 'file-2' }))
+      result.current.onUpload(createImageFile({ _id: 'file-3' }))
+    })
+
+    act(() => {
+      result.current.onRemove('file-2')
+    })
+
+    expect(result.current.files).toHaveLength(2)
+    expect(result.current.files.map(f => f._id)).toEqual(['file-1', 'file-3'])
+  })
+})
+
+describe('useLocalFileUploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return disabled status and handleLocalFileUpload function', () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload, limit: 10 }),
+    )
+
+    expect(result.current.disabled).toBe(false)
+    expect(result.current.handleLocalFileUpload).toBeInstanceOf(Function)
+  })
+
+  it('should not upload when disabled', () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload, disabled: true }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should reject files with disallowed extensions', () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload }),
+    )
+
+    const file = new File(['test'], 'test.svg', { type: 'image/svg+xml' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should reject files exceeding size limit', () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload, limit: 1 }), // 1MB limit
+    )
+
+    // Create a file larger than 1MB
+    const largeContent = new Uint8Array(2 * 1024 * 1024)
+    const file = new File([largeContent], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    expect(onUpload).not.toHaveBeenCalled()
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+  })
+
+  it('should read file and call onUpload on successful FileReader load', async () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    // Wait for FileReader to complete
+    await vi.waitFor(() => {
+      expect(onUpload).toHaveBeenCalled()
+    })
+
+    expect(onUpload).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: TransferMethod.local_file,
+        file,
+        progress: 0,
+      }),
+    )
+
+    // imageUpload should be called after FileReader load
+    expect(mockImageUpload).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onUpload with progress during imageUpload', async () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    await vi.waitFor(() => {
+      expect(mockImageUpload).toHaveBeenCalled()
+    })
+
+    const uploadCall = mockImageUpload.mock.calls[0][0]
+
+    act(() => {
+      uploadCall.onProgressCallback(75)
+    })
+
+    expect(onUpload).toHaveBeenCalledWith(
+      expect.objectContaining({ progress: 75 }),
+    )
+  })
+
+  it('should call onUpload with fileId and progress 100 on upload success', async () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    await vi.waitFor(() => {
+      expect(mockImageUpload).toHaveBeenCalled()
+    })
+
+    const uploadCall = mockImageUpload.mock.calls[0][0]
+
+    act(() => {
+      uploadCall.onSuccessCallback({ id: 'uploaded-id' })
+    })
+
+    expect(onUpload).toHaveBeenCalledWith(
+      expect.objectContaining({ fileId: 'uploaded-id', progress: 100 }),
+    )
+  })
+
+  it('should notify error and call onUpload with progress -1 on upload failure', async () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useLocalFileUploader({ onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+    act(() => {
+      result.current.handleLocalFileUpload(file)
+    })
+
+    await vi.waitFor(() => {
+      expect(mockImageUpload).toHaveBeenCalled()
+    })
+
+    const uploadCall = mockImageUpload.mock.calls[0][0]
+
+    act(() => {
+      uploadCall.onErrorCallback(new Error('fail'))
+    })
+
+    expect(mockNotify).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'error' }),
+    )
+    expect(onUpload).toHaveBeenCalledWith(
+      expect.objectContaining({ progress: -1 }),
+    )
+  })
+})
+
+describe('useClipboardUploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should be disabled when visionConfig is undefined', () => {
+    const onUpload = vi.fn()
+    const { result } = renderHook(() =>
+      useClipboardUploader({ files: [], onUpload }),
+    )
+
+    // The hook returns onPaste, and since disabled is true, pasting should not upload
+    expect(result.current.onPaste).toBeInstanceOf(Function)
+  })
+
+  it('should be disabled when visionConfig.enabled is false', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings({ enabled: false })
+    const { result } = renderHook(() =>
+      useClipboardUploader({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+    const mockEvent = {
+      clipboardData: { files: [file] },
+      preventDefault: vi.fn(),
+    } as unknown as ClipboardEvent<HTMLTextAreaElement>
+    act(() => {
+      result.current.onPaste(mockEvent)
+    })
+
+    // Paste occurs but the file should NOT be uploaded because disabled
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should be disabled when local upload is not allowed', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings({
+      transfer_methods: [TransferMethod.remote_url],
+    })
+    renderHook(() =>
+      useClipboardUploader({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should be disabled when files count reaches number_limits', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings({ number_limits: 1 })
+    const files = [createImageFile({ _id: 'file-1' })]
+
+    renderHook(() =>
+      useClipboardUploader({ files, visionConfig: settings, onUpload }),
+    )
+
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should call handleLocalFileUpload when pasting a file', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+
+    const { result } = renderHook(() =>
+      useClipboardUploader({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+    const mockEvent = {
+      clipboardData: {
+        files: [file],
+      },
+      preventDefault: vi.fn(),
+    } as unknown as ClipboardEvent<HTMLTextAreaElement>
+
+    act(() => {
+      result.current.onPaste(mockEvent)
+    })
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled()
+  })
+
+  it('should not prevent default when pasting text (no file)', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+
+    const { result } = renderHook(() =>
+      useClipboardUploader({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const mockEvent = {
+      clipboardData: {
+        files: [] as File[],
+      },
+      preventDefault: vi.fn(),
+    } as unknown as ClipboardEvent<HTMLTextAreaElement>
+
+    act(() => {
+      result.current.onPaste(mockEvent)
+    })
+
+    expect(mockEvent.preventDefault).not.toHaveBeenCalled()
+  })
+})
+
+describe('useDraggableUploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const createDragEvent = (files: File[] = []) => ({
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+    dataTransfer: {
+      files,
+    },
+  } as unknown as DragEvent<HTMLDivElement>)
+
+  it('should return drag event handlers and isDragActive state', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    expect(result.current.onDragEnter).toBeInstanceOf(Function)
+    expect(result.current.onDragOver).toBeInstanceOf(Function)
+    expect(result.current.onDragLeave).toBeInstanceOf(Function)
+    expect(result.current.onDrop).toBeInstanceOf(Function)
+    expect(result.current.isDragActive).toBe(false)
+  })
+
+  it('should set isDragActive to true on dragEnter when not disabled', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const event = createDragEvent()
+
+    act(() => {
+      result.current.onDragEnter(event)
+    })
+
+    expect(result.current.isDragActive).toBe(true)
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(event.stopPropagation).toHaveBeenCalled()
+  })
+
+  it('should not set isDragActive on dragEnter when disabled', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings({ enabled: false })
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const event = createDragEvent()
+
+    act(() => {
+      result.current.onDragEnter(event)
+    })
+
+    expect(result.current.isDragActive).toBe(false)
+  })
+
+  it('should call preventDefault and stopPropagation on dragOver', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const event = createDragEvent()
+
+    act(() => {
+      result.current.onDragOver(event)
+    })
+
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(event.stopPropagation).toHaveBeenCalled()
+  })
+
+  it('should set isDragActive to false on dragLeave', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    // First activate drag
+    act(() => {
+      result.current.onDragEnter(createDragEvent())
+    })
+    expect(result.current.isDragActive).toBe(true)
+
+    // Then leave
+    const leaveEvent = createDragEvent()
+
+    act(() => {
+      result.current.onDragLeave(leaveEvent)
+    })
+
+    expect(result.current.isDragActive).toBe(false)
+    expect(leaveEvent.preventDefault).toHaveBeenCalled()
+    expect(leaveEvent.stopPropagation).toHaveBeenCalled()
+  })
+
+  it('should set isDragActive to false on drop and upload file', async () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+    const event = createDragEvent([file])
+
+    // Activate drag first
+    act(() => {
+      result.current.onDragEnter(createDragEvent())
+    })
+    expect(result.current.isDragActive).toBe(true)
+
+    act(() => {
+      result.current.onDrop(event)
+    })
+
+    expect(result.current.isDragActive).toBe(false)
+    expect(event.preventDefault).toHaveBeenCalled()
+    expect(event.stopPropagation).toHaveBeenCalled()
+
+    // Verify the file was actually handed to the upload pipeline
+    await vi.waitFor(() => {
+      expect(mockImageUpload).toHaveBeenCalled()
+    })
+  })
+
+  it('should not upload when dropping with no files', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings()
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files: [], visionConfig: settings, onUpload }),
+    )
+
+    const event = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+      dataTransfer: {
+        files: [] as unknown as FileList,
+      },
+    } as unknown as React.DragEvent<HTMLDivElement>
+
+    act(() => {
+      result.current.onDrop(event)
+    })
+
+    // onUpload should not be called directly since no file was dropped
+    expect(onUpload).not.toHaveBeenCalled()
+  })
+
+  it('should be disabled when files count exceeds number_limits', () => {
+    const onUpload = vi.fn()
+    const settings = createVisionSettings({ number_limits: 1 })
+    const files = [createImageFile({ _id: 'file-1' })]
+
+    const { result } = renderHook(() =>
+      useDraggableUploader<HTMLDivElement>({ files, visionConfig: settings, onUpload }),
+    )
+
+    const event = createDragEvent()
+
+    act(() => {
+      result.current.onDragEnter(event)
+    })
+
+    // Should not activate drag when disabled
+    expect(result.current.isDragActive).toBe(false)
+  })
+})
diff --git a/web/app/components/base/image-uploader/image-link-input.spec.tsx b/web/app/components/base/image-uploader/image-link-input.spec.tsx
new file mode 100644
index 0000000000..209c5d4c0c
--- /dev/null
+++ b/web/app/components/base/image-uploader/image-link-input.spec.tsx
@@ -0,0 +1,184 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TransferMethod } from '@/types/app'
+import ImageLinkInput from './image-link-input'
+
+describe('ImageLinkInput', () => {
+  const defaultProps = {
+    onUpload: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<ImageLinkInput {...defaultProps} />)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should render an input with placeholder text', () => {
+      render(<ImageLinkInput {...defaultProps} />)
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveAttribute('placeholder')
+      expect(input).toHaveAttribute('type', 'text')
+    })
+
+    it('should render a submit button', () => {
+      render(<ImageLinkInput {...defaultProps} />)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should disable the button when input is empty', () => {
+      render(<ImageLinkInput {...defaultProps} />)
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('should disable the button when disabled prop is true', async () => {
+      const user = userEvent.setup()
+      render(<ImageLinkInput {...defaultProps} disabled />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'https://example.com/image.png')
+
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('should enable the button when input has text and not disabled', async () => {
+      const user = userEvent.setup()
+      render(<ImageLinkInput {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'https://example.com/image.png')
+
+      expect(screen.getByRole('button')).toBeEnabled()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should update input value when typing', async () => {
+      const user = userEvent.setup()
+      render(<ImageLinkInput {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'https://example.com/image.png')
+
+      expect(input).toHaveValue('https://example.com/image.png')
+    })
+
+    it('should call onUpload with progress 0 when URL matches http/https/ftp pattern', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'https://example.com/image.png')
+      await user.click(screen.getByRole('button'))
+
+      expect(onUpload).toHaveBeenCalledTimes(1)
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: TransferMethod.remote_url,
+          url: 'https://example.com/image.png',
+          progress: 0,
+          fileId: '',
+        }),
+      )
+    })
+
+    it('should call onUpload with progress -1 when URL does not match pattern', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'not-a-valid-url')
+      await user.click(screen.getByRole('button'))
+
+      expect(onUpload).toHaveBeenCalledTimes(1)
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({
+          progress: -1,
+          url: 'not-a-valid-url',
+        }),
+      )
+    })
+
+    it('should set progress 0 for http:// URLs', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} />)
+
+      await user.type(screen.getByRole('textbox'), 'http://example.com/img.jpg')
+      await user.click(screen.getByRole('button'))
+
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({ progress: 0 }),
+      )
+    })
+
+    it('should set progress 0 for ftp:// URLs', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} />)
+
+      await user.type(screen.getByRole('textbox'), 'ftp://files.example.com/img.png')
+      await user.click(screen.getByRole('button'))
+
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({ progress: 0 }),
+      )
+    })
+
+    it('should not call onUpload when disabled and button is clicked', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} disabled />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'https://example.com/image.png')
+      await user.click(screen.getByRole('button'))
+
+      // Button is disabled, so click won't fire handleClick
+      expect(onUpload).not.toHaveBeenCalled()
+    })
+
+    it('should include _id as a timestamp string in the uploaded file', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      const dateNowSpy = vi.spyOn(Date, 'now').mockReturnValue(1234567890)
+      render(<ImageLinkInput onUpload={onUpload} />)
+      await user.type(screen.getByRole('textbox'), 'https://example.com/img.png')
+      await user.click(screen.getByRole('button'))
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({ _id: '1234567890' }),
+      )
+      dateNowSpy.mockRestore()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty string input without errors', () => {
+      render(<ImageLinkInput {...defaultProps} />)
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('')
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('should handle URL-like strings without protocol prefix', async () => {
+      const user = userEvent.setup()
+      const onUpload = vi.fn()
+      render(<ImageLinkInput onUpload={onUpload} />)
+
+      await user.type(screen.getByRole('textbox'), 'example.com/image.png')
+      await user.click(screen.getByRole('button'))
+
+      expect(onUpload).toHaveBeenCalledWith(
+        expect.objectContaining({ progress: -1 }),
+      )
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index 99de12ca2f..b8d4f7d1cf 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -40,6 +40,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
         value={imageLink}
         onChange={e => setImageLink(e.target.value)}
         placeholder={t('imageUploader.pasteImageLinkInputPlaceholder', { ns: 'common' }) || ''}
+        data-testid="image-link-input"
       />
       <Button
         variant="primary"
diff --git a/web/app/components/base/image-uploader/image-list.spec.tsx b/web/app/components/base/image-uploader/image-list.spec.tsx
new file mode 100644
index 0000000000..a00d6551f6
--- /dev/null
+++ b/web/app/components/base/image-uploader/image-list.spec.tsx
@@ -0,0 +1,291 @@
+import type { ImageFile } from '@/types/app'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TransferMethod } from '@/types/app'
+import ImageList from './image-list'
+
+const createLocalFile = (overrides: Partial<ImageFile> = {}): ImageFile => ({
+  type: TransferMethod.local_file,
+  _id: `local-${Date.now()}-${Math.random()}`,
+  fileId: 'file-id',
+  progress: 100,
+  url: '',
+  base64Url: 'data:image/png;base64,abc123',
+  ...overrides,
+})
+
+const createRemoteFile = (overrides: Partial<ImageFile> = {}): ImageFile => ({
+  type: TransferMethod.remote_url,
+  _id: `remote-${Date.now()}-${Math.random()}`,
+  fileId: '',
+  progress: 100,
+  url: 'https://example.com/image.png',
+  ...overrides,
+})
+
+describe('ImageList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing with empty list', () => {
+      render(<ImageList list={[]} />)
+      expect(screen.getByTestId('image-list')).toBeInTheDocument()
+    })
+
+    it('should render images for each item in the list', () => {
+      const list = [
+        createLocalFile({ _id: 'file-1' }),
+        createLocalFile({ _id: 'file-2' }),
+      ]
+      render(<ImageList list={list} />)
+
+      const images = screen.getAllByRole('img')
+      expect(images).toHaveLength(2)
+    })
+
+    it('should use base64Url as src for local files', () => {
+      const list = [createLocalFile({ _id: 'file-1', base64Url: 'data:image/png;base64,xyz' })]
+      render(<ImageList list={list} />)
+
+      expect(screen.getByRole('img')).toHaveAttribute('src', 'data:image/png;base64,xyz')
+    })
+
+    it('should use url as src for remote files', () => {
+      const list = [createRemoteFile({ _id: 'file-1', url: 'https://example.com/img.jpg' })]
+      render(<ImageList list={list} />)
+
+      expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.com/img.jpg')
+    })
+
+    it('should set alt attribute from file name', () => {
+      const file = new File(['test'], 'my-image.png', { type: 'image/png' })
+      const list = [createLocalFile({ _id: 'file-1', file })]
+      render(<ImageList list={list} />)
+
+      expect(screen.getByRole('img')).toHaveAttribute('alt', 'my-image.png')
+    })
+  })
+
+  describe('Props', () => {
+    it('should show remove buttons when not readonly', () => {
+      const list = [createLocalFile({ _id: 'file-1' })]
+      render(<ImageList list={list} onRemove={vi.fn()} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should not show remove buttons when readonly', () => {
+      const list = [createLocalFile({ _id: 'file-1' })]
+      render(<ImageList list={list} readonly onRemove={vi.fn()} />)
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Local File Progress', () => {
+    it('should show progress percentage when local file is uploading', () => {
+      const list = [createLocalFile({ _id: 'file-1', progress: 45 })]
+      render(<ImageList list={list} />)
+
+      expect(screen.getByText(/^45\s*%$/)).toBeInTheDocument()
+    })
+
+    it('should not show progress overlay when local file is complete', () => {
+      const list = [createLocalFile({ _id: 'file-1', progress: 100 })]
+      render(<ImageList list={list} />)
+
+      expect(screen.queryByText(/\d+\s*%/)).not.toBeInTheDocument()
+    })
+
+    it('should show retry icon when local file upload fails (progress -1)', () => {
+      const onReUpload = vi.fn()
+      const list = [createLocalFile({ _id: 'file-1', progress: -1 })]
+      render(<ImageList list={list} onReUpload={onReUpload} />)
+
+      expect(screen.getByTestId('retry-icon')).toBeInTheDocument()
+      expect(screen.queryByText(/\d+\s*%/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Remote URL Progress', () => {
+    it('should show loading spinner when remote file is loading (progress 0)', () => {
+      const list = [createRemoteFile({ _id: 'file-1', progress: 0 })]
+      render(<ImageList list={list} />)
+
+      // Loading spinner has animate-spin class
+      expect(screen.getByTestId('image-loader')).toBeInTheDocument()
+    })
+
+    it('should not show loading state when remote file is loaded (progress 100)', () => {
+      const list = [createRemoteFile({ _id: 'file-1', progress: 100 })]
+      render(<ImageList list={list} />)
+
+      expect(screen.queryByTestId('image-loader')).not.toBeInTheDocument()
+    })
+
+    it('should show error indicator when remote file fails (progress -1)', () => {
+      const list = [createRemoteFile({ _id: 'file-1', progress: -1 })]
+      render(<ImageList list={list} />)
+      expect(screen.getByTestId('image-error-container')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onRemove when remove button is clicked', async () => {
+      const user = userEvent.setup()
+      const onRemove = vi.fn()
+      const list = [createLocalFile({ _id: 'file-1' })]
+      render(<ImageList list={list} onRemove={onRemove} />)
+
+      await user.click(screen.getByRole('button'))
+
+      expect(onRemove).toHaveBeenCalledTimes(1)
+      expect(onRemove).toHaveBeenCalledWith('file-1')
+    })
+
+    it('should call onReUpload when retry icon is clicked on failed local file', async () => {
+      const user = userEvent.setup()
+      const onReUpload = vi.fn()
+      const list = [createLocalFile({ _id: 'file-1', progress: -1 })]
+      render(<ImageList list={list} onReUpload={onReUpload} />)
+      const retryIcon = screen.getByTestId('retry-icon')
+      await user.click(retryIcon)
+      expect(onReUpload).toHaveBeenCalledWith('file-1')
+    })
+
+    it('should open image preview when clicking a completed image', async () => {
+      const user = userEvent.setup()
+      const list = [createRemoteFile({ _id: 'file-1', progress: 100, url: 'https://example.com/img.png' })]
+      render(<ImageList list={list} />)
+
+      await user.click(screen.getByRole('img'))
+
+      const preview = screen.getByTestId('image-preview-container')
+      expect(preview).toBeInTheDocument()
+    })
+
+    it('should not open image preview when clicking an in-progress image', async () => {
+      const user = userEvent.setup()
+      const list = [createLocalFile({ _id: 'file-1', progress: 50 })]
+      render(<ImageList list={list} />)
+
+      await user.click(screen.getByRole('img'))
+
+      expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
+    })
+
+    it('should close image preview when cancel is clicked', async () => {
+      const user = userEvent.setup()
+      const list = [createRemoteFile({ _id: 'file-1', progress: 100 })]
+      render(<ImageList list={list} />)
+
+      // Open preview
+      await user.click(screen.getByRole('img'))
+      expect(screen.queryByTestId('image-preview-container')).toBeInTheDocument()
+
+      // Close preview
+      const closeButton = screen.getByTestId('image-preview-close-button')
+      await user.click(closeButton)
+      expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
+    })
+
+    it('should open preview with base64Url for completed local file', async () => {
+      const user = userEvent.setup()
+      const list = [createLocalFile({ _id: 'file-1', progress: 100, base64Url: 'data:image/png;base64,localdata' })]
+      render(<ImageList list={list} />)
+
+      await user.click(screen.getByRole('img'))
+
+      const previewImage = screen.getByTestId('image-preview-image')
+      expect(previewImage).toBeInTheDocument()
+      expect(previewImage).toHaveAttribute('src', 'data:image/png;base64,localdata')
+    })
+  })
+
+  describe('Image Load Events', () => {
+    it('should call onImageLinkLoadSuccess for remote URL on load when progress is not -1', () => {
+      const onImageLinkLoadSuccess = vi.fn()
+      const list = [createRemoteFile({ _id: 'file-1', progress: 0 })]
+      render(<ImageList list={list} onImageLinkLoadSuccess={onImageLinkLoadSuccess} />)
+
+      const img = screen.getByRole('img')
+      fireEvent.load(img)
+      expect(onImageLinkLoadSuccess).toHaveBeenCalledWith('file-1')
+    })
+
+    it('should not call onImageLinkLoadSuccess for remote URL when progress is -1', () => {
+      const onImageLinkLoadSuccess = vi.fn()
+      const list = [createRemoteFile({ _id: 'file-1', progress: -1 })]
+      render(<ImageList list={list} onImageLinkLoadSuccess={onImageLinkLoadSuccess} />)
+
+      const img = screen.getByRole('img')
+      fireEvent.load(img)
+
+      expect(onImageLinkLoadSuccess).not.toHaveBeenCalled()
+    })
+
+    it('should not call onImageLinkLoadSuccess for local file type', () => {
+      const onImageLinkLoadSuccess = vi.fn()
+      const list = [createLocalFile({ _id: 'file-1', progress: 50 })]
+      render(<ImageList list={list} onImageLinkLoadSuccess={onImageLinkLoadSuccess} />)
+
+      const img = screen.getByRole('img')
+      fireEvent.load(img)
+
+      expect(onImageLinkLoadSuccess).not.toHaveBeenCalled()
+    })
+
+    it('should call onImageLinkLoadError for remote URL on error', () => {
+      const onImageLinkLoadError = vi.fn()
+      const list = [createRemoteFile({ _id: 'file-1', progress: 0 })]
+      render(<ImageList list={list} onImageLinkLoadError={onImageLinkLoadError} />)
+
+      const img = screen.getByRole('img')
+      fireEvent.error(img)
+
+      expect(onImageLinkLoadError).toHaveBeenCalledWith('file-1')
+    })
+
+    it('should not call onImageLinkLoadError for local file type', () => {
+      const onImageLinkLoadError = vi.fn()
+      const list = [createLocalFile({ _id: 'file-1', progress: 50 })]
+      render(<ImageList list={list} onImageLinkLoadError={onImageLinkLoadError} />)
+
+      const img = screen.getByRole('img')
+      fireEvent.error(img)
+
+      expect(onImageLinkLoadError).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle list with mixed local and remote files', () => {
+      const list = [
+        createLocalFile({ _id: 'local-1' }),
+        createRemoteFile({ _id: 'remote-1' }),
+      ]
+      render(<ImageList list={list} />)
+
+      expect(screen.getAllByRole('img')).toHaveLength(2)
+    })
+
+    it('should handle item without file property for alt attribute', () => {
+      const list = [createLocalFile({ _id: 'file-1', file: undefined })]
+      render(<ImageList list={list} />)
+
+      const img = screen.getByRole('img')
+      expect(img).toBeInTheDocument()
+    })
+
+    it('should handle onRemove not provided gracefully', async () => {
+      const user = userEvent.setup()
+      const list = [createLocalFile({ _id: 'file-1' })]
+      render(<ImageList list={list} />)
+
+      // Button exists, clicking it should not throw
+      await user.click(screen.getByRole('button'))
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 5488990891..7b9c1fec49 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -1,12 +1,8 @@
+/* eslint-disable next/no-img-element */
 import type { FC } from 'react'
 import type { ImageFile } from '@/types/app'
-import {
-  RiCloseLine,
-  RiLoader2Line,
-} from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import Tooltip from '@/app/components/base/tooltip'
@@ -48,7 +44,7 @@ const ImageList: FC<ImageListProps> = ({
   }
 
   return (
-    <div className="flex flex-wrap">
+    <div className="flex flex-wrap" data-testid="image-list">
       {list.map(item => (
         <div
           key={item._id}
@@ -61,10 +57,7 @@ const ImageList: FC<ImageListProps> = ({
                 style={{ left: item.progress > -1 ? `${item.progress}%` : 0 }}
               >
                 {item.progress === -1 && (
-                  <RefreshCcw01
-                    className="h-5 w-5 text-white"
-                    onClick={() => onReUpload?.(item._id)}
-                  />
+                  <span className="i-custom-vender-line-arrows-refresh-ccw-01 h-5 w-5 text-white" onClick={() => onReUpload?.(item._id)} data-testid="retry-icon" />
                 )}
               </div>
               {item.progress > -1 && (
@@ -84,9 +77,10 @@ const ImageList: FC<ImageListProps> = ({
               : 'border-transparent bg-black/[0.16]'
             }
                 `}
+              data-testid="image-error-container"
             >
               {item.progress > -1 && (
-                <RiLoader2Line className="h-5 w-5 animate-spin text-white" />
+                <span className="i-ri-loader-2-line h-5 w-5 animate-spin text-white" data-testid="image-loader" />
               )}
               {item.progress === -1 && (
                 <Tooltip
@@ -124,8 +118,9 @@ const ImageList: FC<ImageListProps> = ({
                 item.progress === -1 ? 'flex' : 'hidden group-hover:flex',
               )}
               onClick={() => onRemove?.(item._id)}
+              data-testid="remove-button"
             >
-              <RiCloseLine className="h-3 w-3 text-text-tertiary" />
+              <span className="i-ri-close-line h-3 w-3 text-text-tertiary" />
             </button>
           )}
         </div>
diff --git a/web/app/components/base/image-uploader/image-preview.spec.tsx b/web/app/components/base/image-uploader/image-preview.spec.tsx
new file mode 100644
index 0000000000..949ce01842
--- /dev/null
+++ b/web/app/components/base/image-uploader/image-preview.spec.tsx
@@ -0,0 +1,414 @@
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ImagePreview from './image-preview'
+
+type HotkeyHandler = () => void
+
+const mocks = vi.hoisted(() => ({
+  hotkeys: {} as Record<string, HotkeyHandler>,
+  notify: vi.fn(),
+  downloadUrl: vi.fn(),
+  windowOpen: vi.fn<(...args: unknown[]) => Window | null>(),
+  clipboardWrite: vi.fn<(items: ClipboardItem[]) => Promise<void>>(),
+}))
+
+vi.mock('react-hotkeys-hook', () => ({
+  useHotkeys: (keys: string, handler: HotkeyHandler) => {
+    mocks.hotkeys[keys] = handler
+  },
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: {
+    notify: (...args: Parameters<typeof mocks.notify>) => mocks.notify(...args),
+  },
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: (...args: Parameters<typeof mocks.downloadUrl>) => mocks.downloadUrl(...args),
+}))
+
+const getOverlay = () => screen.getByTestId('image-preview-container') as HTMLDivElement
+const getCloseButton = () => screen.getByTestId('image-preview-close-button') as HTMLDivElement
+const getCopyButton = () => screen.getByTestId('image-preview-copy-button') as HTMLDivElement
+const getZoomOutButton = () => screen.getByTestId('image-preview-zoom-out-button') as HTMLDivElement
+const getZoomInButton = () => screen.getByTestId('image-preview-zoom-in-button') as HTMLDivElement
+const getDownloadButton = () => screen.getByTestId('image-preview-download-button') as HTMLDivElement
+const getOpenInTabButton = () => screen.getByTestId('image-preview-open-in-tab-button') as HTMLDivElement
+
+const base64Image = 'aGVsbG8='
+const dataImage = `data:image/png;base64,${base64Image}`
+
+describe('ImagePreview', () => {
+  const originalClipboardItem = globalThis.ClipboardItem
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.hotkeys = {}
+
+    if (!navigator.clipboard) {
+      Object.defineProperty(globalThis.navigator, 'clipboard', {
+        value: {
+          write: vi.fn(),
+        },
+        writable: true,
+        configurable: true,
+      })
+    }
+    const clipboardTarget = navigator.clipboard as { write: (items: ClipboardItem[]) => Promise<void> }
+    // In some test environments `write` lives on the prototype rather than
+    // the clipboard instance itself; locate the actual owner so vi.spyOn
+    // patches the right object.
+    const writeOwner = Object.prototype.hasOwnProperty.call(clipboardTarget, 'write')
+      ? clipboardTarget
+      : (Object.getPrototypeOf(clipboardTarget) as { write: (items: ClipboardItem[]) => Promise<void> })
+    vi.spyOn(writeOwner, 'write').mockImplementation((items: ClipboardItem[]) => {
+      return mocks.clipboardWrite(items)
+    })
+
+    globalThis.ClipboardItem = class {
+      constructor(public readonly data: Record<string, Blob>) { }
+    } as unknown as typeof ClipboardItem
+    vi.spyOn(window, 'open').mockImplementation((...args: Parameters<Window['open']>) => {
+      return mocks.windowOpen(...args)
+    })
+  })
+
+  afterEach(() => {
+    globalThis.ClipboardItem = originalClipboardItem
+    vi.restoreAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render preview in portal with image from url', () => {
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const overlay = getOverlay()
+      expect(overlay).toBeInTheDocument()
+      expect(overlay?.parentElement).toBe(document.body)
+      expect(screen.getByRole('img', { name: 'Preview Image' })).toHaveAttribute('src', 'https://example.com/image.png')
+    })
+
+    it('should convert plain base64 string into data image src', () => {
+      render(
+        <ImagePreview
+          url={base64Image}
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByRole('img', { name: 'Preview Image' })).toHaveAttribute('src', dataImage)
+    })
+  })
+
+  describe('Hotkeys', () => {
+    it('should register hotkeys and invoke esc/left/right handlers', () => {
+      const onCancel = vi.fn()
+      const onPrev = vi.fn()
+      const onNext = vi.fn()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={onCancel}
+          onPrev={onPrev}
+          onNext={onNext}
+        />,
+      )
+
+      expect(mocks.hotkeys.esc).toBeInstanceOf(Function)
+      expect(mocks.hotkeys.left).toBeInstanceOf(Function)
+      expect(mocks.hotkeys.right).toBeInstanceOf(Function)
+
+      mocks.hotkeys.esc?.()
+      mocks.hotkeys.left?.()
+      mocks.hotkeys.right?.()
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+      expect(onPrev).toHaveBeenCalledTimes(1)
+      expect(onNext).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCancel when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const onCancel = vi.fn()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={onCancel}
+        />,
+      )
+
+      const closeButton = getCloseButton()
+      await user.click(closeButton)
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should zoom in and out with wheel interactions', async () => {
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+      const overlay = getOverlay()
+      const image = screen.getByRole('img', { name: 'Preview Image' })
+
+      act(() => {
+        overlay.dispatchEvent(new WheelEvent('wheel', { bubbles: true, deltaY: -100 }))
+      })
+      await waitFor(() => {
+        expect(image).toHaveStyle({ transform: 'scale(1.2) translate(0px, 0px)' })
+      })
+
+      act(() => {
+        overlay.dispatchEvent(new WheelEvent('wheel', { bubbles: true, deltaY: 100 }))
+      })
+      await waitFor(() => {
+        expect(image).toHaveStyle({ transform: 'scale(1) translate(0px, 0px)' })
+      })
+    })
+
+    it('should update position while dragging when zoomed in and stop dragging on mouseup', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const overlay = getOverlay()
+      const image = screen.getByRole('img', { name: 'Preview Image' }) as HTMLImageElement
+      const imageParent = image.parentElement
+      if (!imageParent)
+        throw new Error('Image parent element not found')
+
+      vi.spyOn(image, 'getBoundingClientRect').mockReturnValue({
+        width: 200,
+        height: 120,
+        top: 0,
+        left: 0,
+        bottom: 120,
+        right: 200,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      } as DOMRect)
+      vi.spyOn(imageParent, 'getBoundingClientRect').mockReturnValue({
+        width: 100,
+        height: 100,
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      } as DOMRect)
+
+      const zoomInButton = getZoomInButton()
+      await user.click(zoomInButton)
+
+      act(() => {
+        overlay.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 10, clientY: 10 }))
+        overlay.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 40, clientY: 30 }))
+      })
+
+      await waitFor(() => {
+        expect(image.style.transition).toBe('none')
+      })
+      expect(image.style.transform).toContain('translate(')
+
+      act(() => {
+        document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
+      })
+      await waitFor(() => {
+        expect(image.style.transition).toContain('transform 0.2s ease-in-out')
+      })
+    })
+  })
+
+  describe('Action Buttons', () => {
+    it('should open valid url in new tab', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const openInTabButton = getOpenInTabButton()
+      await user.click(openInTabButton)
+
+      expect(mocks.windowOpen).toHaveBeenCalledWith('https://example.com/image.png', '_blank')
+    })
+
+    it('should open data image by writing to popup window document', async () => {
+      const user = userEvent.setup()
+      const write = vi.fn()
+      mocks.windowOpen.mockReturnValue({
+        document: {
+          write,
+        },
+      } as unknown as Window)
+
+      render(
+        <ImagePreview
+          url={dataImage}
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const openInTabButton = getOpenInTabButton()
+      await user.click(openInTabButton)
+
+      expect(mocks.windowOpen).toHaveBeenCalledWith()
+      expect(write).toHaveBeenCalledWith(`<img src="${dataImage}" alt="Preview Image" />`)
+    })
+
+    it('should show error toast when opening unsupported url', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="file:///tmp/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const openInTabButton = getOpenInTabButton()
+      await user.click(openInTabButton)
+
+      expect(mocks.notify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Unable to open image: file:///tmp/image.png',
+      })
+    })
+
+    it('should fall back to download and show info toast when clipboard copy fails', async () => {
+      const user = userEvent.setup()
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
+      mocks.clipboardWrite.mockRejectedValue(new Error('copy failed'))
+
+      render(
+        <ImagePreview
+          url={dataImage}
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const copyButton = getCopyButton()
+      await user.click(copyButton)
+
+      await waitFor(() => {
+        expect(mocks.downloadUrl).toHaveBeenCalledWith({ url: dataImage, fileName: 'Preview Image.png' })
+      })
+      expect(mocks.notify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'info',
+      }))
+      expect(consoleErrorSpy).toHaveBeenCalled()
+      consoleErrorSpy.mockRestore()
+    })
+
+    it('should copy image and show success toast', async () => {
+      const user = userEvent.setup()
+      mocks.clipboardWrite.mockResolvedValue()
+      render(
+        <ImagePreview
+          url={dataImage}
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+
+      const copyButton = getCopyButton()
+      await user.click(copyButton)
+
+      await waitFor(() => {
+        expect(mocks.clipboardWrite).toHaveBeenCalledTimes(1)
+      })
+      expect(mocks.notify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'success',
+      }))
+    })
+
+    it('should call download action for valid url', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+      const downloadButton = getDownloadButton()
+      await user.click(downloadButton)
+
+      expect(mocks.downloadUrl).toHaveBeenCalledWith({
+        url: 'https://example.com/image.png',
+        fileName: 'Preview Image',
+        target: '_blank',
+      })
+    })
+
+    it('should show error toast for invalid download url', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="invalid://image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+      const downloadButton = getDownloadButton()
+      await user.click(downloadButton)
+
+      expect(mocks.notify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Unable to open image: invalid://image.png',
+      })
+    })
+
+    it('should zoom with dedicated zoom buttons', async () => {
+      const user = userEvent.setup()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={vi.fn()}
+        />,
+      )
+      const image = screen.getByRole('img', { name: 'Preview Image' })
+
+      const zoomInButton = getZoomInButton()
+      const zoomOutButton = getZoomOutButton()
+      await user.click(zoomInButton)
+      await waitFor(() => {
+        expect(image).toHaveStyle({ transform: 'scale(1.2) translate(0px, 0px)' })
+      })
+
+      await user.click(zoomOutButton)
+      await waitFor(() => {
+        expect(image).toHaveStyle({ transform: 'scale(1) translate(0px, 0px)' })
+      })
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 54a5fabf9c..2f76b85967 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { RiAddBoxLine, RiDownloadCloud2Line, RiFileCopyLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { t } from 'i18next'
 import * as React from 'react'
@@ -209,6 +208,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
           transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
         }}
+        data-testid="image-preview-image"
       />
       <Tooltip popupContent={t('operation.copyImage', { ns: 'common' })}>
         <div
@@ -216,8 +216,8 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           onClick={imageCopy}
         >
           {isCopied
-            ? <RiFileCopyLine className="h-4 w-4 text-green-500" />
-            : <RiFileCopyLine className="h-4 w-4 text-gray-500" />}
+            ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" data-testid="image-preview-copied-icon" />
+            : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" data-testid="image-preview-copy-button" />}
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
@@ -225,7 +225,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           className="absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomOut}
         >
-          <RiZoomOutLine className="h-4 w-4 text-gray-500" />
+          <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
@@ -233,7 +233,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           className="absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={zoomIn}
         >
-          <RiZoomInLine className="h-4 w-4 text-gray-500" />
+          <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.download', { ns: 'common' })}>
@@ -241,7 +241,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={downloadImage}
         >
-          <RiDownloadCloud2Line className="h-4 w-4 text-gray-500" />
+          <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.openInNewTab', { ns: 'common' })}>
@@ -249,7 +249,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
           className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
           onClick={openInNewTab}
         >
-          <RiAddBoxLine className="h-4 w-4 text-gray-500" />
+          <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.spec.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.spec.tsx
new file mode 100644
index 0000000000..5bba9135b7
--- /dev/null
+++ b/web/app/components/base/image-uploader/text-generation-image-uploader.spec.tsx
@@ -0,0 +1,223 @@
+import type { useLocalFileUploader } from './hooks'
+import type { ImageFile, VisionSettings } from '@/types/app'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Resolution, TransferMethod } from '@/types/app'
+import TextGenerationImageUploader from './text-generation-image-uploader'
+
+type LocalUploaderArgs = Parameters<typeof useLocalFileUploader>[0]
+
+const mocks = vi.hoisted(() => ({
+  files: [] as ImageFile[],
+  onUpload: vi.fn<(imageFile: ImageFile) => void>(),
+  onRemove: vi.fn<(imageFileId: string) => void>(),
+  onImageLinkLoadError: vi.fn<(imageFileId: string) => void>(),
+  onImageLinkLoadSuccess: vi.fn<(imageFileId: string) => void>(),
+  onReUpload: vi.fn<(imageFileId: string) => void>(),
+  handleLocalFileUpload: vi.fn<(file: File) => void>(),
+  localUploaderArgs: undefined as LocalUploaderArgs | undefined,
+}))
+
+vi.mock('./hooks', () => ({
+  useImageFiles: () => ({
+    files: mocks.files,
+    onUpload: mocks.onUpload,
+    onRemove: mocks.onRemove,
+    onImageLinkLoadError: mocks.onImageLinkLoadError,
+    onImageLinkLoadSuccess: mocks.onImageLinkLoadSuccess,
+    onReUpload: mocks.onReUpload,
+  }),
+  useLocalFileUploader: (args: LocalUploaderArgs) => {
+    mocks.localUploaderArgs = args
+    return {
+      handleLocalFileUpload: mocks.handleLocalFileUpload,
+    }
+  },
+}))
+
+const createSettings = (overrides: Partial<VisionSettings> = {}): VisionSettings => ({
+  enabled: true,
+  number_limits: 3,
+  detail: Resolution.high,
+  transfer_methods: [TransferMethod.local_file],
+  image_file_size_limit: 10,
+  ...overrides,
+})
+
+describe('TextGenerationImageUploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.files = []
+    mocks.localUploaderArgs = undefined
+  })
+
+  describe('Rendering', () => {
+    it('should render local upload action for local_file transfer method', () => {
+      const onFilesChange = vi.fn()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={onFilesChange} />)
+
+      expect(screen.getByText('common.imageUploader.uploadFromComputer')).toBeInTheDocument()
+      expect(screen.queryByText('common.imageUploader.pasteImageLink')).not.toBeInTheDocument()
+    })
+
+    it('should render URL upload action for remote_url transfer method', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      expect(screen.getByText('common.imageUploader.pasteImageLink')).toBeInTheDocument()
+      expect(screen.queryByText('common.imageUploader.uploadFromComputer')).not.toBeInTheDocument()
+    })
+
+    it('should render two-column grid when two transfer methods are enabled', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+      })
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      const grid = screen.getByTestId('upload-actions')
+      expect(grid).toHaveClass('grid-cols-2')
+    })
+
+    it('should render single-column grid when one transfer method is enabled', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      const grid = screen.getByTestId('upload-actions')
+      expect(grid).toHaveClass('grid-cols-1')
+    })
+
+    it('should render no upload action for unsupported transfer method value', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.all],
+      })
+
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      expect(screen.queryByText('common.imageUploader.uploadFromComputer')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.imageUploader.pasteImageLink')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should pass numeric image size limit to local uploader hook', () => {
+      const settings = createSettings({
+        image_file_size_limit: '15',
+        transfer_methods: [TransferMethod.local_file],
+      })
+
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      expect(mocks.localUploaderArgs?.limit).toBe(15)
+    })
+
+    it('should disable local uploader when disabled prop is true', () => {
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(
+        <TextGenerationImageUploader
+          settings={settings}
+          onFilesChange={vi.fn()}
+          disabled
+        />,
+      )
+
+      const fileInput = screen.getByTestId('local-file-input')
+      expect(fileInput).toBeDisabled()
+      expect(mocks.localUploaderArgs?.disabled).toBe(true)
+    })
+
+    it('should disable upload actions when file count reaches number limit', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        number_limits: 1,
+        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+      })
+      mocks.files = [{
+        type: TransferMethod.remote_url,
+        _id: 'file-1',
+        fileId: 'id-1',
+        progress: 100,
+        url: 'https://example.com/image.png',
+      }]
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      const fileInput = screen.getByTestId('local-file-input')
+      expect(fileInput).toBeDisabled()
+      expect(mocks.localUploaderArgs?.disabled).toBe(true)
+
+      await user.click(screen.getByText('common.imageUploader.pasteImageLink'))
+      expect(screen.queryByPlaceholderText('common.imageUploader.pasteImageLinkInputPlaceholder')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call handleLocalFileUpload when a local file is selected', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.local_file],
+      })
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+      const fileInput = screen.getByTestId('local-file-input')
+      const file = new File(['content'], 'sample.png', { type: 'image/png' })
+      await user.upload(fileInput as HTMLInputElement, file)
+
+      expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(file)
+    })
+
+    it('should open paste link popover and upload remote url', async () => {
+      const user = userEvent.setup()
+      const settings = createSettings({
+        transfer_methods: [TransferMethod.remote_url],
+      })
+
+      render(<TextGenerationImageUploader settings={settings} onFilesChange={vi.fn()} />)
+
+      await user.click(screen.getByText('common.imageUploader.pasteImageLink'))
+      const input = await screen.findByPlaceholderText('common.imageUploader.pasteImageLinkInputPlaceholder')
+      await user.type(input, 'https://example.com/remote.png')
+      await user.click(screen.getByRole('button', { name: 'common.operation.ok' }))
+
+      expect(mocks.onUpload).toHaveBeenCalledWith(expect.objectContaining({
+        type: TransferMethod.remote_url,
+        url: 'https://example.com/remote.png',
+        progress: 0,
+      }))
+
+      await waitFor(() => {
+        expect(screen.queryByPlaceholderText('common.imageUploader.pasteImageLinkInputPlaceholder')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Files Effect', () => {
+    it('should call onFilesChange when files value changes', () => {
+      const onFilesChange = vi.fn()
+      const settings = createSettings()
+
+      const { rerender } = render(<TextGenerationImageUploader settings={settings} onFilesChange={onFilesChange} />)
+      expect(onFilesChange).toHaveBeenCalledWith([])
+
+      const updatedFiles: ImageFile[] = [{
+        type: TransferMethod.remote_url,
+        _id: 'new-file',
+        fileId: '',
+        progress: 0,
+        url: 'https://example.com/new.png',
+      }]
+      mocks.files = updatedFiles
+      rerender(<TextGenerationImageUploader settings={settings} onFilesChange={onFilesChange} />)
+
+      expect(onFilesChange).toHaveBeenCalledWith(updatedFiles)
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
index 569ff559a2..1b986744f2 100644
--- a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
@@ -132,7 +132,7 @@ const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
           onImageLinkLoadSuccess={onImageLinkLoadSuccess}
         />
       </div>
-      <div className={`grid gap-1 ${settings.transfer_methods.length === 2 ? 'grid-cols-2' : 'grid-cols-1'}`}>
+      <div className={`grid gap-1 ${settings.transfer_methods.length === 2 ? 'grid-cols-2' : 'grid-cols-1'}`} data-testid="upload-actions">
         {
           settings.transfer_methods.map((method) => {
             if (method === TransferMethod.local_file)
diff --git a/web/app/components/base/image-uploader/uploader.spec.tsx b/web/app/components/base/image-uploader/uploader.spec.tsx
new file mode 100644
index 0000000000..7fd916a497
--- /dev/null
+++ b/web/app/components/base/image-uploader/uploader.spec.tsx
@@ -0,0 +1,154 @@
+import type { ComponentProps } from 'react'
+import type { useLocalFileUploader } from './hooks'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
+import Uploader from './uploader'
+
+type LocalUploaderArgs = Parameters<typeof useLocalFileUploader>[0]
+
+const mocks = vi.hoisted(() => ({
+  hookArgs: undefined as LocalUploaderArgs | undefined,
+  handleLocalFileUpload: vi.fn<(file: File) => void>(),
+}))
+
+vi.mock('./hooks', () => ({
+  useLocalFileUploader: (args: LocalUploaderArgs) => {
+    mocks.hookArgs = args
+    return {
+      handleLocalFileUpload: mocks.handleLocalFileUpload,
+    }
+  },
+}))
+
+const getInput = () => {
+  const input = screen.getByTestId('local-file-input')
+  return input as HTMLInputElement
+}
+
+const renderUploader = (props: Partial<ComponentProps<typeof Uploader>> = {}) => {
+  const onUpload = vi.fn()
+  const closePopover = vi.fn()
+  const childRenderer = vi.fn((hovering: boolean) => (
+    <div data-testid="hover-state">{hovering ? 'hovering' : 'idle'}</div>
+  ))
+
+  const result = render(
+    <Uploader
+      onUpload={onUpload}
+      closePopover={closePopover}
+      limit={3}
+      disabled={false}
+      {...props}
+    >
+      {childRenderer}
+    </Uploader>,
+  )
+
+  return {
+    ...result,
+    onUpload,
+    closePopover,
+    childRenderer,
+  }
+}
+
+describe('Uploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.hookArgs = undefined
+  })
+
+  describe('Rendering', () => {
+    it('should render file input and idle child content', () => {
+      renderUploader()
+      const input = getInput()
+
+      expect(screen.getByTestId('hover-state')).toHaveTextContent('idle')
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should set accept attribute from allowed file extensions', () => {
+      renderUploader()
+      const input = getInput()
+      const expectedAccept = ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')
+
+      expect(input).toHaveAttribute('accept', expectedAccept)
+    })
+
+    it('should pass hook arguments to useLocalFileUploader', () => {
+      const { onUpload } = renderUploader({ limit: 5, disabled: true })
+
+      expect(mocks.hookArgs).toMatchObject({
+        limit: 5,
+        disabled: true,
+      })
+      expect(mocks.hookArgs?.onUpload).toBe(onUpload)
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should update hovering state on mouse enter and leave', async () => {
+      const user = userEvent.setup()
+      renderUploader()
+      const input = getInput()
+
+      expect(screen.getByTestId('hover-state')).toHaveTextContent('idle')
+
+      await user.hover(input)
+      expect(screen.getByTestId('hover-state')).toHaveTextContent('hovering')
+
+      await user.unhover(input)
+      expect(screen.getByTestId('hover-state')).toHaveTextContent('idle')
+    })
+
+    it('should call handleLocalFileUpload and closePopover when file is selected', async () => {
+      const user = userEvent.setup()
+      const { closePopover } = renderUploader()
+      const input = getInput()
+      const file = new File(['hello'], 'demo.png', { type: 'image/png' })
+
+      await user.upload(input, file)
+
+      expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(file)
+      expect(closePopover).toHaveBeenCalledTimes(1)
+    })
+
+    it('should reset input value on click', async () => {
+      const user = userEvent.setup()
+      renderUploader()
+      const input = getInput()
+      const file = new File(['hello'], 'demo.png', { type: 'image/png' })
+
+      await user.upload(input, file)
+      expect(input.files).toHaveLength(1)
+
+      await user.click(input)
+
+      expect(input.value).toBe('')
+    })
+
+    it('should not upload or close popover when no file is selected', () => {
+      const { closePopover } = renderUploader()
+      const input = getInput()
+
+      Object.defineProperty(input, 'files', {
+        value: [] as unknown as FileList,
+        configurable: true,
+      })
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+
+      expect(mocks.handleLocalFileUpload).not.toHaveBeenCalled()
+      expect(closePopover).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Props', () => {
+    it('should disable file input when disabled prop is true', () => {
+      renderUploader({ disabled: true })
+      const input = getInput()
+
+      expect(input).toBeDisabled()
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/uploader.tsx b/web/app/components/base/image-uploader/uploader.tsx
index a02b804c48..c4dd292320 100644
--- a/web/app/components/base/image-uploader/uploader.tsx
+++ b/web/app/components/base/image-uploader/uploader.tsx
@@ -44,6 +44,7 @@ const Uploader: FC<UploaderProps> = ({
     >
       {children(hovering)}
       <input
+        data-testid="local-file-input"
         className="absolute inset-0 block w-full cursor-pointer text-[0] opacity-0 disabled:cursor-not-allowed"
         onClick={e => ((e.target as HTMLInputElement).value = '')}
         type="file"
diff --git a/web/app/components/base/image-uploader/utils.spec.ts b/web/app/components/base/image-uploader/utils.spec.ts
new file mode 100644
index 0000000000..dff7fa25c3
--- /dev/null
+++ b/web/app/components/base/image-uploader/utils.spec.ts
@@ -0,0 +1,134 @@
+import type { TFunction } from 'i18next'
+import { waitFor } from '@testing-library/react'
+import { upload } from '@/service/base'
+import { getImageUploadErrorMessage, imageUpload } from './utils'
+
+vi.mock('@/service/base', () => ({
+  upload: vi.fn(),
+}))
+
+describe('image-uploader utils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('getImageUploadErrorMessage', () => {
+    it('should return backend message when error code is forbidden', () => {
+      const t = vi.fn() as unknown as TFunction
+
+      const result = getImageUploadErrorMessage(
+        { response: { code: 'forbidden', message: 'Forbidden by policy' } },
+        'Default error',
+        t,
+      )
+
+      expect(result).toBe('Forbidden by policy')
+      expect(t).not.toHaveBeenCalled()
+    })
+
+    it('should return translated message when error code is file_extension_blocked', () => {
+      const t = vi.fn(() => 'common.fileUploader.fileExtensionBlocked') as unknown as TFunction
+
+      const result = getImageUploadErrorMessage(
+        { response: { code: 'file_extension_blocked' } },
+        'Default error',
+        t,
+      )
+
+      expect(result).toBe('common.fileUploader.fileExtensionBlocked')
+      expect(t).toHaveBeenCalledWith('fileUploader.fileExtensionBlocked', { ns: 'common' })
+    })
+
+    it('should return default message when error code is unknown', () => {
+      const t = vi.fn() as unknown as TFunction
+
+      const result = getImageUploadErrorMessage(
+        { response: { code: 'unexpected_error' } },
+        'Default error',
+        t,
+      )
+
+      expect(result).toBe('Default error')
+      expect(t).not.toHaveBeenCalled()
+    })
+
+    it('should return default message when error is missing response code', () => {
+      const t = vi.fn() as unknown as TFunction
+
+      const result = getImageUploadErrorMessage(undefined, 'Default error', t)
+
+      expect(result).toBe('Default error')
+      expect(t).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('imageUpload', () => {
+    const createCallbacks = () => ({
+      onProgressCallback: vi.fn<(progress: number) => void>(),
+      onSuccessCallback: vi.fn<(res: { id: string }) => void>(),
+      onErrorCallback: vi.fn<(error?: unknown) => void>(),
+    })
+
+    it('should upload file and call success callback', async () => {
+      const file = new File(['hello'], 'image.png', { type: 'image/png' })
+      const callbacks = createCallbacks()
+      vi.mocked(upload).mockResolvedValue({ id: 'uploaded-id' })
+
+      imageUpload({ file, ...callbacks }, true, '/files/upload')
+
+      expect(upload).toHaveBeenCalledTimes(1)
+
+      const [options, isPublic, url] = vi.mocked(upload).mock.calls[0]
+      expect(isPublic).toBe(true)
+      expect(url).toBe('/files/upload')
+      expect(options.xhr).toBeInstanceOf(XMLHttpRequest)
+      expect(options.data).toBeInstanceOf(FormData)
+      expect((options.data as FormData).get('file')).toBe(file)
+
+      await waitFor(() => {
+        expect(callbacks.onSuccessCallback).toHaveBeenCalledWith({ id: 'uploaded-id' })
+      })
+      expect(callbacks.onErrorCallback).not.toHaveBeenCalled()
+    })
+
+    it('should call error callback when upload fails', async () => {
+      const file = new File(['hello'], 'image.png', { type: 'image/png' })
+      const callbacks = createCallbacks()
+      const error = new Error('Upload failed')
+      vi.mocked(upload).mockRejectedValue(error)
+
+      imageUpload({ file, ...callbacks })
+
+      await waitFor(() => {
+        expect(callbacks.onErrorCallback).toHaveBeenCalledWith(error)
+      })
+      expect(callbacks.onSuccessCallback).not.toHaveBeenCalled()
+    })
+
+    it('should report progress percentage when progress is computable', () => {
+      const file = new File(['hello'], 'image.png', { type: 'image/png' })
+      const callbacks = createCallbacks()
+      vi.mocked(upload).mockImplementation((options: { onprogress?: (e: ProgressEvent) => void }) => {
+        options.onprogress?.({ lengthComputable: true, loaded: 5, total: 8 } as ProgressEvent)
+        return Promise.resolve({ id: 'uploaded-id' })
+      })
+
+      imageUpload({ file, ...callbacks })
+
+      expect(callbacks.onProgressCallback).toHaveBeenCalledWith(62)
+    })
+
+    it('should not report progress when length is not computable', () => {
+      const file = new File(['hello'], 'image.png', { type: 'image/png' })
+      const callbacks = createCallbacks()
+      vi.mocked(upload).mockImplementation((options: { onprogress?: (e: ProgressEvent) => void }) => {
+        options.onprogress?.({ lengthComputable: false, loaded: 5, total: 8 } as ProgressEvent)
+        return Promise.resolve({ id: 'uploaded-id' })
+      })
+
+      imageUpload({ file, ...callbacks })
+
+      expect(callbacks.onProgressCallback).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/video-preview.spec.tsx b/web/app/components/base/image-uploader/video-preview.spec.tsx
new file mode 100644
index 0000000000..c9501b9059
--- /dev/null
+++ b/web/app/components/base/image-uploader/video-preview.spec.tsx
@@ -0,0 +1,117 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import VideoPreview from './video-preview'
+
+const getOverlay = () => screen.getByTestId('video-preview')
+const getCloseButton = () => screen.getByTestId('close-button')
+describe('VideoPreview', () => {
+  const defaultProps = {
+    url: 'https://example.com/video.mp4',
+    title: 'Test Video',
+    onCancel: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<VideoPreview {...defaultProps} />)
+
+      expect(screen.getByTitle('Test Video')).toBeInTheDocument()
+    })
+
+    it('should render video element with controls and preload metadata', () => {
+      render(<VideoPreview {...defaultProps} />)
+
+      const video = screen.getByTitle('Test Video')
+      expect(video.tagName).toBe('VIDEO')
+      expect(video).toHaveAttribute('controls')
+      expect(video).toHaveAttribute('preload', 'metadata')
+      expect((video as HTMLVideoElement).autoplay).toBe(false)
+    })
+
+    it('should render source element with correct src and type', () => {
+      render(<VideoPreview {...defaultProps} />)
+
+      const source = screen.getByTitle('Test Video').querySelector('source')
+      expect(source).toHaveAttribute('src', 'https://example.com/video.mp4')
+      expect(source).toHaveAttribute('type', 'video/mp4')
+    })
+
+    it('should render close button', () => {
+      render(<VideoPreview {...defaultProps} />)
+
+      expect(getCloseButton()).toBeInTheDocument()
+    })
+
+    it('should render via portal into document.body', () => {
+      render(<VideoPreview {...defaultProps} />)
+
+      const overlay = getOverlay()
+      expect(overlay).toBeInTheDocument()
+      expect(overlay.parentElement).toBe(document.body)
+    })
+  })
+
+  describe('Props', () => {
+    it('should set video title from title prop', () => {
+      render(<VideoPreview {...defaultProps} title="Demo Video" />)
+
+      expect(screen.getByTitle('Demo Video')).toBeInTheDocument()
+    })
+
+    it('should set video source from url prop', () => {
+      render(<VideoPreview {...defaultProps} url="https://example.com/demo.mp4" />)
+
+      const source = screen.getByTitle('Test Video').querySelector('source')
+      expect(source).toHaveAttribute('src', 'https://example.com/demo.mp4')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCancel when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const onCancel = vi.fn()
+
+      render(<VideoPreview {...defaultProps} onCancel={onCancel} />)
+
+      const closeButton = getCloseButton()
+      await user.click(closeButton)
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onCancel when overlay is clicked', async () => {
+      const user = userEvent.setup()
+      const onCancel = vi.fn()
+      render(<VideoPreview {...defaultProps} onCancel={onCancel} />)
+
+      const overlay = getOverlay()
+      await user.click(overlay)
+
+      expect(onCancel).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty url', () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
+      render(<VideoPreview {...defaultProps} url="" />)
+
+      const source = screen.getByTestId('video-element').querySelector('source')
+      expect(source).not.toHaveAttribute('src')
+
+      consoleErrorSpy.mockRestore()
+    })
+
+    it('should handle empty title', () => {
+      render(<VideoPreview {...defaultProps} title="" />)
+
+      const video = screen.getByTestId('video-element')
+      expect(video).toBeInTheDocument()
+      expect(video).toHaveAttribute('title', '')
+    })
+  })
+})
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
index 59a439e6c8..95882e00f5 100644
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ b/web/app/components/base/image-uploader/video-preview.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import { createPortal } from 'react-dom'
 
 type VideoPreviewProps = {
@@ -13,9 +12,9 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   onCancel,
 }) => {
   return createPortal(
-    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()}>
+    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()} data-testid="video-preview">
       <div>
-        <video controls title={title} autoPlay={false} preload="metadata">
+        <video controls title={title} autoPlay={false} preload="metadata" data-testid="video-element">
           <source
             type="video/mp4"
             src={url}
@@ -27,7 +26,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
         className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
         onClick={onCancel}
       >
-        <RiCloseLine className="h-4 w-4 text-gray-500" />
+        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />
       </div>
     </div>,
     document.body,

From 8761109a343cdf1fb1d22dc469c669f501fdf7c6 Mon Sep 17 00:00:00 2001
From: akashseth-ifp <akash.seth@infocusp.com>
Date: Tue, 24 Feb 2026 20:00:35 +0530
Subject: [PATCH 26/26] test(base): added test coverage to form components
 (#32436)

---
 .../form/components/base/base-field.spec.tsx  | 293 ++++++++++++++++++
 .../form/components/base/base-form.spec.tsx   | 120 +++++++
 .../base/form/components/base/index.spec.tsx  |  11 +
 .../form/components/field/checkbox.spec.tsx   |  34 ++
 .../components/field/custom-select.spec.tsx   |  49 +++
 .../form/components/field/file-types.spec.tsx | 127 ++++++++
 .../components/field/file-uploader.spec.tsx   |  82 +++++
 .../field/input-type-select/hooks.spec.tsx    |  20 ++
 .../field/input-type-select/index.spec.tsx    |  37 +++
 .../field/input-type-select/option.spec.tsx   |  22 ++
 .../field/input-type-select/trigger.spec.tsx  |  28 ++
 .../field/input-type-select/types.spec.ts     |  12 +
 .../mixed-variable-text-input/index.spec.tsx  |  17 +
 .../placeholder.spec.tsx                      |  74 +++++
 .../components/field/number-input.spec.tsx    |  33 ++
 .../components/field/number-slider.spec.tsx   |  46 +++
 .../form/components/field/options.spec.tsx    |  45 +++
 .../form/components/field/select.spec.tsx     |  49 +++
 .../form/components/field/text-area.spec.tsx  |  33 ++
 .../base/form/components/field/text.spec.tsx  |  33 ++
 .../components/field/upload-method.spec.tsx   |  64 ++++
 .../field/variable-or-constant-input.spec.tsx |  47 +++
 .../field/variable-selector.spec.tsx          |  29 ++
 .../form/components/form/actions.spec.tsx     |  75 +++++
 .../base/form/components/label.spec.tsx       |  44 +--
 25 files changed, 1405 insertions(+), 19 deletions(-)
 create mode 100644 web/app/components/base/form/components/base/base-field.spec.tsx
 create mode 100644 web/app/components/base/form/components/base/base-form.spec.tsx
 create mode 100644 web/app/components/base/form/components/base/index.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/checkbox.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/custom-select.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/file-types.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/file-uploader.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/input-type-select/hooks.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/input-type-select/index.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/input-type-select/option.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/input-type-select/trigger.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/input-type-select/types.spec.ts
 create mode 100644 web/app/components/base/form/components/field/mixed-variable-text-input/index.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/number-input.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/number-slider.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/options.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/select.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/text-area.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/text.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/upload-method.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/variable-or-constant-input.spec.tsx
 create mode 100644 web/app/components/base/form/components/field/variable-selector.spec.tsx
 create mode 100644 web/app/components/base/form/components/form/actions.spec.tsx

diff --git a/web/app/components/base/form/components/base/base-field.spec.tsx b/web/app/components/base/form/components/base/base-field.spec.tsx
new file mode 100644
index 0000000000..7c50b524a5
--- /dev/null
+++ b/web/app/components/base/form/components/base/base-field.spec.tsx
@@ -0,0 +1,293 @@
+import type { AnyFieldApi } from '@tanstack/react-form'
+import type { FormSchema } from '@/app/components/base/form/types'
+import { useForm } from '@tanstack/react-form'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
+import BaseField from './base-field'
+
+const mockDynamicOptions = vi.fn()
+
+vi.mock('@/hooks/use-i18n', () => ({
+  useRenderI18nObject: () => (content: Record<string, string>) => content.en_US ?? Object.values(content)[0] ?? '',
+}))
+
+vi.mock('@/service/use-triggers', () => ({
+  useTriggerPluginDynamicOptions: (...args: unknown[]) => mockDynamicOptions(...args),
+}))
+
+const renderBaseField = ({
+  formSchema,
+  defaultValues,
+  fieldState,
+  onChange,
+  showCurrentValue = false,
+}: {
+  formSchema: FormSchema
+  defaultValues?: Record<string, unknown>
+  fieldState?: {
+    validateStatus?: FormItemValidateStatusEnum
+    errors?: string[]
+    warnings?: string[]
+  }
+  onChange?: (field: string, value: unknown) => void
+  showCurrentValue?: boolean
+}) => {
+  const TestComponent = () => {
+    const form = useForm({
+      defaultValues: defaultValues ?? { [formSchema.name]: '' },
+      onSubmit: async () => {},
+    })
+
+    return (
+      <>
+        <form.Field name={formSchema.name}>
+          {field => (
+            <BaseField
+              field={field as unknown as AnyFieldApi}
+              formSchema={formSchema}
+              fieldState={fieldState}
+              onChange={onChange}
+            />
+          )}
+        </form.Field>
+        {showCurrentValue && (
+          <form.Subscribe selector={state => state.values[formSchema.name]}>
+            {value => <div data-testid="field-value">{String(value)}</div>}
+          </form.Subscribe>
+        )}
+      </>
+    )
+  }
+
+  return render(<TestComponent />)
+}
+
+describe('BaseField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDynamicOptions.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: null,
+    })
+  })
+
+  it('should render text input and propagate changes', () => {
+    const onChange = vi.fn()
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textInput,
+        name: 'title',
+        label: 'Title',
+        required: true,
+      },
+      defaultValues: { title: 'Hello' },
+      onChange,
+    })
+
+    const input = screen.getByDisplayValue('Hello')
+    expect(input).toHaveValue('Hello')
+
+    fireEvent.change(input, { target: { value: 'Updated' } })
+    expect(onChange).toHaveBeenCalledWith('title', 'Updated')
+    expect(screen.getByText('Title')).toBeInTheDocument()
+    expect(screen.getAllByText('*')).toHaveLength(1)
+  })
+
+  it('should render only options that satisfy show_on conditions', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.select,
+        name: 'mode',
+        label: 'Mode',
+        required: false,
+        options: [
+          { label: 'Alpha', value: 'alpha' },
+          { label: 'Beta', value: 'beta', show_on: [{ variable: 'enabled', value: 'yes' }] },
+        ],
+      },
+      defaultValues: { mode: 'alpha', enabled: 'no' },
+    })
+
+    fireEvent.click(screen.getByText('Alpha'))
+    expect(screen.queryByText('Beta')).not.toBeInTheDocument()
+  })
+
+  it('should render dynamic select loading state', () => {
+    mockDynamicOptions.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+    })
+
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.dynamicSelect,
+        name: 'plugin',
+        label: 'Plugin',
+        required: false,
+      },
+      defaultValues: { plugin: '' },
+    })
+
+    expect(screen.getByText('common.dynamicSelect.loading')).toBeInTheDocument()
+  })
+
+  it('should update value when users click a radio option', () => {
+    const onChange = vi.fn()
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.radio,
+        name: 'visibility',
+        label: 'Visibility',
+        required: false,
+        options: [
+          { label: 'Public', value: 'public' },
+          { label: 'Private', value: 'private' },
+        ],
+      },
+      defaultValues: { visibility: 'public' },
+      onChange,
+    })
+
+    fireEvent.click(screen.getByText('Private'))
+    expect(onChange).toHaveBeenCalledWith('visibility', 'private')
+  })
+
+  it('should show validation message when field state has an error', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textInput,
+        name: 'name',
+        label: 'Name',
+        required: false,
+      },
+      fieldState: {
+        validateStatus: FormItemValidateStatusEnum.Error,
+        errors: ['Name is required'],
+      },
+    })
+
+    expect(screen.getByText('Name is required')).toBeInTheDocument()
+  })
+
+  it('should render description and help link when provided', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textInput,
+        name: 'doc',
+        label: 'Documentation',
+        required: false,
+        description: 'Read the description',
+        url: 'https://example.com/help',
+        help: 'Open help docs',
+      },
+      defaultValues: { doc: '' },
+    })
+
+    expect(screen.getByText('Read the description')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Open help docs' })).toHaveAttribute('href', 'https://example.com/help')
+  })
+
+  it('should render secret input with password type', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.secretInput,
+        name: 'token',
+        label: 'Token',
+        required: false,
+      },
+      defaultValues: { token: 'abc' },
+    })
+
+    expect(screen.getByDisplayValue('abc')).toHaveAttribute('type', 'password')
+  })
+
+  it('should render number input with number type', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textNumber,
+        name: 'count',
+        label: 'Count',
+        required: false,
+      },
+      defaultValues: { count: 7 },
+    })
+
+    expect(screen.getByDisplayValue('7')).toHaveAttribute('type', 'number')
+  })
+
+  it('should render translated object label content', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textInput,
+        name: 'title_i18n',
+        label: { en_US: 'Localized title', zh_Hans: '标题' },
+        required: false,
+      },
+      defaultValues: { title_i18n: '' },
+    })
+
+    expect(screen.getByText('Localized title')).toBeInTheDocument()
+  })
+
+  it('should render dynamic options and allow selecting one', () => {
+    mockDynamicOptions.mockReturnValue({
+      data: {
+        options: [
+          { label: { en_US: 'Option A', zh_Hans: '选项A' }, value: 'a' },
+        ],
+      },
+      isLoading: false,
+      error: null,
+    })
+
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.dynamicSelect,
+        name: 'plugin_option',
+        label: 'Plugin option',
+        required: false,
+      },
+      defaultValues: { plugin_option: '' },
+    })
+
+    fireEvent.click(screen.getByText('common.placeholder.input'))
+    fireEvent.click(screen.getByText('Option A'))
+    expect(screen.getByText('Option A')).toBeInTheDocument()
+  })
+
+  it('should update boolean field when users choose false', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.boolean,
+        name: 'enabled',
+        label: 'Enabled',
+        required: false,
+      },
+      defaultValues: { enabled: true },
+      showCurrentValue: true,
+    })
+
+    expect(screen.getByTestId('field-value')).toHaveTextContent('true')
+    fireEvent.click(screen.getByText('False'))
+    expect(screen.getByTestId('field-value')).toHaveTextContent('false')
+  })
+
+  it('should render warning message when field state has a warning', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.textInput,
+        name: 'warning_field',
+        label: 'Warning field',
+        required: false,
+      },
+      fieldState: {
+        validateStatus: FormItemValidateStatusEnum.Warning,
+        warnings: ['This is a warning'],
+      },
+    })
+
+    expect(screen.getByText('This is a warning')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/base/base-form.spec.tsx b/web/app/components/base/form/components/base/base-form.spec.tsx
new file mode 100644
index 0000000000..5d2c662aa3
--- /dev/null
+++ b/web/app/components/base/form/components/base/base-form.spec.tsx
@@ -0,0 +1,120 @@
+import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import BaseForm from './base-form'
+
+vi.mock('@/service/use-triggers', () => ({
+  useTriggerPluginDynamicOptions: () => ({
+    data: undefined,
+    isLoading: false,
+    error: null,
+  }),
+}))
+
+const baseSchemas: FormSchema[] = [
+  {
+    type: FormTypeEnum.textInput,
+    name: 'kind',
+    label: 'Kind',
+    required: false,
+    default: 'show',
+  },
+  {
+    type: FormTypeEnum.textInput,
+    name: 'title',
+    label: 'Title',
+    required: true,
+    default: 'Initial title',
+    show_on: [{ variable: 'kind', value: 'show' }],
+  },
+]
+
+describe('BaseForm', () => {
+  it('should render nothing when no schemas are provided', () => {
+    const { container } = render(<BaseForm />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should render fields with default values from schema', () => {
+    render(<BaseForm formSchemas={baseSchemas} />)
+
+    expect(screen.getByDisplayValue('show')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Initial title')).toBeInTheDocument()
+  })
+
+  it('should hide conditional fields when show_on conditions are not met', () => {
+    render(
+      <BaseForm
+        formSchemas={baseSchemas}
+        defaultValues={{ kind: 'hide', title: 'Hidden title' }}
+      />,
+    )
+
+    expect(screen.getByDisplayValue('hide')).toBeInTheDocument()
+    expect(screen.queryByDisplayValue('Hidden title')).not.toBeInTheDocument()
+  })
+
+  it('should prevent default submit behavior when preventDefaultSubmit is true', () => {
+    const onSubmit = vi.fn((event: React.FormEvent<HTMLFormElement>) => {
+      expect(event.defaultPrevented).toBe(true)
+    })
+    const { container } = render(
+      <BaseForm
+        formSchemas={baseSchemas}
+        onSubmit={onSubmit}
+        preventDefaultSubmit
+      />,
+    )
+
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+    expect(onSubmit).toHaveBeenCalled()
+  })
+
+  it('should expose ref API for updating values and field states', () => {
+    const formRef = { current: null } as { current: FormRefObject | null }
+    render(
+      <BaseForm
+        formSchemas={baseSchemas}
+        ref={formRef}
+      />,
+    )
+
+    expect(formRef.current).not.toBeNull()
+
+    act(() => {
+      formRef.current?.setFields([
+        {
+          name: 'title',
+          value: 'Changed title',
+          errors: ['Title is invalid'],
+        },
+      ])
+    })
+
+    expect(screen.getByDisplayValue('Changed title')).toBeInTheDocument()
+    expect(screen.getByText('Title is invalid')).toBeInTheDocument()
+    expect(formRef.current?.getForm()).toBeTruthy()
+    expect(formRef.current?.getFormValues({})).toBeTruthy()
+  })
+
+  it('should derive warning status when setFields receives warnings only', () => {
+    const formRef = { current: null } as { current: FormRefObject | null }
+    render(
+      <BaseForm
+        formSchemas={baseSchemas}
+        ref={formRef}
+      />,
+    )
+
+    act(() => {
+      formRef.current?.setFields([
+        {
+          name: 'title',
+          warnings: ['Title warning'],
+        },
+      ])
+    })
+
+    expect(screen.getByText('Title warning')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/base/index.spec.tsx b/web/app/components/base/form/components/base/index.spec.tsx
new file mode 100644
index 0000000000..16f9806b27
--- /dev/null
+++ b/web/app/components/base/form/components/base/index.spec.tsx
@@ -0,0 +1,11 @@
+import { BaseField, BaseForm } from '.'
+
+describe('base component exports', () => {
+  it('should export BaseField', () => {
+    expect(BaseField).toBeDefined()
+  })
+
+  it('should export BaseForm', () => {
+    expect(BaseForm).toBeDefined()
+  })
+})
diff --git a/web/app/components/base/form/components/field/checkbox.spec.tsx b/web/app/components/base/form/components/field/checkbox.spec.tsx
new file mode 100644
index 0000000000..ee7d8ee6ab
--- /dev/null
+++ b/web/app/components/base/form/components/field/checkbox.spec.tsx
@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import CheckboxField from './checkbox'
+
+const mockField = {
+  name: 'checkbox-field',
+  state: {
+    value: false,
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('CheckboxField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should toggle on when unchecked users click the checkbox', () => {
+    mockField.state.value = false
+    render(<CheckboxField label="Enable feature" />)
+    fireEvent.click(screen.getByTestId('checkbox-checkbox-field'))
+    expect(mockField.handleChange).toHaveBeenCalledWith(true)
+  })
+
+  it('should toggle off when checked users click the label', () => {
+    mockField.state.value = true
+    render(<CheckboxField label="Enable feature" />)
+    fireEvent.click(screen.getByText('Enable feature'))
+    expect(mockField.handleChange).toHaveBeenCalledWith(false)
+  })
+})
diff --git a/web/app/components/base/form/components/field/custom-select.spec.tsx b/web/app/components/base/form/components/field/custom-select.spec.tsx
new file mode 100644
index 0000000000..97f13758ec
--- /dev/null
+++ b/web/app/components/base/form/components/field/custom-select.spec.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import CustomSelectField from './custom-select'
+
+const mockField = {
+  name: 'custom-select-field',
+  state: {
+    value: 'small',
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('CustomSelectField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 'small'
+  })
+
+  it('should render select placeholder or selected value', () => {
+    render(
+      <CustomSelectField
+        label="Size"
+        options={[
+          { label: 'Small', value: 'small' },
+          { label: 'Large', value: 'large' },
+        ]}
+      />,
+    )
+    expect(screen.getByText('Small')).toBeInTheDocument()
+  })
+
+  it('should update value when users select another option', () => {
+    render(
+      <CustomSelectField
+        label="Size"
+        options={[
+          { label: 'Small', value: 'small' },
+          { label: 'Large', value: 'large' },
+        ]}
+      />,
+    )
+    fireEvent.click(screen.getByText('Small'))
+    fireEvent.click(screen.getByText('Large'))
+    expect(mockField.handleChange).toHaveBeenCalledWith('large')
+  })
+})
diff --git a/web/app/components/base/form/components/field/file-types.spec.tsx b/web/app/components/base/form/components/field/file-types.spec.tsx
new file mode 100644
index 0000000000..0c2a95c655
--- /dev/null
+++ b/web/app/components/base/form/components/field/file-types.spec.tsx
@@ -0,0 +1,127 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import FileTypesField from './file-types'
+
+type FileTypeValue = {
+  allowedFileTypes: string[]
+  allowedFileExtensions: string[]
+}
+
+const mockField = {
+  name: 'allowed-types',
+  state: {
+    value: {
+      allowedFileTypes: [],
+      allowedFileExtensions: [],
+    } as FileTypeValue,
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/file-type-item', () => ({
+  default: ({
+    type,
+    onToggle,
+    customFileTypes = [],
+    onCustomFileTypesChange,
+  }: {
+    type: SupportUploadFileTypes
+    onToggle: (type: SupportUploadFileTypes) => void
+    customFileTypes?: string[]
+    onCustomFileTypesChange?: (types: string[]) => void
+  }) => (
+    <div>
+      <button onClick={() => onToggle(type)}>{type}</button>
+      {onCustomFileTypesChange && (
+        <input
+          aria-label="custom file extensions"
+          value={customFileTypes.join(',')}
+          onChange={e => onCustomFileTypesChange(
+            e.target.value.split(',').map(v => v.trim()).filter(Boolean),
+          )}
+        />
+      )}
+    </div>
+  ),
+}))
+
+describe('FileTypesField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = {
+      allowedFileTypes: [],
+      allowedFileExtensions: [],
+    }
+  })
+
+  it('should render the label and available type options', () => {
+    render(<FileTypesField label="Allowed file types" />)
+
+    expect(screen.getByText('Allowed file types')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: SupportUploadFileTypes.document })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: SupportUploadFileTypes.image })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: SupportUploadFileTypes.audio })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: SupportUploadFileTypes.video })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: SupportUploadFileTypes.custom })).toBeInTheDocument()
+  })
+
+  it('should keep only custom when users choose custom types', () => {
+    mockField.state.value.allowedFileTypes = [SupportUploadFileTypes.document]
+    render(<FileTypesField label="Allowed file types" />)
+
+    fireEvent.click(screen.getByRole('button', { name: SupportUploadFileTypes.custom }))
+    expect(mockField.handleChange).toHaveBeenCalledWith({
+      allowedFileTypes: [SupportUploadFileTypes.custom],
+      allowedFileExtensions: [],
+    })
+  })
+
+  it('should remove custom and add selected standard type', () => {
+    mockField.state.value.allowedFileTypes = [SupportUploadFileTypes.custom]
+    render(<FileTypesField label="Allowed file types" />)
+
+    fireEvent.click(screen.getByRole('button', { name: SupportUploadFileTypes.image }))
+    expect(mockField.handleChange).toHaveBeenCalledWith({
+      allowedFileTypes: [SupportUploadFileTypes.image],
+      allowedFileExtensions: [],
+    })
+  })
+
+  it('should remove custom when users click custom again', () => {
+    mockField.state.value.allowedFileTypes = [SupportUploadFileTypes.custom]
+    render(<FileTypesField label="Allowed file types" />)
+
+    fireEvent.click(screen.getByRole('button', { name: SupportUploadFileTypes.custom }))
+    expect(mockField.handleChange).toHaveBeenCalledWith({
+      allowedFileTypes: [],
+      allowedFileExtensions: [],
+    })
+  })
+
+  it('should remove a selected standard type when users click it again', () => {
+    mockField.state.value.allowedFileTypes = [SupportUploadFileTypes.image]
+    render(<FileTypesField label="Allowed file types" />)
+
+    fireEvent.click(screen.getByRole('button', { name: SupportUploadFileTypes.image }))
+    expect(mockField.handleChange).toHaveBeenCalledWith({
+      allowedFileTypes: [],
+      allowedFileExtensions: [],
+    })
+  })
+
+  it('should update custom extensions when users type custom extension values', () => {
+    render(<FileTypesField label="Allowed file types" />)
+
+    fireEvent.change(screen.getByRole('textbox', { name: 'custom file extensions' }), {
+      target: { value: 'csv,pdf' },
+    })
+    expect(mockField.handleChange).toHaveBeenCalledWith({
+      allowedFileTypes: [],
+      allowedFileExtensions: ['csv', 'pdf'],
+    })
+  })
+})
diff --git a/web/app/components/base/form/components/field/file-uploader.spec.tsx b/web/app/components/base/form/components/field/file-uploader.spec.tsx
new file mode 100644
index 0000000000..c32d370346
--- /dev/null
+++ b/web/app/components/base/form/components/field/file-uploader.spec.tsx
@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
+import FileUploaderField from './file-uploader'
+
+const mockField = {
+  name: 'files',
+  state: {
+    value: [
+      {
+        id: 'file-1',
+        name: 'report.pdf',
+        size: 1024,
+        type: 'application/pdf',
+        progress: 100,
+        transferMethod: TransferMethod.local_file,
+        supportFileType: SupportUploadFileTypes.document,
+        uploadedId: 'uploaded-1',
+        url: 'https://example.com/report.pdf',
+      },
+    ],
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ token: 'test-token' }),
+}))
+
+describe('FileUploaderField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = [
+      {
+        id: 'file-1',
+        name: 'report.pdf',
+        size: 1024,
+        type: 'application/pdf',
+        progress: 100,
+        transferMethod: TransferMethod.local_file,
+        supportFileType: SupportUploadFileTypes.document,
+        uploadedId: 'uploaded-1',
+        url: 'https://example.com/report.pdf',
+      },
+    ]
+  })
+
+  it('should render existing uploaded file name', () => {
+    render(
+      <FileUploaderField
+        label="Attachments"
+        fileConfig={{
+          allowed_file_upload_methods: [TransferMethod.local_file],
+          allowed_file_types: [SupportUploadFileTypes.document],
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Attachments')).toBeInTheDocument()
+    expect(screen.getByText('report.pdf')).toBeInTheDocument()
+  })
+
+  it('should update field value when users remove a file', () => {
+    render(
+      <FileUploaderField
+        label="Attachments"
+        fileConfig={{
+          allowed_file_upload_methods: [TransferMethod.local_file],
+          allowed_file_types: [SupportUploadFileTypes.document],
+        }}
+      />,
+    )
+
+    const deleteButtons = screen.getAllByRole('button')
+    fireEvent.click(deleteButtons[1])
+    expect(mockField.handleChange).toHaveBeenCalledWith([])
+  })
+})
diff --git a/web/app/components/base/form/components/field/input-type-select/hooks.spec.tsx b/web/app/components/base/form/components/field/input-type-select/hooks.spec.tsx
new file mode 100644
index 0000000000..a556697db1
--- /dev/null
+++ b/web/app/components/base/form/components/field/input-type-select/hooks.spec.tsx
@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react'
+import { useInputTypeOptions } from './hooks'
+
+describe('useInputTypeOptions', () => {
+  it('should include file options when supportFile is true', () => {
+    const { result } = renderHook(() => useInputTypeOptions(true))
+    const values = result.current.map(item => item.value)
+
+    expect(values).toContain('file')
+    expect(values).toContain('file-list')
+  })
+
+  it('should exclude file options when supportFile is false', () => {
+    const { result } = renderHook(() => useInputTypeOptions(false))
+    const values = result.current.map(item => item.value)
+
+    expect(values).not.toContain('file')
+    expect(values).not.toContain('file-list')
+  })
+})
diff --git a/web/app/components/base/form/components/field/input-type-select/index.spec.tsx b/web/app/components/base/form/components/field/input-type-select/index.spec.tsx
new file mode 100644
index 0000000000..e31cf17af5
--- /dev/null
+++ b/web/app/components/base/form/components/field/input-type-select/index.spec.tsx
@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import InputTypeSelectField from './index'
+
+const mockField = {
+  name: 'input-type',
+  state: {
+    value: 'text-input',
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('InputTypeSelectField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 'text-input'
+  })
+
+  it('should render label and selected option', () => {
+    render(<InputTypeSelectField label="Input type" supportFile={true} />)
+
+    expect(screen.getByText('Input type')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
+  })
+
+  it('should update value when users choose another input type', () => {
+    render(<InputTypeSelectField label="Input type" supportFile={true} />)
+
+    fireEvent.click(screen.getByText('appDebug.variableConfig.text-input'))
+    fireEvent.click(screen.getByText('appDebug.variableConfig.number'))
+
+    expect(mockField.handleChange).toHaveBeenCalledWith('number')
+  })
+})
diff --git a/web/app/components/base/form/components/field/input-type-select/option.spec.tsx b/web/app/components/base/form/components/field/input-type-select/option.spec.tsx
new file mode 100644
index 0000000000..475ef20410
--- /dev/null
+++ b/web/app/components/base/form/components/field/input-type-select/option.spec.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import Option from './option'
+
+const MockIcon = () => <svg aria-label="mock icon" />
+
+describe('InputTypeSelect Option', () => {
+  it('should render option label and type', () => {
+    render(
+      <Option
+        option={{
+          value: 'checkbox',
+          label: 'Checkbox',
+          Icon: MockIcon,
+          type: 'boolean',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Checkbox')).toBeInTheDocument()
+    expect(screen.getByText('boolean')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.spec.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.spec.tsx
new file mode 100644
index 0000000000..0bd2274703
--- /dev/null
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.spec.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react'
+import Trigger from './trigger'
+
+const MockIcon = () => <svg aria-label="mock icon" />
+
+describe('InputTypeSelect Trigger', () => {
+  it('should show placeholder text when no option is selected', () => {
+    render(<Trigger option={undefined} open={false} />)
+    expect(screen.getByText('common.placeholder.select')).toBeInTheDocument()
+  })
+
+  it('should show selected option label and type', () => {
+    render(
+      <Trigger
+        option={{
+          value: 'text-input',
+          label: 'Text Input',
+          Icon: MockIcon,
+          type: 'string',
+        }}
+        open={false}
+      />,
+    )
+
+    expect(screen.getByText('Text Input')).toBeInTheDocument()
+    expect(screen.getByText('string')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/field/input-type-select/types.spec.ts b/web/app/components/base/form/components/field/input-type-select/types.spec.ts
new file mode 100644
index 0000000000..3260f54ce4
--- /dev/null
+++ b/web/app/components/base/form/components/field/input-type-select/types.spec.ts
@@ -0,0 +1,12 @@
+import { InputTypeEnum } from './types'
+
+describe('InputTypeEnum', () => {
+  it('should accept valid input types', () => {
+    expect(InputTypeEnum.parse('text-input')).toBe('text-input')
+    expect(InputTypeEnum.parse('file-list')).toBe('file-list')
+  })
+
+  it('should reject invalid input types', () => {
+    expect(() => InputTypeEnum.parse('invalid-type')).toThrow()
+  })
+})
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/index.spec.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/index.spec.tsx
new file mode 100644
index 0000000000..94a0c8746f
--- /dev/null
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/index.spec.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import MixedVariableTextInput from './index'
+
+describe('MixedVariableTextInput', () => {
+  it('should render placeholder guidance and data type badge', () => {
+    render(<MixedVariableTextInput />)
+
+    expect(screen.getByText('Type or press')).toBeInTheDocument()
+    expect(screen.getByText('insert variable')).toBeInTheDocument()
+    expect(screen.getByText('String')).toBeInTheDocument()
+  })
+
+  it('should keep placeholder visible when editor is not editable', () => {
+    render(<MixedVariableTextInput editable={false} />)
+    expect(screen.getByText('insert variable')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.spec.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.spec.tsx
new file mode 100644
index 0000000000..6ce68c3b47
--- /dev/null
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.spec.tsx
@@ -0,0 +1,74 @@
+import type { EditorState } from 'lexical'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { $getRoot } from 'lexical'
+import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
+import Placeholder from './placeholder'
+
+const config = {
+  namespace: 'placeholder-test',
+  theme: {},
+  nodes: [CustomTextNode],
+  onError: (error: Error) => {
+    throw error
+  },
+}
+
+describe('MixedVariable Placeholder', () => {
+  it('should render helper text and insert variable action', () => {
+    render(
+      <LexicalComposer initialConfig={config}>
+        <Placeholder />
+      </LexicalComposer>,
+    )
+
+    expect(screen.getByText('Type or press')).toBeInTheDocument()
+    expect(screen.getByText('insert variable')).toBeInTheDocument()
+    expect(screen.getByText('String')).toBeInTheDocument()
+  })
+
+  it('should render shortcut symbol for variable insertion', () => {
+    render(
+      <LexicalComposer initialConfig={config}>
+        <Placeholder />
+      </LexicalComposer>,
+    )
+
+    expect(screen.getByText('/')).toBeInTheDocument()
+  })
+
+  it('should insert text and keep editor content available after click', async () => {
+    const user = userEvent.setup()
+    let editorText = ''
+    const handleChange = (editorState: EditorState) => {
+      editorState.read(() => {
+        editorText = $getRoot().getTextContent()
+      })
+    }
+
+    render(
+      <LexicalComposer initialConfig={config}>
+        <OnChangePlugin onChange={handleChange} />
+        <Placeholder />
+      </LexicalComposer>,
+    )
+
+    await user.click(screen.getByText('insert variable'))
+
+    expect(editorText).toContain('/')
+  })
+
+  it('should handle container click without breaking the helper UI', async () => {
+    const user = userEvent.setup()
+    render(
+      <LexicalComposer initialConfig={config}>
+        <Placeholder />
+      </LexicalComposer>,
+    )
+
+    await user.click(screen.getByText('Type or press'))
+    expect(screen.getByText('insert variable')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/field/number-input.spec.tsx b/web/app/components/base/form/components/field/number-input.spec.tsx
new file mode 100644
index 0000000000..85c46f1df2
--- /dev/null
+++ b/web/app/components/base/form/components/field/number-input.spec.tsx
@@ -0,0 +1,33 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import NumberInputField from './number-input'
+
+const mockField = {
+  name: 'number-field',
+  state: {
+    value: 2,
+  },
+  handleChange: vi.fn(),
+  handleBlur: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('NumberInputField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 2
+  })
+
+  it('should render current number value', () => {
+    render(<NumberInputField label="Count" />)
+    expect(screen.getByDisplayValue('2')).toBeInTheDocument()
+  })
+
+  it('should update value when users click increment', () => {
+    render(<NumberInputField label="Count" />)
+    fireEvent.click(screen.getByRole('button', { name: 'increment' }))
+    expect(mockField.handleChange).toHaveBeenCalledWith(3)
+  })
+})
diff --git a/web/app/components/base/form/components/field/number-slider.spec.tsx b/web/app/components/base/form/components/field/number-slider.spec.tsx
new file mode 100644
index 0000000000..a9676c4338
--- /dev/null
+++ b/web/app/components/base/form/components/field/number-slider.spec.tsx
@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import NumberSliderField from './number-slider'
+
+const mockField = {
+  name: 'slider-field',
+  state: {
+    value: 2,
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/input-number-with-slider', () => ({
+  default: ({
+    value,
+    onChange,
+  }: {
+    value: number
+    onChange: (value: number) => void
+  }) => (
+    <button onClick={() => onChange(value + 1)}>
+      {`slider-value-${value}`}
+    </button>
+  ),
+}))
+
+describe('NumberSliderField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 2
+  })
+
+  it('should render description when provided', () => {
+    render(<NumberSliderField label="Threshold" description="Used to control threshold" />)
+    expect(screen.getByText('Used to control threshold')).toBeInTheDocument()
+  })
+
+  it('should update value when users interact with slider', () => {
+    render(<NumberSliderField label="Threshold" />)
+    fireEvent.click(screen.getByRole('button', { name: 'slider-value-2' }))
+    expect(mockField.handleChange).toHaveBeenCalledWith(3)
+  })
+})
diff --git a/web/app/components/base/form/components/field/options.spec.tsx b/web/app/components/base/form/components/field/options.spec.tsx
new file mode 100644
index 0000000000..a7860079c6
--- /dev/null
+++ b/web/app/components/base/form/components/field/options.spec.tsx
@@ -0,0 +1,45 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import OptionsField from './options'
+
+const mockField = {
+  name: 'options-field',
+  state: {
+    value: [] as { label: string, value: string }[],
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+vi.mock('@/app/components/app/configuration/config-var/config-select', () => ({
+  default: ({
+    onChange,
+  }: {
+    onChange: (value: { label: string, value: string }[]) => void
+  }) => (
+    <button onClick={() => onChange([{ label: 'A', value: 'a' }])}>
+      apply-options
+    </button>
+  ),
+}))
+
+describe('OptionsField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = []
+  })
+
+  it('should render label and options control', () => {
+    render(<OptionsField label="Allowed options" />)
+    expect(screen.getByText('Allowed options')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'apply-options' })).toBeInTheDocument()
+  })
+
+  it('should update options when users apply changes', () => {
+    render(<OptionsField label="Allowed options" />)
+    fireEvent.click(screen.getByRole('button', { name: 'apply-options' }))
+    expect(mockField.handleChange).toHaveBeenCalledWith([{ label: 'A', value: 'a' }])
+  })
+})
diff --git a/web/app/components/base/form/components/field/select.spec.tsx b/web/app/components/base/form/components/field/select.spec.tsx
new file mode 100644
index 0000000000..d38a9ac511
--- /dev/null
+++ b/web/app/components/base/form/components/field/select.spec.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import SelectField from './select'
+
+const mockField = {
+  name: 'select-field',
+  state: {
+    value: 'alpha',
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('SelectField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 'alpha'
+  })
+
+  it('should render selected value', () => {
+    render(
+      <SelectField
+        label="Mode"
+        options={[
+          { label: 'Alpha', value: 'alpha' },
+          { label: 'Beta', value: 'beta' },
+        ]}
+      />,
+    )
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+  })
+
+  it('should update value when users select another option', () => {
+    render(
+      <SelectField
+        label="Mode"
+        options={[
+          { label: 'Alpha', value: 'alpha' },
+          { label: 'Beta', value: 'beta' },
+        ]}
+      />,
+    )
+    fireEvent.click(screen.getByText('Alpha'))
+    fireEvent.click(screen.getByText('Beta'))
+    expect(mockField.handleChange).toHaveBeenCalledWith('beta')
+  })
+})
diff --git a/web/app/components/base/form/components/field/text-area.spec.tsx b/web/app/components/base/form/components/field/text-area.spec.tsx
new file mode 100644
index 0000000000..78b1be14e5
--- /dev/null
+++ b/web/app/components/base/form/components/field/text-area.spec.tsx
@@ -0,0 +1,33 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import TextAreaField from './text-area'
+
+const mockField = {
+  name: 'text-area-field',
+  state: {
+    value: 'Initial note',
+  },
+  handleChange: vi.fn(),
+  handleBlur: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('TextAreaField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 'Initial note'
+  })
+
+  it('should render current value', () => {
+    render(<TextAreaField label="Note" />)
+    expect(screen.getByLabelText('Note')).toHaveValue('Initial note')
+  })
+
+  it('should update value when users type', () => {
+    render(<TextAreaField label="Note" />)
+    fireEvent.change(screen.getByLabelText('Note'), { target: { value: 'Updated note' } })
+    expect(mockField.handleChange).toHaveBeenCalledWith('Updated note')
+  })
+})
diff --git a/web/app/components/base/form/components/field/text.spec.tsx b/web/app/components/base/form/components/field/text.spec.tsx
new file mode 100644
index 0000000000..5a3010c6b4
--- /dev/null
+++ b/web/app/components/base/form/components/field/text.spec.tsx
@@ -0,0 +1,33 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import TextField from './text'
+
+const mockField = {
+  name: 'text-field',
+  state: {
+    value: 'Initial text',
+  },
+  handleChange: vi.fn(),
+  handleBlur: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+describe('TextField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = 'Initial text'
+  })
+
+  it('should render current value', () => {
+    render(<TextField label="Name" />)
+    expect(screen.getByLabelText('Name')).toHaveValue('Initial text')
+  })
+
+  it('should update value when users type', () => {
+    render(<TextField label="Name" />)
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Updated text' } })
+    expect(mockField.handleChange).toHaveBeenCalledWith('Updated text')
+  })
+})
diff --git a/web/app/components/base/form/components/field/upload-method.spec.tsx b/web/app/components/base/form/components/field/upload-method.spec.tsx
new file mode 100644
index 0000000000..27d937ffb2
--- /dev/null
+++ b/web/app/components/base/form/components/field/upload-method.spec.tsx
@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/types/app'
+import UploadMethodField from './upload-method'
+
+const mockField = {
+  name: 'upload-method',
+  state: {
+    value: [TransferMethod.local_file] as TransferMethod[],
+  },
+  handleChange: vi.fn(),
+}
+
+vi.mock('../..', () => ({
+  useFieldContext: () => mockField,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/option-card', () => ({
+  default: ({
+    title,
+    selected,
+    onSelect,
+  }: {
+    title: string
+    selected: boolean
+    onSelect: () => void
+  }) => (
+    <button aria-pressed={selected} onClick={onSelect}>
+      {title}
+    </button>
+  ),
+}))
+
+describe('UploadMethodField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockField.state.value = [TransferMethod.local_file]
+  })
+
+  it('should show all upload method options', () => {
+    render(<UploadMethodField label="Upload methods" />)
+
+    expect(screen.getByText('Upload methods')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appDebug.variableConfig.localUpload' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'URL' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appDebug.variableConfig.both' })).toBeInTheDocument()
+  })
+
+  it('should switch to URL-only when users select URL', () => {
+    render(<UploadMethodField label="Upload methods" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'URL' }))
+    expect(mockField.handleChange).toHaveBeenCalledWith([TransferMethod.remote_url])
+  })
+
+  it('should enable both methods when users select both', () => {
+    render(<UploadMethodField label="Upload methods" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.variableConfig.both' }))
+    expect(mockField.handleChange).toHaveBeenCalledWith([
+      TransferMethod.local_file,
+      TransferMethod.remote_url,
+    ])
+  })
+})
diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.spec.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.spec.tsx
new file mode 100644
index 0000000000..57db5ec0d6
--- /dev/null
+++ b/web/app/components/base/form/components/field/variable-or-constant-input.spec.tsx
@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import VariableOrConstantInputField from './variable-or-constant-input'
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+  default: ({ onChange }: { onChange?: () => void }) => (
+    <button onClick={() => onChange?.()}>
+      Variable picker
+    </button>
+  ),
+}))
+
+describe('VariableOrConstantInputField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render variable picker by default', () => {
+    render(<VariableOrConstantInputField label="Input source" />)
+    expect(screen.getByRole('button', { name: 'Variable picker' })).toBeInTheDocument()
+  })
+
+  it('should switch to constant input when users choose constant', () => {
+    render(<VariableOrConstantInputField label="Input source" />)
+    fireEvent.click(screen.getAllByRole('button')[1])
+    expect(screen.queryByRole('button', { name: 'Variable picker' })).not.toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+
+  it('should show typed constant value in the input', () => {
+    render(<VariableOrConstantInputField label="Input source" />)
+    fireEvent.click(screen.getAllByRole('button')[1])
+    const textbox = screen.getByRole('textbox')
+    fireEvent.change(textbox, { target: { value: 'constant-value' } })
+    expect(textbox).toHaveValue('constant-value')
+  })
+
+  it('should switch back to variable mode when users choose variable again', () => {
+    render(<VariableOrConstantInputField label="Input source" />)
+    const modeButtons = screen.getAllByRole('button')
+
+    fireEvent.click(modeButtons[1])
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    fireEvent.click(modeButtons[0])
+    expect(screen.getByRole('button', { name: 'Variable picker' })).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/field/variable-selector.spec.tsx b/web/app/components/base/form/components/field/variable-selector.spec.tsx
new file mode 100644
index 0000000000..ba9e0e9ca7
--- /dev/null
+++ b/web/app/components/base/form/components/field/variable-selector.spec.tsx
@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import VariableSelectorField from './variable-selector'
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+  default: ({ onChange }: { onChange?: () => void }) => (
+    <button onClick={() => onChange?.()}>
+      Variable picker
+    </button>
+  ),
+}))
+
+describe('VariableSelectorField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render label and variable picker', () => {
+    render(<VariableSelectorField label="Reference variable" />)
+    expect(screen.getByText('Reference variable')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Variable picker' })).toBeInTheDocument()
+  })
+
+  it('should keep picker available after users pick a variable', () => {
+    render(<VariableSelectorField label="Reference variable" />)
+    const pickerButton = screen.getByRole('button', { name: 'Variable picker' })
+    fireEvent.click(pickerButton)
+    expect(pickerButton).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/base/form/components/form/actions.spec.tsx b/web/app/components/base/form/components/form/actions.spec.tsx
new file mode 100644
index 0000000000..eb4a6ea146
--- /dev/null
+++ b/web/app/components/base/form/components/form/actions.spec.tsx
@@ -0,0 +1,75 @@
+import type { FormType } from '../..'
+import type { CustomActionsProps } from './actions'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { formContext } from '../..'
+import Actions from './actions'
+
+const renderWithForm = ({
+  canSubmit,
+  isSubmitting,
+  CustomActions,
+}: {
+  canSubmit: boolean
+  isSubmitting: boolean
+  CustomActions?: (props: CustomActionsProps) => React.ReactNode
+}) => {
+  const submitSpy = vi.fn()
+  const state = {
+    canSubmit,
+    isSubmitting,
+  }
+  const form = {
+    store: {
+      state,
+      subscribe: () => () => {},
+    },
+    handleSubmit: submitSpy,
+  }
+
+  const TestComponent = () => {
+    return (
+      <formContext.Provider value={form as unknown as FormType}>
+        <Actions
+          CustomActions={CustomActions}
+        />
+      </formContext.Provider>
+    )
+  }
+
+  render(<TestComponent />)
+  return { submitSpy }
+}
+
+describe('Actions', () => {
+  it('should disable submit button when form cannot submit', () => {
+    renderWithForm({ canSubmit: false, isSubmitting: false })
+    expect(screen.getByRole('button', { name: 'common.operation.submit' })).toBeDisabled()
+  })
+
+  it('should call form submit when users click submit button', () => {
+    const { submitSpy } = renderWithForm({ canSubmit: true, isSubmitting: false })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.submit' }))
+    expect(submitSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should render custom actions when provided', () => {
+    const customActionsSpy = vi.fn(({ isSubmitting, canSubmit }: CustomActionsProps) => (
+      <div>
+        {`custom-${String(isSubmitting)}-${String(canSubmit)}`}
+      </div>
+    ))
+
+    renderWithForm({
+      canSubmit: true,
+      isSubmitting: true,
+      CustomActions: customActionsSpy,
+    })
+
+    expect(screen.queryByRole('button', { name: 'common.operation.submit' })).not.toBeInTheDocument()
+    expect(screen.getByText('custom-true-true')).toBeInTheDocument()
+    expect(customActionsSpy).toHaveBeenCalledWith(expect.objectContaining({
+      isSubmitting: true,
+      canSubmit: true,
+    }))
+  })
+})
diff --git a/web/app/components/base/form/components/label.spec.tsx b/web/app/components/base/form/components/label.spec.tsx
index 12ab9e335b..ebda6d5039 100644
--- a/web/app/components/base/form/components/label.spec.tsx
+++ b/web/app/components/base/form/components/label.spec.tsx
@@ -1,45 +1,51 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Label from './label'
 
-describe('Label Component', () => {
+describe('Label', () => {
   const defaultProps = {
     htmlFor: 'test-input',
     label: 'Test Label',
   }
 
-  it('renders basic label correctly', () => {
+  it('should render the label text', () => {
     render(<Label {...defaultProps} />)
-    const label = screen.getByTestId('label')
-    expect(label).toBeInTheDocument()
-    expect(label).toHaveAttribute('for', 'test-input')
+    expect(screen.getByText('Test Label')).toBeInTheDocument()
   })
 
-  it('shows optional text when showOptional is true', () => {
+  it('should focus related input when users click the label', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <Label {...defaultProps} />
+        <input id="test-input" />
+      </>,
+    )
+
+    await user.click(screen.getByText('Test Label'))
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('should show optional text when the field is not required', () => {
     render(<Label {...defaultProps} showOptional />)
     expect(screen.getByText('common.label.optional')).toBeInTheDocument()
   })
 
-  it('shows required asterisk when isRequired is true', () => {
+  it('should show required marker when the field is required', () => {
     render(<Label {...defaultProps} isRequired />)
     expect(screen.getByText('*')).toBeInTheDocument()
   })
 
-  it('renders tooltip when tooltip prop is provided', () => {
+  it('should show tooltip content on hover', async () => {
+    const user = userEvent.setup()
     const tooltipText = 'Test Tooltip'
     render(<Label {...defaultProps} tooltip={tooltipText} />)
-    const trigger = screen.getByTestId('test-input-tooltip')
-    fireEvent.mouseEnter(trigger)
+
+    await user.hover(screen.getByTestId('test-input-tooltip'))
     expect(screen.getByText(tooltipText)).toBeInTheDocument()
   })
 
-  it('applies custom className when provided', () => {
-    const customClass = 'custom-label'
-    render(<Label {...defaultProps} className={customClass} />)
-    const label = screen.getByTestId('label')
-    expect(label).toHaveClass(customClass)
-  })
-
-  it('does not show optional text and required asterisk simultaneously', () => {
+  it('should hide optional text when required is true', () => {
     render(<Label {...defaultProps} isRequired showOptional />)
     expect(screen.queryByText('common.label.optional')).not.toBeInTheDocument()
     expect(screen.getByText('*')).toBeInTheDocument()