chore: clean git cache

frontend/src/pages/__tests__/AcceptInvite.test.tsx

@@ -0,0 +1,208 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import AcceptInvite from '../AcceptInvite'
+import * as usersApi from '../../api/users'
+
+// Mock APIs
+vi.mock('../../api/users', () => ({
+  validateInvite: vi.fn(),
+  acceptInvite: vi.fn(),
+  listUsers: vi.fn(),
+  getUser: vi.fn(),
+  createUser: vi.fn(),
+  inviteUser: vi.fn(),
+  updateUser: vi.fn(),
+  deleteUser: vi.fn(),
+  updateUserPermissions: vi.fn(),
+}))
+
+// Mock react-router-dom navigate
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  }
+})
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (initialRoute: string = '/accept-invite?token=test-token') => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[initialRoute]}>
+        <Routes>
+          <Route path="/accept-invite" element={<AcceptInvite />} />
+          <Route path="/login" element={<div>Login Page</div>} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('AcceptInvite', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('shows invalid link message when no token provided', async () => {
+    renderWithProviders('/accept-invite')
+
+    await waitFor(() => {
+      expect(screen.getByText('Invalid Link')).toBeTruthy()
+    })
+
+    expect(screen.getByText(/This invitation link is invalid/)).toBeTruthy()
+  })
+
+  it('shows validating state initially', () => {
+    vi.mocked(usersApi.validateInvite).mockReturnValue(new Promise(() => {}))
+
+    renderWithProviders()
+
+    expect(screen.getByText('Validating invitation...')).toBeTruthy()
+  })
+
+  it('shows error for invalid token', async () => {
+    vi.mocked(usersApi.validateInvite).mockRejectedValue({
+      response: { data: { error: 'Token expired' } },
+    })
+
+    renderWithProviders()
+
+    await waitFor(() => {
+      expect(screen.getByText('Invitation Invalid')).toBeTruthy()
+    })
+  })
+
+  it('renders accept form for valid token', async () => {
+    vi.mocked(usersApi.validateInvite).mockResolvedValue({
+      valid: true,
+      email: 'invited@example.com',
+    })
+
+    renderWithProviders()
+
+    await waitFor(() => {
+      expect(screen.getByText(/been invited/i)).toBeTruthy()
+    })
+
+    expect(screen.getByText(/invited@example.com/)).toBeTruthy()
+    expect(screen.getByPlaceholderText('John Doe')).toBeTruthy()
+    // Password and confirm password have same placeholder
+    expect(screen.getAllByPlaceholderText('••••••••').length).toBe(2)
+  })
+
+  it('shows password mismatch error', async () => {
+    vi.mocked(usersApi.validateInvite).mockResolvedValue({
+      valid: true,
+      email: 'invited@example.com',
+    })
+
+    renderWithProviders()
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('John Doe')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    const [passwordInput, confirmInput] = screen.getAllByPlaceholderText('••••••••')
+    await user.type(passwordInput, 'password123')
+    await user.type(confirmInput, 'differentpassword')
+
+    await waitFor(() => {
+      expect(screen.getByText('Passwords do not match')).toBeTruthy()
+    })
+  })
+
+  it('submits form and shows success', async () => {
+    vi.mocked(usersApi.validateInvite).mockResolvedValue({
+      valid: true,
+      email: 'invited@example.com',
+    })
+    vi.mocked(usersApi.acceptInvite).mockResolvedValue({
+      message: 'Success',
+      email: 'invited@example.com',
+    })
+
+    renderWithProviders()
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('John Doe')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.type(screen.getByPlaceholderText('John Doe'), 'John Doe')
+    const [passwordInput, confirmInput] = screen.getAllByPlaceholderText('••••••••')
+    await user.type(passwordInput, 'securepassword123')
+    await user.type(confirmInput, 'securepassword123')
+
+    await user.click(screen.getByRole('button', { name: 'Create Account' }))
+
+    await waitFor(() => {
+      expect(usersApi.acceptInvite).toHaveBeenCalledWith({
+        token: 'test-token',
+        name: 'John Doe',
+        password: 'securepassword123',
+      })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Account Created!')).toBeTruthy()
+    })
+  })
+
+  it('shows error on submit failure', async () => {
+    vi.mocked(usersApi.validateInvite).mockResolvedValue({
+      valid: true,
+      email: 'invited@example.com',
+    })
+    vi.mocked(usersApi.acceptInvite).mockRejectedValue({
+      response: { data: { error: 'Token has expired' } },
+    })
+
+    renderWithProviders()
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('John Doe')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.type(screen.getByPlaceholderText('John Doe'), 'John Doe')
+    const [passwordInput, confirmInput] = screen.getAllByPlaceholderText('••••••••')
+    await user.type(passwordInput, 'securepassword123')
+    await user.type(confirmInput, 'securepassword123')
+
+    await user.click(screen.getByRole('button', { name: 'Create Account' }))
+
+    await waitFor(() => {
+      expect(usersApi.acceptInvite).toHaveBeenCalled()
+    })
+
+    // The toast should show error but we don't need to test toast specifically
+  })
+
+  it('navigates to login after clicking Go to Login button', async () => {
+    renderWithProviders('/accept-invite')
+
+    await waitFor(() => {
+      expect(screen.getByText('Invalid Link')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Go to Login' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith('/login')
+  })
+})

frontend/src/pages/__tests__/CrowdSecConfig.coverage.test.tsx

@@ -0,0 +1,544 @@
+import { AxiosError } from 'axios'
+import { screen, waitFor, act, cleanup, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient } from '@tanstack/react-query'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import CrowdSecConfig from '../CrowdSecConfig'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as presetsApi from '../../api/presets'
+import * as backupsApi from '../../api/backups'
+import * as settingsApi from '../../api/settings'
+import { CROWDSEC_PRESETS } from '../../data/crowdsecPresets'
+import { renderWithQueryClient, createTestQueryClient } from '../../test-utils/renderWithQueryClient'
+import { toast } from '../../utils/toast'
+import * as exportUtils from '../../utils/crowdsecExport'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/presets')
+vi.mock('../../api/backups')
+vi.mock('../../api/settings')
+vi.mock('../../utils/crowdsecExport', () => ({
+  buildCrowdsecExportFilename: vi.fn(() => 'crowdsec-default.tar.gz'),
+  promptCrowdsecFilename: vi.fn(() => 'crowdsec.tar.gz'),
+  downloadCrowdsecExport: vi.fn(),
+}))
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+}))
+
+const baseStatus = {
+  cerberus: { enabled: true },
+  crowdsec: { enabled: true, mode: 'local' as const, api_url: '' },
+  waf: { enabled: true, mode: 'enabled' as const },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+const disabledStatus = {
+  ...baseStatus,
+  crowdsec: { ...baseStatus.crowdsec, enabled: true, mode: 'disabled' as const },
+}
+
+const presetFromCatalog = CROWDSEC_PRESETS[0]
+
+const axiosError = (status: number, message: string, data?: Record<string, unknown>) =>
+  new AxiosError(message, undefined, undefined, undefined, {
+    status,
+    statusText: String(status),
+    headers: {},
+    config: {},
+    data: data ?? { error: message },
+  } as never)
+
+const defaultFileList = ['acquis.yaml', 'collections.yaml']
+
+const renderPage = async (client?: QueryClient) => {
+  const result = renderWithQueryClient(<CrowdSecConfig />, { client })
+  await waitFor(() => screen.getByText('CrowdSec Configuration'))
+  return result
+}
+
+describe('CrowdSecConfig coverage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(baseStatus)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: defaultFileList })
+    vi.mocked(crowdsecApi.readCrowdsecFile).mockResolvedValue({ content: 'file-content' })
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue(undefined)
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValue({ decisions: [] })
+    vi.mocked(crowdsecApi.banIP).mockResolvedValue(undefined)
+    vi.mocked(crowdsecApi.unbanIP).mockResolvedValue(undefined)
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob(['data']))
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockResolvedValue(undefined)
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValue({
+      presets: [
+        {
+          slug: presetFromCatalog.slug,
+          title: presetFromCatalog.title,
+          summary: presetFromCatalog.description,
+          source: 'hub',
+          requires_hub: false,
+          available: true,
+          cached: false,
+          cache_key: 'cache-123',
+          etag: 'etag-123',
+          retrieved_at: '2024-01-01T00:00:00Z',
+        },
+      ],
+    })
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: presetFromCatalog.slug,
+      preview: presetFromCatalog.content,
+      cache_key: 'cache-123',
+      etag: 'etag-123',
+      retrieved_at: '2024-01-01T00:00:00Z',
+      source: 'hub',
+    })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockResolvedValue({
+      status: 'applied',
+      backup: '/tmp/backup.tar.gz',
+      reload_hint: true,
+      used_cscli: true,
+      cache_key: 'cache-123',
+      slug: presetFromCatalog.slug,
+    })
+    vi.mocked(presetsApi.getCrowdsecPresetCache).mockResolvedValue({
+      preview: 'cached-preview',
+      cache_key: 'cache-123',
+      etag: 'etag-123',
+    })
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+  })
+
+  it('renders loading and error boundaries', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockReturnValue(new Promise(() => {}))
+    renderWithQueryClient(<CrowdSecConfig />)
+    expect(await screen.findByText('Loading CrowdSec configuration...')).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(securityApi.getSecurityStatus).mockRejectedValue(new Error('boom'))
+    renderWithQueryClient(<CrowdSecConfig />)
+    expect(await screen.findByText(/Error loading CrowdSec status/)).toBeInTheDocument()
+  })
+
+  it('handles missing status and missing crowdsec sections', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockRejectedValueOnce(new Error('data is undefined'))
+    renderWithQueryClient(<CrowdSecConfig />)
+    expect(await screen.findByText(/Error loading CrowdSec status/)).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValueOnce({ cerberus: { enabled: true } } as never)
+    renderWithQueryClient(<CrowdSecConfig />)
+    expect(await screen.findByText('CrowdSec configuration not found in security status')).toBeInTheDocument()
+  })
+
+  it('renders disabled mode message and bans control disabled', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(disabledStatus)
+    await renderPage(createTestQueryClient())
+    expect(screen.getByText('Enable CrowdSec to manage banned IPs')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Ban IP/ })).toBeDisabled()
+  })
+
+  it('shows info banner directing to Security Dashboard', async () => {
+    await renderPage()
+    expect(screen.getByText(/CrowdSec is controlled via the toggle on the/i)).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /Security/i })).toHaveAttribute('href', '/security')
+  })
+
+  it('guards import without a file and shows error on import failure', async () => {
+    await renderPage()
+    const importBtn = screen.getByTestId('import-btn')
+    await userEvent.click(importBtn)
+    expect(backupsApi.createBackup).not.toHaveBeenCalled()
+
+    const fileInput = screen.getByTestId('import-file') as HTMLInputElement
+    const file = new File(['data'], 'cfg.tar.gz')
+    await userEvent.upload(fileInput, file)
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockRejectedValueOnce(new Error('bad import'))
+    await userEvent.click(importBtn)
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('bad import'))
+  })
+
+  it('imports configuration after creating a backup', async () => {
+    await renderPage()
+    const fileInput = screen.getByTestId('import-file') as HTMLInputElement
+    await userEvent.upload(fileInput, new File(['data'], 'cfg.tar.gz'))
+    await userEvent.click(screen.getByTestId('import-btn'))
+    await waitFor(() => expect(backupsApi.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(crowdsecApi.importCrowdsecConfig).toHaveBeenCalled())
+  })
+
+  it('exports configuration success and failure', async () => {
+    await renderPage()
+    await userEvent.click(screen.getByRole('button', { name: 'Export' }))
+    await waitFor(() => expect(crowdsecApi.exportCrowdsecConfig).toHaveBeenCalled())
+    expect(exportUtils.downloadCrowdsecExport).toHaveBeenCalled()
+    expect(toast.success).toHaveBeenCalledWith('CrowdSec configuration exported')
+
+    vi.mocked(exportUtils.promptCrowdsecFilename).mockReturnValueOnce('crowdsec.tar.gz')
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockRejectedValueOnce(new Error('fail'))
+    await userEvent.click(screen.getByRole('button', { name: 'Export' }))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Failed to export CrowdSec configuration'))
+  })
+
+  it('auto-selects first preset and pulls preview', async () => {
+    await renderPage()
+    // Component auto-selects first preset from the list on render
+    await waitFor(() => expect(presetsApi.pullCrowdsecPreset).toHaveBeenCalledWith(presetFromCatalog.slug))
+    const previewText = screen.getByTestId('preset-preview').textContent?.replace(/\s+/g, ' ')
+    expect(previewText).toContain('crowdsecurity/http-cve')
+    expect(screen.getByTestId('preset-meta')).toHaveTextContent('cache-123')
+  })
+
+  it('handles pull validation, hub unavailable, and generic errors', async () => {
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValueOnce(axiosError(400, 'slug invalid', { error: 'slug invalid' }))
+    await renderPage()
+    expect(await screen.findByTestId('preset-validation-error')).toHaveTextContent('slug invalid')
+
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValueOnce(axiosError(503, 'hub down', { error: 'hub down' }))
+    await userEvent.click(screen.getByText('Pull Preview'))
+    await waitFor(() => expect(screen.getByTestId('preset-hub-unavailable')).toBeInTheDocument())
+
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValueOnce(axiosError(500, 'boom', { error: 'boom' }))
+    await userEvent.click(screen.getByText('Pull Preview'))
+    await waitFor(() => expect(screen.getByTestId('preset-status')).toHaveTextContent('boom'))
+  })
+
+  it('loads cached preview and reports cache errors', async () => {
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValueOnce({
+      presets: [
+        {
+          slug: presetFromCatalog.slug,
+          title: presetFromCatalog.title,
+          summary: presetFromCatalog.description,
+          source: 'hub',
+          requires_hub: false,
+          available: true,
+          cached: true,
+          cache_key: 'cache-123',
+          etag: 'etag-123',
+          retrieved_at: '2024-01-01T00:00:00Z',
+        },
+      ],
+    })
+    await renderPage()
+    await userEvent.click(screen.getByText('Pull Preview'))
+    await waitFor(() => {
+      const preview = screen.getByTestId('preset-preview').textContent?.replace(/\s+/g, ' ')
+      expect(preview).toContain('crowdsecurity/http-cve')
+    })
+    await userEvent.click(screen.getByText('Load cached preview'))
+    await waitFor(() => expect(screen.getByTestId('preset-preview')).toHaveTextContent('cached-preview'))
+
+    vi.mocked(presetsApi.getCrowdsecPresetCache).mockRejectedValueOnce(axiosError(500, 'cache-miss'))
+    await userEvent.click(screen.getByText('Load cached preview'))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('cache-miss'))
+  })
+
+  it('sets apply info on backend success', async () => {
+    await renderPage()
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(screen.getByTestId('preset-apply-info')).toHaveTextContent('Backup: /tmp/backup.tar.gz'))
+  })
+
+  it('falls back to local apply on 501 and covers validation/hub/offline branches', async () => {
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue({})
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(501, 'not implemented'))
+    await renderPage()
+    const applyBtn = screen.getByTestId('apply-preset-btn')
+    await userEvent.click(applyBtn)
+    await waitFor(() => expect(toast.info).toHaveBeenCalledWith('Preset apply is not available on the server; applying locally instead'))
+    await waitFor(() => expect(crowdsecApi.writeCrowdsecFile).toHaveBeenCalled())
+
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(400, 'bad', { error: 'validation failed' }))
+    await userEvent.click(applyBtn)
+    await waitFor(() => expect(screen.getByTestId('preset-validation-error')).toHaveTextContent('validation failed'))
+
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(503, 'hub'))
+    await userEvent.click(applyBtn)
+    await waitFor(() => expect(screen.getByTestId('preset-hub-unavailable')).toBeInTheDocument())
+
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(500, 'not cached', { error: 'Pull the preset first' }))
+    await userEvent.click(applyBtn)
+    await waitFor(() => expect(screen.getByTestId('preset-validation-error')).toHaveTextContent('Preset must be pulled'))
+  })
+
+  it('records backup info on apply failure and generic errors', async () => {
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(500, 'failed', { error: 'boom', backup: '/tmp/backup' }))
+    await renderPage()
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(screen.getByTestId('preset-apply-info')).toHaveTextContent('/tmp/backup'))
+
+    cleanup()
+
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(new Error('unexpected'))
+    await renderPage()
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Failed to apply preset'))
+  })
+
+  it('disables apply when hub is unavailable for hub-only preset', async () => {
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValueOnce({
+      presets: [
+        {
+          slug: 'hub-only',
+          title: 'Hub Only',
+          summary: 'needs hub',
+          source: 'hub',
+          requires_hub: true,
+          available: true,
+          cached: true,
+          cache_key: 'cache-hub',
+          etag: 'etag-hub',
+        },
+      ],
+    })
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValueOnce(axiosError(503, 'hub'))
+    await renderPage()
+    await waitFor(() => expect(screen.getByTestId('preset-hub-unavailable')).toBeInTheDocument())
+    expect((screen.getByTestId('apply-preset-btn') as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('guards local apply prerequisites and succeeds when content exists', async () => {
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValueOnce({ files: [] })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(501, 'not implemented'))
+    await renderPage()
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Select a configuration file to apply the preset'))
+
+    cleanup()
+  vi.mocked(toast.error).mockClear()
+
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: ['acquis.yaml'] })
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValue({
+      presets: [
+        {
+          slug: 'custom-empty',
+          title: 'Empty',
+          summary: 'empty preset',
+          source: 'hub',
+          requires_hub: false,
+          available: true,
+          cached: false,
+          cache_key: 'cache-empty',
+          etag: 'etag-empty',
+        },
+      ],
+    })
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: 'custom-empty',
+      preview: '',
+      cache_key: 'cache-empty',
+    })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(501, 'not implemented'))
+    await renderPage()
+    await userEvent.selectOptions(screen.getByTestId('crowdsec-file-select'), 'acquis.yaml')
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Preset preview is unavailable; retry pulling before applying'))
+
+    cleanup()
+  vi.mocked(toast.error).mockClear()
+
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: presetFromCatalog.slug,
+      preview: 'content',
+      cache_key: 'cache-123',
+    })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError(501, 'not implemented'))
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue({})
+    await renderPage()
+    await userEvent.selectOptions(screen.getByTestId('crowdsec-file-select'), 'acquis.yaml')
+    await userEvent.click(screen.getByTestId('apply-preset-btn'))
+    await waitFor(() => expect(crowdsecApi.writeCrowdsecFile).toHaveBeenCalled())
+  })
+
+  it('reads, edits, saves, and closes files', async () => {
+    await renderPage()
+    await userEvent.selectOptions(screen.getByTestId('crowdsec-file-select'), 'acquis.yaml')
+    await waitFor(() => expect(crowdsecApi.readCrowdsecFile).toHaveBeenCalledWith('acquis.yaml'))
+    // Use getAllByRole and filter for textarea (not the search input)
+    const textareas = screen.getAllByRole('textbox')
+    const textarea = textareas.find(el => el.tagName.toLowerCase() === 'textarea') as HTMLTextAreaElement
+    expect(textarea.value).toBe('file-content')
+    await userEvent.clear(textarea)
+    await userEvent.type(textarea, 'updated')
+    await userEvent.click(screen.getByText('Save'))
+    await waitFor(() => expect(backupsApi.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(crowdsecApi.writeCrowdsecFile).toHaveBeenCalledWith('acquis.yaml', 'updated'))
+
+    await userEvent.click(screen.getByText('Close'))
+    expect((screen.getByTestId('crowdsec-file-select') as HTMLSelectElement).value).toBe('')
+  })
+
+  it('shows decisions table, handles loading/error/empty states, and unban errors', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(disabledStatus)
+    await renderPage()
+    expect(screen.getByText('Enable CrowdSec to manage banned IPs')).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(baseStatus)
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockReturnValue(new Promise(() => {}))
+    await renderPage()
+    expect(screen.getByText('Loading banned IPs...')).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockRejectedValueOnce(new Error('decisions'))
+    await renderPage()
+    expect(await screen.findByText('Failed to load banned IPs')).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValueOnce({ decisions: [] })
+    await renderPage()
+    expect(await screen.findByText('No banned IPs')).toBeInTheDocument()
+
+    cleanup()
+
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValueOnce({
+      decisions: [
+        { id: '1', ip: '1.1.1.1', reason: 'bot', duration: '24h', created_at: '2024-01-01T00:00:00Z', source: 'manual' },
+      ],
+    })
+    await renderPage()
+    expect(await screen.findByText('1.1.1.1')).toBeInTheDocument()
+
+    vi.mocked(crowdsecApi.unbanIP).mockRejectedValueOnce(new Error('unban fail'))
+    await userEvent.click(screen.getAllByText('Unban')[0])
+    const confirmModal = screen.getByText('Confirm Unban').closest('div') as HTMLElement
+    await userEvent.click(within(confirmModal).getByRole('button', { name: 'Unban' }))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('unban fail'))
+  })
+
+  it('bans and unbans IPs with overlay messaging', async () => {
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValue({
+      decisions: [
+        { id: '1', ip: '1.1.1.1', reason: 'bot', duration: '24h', created_at: '2024-01-01T00:00:00Z', source: 'manual' },
+      ],
+    })
+    await renderPage()
+    await userEvent.click(screen.getByRole('button', { name: /Ban IP/ }))
+    const banModal = screen.getByText('Ban IP Address').closest('div') as HTMLElement
+    const ipInput = within(banModal).getByPlaceholderText('192.168.1.100') as HTMLInputElement
+    await userEvent.type(ipInput, '2.2.2.2')
+    await userEvent.click(within(banModal).getByRole('button', { name: 'Ban IP' }))
+    await waitFor(() => expect(crowdsecApi.banIP).toHaveBeenCalledWith('2.2.2.2', '24h', ''))
+
+    // keep ban pending to assert overlay message
+    let resolveBan: (() => void) | undefined
+    vi.mocked(crowdsecApi.banIP).mockImplementationOnce(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveBan = () => resolve()
+        }),
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Ban IP/ }))
+    const banModalSecond = screen.getByText('Ban IP Address').closest('div') as HTMLElement
+    await userEvent.type(within(banModalSecond).getByPlaceholderText('192.168.1.100'), '3.3.3.3')
+    await userEvent.click(within(banModalSecond).getByRole('button', { name: 'Ban IP' }))
+    expect(await screen.findByText('Guardian raises shield...')).toBeInTheDocument()
+    resolveBan?.()
+
+    vi.mocked(crowdsecApi.unbanIP).mockImplementationOnce(() => new Promise(() => {}))
+    const unbanButtons = await screen.findAllByText('Unban')
+    await userEvent.click(unbanButtons[0])
+    const confirmDialog = screen.getByText('Confirm Unban').closest('div') as HTMLElement
+    await userEvent.click(within(confirmDialog).getByRole('button', { name: 'Unban' }))
+    expect(await screen.findByText('Guardian lowers shield...')).toBeInTheDocument()
+  })
+
+  it('shows overlay messaging for preset pull, apply, import, write, and mode updates', async () => {
+    // pull pending
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockImplementation(() => new Promise(() => {}))
+    await renderPage()
+    await userEvent.click(screen.getByText('Pull Preview'))
+    expect(await screen.findByText('Fetching preset...')).toBeInTheDocument()
+
+    cleanup()
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockReset()
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: presetFromCatalog.slug,
+      preview: presetFromCatalog.content,
+      cache_key: 'cache-123',
+    })
+
+    // apply pending
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValueOnce({
+      status: 'pulled',
+      slug: presetFromCatalog.slug,
+      preview: presetFromCatalog.content,
+      cache_key: 'cache-123',
+    })
+    let resolveApply: (() => void) | undefined
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveApply = () => resolve({ status: 'applied', cache_key: 'cache-123' } as never)
+        }),
+    )
+    await renderPage()
+    await userEvent.click(screen.getAllByTestId('apply-preset-btn')[0])
+    expect(await screen.findByText('Loading preset...')).toBeInTheDocument()
+    resolveApply?.()
+
+    cleanup()
+
+    // import pending
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValueOnce({
+      status: 'pulled',
+      slug: presetFromCatalog.slug,
+      preview: presetFromCatalog.content,
+      cache_key: 'cache-123',
+    })
+    let resolveImport: (() => void) | undefined
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveImport = () => resolve({})
+        }),
+    )
+    const { queryClient } = await renderPage(createTestQueryClient())
+    await waitFor(() => expect(screen.getByTestId('preset-preview')).toBeInTheDocument())
+    const fileInput = screen.getByTestId('import-file') as HTMLInputElement
+    await userEvent.upload(fileInput, new File(['data'], 'cfg.tar.gz'))
+    await userEvent.click(screen.getByTestId('import-btn'))
+    expect(await screen.findByText('Summoning the guardian...')).toBeInTheDocument()
+    resolveImport?.()
+    await act(async () => queryClient.cancelQueries())
+
+    cleanup()
+
+    // write pending shows loading overlay
+    let resolveWrite: (() => void) | undefined
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveWrite = () => resolve({})
+        }),
+    )
+    await renderPage()
+    await waitFor(() => expect(screen.getByTestId('preset-preview')).toBeInTheDocument())
+    await userEvent.selectOptions(screen.getByTestId('crowdsec-file-select'), 'acquis.yaml')
+    // Use getAllByRole and filter for textarea (not the search input)
+    const textareas = screen.getAllByRole('textbox')
+    const textarea = textareas.find(el => el.tagName.toLowerCase() === 'textarea') as HTMLTextAreaElement
+    await userEvent.type(textarea, 'x')
+    await userEvent.click(screen.getByText('Save'))
+    expect(await screen.findByText('Guardian inscribes...')).toBeInTheDocument()
+    resolveWrite?.()
+  })
+})

frontend/src/pages/__tests__/CrowdSecConfig.spec.tsx

@@ -0,0 +1,391 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { AxiosError, AxiosResponse } from 'axios'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import CrowdSecConfig from '../CrowdSecConfig'
+import * as api from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as backupsApi from '../../api/backups'
+import * as presetsApi from '../../api/presets'
+import * as featureFlagsApi from '../../api/featureFlags'
+import * as consoleApi from '../../api/consoleEnrollment'
+import { CROWDSEC_PRESETS } from '../../data/crowdsecPresets'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/backups')
+vi.mock('../../api/settings')
+vi.mock('../../api/presets')
+vi.mock('../../api/featureFlags')
+vi.mock('../../api/consoleEnrollment')
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } })
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <BrowserRouter>
+        {ui}
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('CrowdSecConfig', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValue({
+      presets: CROWDSEC_PRESETS.map((preset) => ({
+        slug: preset.slug,
+        title: preset.title,
+        summary: preset.description,
+        source: 'charon',
+        requires_hub: false,
+        available: true,
+        cached: false,
+      })),
+    })
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: 'bot-mitigation-essentials',
+      preview: CROWDSEC_PRESETS[0].content,
+      cache_key: 'cache-123',
+      etag: 'etag-123',
+      retrieved_at: '2024-01-01T00:00:00Z',
+      source: 'hub',
+    })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockResolvedValue({
+      status: 'applied',
+      backup: '/tmp/backup.tar.gz',
+      reload_hint: true,
+      used_cscli: true,
+      cache_key: 'cache-123',
+      slug: 'bot-mitigation-essentials',
+    })
+    vi.mocked(presetsApi.getCrowdsecPresetCache).mockResolvedValue({ preview: 'cached', cache_key: 'cache-123', etag: 'etag-123' })
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValue({ decisions: [] })
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+      'feature.crowdsec.console_enrollment': false,
+    })
+    vi.mocked(consoleApi.getConsoleStatus).mockResolvedValue({ status: 'not_enrolled', key_present: false })
+    vi.mocked(consoleApi.enrollConsole).mockResolvedValue({ status: 'enrolling', key_present: true })
+  })
+
+  it('exports config when clicking Export', async () => {
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local', api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    const blob = new Blob(['dummy'])
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(blob)
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export')
+    renderWithProviders(<CrowdSecConfig />)
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    const exportBtn = screen.getByText('Export')
+    await userEvent.click(exportBtn)
+    await waitFor(() => expect(crowdsecApi.exportCrowdsecConfig).toHaveBeenCalled())
+  })
+
+  it('uploads a file and calls import on Import (backup before save)', async () => {
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local', api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockResolvedValue({ status: 'imported' })
+    renderWithProviders(<CrowdSecConfig />)
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    const input = screen.getByTestId('import-file') as HTMLInputElement
+    const file = new File(['dummy'], 'cfg.tar.gz')
+    await userEvent.upload(input, file)
+    const btn = screen.getByTestId('import-btn')
+    await userEvent.click(btn)
+    await waitFor(() => expect(backupsApi.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(crowdsecApi.importCrowdsecConfig).toHaveBeenCalled())
+  })
+
+  it('hides console enrollment when feature flag is off', async () => {
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    expect(screen.queryByTestId('console-enrollment-card')).not.toBeInTheDocument()
+  })
+
+  it('shows console enrollment form when feature flag is on', async () => {
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({ 'feature.crowdsec.console_enrollment': true })
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByTestId('console-enrollment-card')).toBeInTheDocument())
+    expect(screen.getByTestId('console-enrollment-token')).toBeInTheDocument()
+  })
+
+  it('validates required console enrollment fields and acknowledgement', async () => {
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({ 'feature.crowdsec.console_enrollment': true })
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    const enrollBtn = await screen.findByTestId('console-enroll-btn')
+
+    // Button should be disabled when enrollment token is empty
+    expect(enrollBtn).toBeDisabled()
+
+    // Type only token (missing agent name, tenant, and ack)
+    await userEvent.type(screen.getByTestId('console-enrollment-token'), 'token-123')
+
+    // Now button should be enabled, click it
+    await waitFor(() => expect(enrollBtn).not.toBeDisabled())
+    await userEvent.click(enrollBtn)
+
+    // Should show validation errors for missing fields
+    const errors = await screen.findAllByTestId('console-enroll-error')
+    expect(errors.length).toBeGreaterThan(0)
+    expect(consoleApi.enrollConsole).not.toHaveBeenCalled()
+  })
+
+  it('submits console enrollment payload with snake_case fields', async () => {
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({ 'feature.crowdsec.console_enrollment': true })
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(consoleApi.enrollConsole).mockResolvedValue({ status: 'enrolled', key_present: true, agent_name: 'agent-one', tenant: 'tenant-inc' })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByTestId('console-enrollment-card')).toBeInTheDocument())
+    await userEvent.type(screen.getByTestId('console-enrollment-token'), 'secret-1234567890')
+    await userEvent.clear(screen.getByTestId('console-agent-name'))
+    await userEvent.type(screen.getByTestId('console-agent-name'), 'agent-one')
+    await userEvent.type(screen.getByTestId('console-tenant'), 'tenant-inc')
+    await userEvent.click(screen.getByTestId('console-ack-checkbox'))
+    await userEvent.click(screen.getByTestId('console-enroll-btn'))
+
+    await waitFor(() => expect(consoleApi.enrollConsole).toHaveBeenCalledWith({
+      enrollment_key: 'secret-1234567890',
+      agent_name: 'agent-one',
+      tenant: 'tenant-inc',
+      force: false,
+    }))
+
+    expect((screen.getByTestId('console-enrollment-token') as HTMLInputElement).value).toBe('')
+  })
+
+  it('renders masked key state in console status', async () => {
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({ 'feature.crowdsec.console_enrollment': true })
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(consoleApi.getConsoleStatus).mockResolvedValue({ status: 'enrolled', key_present: true, agent_name: 'a1', tenant: 't1', last_heartbeat_at: '2024-01-01T00:00:00Z' })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByTestId('console-token-state')).toHaveTextContent('Stored (masked)'))
+  })
+
+  it('retries degraded enrollment and rotates key when enrolled', async () => {
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({ 'feature.crowdsec.console_enrollment': true })
+    vi.mocked(api.getSecurityStatus).mockResolvedValue({ crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(consoleApi.getConsoleStatus).mockResolvedValueOnce({ status: 'failed', key_present: true, last_error: 'network' })
+    vi.mocked(consoleApi.getConsoleStatus).mockResolvedValue({ status: 'enrolled', key_present: true })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByTestId('console-ack-checkbox')).toBeInTheDocument())
+    await userEvent.type(screen.getByTestId('console-enrollment-token'), 'another-secret-123456')
+    await userEvent.click(screen.getByTestId('console-ack-checkbox'))
+    await userEvent.click(screen.getByTestId('console-retry-btn'))
+    await waitFor(() => expect(consoleApi.enrollConsole).toHaveBeenCalledWith(expect.objectContaining({ force: true })))
+
+    await waitFor(() => expect(screen.getByTestId('console-rotate-btn')).not.toBeDisabled())
+    await userEvent.type(screen.getByTestId('console-enrollment-token'), 'rotate-token-987654321')
+    await userEvent.click(screen.getByTestId('console-rotate-btn'))
+    await waitFor(() => expect(consoleApi.enrollConsole).toHaveBeenCalledWith(expect.objectContaining({
+      enrollment_key: 'rotate-token-987654321',
+      force: true,
+    })))
+  })
+
+  it('lists files, reads file content and can save edits (backup before save)', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: ['conf.d/a.conf', 'b.conf'] })
+    vi.mocked(crowdsecApi.readCrowdsecFile).mockResolvedValue({ content: 'rule1' })
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue({ status: 'written' })
+
+    renderWithProviders(<CrowdSecConfig />)
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    // wait for file list
+    await waitFor(() => expect(screen.getByText('conf.d/a.conf')).toBeInTheDocument())
+    const select = screen.getByTestId('crowdsec-file-select')
+    await userEvent.selectOptions(select, 'conf.d/a.conf')
+    await waitFor(() => expect(crowdsecApi.readCrowdsecFile).toHaveBeenCalledWith('conf.d/a.conf'))
+    // ensure textarea populated - use getAllByRole and filter for textarea (not the search input)
+    const textareas = screen.getAllByRole('textbox')
+    const textarea = textareas.find(el => el.tagName.toLowerCase() === 'textarea')!
+    expect(textarea).toHaveValue('rule1')
+    // edit and save
+    await userEvent.clear(textarea)
+    await userEvent.type(textarea, 'updated')
+    const saveBtn = screen.getByText('Save')
+    await userEvent.click(saveBtn)
+    await waitFor(() => expect(backupsApi.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(crowdsecApi.writeCrowdsecFile).toHaveBeenCalledWith('conf.d/a.conf', 'updated'))
+  })
+
+  it('shows info banner directing to Security Dashboard for mode control', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+
+    renderWithProviders(<CrowdSecConfig />)
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    expect(screen.getByText(/CrowdSec is controlled via the toggle on the/i)).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /Security/i })).toHaveAttribute('href', '/security')
+  })
+
+  it('renders preset preview and applies with backup when backend apply is unavailable', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    const presetContent = CROWDSEC_PRESETS.find((preset) => preset.slug === 'bot-mitigation-essentials')?.content || ''
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: ['acquis.yaml'] })
+    vi.mocked(crowdsecApi.readCrowdsecFile).mockResolvedValue({ content: '' })
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue({ status: 'written' })
+    const axiosError = new AxiosError('not implemented', undefined, undefined, undefined, {
+      status: 501,
+      statusText: 'Not Implemented',
+      headers: {},
+      config: { headers: {} },
+      data: {},
+    } as AxiosResponse)
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValue(axiosError)
+
+    renderWithProviders(<CrowdSecConfig />)
+    await waitFor(() => expect(screen.getByText('CrowdSec Configuration')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByTestId('preset-preview')).toHaveTextContent('configs:'))
+    const fileSelect = screen.getByTestId('crowdsec-file-select')
+    await userEvent.selectOptions(fileSelect, 'acquis.yaml')
+    const applyBtn = screen.getByTestId('apply-preset-btn')
+    await userEvent.click(applyBtn)
+
+    await waitFor(() => expect(presetsApi.applyCrowdsecPreset).toHaveBeenCalledWith({ slug: 'bot-mitigation-essentials', cache_key: 'cache-123' }))
+    await waitFor(() => expect(backupsApi.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(crowdsecApi.writeCrowdsecFile).toHaveBeenCalledWith('acquis.yaml', presetContent))
+  })
+
+  it('surfaces validation error when slug is invalid', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    const validationError = new AxiosError('invalid', undefined, undefined, undefined, {
+      status: 400,
+      statusText: 'Bad Request',
+      headers: {},
+      config: { headers: {} },
+      data: { error: 'slug invalid' },
+    } as AxiosResponse)
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValueOnce(validationError)
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    await waitFor(() => expect(screen.getByTestId('preset-validation-error')).toHaveTextContent('slug invalid'))
+  })
+
+  it('disables apply and offers cached preview when hub is unavailable', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValueOnce({
+      presets: [
+        {
+          slug: 'hub-only',
+          title: 'Hub Only',
+          summary: 'Needs hub',
+          source: 'hub',
+          requires_hub: true,
+          available: true,
+          cached: true,
+          cache_key: 'cache-hub',
+          etag: 'etag-hub',
+        },
+      ],
+    })
+    const hubError = new AxiosError('unavailable', undefined, undefined, undefined, {
+      status: 503,
+      statusText: 'Service Unavailable',
+      headers: {},
+      config: { headers: {} },
+      data: { error: 'hub service unavailable' },
+    } as AxiosResponse)
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockRejectedValue(hubError)
+    vi.mocked(presetsApi.getCrowdsecPresetCache).mockResolvedValue({ preview: 'cached-preview', cache_key: 'cache-hub', etag: 'etag-hub' })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+  // Wait for presets to load and click on the preset card
+  const presetCard = await screen.findByText('Hub Only')
+  await userEvent.click(presetCard)
+
+    await waitFor(() => expect(screen.getByTestId('preset-hub-unavailable')).toBeInTheDocument())
+
+    const applyBtn = screen.getByTestId('apply-preset-btn') as HTMLButtonElement
+    expect(applyBtn.disabled).toBe(true)
+
+    await userEvent.click(screen.getByText('Use Cached'))
+    await waitFor(() => expect(screen.getByTestId('preset-preview')).toHaveTextContent('cached-preview'))
+  })
+
+  it('shows apply response metadata including backup path', async () => {
+    const status = { crowdsec: { enabled: true, mode: 'local' as const, api_url: '' }, cerberus: { enabled: true }, waf: { enabled: false, mode: 'disabled' as const }, rate_limit: { enabled: false }, acl: { enabled: false } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status)
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: ['acquis.yaml'] })
+    vi.mocked(crowdsecApi.readCrowdsecFile).mockResolvedValue({ content: '' })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockResolvedValueOnce({
+      status: 'applied',
+      backup: '/tmp/crowdsec-backup',
+      reload_hint: true,
+      used_cscli: true,
+      cache_key: 'cache-123',
+      slug: 'bot-mitigation-essentials',
+    })
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    const applyBtn = await screen.findByTestId('apply-preset-btn')
+    await userEvent.click(applyBtn)
+
+    await waitFor(() => expect(screen.getByTestId('preset-apply-info')).toHaveTextContent('/tmp/crowdsec-backup'))
+    expect(screen.getByTestId('preset-apply-info')).toHaveTextContent('Status: applied')
+    expect(screen.getByTestId('preset-apply-info')).toHaveTextContent('Method: cscli')
+    // reloadHint is a boolean and renders as empty/true - just verify the info section exists
+  })
+
+  it('shows improved error message when preset is not cached', async () => {
+    const axiosError = {
+      isAxiosError: true,
+      response: {
+        status: 500,
+        data: {
+          error: 'CrowdSec preset not cached. Pull the preset first by clicking \'Pull Preview\', then try applying again.',
+        },
+      },
+      message: 'Request failed',
+    } as AxiosError
+
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockRejectedValueOnce(axiosError)
+
+    renderWithProviders(<CrowdSecConfig />)
+
+    const applyBtn = await screen.findByTestId('apply-preset-btn')
+    await userEvent.click(applyBtn)
+
+    await waitFor(() => expect(screen.getByTestId('preset-validation-error')).toBeInTheDocument())
+    expect(screen.getByTestId('preset-validation-error')).toHaveTextContent('Preset must be pulled before applying')
+  })
+})

frontend/src/pages/__tests__/CrowdSecConfig.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import CrowdSecConfig from '../CrowdSecConfig'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as backupsApi from '../../api/backups'
+import * as settingsApi from '../../api/settings'
+import * as presetsApi from '../../api/presets'
+import { toast } from '../../utils/toast'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/backups')
+vi.mock('../../api/settings')
+vi.mock('../../api/presets')
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+describe('CrowdSecConfig', () => {
+  const createClient = () =>
+    new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+
+  const renderWithProviders = () => {
+    const queryClient = createClient()
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <CrowdSecConfig />
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+      cerberus: { enabled: true },
+      crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: true },
+      waf: { mode: 'enabled', enabled: true },
+      rate_limit: { enabled: true },
+      acl: { enabled: true },
+    })
+    vi.mocked(crowdsecApi.listCrowdsecFiles).mockResolvedValue({ files: [] })
+    vi.mocked(crowdsecApi.readCrowdsecFile).mockResolvedValue({ content: '' })
+    vi.mocked(crowdsecApi.writeCrowdsecFile).mockResolvedValue({})
+    vi.mocked(crowdsecApi.listCrowdsecDecisions).mockResolvedValue({ decisions: [] })
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob(['data']))
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockResolvedValue({})
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(presetsApi.listCrowdsecPresets).mockResolvedValue({ presets: [] })
+    vi.mocked(presetsApi.pullCrowdsecPreset).mockResolvedValue({
+      status: 'pulled',
+      slug: 'bot-mitigation-essentials',
+      preview: 'configs: {}',
+      cache_key: 'cache-123',
+    })
+    vi.mocked(presetsApi.applyCrowdsecPreset).mockResolvedValue({ status: 'applied', backup: '/tmp/backup.tar.gz', cache_key: 'cache-123' })
+    vi.mocked(presetsApi.getCrowdsecPresetCache).mockResolvedValue({ preview: 'configs: {}', cache_key: 'cache-123' })
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+    window.URL.createObjectURL = vi.fn(() => 'blob:url')
+    window.URL.revokeObjectURL = vi.fn()
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+  })
+
+  it('shows info banner directing to Security Dashboard', async () => {
+    renderWithProviders()
+
+    await waitFor(() => screen.getByText(/CrowdSec is controlled via the toggle on the/i))
+    expect(screen.getByRole('link', { name: /Security/i })).toHaveAttribute('href', '/security')
+  })
+
+  it('exports configuration packages with prompted filename', async () => {
+    renderWithProviders()
+
+    await waitFor(() => screen.getByRole('button', { name: /Export/i }))
+    const exportButton = screen.getByRole('button', { name: /Export/i })
+
+    await userEvent.click(exportButton)
+
+    await waitFor(() => {
+      expect(crowdsecApi.exportCrowdsecConfig).toHaveBeenCalled()
+      expect(toast.success).toHaveBeenCalledWith('CrowdSec configuration exported')
+    })
+  })
+
+  it('shows Configuration Packages heading', async () => {
+    renderWithProviders()
+
+    await waitFor(() => screen.getByText('Configuration Packages'))
+
+    expect(screen.getByText('Configuration Packages')).toBeInTheDocument()
+  })
+})

frontend/src/pages/__tests__/Dashboard.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import Dashboard from '../Dashboard'
+import { renderWithQueryClient } from '../../test-utils/renderWithQueryClient'
+
+vi.mock('../../hooks/useProxyHosts', () => ({
+  useProxyHosts: () => ({
+    hosts: [
+      { id: 1, enabled: true, ssl_forced: false, domain_names: 'test.com' },
+      { id: 2, enabled: false, ssl_forced: false, domain_names: 'test2.com' },
+    ],
+    loading: false,
+  }),
+}))
+
+vi.mock('../../hooks/useRemoteServers', () => ({
+  useRemoteServers: () => ({
+    servers: [
+      { id: 1, enabled: true },
+      { id: 2, enabled: true },
+    ],
+    loading: false,
+  }),
+}))
+
+vi.mock('../../hooks/useCertificates', () => ({
+  useCertificates: () => ({
+    certificates: [
+      { id: 1, status: 'valid', domain: 'test.com' },
+      { id: 2, status: 'expired', domain: 'expired.com' },
+    ],
+    isLoading: false,
+  }),
+}))
+
+vi.mock('../../hooks/useAccessLists', () => ({
+  useAccessLists: () => ({
+    data: [{ id: 1, enabled: true }],
+    isLoading: false,
+  }),
+}))
+
+vi.mock('../../api/health', () => ({
+  checkHealth: vi.fn().mockResolvedValue({ status: 'ok', version: '1.0.0' }),
+}))
+
+// Mock UptimeWidget to avoid complex dependencies
+vi.mock('../../components/UptimeWidget', () => ({
+  default: () => <div data-testid="uptime-widget">Uptime Widget</div>,
+}))
+
+describe('Dashboard page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders counts and health status', async () => {
+    renderWithQueryClient(<Dashboard />)
+
+    expect(await screen.findByText('Dashboard')).toBeInTheDocument()
+    expect(await screen.findByText('1 enabled')).toBeInTheDocument()
+    expect(screen.getByText('2 enabled')).toBeInTheDocument()
+    expect(screen.getByText('1 valid')).toBeInTheDocument()
+    expect(await screen.findByText('Healthy')).toBeInTheDocument()
+  })
+
+  it('shows error state when health check fails', async () => {
+    const { checkHealth } = await import('../../api/health')
+    vi.mocked(checkHealth).mockResolvedValueOnce({ status: 'fail', version: '1.0.0' } as never)
+
+    renderWithQueryClient(<Dashboard />)
+
+    expect(await screen.findByText('Error')).toBeInTheDocument()
+  })
+})

frontend/src/pages/__tests__/ImportCrowdSec.spec.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClientProvider } from '@tanstack/react-query'
+import userEvent from '@testing-library/user-event'
+import ImportCrowdSec from '../ImportCrowdSec'
+import * as api from '../../api/crowdsec'
+import * as backups from '../../api/backups'
+import { createTestQueryClient } from '../../test/createTestQueryClient'
+
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/backups')
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <BrowserRouter>
+        {ui}
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('ImportCrowdSec page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('creates a backup then imports crowdsec', async () => {
+    const file = new File(['fake'], 'crowdsec.zip', { type: 'application/zip' })
+    vi.mocked(backups.createBackup).mockResolvedValue({ filename: 'b1' })
+    vi.mocked(api.importCrowdsecConfig).mockResolvedValue({ success: true })
+
+    renderWithProviders(<ImportCrowdSec />)
+    const fileInput = document.querySelector('input[type="file"]')
+    expect(fileInput).toBeTruthy()
+    fireEvent.change(fileInput!, { target: { files: [file] } })
+    const importBtn = screen.getByText('Import')
+    const user = userEvent.setup()
+    await user.click(importBtn)
+
+    await waitFor(() => expect(backups.createBackup).toHaveBeenCalled())
+    await waitFor(() => expect(api.importCrowdsecConfig).toHaveBeenCalledWith(file))
+  })
+})

frontend/src/pages/__tests__/ImportCrowdSec.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import { QueryClientProvider } from '@tanstack/react-query'
+import ImportCrowdSec from '../ImportCrowdSec'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as backupsApi from '../../api/backups'
+import { toast } from 'react-hot-toast'
+import { createTestQueryClient } from '../../test/createTestQueryClient'
+
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/backups')
+vi.mock('react-hot-toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    loading: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}))
+
+describe('ImportCrowdSec', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.tar.gz' })
+    vi.mocked(crowdsecApi.importCrowdsecConfig).mockResolvedValue({})
+  })
+
+  const renderPage = () => {
+    const qc = createTestQueryClient()
+    return render(
+      <QueryClientProvider client={qc}>
+        <MemoryRouter>
+          <ImportCrowdSec />
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  it('renders configuration packages heading', async () => {
+    renderPage()
+
+    await waitFor(() => screen.getByText('CrowdSec Configuration Packages'))
+    expect(screen.getByText('CrowdSec Configuration Packages')).toBeInTheDocument()
+  })
+
+  it('creates a backup before importing selected package', async () => {
+    renderPage()
+
+    const fileInput = screen.getByTestId('crowdsec-import-file') as HTMLInputElement
+    const file = new File(['config'], 'config.tar.gz', { type: 'application/gzip' })
+    const user = userEvent.setup()
+
+    await user.upload(fileInput, file)
+
+    const importButton = screen.getByRole('button', { name: /Import/i })
+    await user.click(importButton)
+
+    await waitFor(() => {
+      expect(backupsApi.createBackup).toHaveBeenCalled()
+      expect(crowdsecApi.importCrowdsecConfig).toHaveBeenCalledWith(file)
+      expect(toast.success).toHaveBeenCalledWith('CrowdSec config imported')
+    })
+  })
+})

frontend/src/pages/__tests__/Login.overlay.audit.test.tsx

@@ -0,0 +1,240 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import Login from '../Login'
+import * as authHook from '../../hooks/useAuth'
+import client from '../../api/client'
+import * as setupApi from '../../api/setup'
+
+// Mock modules
+vi.mock('../../api/client')
+vi.mock('../../hooks/useAuth')
+vi.mock('../../api/setup')
+
+const mockLogin = vi.fn()
+vi.mocked(authHook.useAuth).mockReturnValue({
+  user: null,
+  login: mockLogin,
+  logout: vi.fn(),
+  loading: false,
+} as unknown as ReturnType<typeof authHook.useAuth>)
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        {ui}
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('Login - Coin Overlay Security Audit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock setup status to resolve immediately with no setup required
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: false })
+  })
+
+  it('shows coin-themed overlay during login', async () => {
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise(resolve => setTimeout(() => resolve({ data: {} }), 100))
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'admin@example.com')
+    await userEvent.type(passwordInput, 'password123')
+    await userEvent.click(submitButton)
+
+    // Coin-themed overlay should appear
+    expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
+    expect(screen.getByText('Your obol grants passage')).toBeInTheDocument()
+
+    // Verify coin theme (gold/amber) - use querySelector to find actual overlay container
+    const overlay = document.querySelector('.bg-amber-950\\/90')
+    expect(overlay).toBeInTheDocument()
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(screen.queryByText('Paying the ferryman...')).not.toBeInTheDocument()
+    }, { timeout: 200 })
+  })
+
+  it('ATTACK: rapid fire login attempts are blocked by overlay', async () => {
+    let resolveCount = 0
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise(resolve => {
+        setTimeout(() => {
+          resolveCount++
+          resolve({ data: {} })
+        }, 200)
+      })
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'admin@example.com')
+    await userEvent.type(passwordInput, 'password123')
+
+    // Click multiple times rapidly
+    await userEvent.click(submitButton)
+    await userEvent.click(submitButton)
+    await userEvent.click(submitButton)
+
+    // Overlay should block subsequent clicks (form is disabled)
+    expect(emailInput).toBeDisabled()
+    expect(passwordInput).toBeDisabled()
+    expect(submitButton).toBeDisabled()
+
+    await waitFor(() => {
+      expect(screen.queryByText('Paying the ferryman...')).not.toBeInTheDocument()
+    }, { timeout: 300 })
+
+    // Should only execute once
+    expect(resolveCount).toBe(1)
+  })
+
+  it('clears overlay on login error', async () => {
+    // Use delayed rejection so overlay has time to appear
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise((_, reject) => {
+        setTimeout(() => reject({ response: { data: { error: 'Invalid credentials' } } }), 100)
+      })
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'wrong@example.com')
+    await userEvent.type(passwordInput, 'wrong')
+    await userEvent.click(submitButton)
+
+    // Overlay appears
+    expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
+
+    // Overlay clears after error
+    await waitFor(() => {
+      expect(screen.queryByText('Paying the ferryman...')).not.toBeInTheDocument()
+    }, { timeout: 300 })
+
+    // Form should be re-enabled
+    expect(emailInput).not.toBeDisabled()
+    expect(passwordInput).not.toBeDisabled()
+  })
+
+  it('ATTACK: XSS in login credentials does not break overlay', async () => {
+    // Use delayed promise so we can catch the overlay
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise(resolve => setTimeout(() => resolve({ data: {} }), 100))
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    // Use valid email format with XSS-like characters in password
+    await userEvent.type(emailInput, 'test@example.com')
+    await userEvent.type(passwordInput, '<img src=x onerror=alert(1)>')
+    await userEvent.click(submitButton)
+
+    // Overlay should still work
+    expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.queryByText('Paying the ferryman...')).not.toBeInTheDocument()
+    }, { timeout: 300 })
+  })
+
+  it('ATTACK: network timeout does not leave overlay stuck', async () => {
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise((_, reject) => {
+        setTimeout(() => reject(new Error('Network timeout')), 100)
+      })
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'admin@example.com')
+    await userEvent.type(passwordInput, 'password123')
+    await userEvent.click(submitButton)
+
+    expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
+
+    // Overlay should clear after error
+    await waitFor(() => {
+      expect(screen.queryByText('Paying the ferryman...')).not.toBeInTheDocument()
+    }, { timeout: 200 })
+  })
+
+  it('overlay has correct z-index hierarchy', async () => {
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise(() => {}) // Never resolves
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'admin@example.com')
+    await userEvent.type(passwordInput, 'password123')
+    await userEvent.click(submitButton)
+
+    // Overlay should be z-50
+    const overlay = document.querySelector('.z-50')
+    expect(overlay).toBeInTheDocument()
+  })
+
+  it('overlay renders CharonCoinLoader component', async () => {
+    vi.mocked(client.post).mockImplementation(
+      () => new Promise(resolve => setTimeout(() => resolve({ data: {} }), 100))
+    )
+
+    renderWithProviders(<Login />)
+
+    // Wait for setup check to complete and form to render
+    const emailInput = await screen.findByPlaceholderText('admin@example.com')
+    const passwordInput = screen.getByPlaceholderText('••••••••')
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+
+    await userEvent.type(emailInput, 'admin@example.com')
+    await userEvent.type(passwordInput, 'password123')
+    await userEvent.click(submitButton)
+
+    // CharonCoinLoader has aria-label="Authenticating"
+    expect(screen.getByLabelText('Authenticating')).toBeInTheDocument()
+  })
+})

frontend/src/pages/__tests__/Login.test.tsx

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+// Mock react-router-dom useNavigate at module level
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  }
+})
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import Login from '../Login'
+import * as setupApi from '../../api/setup'
+import client from '../../api/client'
+import * as authHook from '../../hooks/useAuth'
+import type { AuthContextType } from '../../context/AuthContextValue'
+import { toast } from '../../utils/toast'
+import { MemoryRouter } from 'react-router-dom'
+
+vi.mock('../../api/setup')
+vi.mock('../../hooks/useAuth')
+
+describe('<Login />', () => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const renderWithProviders = (ui: React.ReactNode) => (
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{ui}</MemoryRouter>
+      </QueryClientProvider>
+    )
+  )
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.spyOn(authHook, 'useAuth').mockReturnValue({ login: vi.fn() } as unknown as AuthContextType)
+  })
+
+  it('navigates to /setup when setup is required', async () => {
+    vi.spyOn(setupApi, 'getSetupStatus').mockResolvedValue({ setupRequired: true })
+    renderWithProviders(<Login />)
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/setup')
+    })
+  })
+
+  it('shows error toast when login fails', async () => {
+    vi.spyOn(setupApi, 'getSetupStatus').mockResolvedValue({ setupRequired: false })
+    const postSpy = vi.spyOn(client, 'post').mockRejectedValueOnce({ response: { data: { error: 'Bad creds' } } })
+    const toastSpy = vi.spyOn(toast, 'error')
+    renderWithProviders(<Login />)
+    // Fill and submit
+    const email = screen.getByPlaceholderText(/admin@example.com/i)
+    const pass = screen.getByPlaceholderText(/••••••••/i)
+    fireEvent.change(email, { target: { value: 'a@b.com' } })
+    fireEvent.change(pass, { target: { value: 'pw' } })
+    fireEvent.click(screen.getByRole('button', { name: /Sign In/i }))
+    // Wait for the promise chain
+    await waitFor(() => expect(postSpy).toHaveBeenCalled())
+    expect(toastSpy).toHaveBeenCalledWith('Bad creds')
+  })
+
+  it('uses returned token when cookie is unavailable', async () => {
+    vi.spyOn(setupApi, 'getSetupStatus').mockResolvedValue({ setupRequired: false })
+    const postSpy = vi.spyOn(client, 'post').mockResolvedValueOnce({ data: { token: 'bearer-token' } })
+    const loginFn = vi.fn().mockResolvedValue(undefined)
+    vi.spyOn(authHook, 'useAuth').mockReturnValue({ login: loginFn } as unknown as AuthContextType)
+
+    renderWithProviders(<Login />)
+    const email = screen.getByPlaceholderText(/admin@example.com/i)
+    const pass = screen.getByPlaceholderText(/••••••••/i)
+    fireEvent.change(email, { target: { value: 'a@b.com' } })
+    fireEvent.change(pass, { target: { value: 'pw' } })
+    fireEvent.click(screen.getByRole('button', { name: /Sign In/i }))
+
+    await waitFor(() => expect(postSpy).toHaveBeenCalled())
+    expect(loginFn).toHaveBeenCalledWith('bearer-token')
+  })
+
+  it('has proper autocomplete attributes for password managers', async () => {
+    vi.spyOn(setupApi, 'getSetupStatus').mockResolvedValue({ setupRequired: false })
+    renderWithProviders(<Login />)
+
+    await waitFor(() => screen.getByPlaceholderText(/admin@example.com/i))
+
+    const emailInput = screen.getByPlaceholderText(/admin@example.com/i)
+    const passwordInput = screen.getByPlaceholderText(/••••••••/i)
+
+    expect(emailInput).toHaveAttribute('autocomplete', 'email')
+    expect(passwordInput).toHaveAttribute('autocomplete', 'current-password')
+  })
+})

frontend/src/pages/__tests__/ProxyHosts-bulk-acl.test.tsx

@@ -0,0 +1,581 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost';
+import ProxyHosts from '../ProxyHosts';
+import * as proxyHostsApi from '../../api/proxyHosts';
+import * as certificatesApi from '../../api/certificates';
+import * as accessListsApi from '../../api/accessLists';
+import * as settingsApi from '../../api/settings';
+import { toast } from 'react-hot-toast';
+
+// Mock toast
+vi.mock('react-hot-toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    loading: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}));
+
+// Mock API modules
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}));
+
+vi.mock('../../api/backups', () => ({
+  createBackup: vi.fn(),
+  getBackups: vi.fn(),
+  restoreBackup: vi.fn(),
+  deleteBackup: vi.fn(),
+}));
+
+vi.mock('../../api/certificates', () => ({
+  getCertificates: vi.fn(),
+}));
+
+vi.mock('../../api/accessLists', () => ({
+  accessListsApi: {
+    list: vi.fn(),
+    get: vi.fn(),
+    getTemplates: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    testIP: vi.fn(),
+  },
+}));
+
+vi.mock('../../api/settings', () => ({
+  getSettings: vi.fn(),
+}));
+
+const mockProxyHosts = [
+  createMockProxyHost({ uuid: 'host-1', name: 'Test Host 1', domain_names: 'test1.example.com', forward_host: '192.168.1.10' }),
+  createMockProxyHost({ uuid: 'host-2', name: 'Test Host 2', domain_names: 'test2.example.com', forward_host: '192.168.1.20' }),
+];
+
+const mockAccessLists = [
+  {
+    id: 1,
+    uuid: 'acl-1',
+    name: 'Admin Only',
+    description: 'Admin access',
+    type: 'whitelist' as const,
+    ip_rules: '[]',
+    country_codes: '',
+    local_network_only: false,
+    enabled: true,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: 2,
+    uuid: 'acl-2',
+    name: 'Local Network',
+    description: 'Local network only',
+    type: 'whitelist' as const,
+    ip_rules: '[]',
+    country_codes: '',
+    local_network_only: true,
+    enabled: true,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: 3,
+    uuid: 'acl-3',
+    name: 'Disabled ACL',
+    description: 'This is disabled',
+    type: 'blacklist' as const,
+    ip_rules: '[]',
+    country_codes: '',
+    local_network_only: false,
+    enabled: false,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+];
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        {ui}
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('ProxyHosts - Bulk ACL Modal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Setup default mocks
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(mockProxyHosts);
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([]);
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue(mockAccessLists);
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({});
+  });
+
+  it('renders Manage ACL button when hosts are selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using the select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Manage ACL button should appear
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+  });
+
+  it('opens bulk ACL modal when Manage ACL is clicked', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+
+    // Click Manage ACL
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Modal should open
+    await waitFor(() => {
+      expect(screen.getByText('Apply Access List')).toBeTruthy();
+    });
+  });
+
+  it('shows Apply ACL and Remove ACL toggle buttons', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Should show toggle buttons
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Apply ACL' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Remove ACL' })).toBeTruthy();
+    });
+  });
+
+  it('shows only enabled access lists in the selection', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Should show enabled ACLs
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+      expect(screen.getByText('Local Network')).toBeTruthy();
+    });
+
+    // Should NOT show disabled ACL
+    expect(screen.queryByText('Disabled ACL')).toBeNull();
+  });
+
+  it('shows ACL type alongside name', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Should show type - the modal should display ACL types
+    await waitFor(() => {
+      // Check that the ACL list is rendered with names
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+      expect(screen.getByText('Local Network')).toBeTruthy();
+    });
+  });
+
+  it('has Apply button disabled when no ACL is selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Wait for modal to open
+    await waitFor(() => {
+      expect(screen.getByText('Apply Access List')).toBeTruthy();
+    });
+
+    // Apply action button should be disabled (the one with bg-blue-600 class, not the toggle)
+    // The action button text is "Apply" or "Apply (N)"
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(btn => {
+      const text = btn.textContent?.trim() || '';
+      // Match "Apply" exactly but not "Apply ACL" (which is the toggle)
+      const isApplyAction = text === 'Apply' || /^Apply \(\d+\)$/.test(text);
+      return isApplyAction;
+    });
+    expect(applyButton).toBeTruthy();
+    expect((applyButton as HTMLButtonElement)?.disabled).toBe(true);
+  });
+
+  it('enables Apply button when ACL is selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    const user = userEvent.setup()
+    await user.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await user.click(screen.getByText('Manage ACL'));
+
+    // Wait for ACL list
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+    });
+
+    // Select an ACL
+    const aclCheckboxes = screen.getAllByRole('checkbox');
+    // Find the checkbox for Admin Only (should be after the host selection checkboxes)
+    const aclCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Admin Only')
+    );
+    if (aclCheckbox) {
+      await userEvent.click(aclCheckbox);
+    }
+
+    // Apply button should be enabled and show count
+    await waitFor(() => {
+      const applyButton = screen.getByRole('button', { name: /Apply \(1\)/ });
+      expect(applyButton).toBeTruthy();
+      expect(applyButton).toHaveProperty('disabled', false);
+    });
+  });
+
+  it('can select multiple ACLs', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Wait for ACL list
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+    });
+
+    // Select multiple ACLs
+    const aclCheckboxes = screen.getAllByRole('checkbox');
+    const adminCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Admin Only')
+    );
+    const localCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Local Network')
+    );
+
+    if (adminCheckbox) await userEvent.click(adminCheckbox);
+    if (localCheckbox) await userEvent.click(localCheckbox);
+
+    // Apply button should show count of 2
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Apply \(2\)/ })).toBeTruthy();
+    });
+  });
+
+  it('applies ACL to selected hosts successfully', async () => {
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({
+      updated: 2,
+      errors: [],
+    });
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Wait for ACL list and select one
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+    });
+
+    const aclCheckboxes = screen.getAllByRole('checkbox');
+    const adminCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Admin Only')
+    );
+    if (adminCheckbox) await userEvent.click(adminCheckbox);
+
+    // Click Apply
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Apply \(1\)/ })).toBeTruthy();
+    });
+    await userEvent.click(screen.getByRole('button', { name: /Apply \(1\)/ }));
+
+    // Should call API
+    await waitFor(() => {
+      expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalledWith(
+        ['host-1', 'host-2'],
+        1
+      );
+    });
+
+    // Should show success toast
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Updated successfully');
+    });
+  });
+
+  it('shows Remove ACL confirmation when Remove is selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Wait for modal and find Remove ACL toggle (it's a button with flex-1 class)
+    await waitFor(() => {
+      expect(screen.getByText('Apply Access List')).toBeTruthy();
+    });
+
+    // Find the toggle button by looking for flex-1 class
+    const buttons = screen.getAllByRole('button');
+    const removeToggle = buttons.find(btn =>
+      btn.textContent === 'Remove ACL' && btn.className.includes('flex-1')
+    );
+    expect(removeToggle).toBeTruthy();
+    if (removeToggle) await userEvent.click(removeToggle);
+
+    // Should show warning message
+    await waitFor(() => {
+      expect(screen.getByText(/will become publicly accessible/i)).toBeTruthy();
+    });
+  });
+
+  it('closes modal on Cancel', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Modal should open
+    await waitFor(() => {
+      expect(screen.getByText('Apply Access List')).toBeTruthy();
+    });
+
+    // Click Cancel
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    // Modal should close
+    await waitFor(() => {
+      expect(screen.queryByText('Apply Access List')).toBeNull();
+    });
+  });
+
+  it('clears selection and closes modal after successful apply', async () => {
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({
+      updated: 2,
+      errors: [],
+    });
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Select ACL and apply
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+    });
+
+    const aclCheckboxes = screen.getAllByRole('checkbox');
+    const adminCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Admin Only')
+    );
+    if (adminCheckbox) await userEvent.click(adminCheckbox);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Apply \(1\)/ })).toBeTruthy();
+    });
+    await userEvent.click(screen.getByRole('button', { name: /Apply \(1\)/ }));
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalled();
+    });
+
+    // Modal should close
+    await waitFor(() => {
+      expect(screen.queryByText('Apply Access List')).toBeNull();
+    });
+
+    // Selection should be cleared (Manage ACL button should be gone)
+    await waitFor(() => {
+      expect(screen.queryByText('Manage ACL')).toBeNull();
+    });
+  });
+
+  it('shows error toast on API failure', async () => {
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({
+      updated: 1,
+      errors: [{ uuid: 'host-2', error: 'Failed' }],
+    });
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select hosts and open modal
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    await userEvent.click(screen.getByText('Manage ACL'));
+
+    // Select ACL and apply
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeTruthy();
+    });
+
+    const aclCheckboxes = screen.getAllByRole('checkbox');
+    const adminCheckbox = aclCheckboxes.find(cb =>
+      cb.closest('label')?.textContent?.includes('Admin Only')
+    );
+    if (adminCheckbox) await userEvent.click(adminCheckbox);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Apply \(1\)/ })).toBeTruthy();
+    });
+    await userEvent.click(screen.getByRole('button', { name: /Apply \(1\)/ }));
+
+    // Should show error toast
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Failed to update');
+    });
+  });
+});

frontend/src/pages/__tests__/ProxyHosts-bulk-apply-all-settings.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import ProxyHosts from '../ProxyHosts';
+import * as proxyHostsApi from '../../api/proxyHosts';
+import * as certificatesApi from '../../api/certificates';
+import type { ProxyHost } from '../../api/proxyHosts'
+import type { Certificate } from '../../api/certificates'
+import * as accessListsApi from '../../api/accessLists';
+import type { AccessList } from '../../api/accessLists'
+import * as settingsApi from '../../api/settings';
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost';
+
+vi.mock('react-hot-toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }));
+vi.mock('../../api/proxyHosts', () => ({ getProxyHosts: vi.fn(), createProxyHost: vi.fn(), updateProxyHost: vi.fn(), deleteProxyHost: vi.fn(), bulkUpdateACL: vi.fn(), testProxyHostConnection: vi.fn() }));
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }));
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }));
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }));
+
+const hosts = [
+  createMockProxyHost({ uuid: 'h1', name: 'Host 1', domain_names: 'one.example.com' }),
+  createMockProxyHost({ uuid: 'h2', name: 'Host 2', domain_names: 'two.example.com' }),
+];
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } } });
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('ProxyHosts - Bulk Apply all settings coverage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(hosts as ProxyHost[]);
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([] as Certificate[]);
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([] as AccessList[]);
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({} as Record<string, string>);
+  });
+
+  it('renders all bulk apply setting labels and allows toggling', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Host 1')).toBeTruthy());
+
+    // select all
+    const headerCheckbox = screen.getByLabelText('Select all rows');
+    await userEvent.click(headerCheckbox);
+
+    // open Bulk Apply
+    await waitFor(() => expect(screen.getByText('Bulk Apply')).toBeTruthy());
+    await userEvent.click(screen.getByText('Bulk Apply'));
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+
+    const labels = [
+      'Force SSL',
+      'HTTP/2 Support',
+      'HSTS Enabled',
+      'HSTS Subdomains',
+      'Block Exploits',
+      'Websockets Support',
+    ];
+
+    const { within } = await import('@testing-library/react');
+
+    for (const lbl of labels) {
+      expect(screen.getByText(lbl)).toBeTruthy();
+      // Find the setting row and click the Radix Checkbox (role="checkbox")
+      const labelEl = screen.getByText(lbl) as HTMLElement;
+      const row = labelEl.closest('.p-3') as HTMLElement;
+      const checkboxes = within(row).getAllByRole('checkbox');
+      await userEvent.click(checkboxes[0]);
+    }
+
+    // After toggling at least one, Apply should be enabled
+    const dialog = screen.getByRole('dialog');
+    const applyBtn = within(dialog).getByRole('button', { name: /^Apply$/i });
+    expect(applyBtn).toBeTruthy();
+    // Cancel to close
+    await userEvent.click(within(dialog).getByRole('button', { name: /Cancel/i }));
+    await waitFor(() => expect(screen.queryByText('Bulk Apply Settings')).toBeNull());
+  });
+});

frontend/src/pages/__tests__/ProxyHosts-bulk-apply-progress.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import ProxyHosts from '../ProxyHosts'
+import * as proxyHostsApi from '../../api/proxyHosts'
+import * as certificatesApi from '../../api/certificates'
+import * as accessListsApi from '../../api/accessLists'
+import * as settingsApi from '../../api/settings'
+import type { Certificate } from '../../api/certificates'
+import type { AccessList } from '../../api/accessLists'
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost'
+import type { ProxyHost } from '../../api/proxyHosts'
+
+vi.mock('react-hot-toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+vi.mock('../../api/proxyHosts', () => ({ getProxyHosts: vi.fn(), createProxyHost: vi.fn(), updateProxyHost: vi.fn(), deleteProxyHost: vi.fn(), bulkUpdateACL: vi.fn(), testProxyHostConnection: vi.fn() }))
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }))
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }))
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }))
+
+const hosts = [
+  createMockProxyHost({ uuid: 'p1', name: 'Progress 1', domain_names: 'p1.example.com' }),
+  createMockProxyHost({ uuid: 'p2', name: 'Progress 2', domain_names: 'p2.example.com' }),
+]
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } } })
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('ProxyHosts - Bulk Apply progress UI', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(hosts as ProxyHost[])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([] as Certificate[])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({} as Record<string, string>)
+  })
+
+  it('shows applying progress while updateProxyHost resolves', async () => {
+    // Make updateProxyHost return controllable promises so we can assert the progress UI
+    const updateMock = vi.mocked(proxyHostsApi.updateProxyHost)
+        const resolvers: Array<(v: ProxyHost) => void> = []
+        updateMock.mockImplementation(() => new Promise((res: (v: ProxyHost) => void) => { resolvers.push(res) }))
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Progress 1')).toBeTruthy())
+
+    // Select all
+    const selectAll = screen.getByLabelText('Select all rows')
+    await userEvent.click(selectAll)
+
+    // Open Bulk Apply
+    await userEvent.click(screen.getByText('Bulk Apply'))
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy())
+
+    // Enable one setting (Force SSL) - use Radix Checkbox (role="checkbox") in the row
+    const forceLabel = screen.getByText(/Force SSL/i) as HTMLElement
+    const forceRow = forceLabel.closest('.p-3') as HTMLElement
+    const { within } = await import('@testing-library/react')
+    const forceCheckbox = within(forceRow).getAllByRole('checkbox')[0]
+    await userEvent.click(forceCheckbox)
+
+    // Click Apply and assert progress UI appears
+    const dialog = screen.getByRole('dialog')
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i })
+    await userEvent.click(applyButton)
+
+    // During the small delay the progress text should appear (there are two matching nodes)
+    await waitFor(() => expect(screen.getAllByText(/Applying settings/i).length).toBeGreaterThan(0))
+
+    // Resolve both pending update promises to finish the operation
+    resolvers.forEach(r => r(hosts[0]))
+    // Ensure subsequent tests aren't blocked by the special mock: make updateProxyHost resolve normally
+    updateMock.mockImplementation(() => Promise.resolve(hosts[0] as ProxyHost))
+
+    // Wait for updates to complete
+    await waitFor(() => expect(updateMock).toHaveBeenCalledTimes(2))
+  })
+})
+
+export {}

frontend/src/pages/__tests__/ProxyHosts-bulk-apply.test.tsx

@@ -0,0 +1,127 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import ProxyHosts from '../ProxyHosts';
+import * as proxyHostsApi from '../../api/proxyHosts';
+import * as certificatesApi from '../../api/certificates';
+import type { Certificate } from '../../api/certificates'
+import type { ProxyHost } from '../../api/proxyHosts'
+import * as accessListsApi from '../../api/accessLists';
+import type { AccessList } from '../../api/accessLists'
+import * as settingsApi from '../../api/settings';
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost';
+
+// Mock toast
+vi.mock('react-hot-toast', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() },
+}));
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}));
+
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }));
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }));
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }));
+
+const mockProxyHosts = [
+  createMockProxyHost({ uuid: 'host-1', name: 'Test Host 1', domain_names: 'test1.example.com', forward_host: '192.168.1.10' }),
+  createMockProxyHost({ uuid: 'host-2', name: 'Test Host 2', domain_names: 'test2.example.com', forward_host: '192.168.1.20' }),
+];
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } } });
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('ProxyHosts - Bulk Apply Settings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(mockProxyHosts as ProxyHost[]);
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([] as Certificate[]);
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([] as AccessList[]);
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({} as Record<string, string>);
+  });
+
+  it('shows Bulk Apply button when hosts selected and opens modal', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select first host using select-all checkbox
+    const selectAll = screen.getAllByRole('checkbox')[0];
+    await userEvent.click(selectAll);
+
+    // Bulk Apply button should appear
+    await waitFor(() => expect(screen.getByText('Bulk Apply')).toBeTruthy());
+
+    // Open modal
+    await userEvent.click(screen.getByText('Bulk Apply'));
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+  });
+
+  it('applies selected settings to all selected hosts by calling updateProxyHost merged payload', async () => {
+    const updateMock = vi.mocked(proxyHostsApi.updateProxyHost);
+    updateMock.mockResolvedValue(mockProxyHosts[0] as ProxyHost);
+
+    renderWithProviders(<ProxyHosts />);
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await waitFor(() => expect(screen.getByText('Bulk Apply')).toBeTruthy());
+
+    // Open Bulk Apply modal
+    await userEvent.click(screen.getByText('Bulk Apply'));
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+
+    // Enable first setting checkbox (Force SSL) - find the row by text and then get the Radix Checkbox (role="checkbox")
+    const forceLabel = screen.getByText(/Force SSL/i) as HTMLElement;
+    const forceRow = forceLabel.closest('.p-3') as HTMLElement;
+    const { within } = await import('@testing-library/react');
+    // The Radix Checkbox has role="checkbox"
+    const forceCheckbox = within(forceRow).getAllByRole('checkbox')[0];
+    await userEvent.click(forceCheckbox);
+
+    // Click Apply (find the dialog and get the button from the footer)
+    const dialog = screen.getByRole('dialog');
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i });
+    await userEvent.click(applyButton);
+
+    // Should call updateProxyHost for each selected host with merged payload containing ssl_forced
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalled();
+      const calls = updateMock.mock.calls;
+      expect(calls.length).toBe(2);
+      expect(calls[0][1]).toHaveProperty('ssl_forced');
+      expect(calls[1][1]).toHaveProperty('ssl_forced');
+    });
+  });
+
+  it('cancels bulk apply modal when Cancel clicked', async () => {
+    renderWithProviders(<ProxyHosts />);
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+    const selectAll = screen.getAllByRole('checkbox')[0];
+    await userEvent.click(selectAll);
+    await waitFor(() => expect(screen.getByText('Bulk Apply')).toBeTruthy());
+    await userEvent.click(screen.getByText('Bulk Apply'));
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(screen.queryByText('Bulk Apply Settings')).toBeNull());
+  });
+});

frontend/src/pages/__tests__/ProxyHosts-bulk-delete.test.tsx

@@ -0,0 +1,525 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost';
+import ProxyHosts from '../ProxyHosts';
+import * as proxyHostsApi from '../../api/proxyHosts';
+import * as backupsApi from '../../api/backups';
+import * as certificatesApi from '../../api/certificates';
+import * as accessListsApi from '../../api/accessLists';
+import * as settingsApi from '../../api/settings';
+import { toast } from 'react-hot-toast';
+
+// Mock toast
+vi.mock('react-hot-toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    loading: vi.fn(),
+    dismiss: vi.fn(),
+  },
+}));
+
+// Mock API modules
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateProxyHostACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}));
+
+vi.mock('../../api/backups', () => ({
+  createBackup: vi.fn(),
+  getBackups: vi.fn(),
+  restoreBackup: vi.fn(),
+  deleteBackup: vi.fn(),
+}));
+
+vi.mock('../../api/certificates', () => ({
+  getCertificates: vi.fn(),
+}));
+
+vi.mock('../../api/accessLists', () => ({
+  accessListsApi: {
+    list: vi.fn(),
+    get: vi.fn(),
+    getTemplates: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    testIP: vi.fn(),
+  },
+}));
+
+vi.mock('../../api/settings', () => ({
+  getSettings: vi.fn(),
+}));
+
+const mockProxyHosts = [
+  createMockProxyHost({ uuid: 'host-1', name: 'Test Host 1', domain_names: 'test1.example.com', forward_host: '192.168.1.10' }),
+  createMockProxyHost({ uuid: 'host-2', name: 'Test Host 2', domain_names: 'test2.example.com', forward_host: '192.168.1.20' }),
+  createMockProxyHost({ uuid: 'host-3', name: 'Test Host 3', domain_names: 'test3.example.com', forward_host: '192.168.1.30' }),
+];
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        {ui}
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('ProxyHosts - Bulk Delete with Backup', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Setup default mocks
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(mockProxyHosts);
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([]);
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([]);
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({});
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({
+      filename: 'backup-2024-01-01-12-00-00.db',
+    });
+  });
+
+  it('renders bulk delete button when hosts are selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using the select-all checkbox (checkboxes[0])
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Bulk delete button should appear in the selection bar
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+  });
+
+  it('shows confirmation modal when delete button is clicked', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Modal should appear
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Should list hosts to be deleted (hosts appear in both table and modal)
+    expect(screen.getAllByText('Test Host 1').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Test Host 2').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Test Host 3').length).toBeGreaterThan(0);
+
+    // Should mention automatic backup
+    expect(screen.getByText(/automatic backup/i)).toBeTruthy();
+  });
+
+  it('creates backup before deleting hosts', async () => {
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons and click delete
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Click confirm delete
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Should create backup first
+    await waitFor(() => {
+      expect(backupsApi.createBackup).toHaveBeenCalled();
+    });
+
+    // Should show loading toast
+    expect(toast.loading).toHaveBeenCalledWith('Creating backup before deletion...');
+
+    // Should show success toast with backup filename
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Backup created: backup-2024-01-01-12-00-00.db');
+    });
+
+    // Should then delete the hosts
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('host-1');
+    });
+  });
+
+  it('deletes multiple selected hosts after backup', async () => {
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Click confirm delete
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Should create backup first
+    await waitFor(() => {
+      expect(backupsApi.createBackup).toHaveBeenCalled();
+    });
+
+    // Should delete all selected hosts
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('host-1');
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('host-2');
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('host-3');
+    });
+
+    // Should show success message
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        'Successfully deleted 3 host(s). Backup available for restore.'
+      );
+    });
+  });
+
+  it('reports partial success when some deletions fail', async () => {
+    // Make second deletion fail
+    vi.mocked(proxyHostsApi.deleteProxyHost)
+      .mockResolvedValueOnce()  // host-1 succeeds
+      .mockRejectedValueOnce(new Error('Network error'))  // host-2 fails
+      .mockResolvedValueOnce();  // host-3 succeeds
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal and confirm
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Wait for backup
+    await waitFor(() => {
+      expect(backupsApi.createBackup).toHaveBeenCalled();
+    });
+
+    // Should show partial success
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Deleted 2 host(s), 1 failed');
+    });
+  });
+
+  it('handles backup creation failure', async () => {
+    vi.mocked(backupsApi.createBackup).mockRejectedValue(new Error('Backup failed'));
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal and confirm
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Should show error
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Backup failed');
+    });
+
+    // Should NOT delete hosts if backup fails
+    expect(proxyHostsApi.deleteProxyHost).not.toHaveBeenCalled();
+  });
+
+  it('closes modal after successful deletion', async () => {
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Click confirm delete
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalled();
+    });
+
+    // Modal should close
+    await waitFor(() => {
+      expect(screen.queryByText(/Delete 3 Proxy Hosts?/i)).toBeNull();
+    });
+  });
+
+  it('clears selection after successful deletion', async () => {
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Should show selection count
+    await waitFor(() => {
+      expect(screen.getByText(/selected/)).toBeTruthy();
+    });
+
+    // Click bulk delete button and confirm (find it via Manage ACL sibling)
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalled();
+    });
+
+    // Selection should be cleared - bulk action buttons should disappear
+    await waitFor(() => {
+      expect(screen.queryByText('Manage ACL')).toBeNull();
+    });
+  });
+
+  it('disables confirm button while creating backup', async () => {
+    // Make backup creation take time
+    vi.mocked(backupsApi.createBackup).mockImplementation(
+      () => new Promise(resolve => setTimeout(() => resolve({ filename: 'backup.db' }), 100))
+    );
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Click confirm delete
+    const confirmButton = screen.getByText('Delete Permanently');
+    await userEvent.click(confirmButton);
+
+    // Backup should be called (confirms the button works and backup process starts)
+    await waitFor(() => {
+      expect(backupsApi.createBackup).toHaveBeenCalled();
+    });
+
+    // Wait for deletion to complete to prevent test pollution
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalled();
+    });
+  });
+
+  it('can cancel deletion from modal', async () => {
+    // Clear mocks to ensure no pollution from previous tests
+    vi.mocked(backupsApi.createBackup).mockClear();
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockClear();
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using select-all checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    await userEvent.click(checkboxes[0]);
+
+    // Wait for bulk action buttons to appear, then click bulk delete button
+    await waitFor(() => {
+      expect(screen.getByText('Manage ACL')).toBeTruthy();
+    });
+    const manageACLButton = screen.getByText('Manage ACL');
+    const deleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement;
+    await userEvent.click(deleteButton);
+
+    // Wait for modal
+    await waitFor(() => {
+      expect(screen.getByText(/Delete 3 Proxy Hosts?/i)).toBeTruthy();
+    });
+
+    // Click cancel
+    const cancelButton = screen.getByText('Cancel');
+    await userEvent.click(cancelButton);
+
+    // Modal should close
+    await waitFor(() => {
+      expect(screen.queryByText(/Delete 3 Proxy Hosts?/i)).toBeNull();
+    });
+
+    // Should NOT create backup or delete
+    expect(backupsApi.createBackup).not.toHaveBeenCalled();
+    expect(proxyHostsApi.deleteProxyHost).not.toHaveBeenCalled();
+
+    // Selection should remain
+    expect(screen.getByText(/selected/i)).toBeTruthy();
+  });
+
+  it('shows (all) indicator when all hosts selected for deletion', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Host 1')).toBeTruthy();
+    });
+
+    // Select all hosts using the select-all checkbox
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+
+    // Should show "(all)" indicator - format is "<strong>3</strong> host(s) selected (all)"
+    await waitFor(() => {
+      expect(screen.getByText(/host\(s\) selected/)).toBeTruthy();
+      expect(screen.getByText(/\(all\)/)).toBeTruthy();
+    });
+  });
+});

frontend/src/pages/__tests__/ProxyHosts-cert-cleanup.test.tsx

@@ -0,0 +1,501 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import type { ProxyHost, Certificate } from '../../api/proxyHosts'
+import ProxyHosts from '../ProxyHosts'
+import * as proxyHostsApi from '../../api/proxyHosts'
+import * as certificatesApi from '../../api/certificates'
+import * as accessListsApi from '../../api/accessLists'
+import * as settingsApi from '../../api/settings'
+import * as uptimeApi from '../../api/uptime'
+import * as backupsApi from '../../api/backups'
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost'
+
+vi.mock('react-hot-toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    loading: vi.fn(),
+    dismiss: vi.fn()
+  }
+}))
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}))
+
+vi.mock('../../api/certificates', () => ({
+  getCertificates: vi.fn(),
+  deleteCertificate: vi.fn(),
+}))
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }))
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }))
+vi.mock('../../api/backups', () => ({ createBackup: vi.fn() }))
+vi.mock('../../api/uptime', () => ({ getMonitors: vi.fn() }))
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: false, gcTime: 0 },
+    mutations: { retry: false }
+  }
+})
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+const baseHost = (overrides: Partial<ProxyHost> = {}) => createMockProxyHost(overrides)
+
+describe('ProxyHosts - Certificate Cleanup Prompts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([])
+    vi.mocked(backupsApi.createBackup).mockResolvedValue({ filename: 'backup.db' })
+  })
+
+  it('prompts to delete certificate when deleting proxy host with unique custom cert', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'CustomCert',
+      domains: 'test.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({
+      uuid: 'h1',
+      name: 'Host1',
+      certificate_id: 1,
+      certificate: cert
+    })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.deleteCertificate).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Click row delete button
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // First dialog appears - "Delete Proxy Host?" confirmation
+    await waitFor(() => {
+      expect(screen.getByText('Delete Proxy Host?')).toBeTruthy()
+    })
+
+    // Click "Delete" in the confirmation dialog to proceed
+    const confirmDelete = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDelete[confirmDelete.length - 1])
+
+    // Now Certificate cleanup dialog should appear (custom modal, not Radix)
+    await waitFor(() => {
+      expect(screen.getByText(/orphaned certificate/i)).toBeTruthy()
+      expect(screen.getByText('CustomCert')).toBeTruthy()
+    })
+
+    // Find the native checkbox by id="delete_certs"
+    const checkbox = document.getElementById('delete_certs') as HTMLInputElement
+    expect(checkbox).toBeTruthy()
+    expect(checkbox.checked).toBe(false)
+
+    // Check the checkbox to delete certificate
+    await userEvent.click(checkbox)
+
+    // Confirm deletion in the CertificateCleanupDialog
+    const submitButton = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(submitButton[submitButton.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(certificatesApi.deleteCertificate).toHaveBeenCalledWith(1)
+    })
+  })
+
+  it('does NOT prompt for certificate deletion when cert is shared by multiple hosts', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'SharedCert',
+      domains: 'shared.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host1 = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+    const host2 = baseHost({ uuid: 'h2', name: 'Host2', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host1, host2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    const deleteButtons = screen.getAllByRole('button', { name: /delete/i })
+    await userEvent.click(deleteButtons[0])
+
+    // Should show standard confirmation dialog (not cert cleanup)
+    await waitFor(() => {
+      expect(screen.getByText(/Delete Proxy Host\?/)).toBeTruthy()
+    })
+
+    // There should NOT be an orphaned certificate checkbox since cert is still used by Host2
+    expect(screen.queryByText(/orphaned certificate/i)).toBeNull()
+
+    // Click Delete to confirm
+    const confirmDeleteBtn = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDeleteBtn[confirmDeleteBtn.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+    })
+    expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+  })
+
+  it('does NOT prompt for production Let\'s Encrypt certificates', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'letsencrypt',
+      name: 'LE Prod',
+      domains: 'prod.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // Should show standard confirmation dialog (not cert cleanup with orphan checkbox)
+    await waitFor(() => {
+      expect(screen.getByText(/Delete Proxy Host\?/)).toBeTruthy()
+    })
+
+    // There should NOT be an orphaned certificate option for production Let's Encrypt
+    expect(screen.queryByText(/orphaned certificate/i)).toBeNull()
+
+    // Click Delete to confirm
+    const confirmDeleteBtn = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDeleteBtn[confirmDeleteBtn.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+    })
+    expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+  })
+
+  it('prompts for staging certificates', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'letsencrypt-staging',
+      name: 'Staging Cert',
+      domains: 'staging.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Click row delete button
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // First dialog appears - "Delete Proxy Host?" confirmation
+    await waitFor(() => {
+      expect(screen.getByText('Delete Proxy Host?')).toBeTruthy()
+    })
+
+    // Click "Delete" in the confirmation dialog to proceed
+    const confirmDelete = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDelete[confirmDelete.length - 1])
+
+    // Certificate cleanup dialog should appear for staging certs
+    await waitFor(() => {
+      expect(screen.getByText(/orphaned certificate/i)).toBeTruthy()
+    })
+
+    // Decline certificate deletion (click Delete without checking the box)
+    const deleteButtons = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(deleteButtons[deleteButtons.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+    })
+  })
+
+  it('handles certificate deletion failure gracefully', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'CustomCert',
+      domains: 'custom.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.deleteCertificate).mockRejectedValue(
+      new Error('Certificate is still in use')
+    )
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Click row delete button
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // First dialog appears
+    await waitFor(() => expect(screen.getByText('Delete Proxy Host?')).toBeTruthy())
+
+    // Click "Delete" in the confirmation dialog
+    const confirmDelete = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDelete[confirmDelete.length - 1])
+
+    // Certificate cleanup dialog should appear
+    await waitFor(() => expect(screen.getByText(/orphaned certificate/i)).toBeTruthy())
+
+    // Check the certificate deletion checkbox
+    const checkbox = document.getElementById('delete_certs') as HTMLInputElement
+    await userEvent.click(checkbox)
+
+    // Confirm deletion
+    const deleteButtons = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(deleteButtons[deleteButtons.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(certificatesApi.deleteCertificate).toHaveBeenCalledWith(1)
+    })
+
+    // Toast should show error about certificate but host was deleted
+    const toast = await import('react-hot-toast')
+    await waitFor(() => {
+      expect(toast.toast.error).toHaveBeenCalledWith(
+        expect.stringContaining('failed to delete certificate')
+      )
+    })
+  })
+
+  it('bulk delete prompts for orphaned certificates', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'BulkCert',
+      domains: 'bulk.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host1 = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+    const host2 = baseHost({ uuid: 'h2', name: 'Host2', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host1, host2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.deleteCertificate).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Select all hosts
+    const selectAllCheckbox = screen.getByLabelText('Select all rows')
+    await userEvent.click(selectAllCheckbox)
+
+    // Click bulk delete button (the delete button in the toolbar, after Manage ACL)
+    await waitFor(() => expect(screen.getByText('Manage ACL')).toBeTruthy())
+    const manageACLButton = screen.getByText('Manage ACL')
+    const bulkDeleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement
+    await userEvent.click(bulkDeleteButton)
+
+    // Confirm in bulk delete modal - text uses pluralized form "Proxy Host(s)"
+    await waitFor(() => expect(screen.getByText(/Delete 2 Proxy Host/)).toBeTruthy())
+    const deletePermBtn = screen.getByRole('button', { name: /Delete Permanently/i })
+    await userEvent.click(deletePermBtn)
+
+    // Should show certificate cleanup dialog (both hosts use same cert, deleting both = orphaned)
+    await waitFor(() => {
+      expect(screen.getByText(/orphaned certificate/i)).toBeTruthy()
+      expect(screen.getByText('BulkCert')).toBeTruthy()
+    })
+
+    // Check the certificate deletion checkbox
+    const certCheckbox = document.getElementById('delete_certs') as HTMLInputElement
+    await userEvent.click(certCheckbox)
+
+    // Confirm
+    const deleteButtons = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(deleteButtons[deleteButtons.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h2')
+      expect(certificatesApi.deleteCertificate).toHaveBeenCalledWith(1)
+    })
+  })
+
+  it('bulk delete does NOT prompt when certificate is still used by other hosts', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'SharedCert',
+      domains: 'shared.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host1 = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+    const host2 = baseHost({ uuid: 'h2', name: 'Host2', certificate_id: 1, certificate: cert })
+    const host3 = baseHost({ uuid: 'h3', name: 'Host3', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host1, host2, host3])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Select only host1 and host2 (host3 still uses the cert)
+    const host1Row = screen.getByText('Host1').closest('tr') as HTMLTableRowElement
+    const host2Row = screen.getByText('Host2').closest('tr') as HTMLTableRowElement
+    // Get the Radix Checkbox in each row (first checkbox, not the Switch which is input[type=checkbox].sr-only)
+    const host1Checkbox = within(host1Row).getByLabelText(/Select row h1/)
+    const host2Checkbox = within(host2Row).getByLabelText(/Select row h2/)
+
+    await userEvent.click(host1Checkbox)
+    await userEvent.click(host2Checkbox)
+
+    // Wait for bulk operations to be available
+    await waitFor(() => expect(screen.getByText('Bulk Apply')).toBeTruthy())
+
+    // Click bulk delete - find the delete button in the toolbar (after Manage ACL)
+    const manageACLButton = screen.getByText('Manage ACL')
+    const bulkDeleteButton = manageACLButton.parentElement?.querySelector('button:last-child') as HTMLButtonElement
+    await userEvent.click(bulkDeleteButton)
+
+    // Confirm in modal - text uses pluralized form "Proxy Host(s)"
+    await waitFor(() => expect(screen.getByText(/Delete 2 Proxy Host/)).toBeTruthy())
+    const deletePermBtn = screen.getByRole('button', { name: /Delete Permanently/i })
+    await userEvent.click(deletePermBtn)
+
+    // Should NOT show certificate cleanup dialog (host3 still uses it)
+    // It will directly delete without showing the orphaned cert dialog
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h2')
+      expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+    })
+  })
+
+  it('allows cancelling certificate cleanup dialog', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'CustomCert',
+      domains: 'test.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // Certificate cleanup dialog appears
+    await waitFor(() => expect(screen.getByText('Delete Proxy Host?')).toBeTruthy())
+
+    // Click Cancel
+    const cancelBtn = screen.getByRole('button', { name: 'Cancel' })
+    await userEvent.click(cancelBtn)
+
+    // Dialog should close, nothing deleted
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Proxy Host?')).toBeFalsy()
+      expect(proxyHostsApi.deleteProxyHost).not.toHaveBeenCalled()
+      expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+    })
+  })
+
+  it('default state is unchecked for certificate deletion (conservative)', async () => {
+    const cert: Certificate = {
+      id: 1,
+      uuid: 'cert-1',
+      provider: 'custom',
+      name: 'CustomCert',
+      domains: 'test.com',
+      expires_at: '2026-01-01T00:00:00Z'
+    }
+    const host = baseHost({ uuid: 'h1', name: 'Host1', certificate_id: 1, certificate: cert })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Host1')).toBeTruthy())
+
+    // Click row delete button
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // First dialog appears
+    await waitFor(() => expect(screen.getByText('Delete Proxy Host?')).toBeTruthy())
+
+    // Click "Delete" in the confirmation dialog
+    const confirmDelete = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(confirmDelete[confirmDelete.length - 1])
+
+    // Certificate cleanup dialog should appear
+    await waitFor(() => expect(screen.getByText(/orphaned certificate/i)).toBeTruthy())
+
+    // Checkbox should be unchecked by default
+    const checkbox = document.getElementById('delete_certs') as HTMLInputElement
+    expect(checkbox.checked).toBe(false)
+
+    // Confirm deletion without checking the box
+    const deleteButtons = screen.getAllByRole('button', { name: 'Delete' })
+    await userEvent.click(deleteButtons[deleteButtons.length - 1])
+
+    await waitFor(() => {
+      expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('h1')
+      expect(certificatesApi.deleteCertificate).not.toHaveBeenCalled()
+    })
+  })
+})

frontend/src/pages/__tests__/ProxyHosts-coverage-isolated.test.tsx

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { act } from 'react'
+import type { ProxyHost } from '../../api/proxyHosts'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// We'll use per-test module mocks via `vi.doMock` and dynamic imports to avoid
+// leaking mocks into other tests. Each test creates its own QueryClient.
+
+describe('ProxyHosts page - coverage targets (isolated)', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  const renderPage = async () => {
+    // Dynamic mocks
+    const mockUpdateHost = vi.fn()
+
+    vi.doMock('react-hot-toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({
+      useProxyHosts: vi.fn(() => ({
+        hosts: [
+          {
+            uuid: 'host-1',
+            name: 'StagingHost',
+            domain_names: 'staging.example.com',
+            forward_scheme: 'http',
+            forward_host: '10.0.0.1',
+            forward_port: 80,
+            ssl_forced: true,
+            websocket_support: true,
+            certificate: undefined,
+            enabled: true,
+            created_at: '2025-01-01',
+            updated_at: '2025-01-01',
+          },
+          {
+            uuid: 'host-2',
+            name: 'CustomCertHost',
+            domain_names: 'custom.example.com',
+            forward_scheme: 'http',
+            forward_host: '10.0.0.2',
+            forward_port: 8080,
+            ssl_forced: false,
+            websocket_support: false,
+            certificate: { provider: 'custom', name: 'ACME-CUSTOM' },
+            enabled: false,
+            created_at: '2025-01-01',
+            updated_at: '2025-01-01',
+          }
+        ],
+        loading: false,
+        isFetching: false,
+        error: null,
+        createHost: vi.fn(),
+        updateHost: (uuid: string, data: Partial<ProxyHost>) => mockUpdateHost(uuid, data),
+        deleteHost: vi.fn(),
+        bulkUpdateACL: vi.fn(),
+        isBulkUpdating: false,
+      }))
+    }))
+
+    vi.doMock('../../hooks/useCertificates', () => ({
+      useCertificates: vi.fn(() => ({
+        certificates: [
+          { id: 1, name: 'StagingCert', domain: 'staging.example.com', status: 'untrusted', provider: 'letsencrypt-staging' }
+        ],
+        isLoading: false,
+        error: null,
+      }))
+    }))
+
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({ 'ui.domain_link_behavior': 'new_window' })) }))
+
+    // Import page after mocks are in place
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const wrapper = (ui: React.ReactNode) => (
+      <QueryClientProvider client={qc}>{ui}</QueryClientProvider>
+    )
+
+    return { ProxyHosts, mockUpdateHost, wrapper }
+  }
+
+  it('renders SSL staging badge, websocket badge', async () => {
+    const { ProxyHosts } = await renderPage()
+
+    render(
+      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+        <ProxyHosts />
+      </QueryClientProvider>
+    )
+
+    await waitFor(() => expect(screen.getByText('StagingHost')).toBeInTheDocument())
+
+    // Staging badge shows "Staging" text
+    expect(screen.getByText('Staging')).toBeInTheDocument()
+    // Websocket badge shows "WS"
+    expect(screen.getByText('WS')).toBeInTheDocument()
+    // Custom cert hosts don't show the cert name in the table - just check the host is shown
+    expect(screen.getByText('CustomCertHost')).toBeInTheDocument()
+  })
+
+  it('opens domain link in new window when linkBehavior is new_window', async () => {
+    const { ProxyHosts } = await renderPage()
+
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+
+    render(
+      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+        <ProxyHosts />
+      </QueryClientProvider>
+    )
+
+    await waitFor(() => expect(screen.getByText('staging.example.com')).toBeInTheDocument())
+    const link = screen.getByText('staging.example.com').closest('a') as HTMLAnchorElement
+    await act(async () => {
+      await userEvent.click(link!)
+    })
+
+    expect(openSpy).toHaveBeenCalled()
+    openSpy.mockRestore()
+  })
+
+  it('bulk apply merges host data and calls updateHost', async () => {
+    const { ProxyHosts, mockUpdateHost } = await renderPage()
+
+    render(
+      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+        <ProxyHosts />
+      </QueryClientProvider>
+    )
+
+    await waitFor(() => expect(screen.getByText('StagingHost')).toBeInTheDocument())
+
+    // Select hosts by finding rows and clicking first checkbox (selection)
+    const row1 = screen.getByText('StagingHost').closest('tr') as HTMLTableRowElement
+    const row2 = screen.getByText('CustomCertHost').closest('tr') as HTMLTableRowElement
+    await userEvent.click(within(row1).getAllByRole('checkbox')[0])
+    await userEvent.click(within(row2).getAllByRole('checkbox')[0])
+
+    const bulkBtn = screen.getByText('Bulk Apply')
+    await userEvent.click(bulkBtn)
+
+    // Find the modal dialog
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeInTheDocument())
+
+    // The bulk apply modal has checkboxes for each setting - find them by role
+    const modalCheckboxes = screen.getAllByRole('checkbox').filter(
+      cb => cb.closest('[role="dialog"]') !== null
+    )
+    expect(modalCheckboxes.length).toBeGreaterThan(0)
+    // Click the first setting checkbox to enable it
+    await userEvent.click(modalCheckboxes[0])
+
+    const applyBtn = screen.getByRole('button', { name: /Apply/ })
+    await userEvent.click(applyBtn)
+
+    await waitFor(() => {
+      expect(mockUpdateHost).toHaveBeenCalled()
+    })
+
+    const calls = vi.mocked(mockUpdateHost).mock.calls
+    expect(calls.length).toBeGreaterThanOrEqual(1)
+    const [calledUuid, calledData] = calls[0]
+    expect(typeof calledUuid).toBe('string')
+    expect(Object.prototype.hasOwnProperty.call(calledData, 'ssl_forced')).toBe(true)
+  })
+})
+
+export {}

frontend/src/pages/__tests__/ProxyHosts-coverage.test.tsx

@@ -0,0 +1,996 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { act } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import type { ProxyHost } from '../../api/proxyHosts'
+import ProxyHosts from '../ProxyHosts'
+import { formatSettingLabel, settingHelpText, settingKeyToField, applyBulkSettingsToHosts } from '../../utils/proxyHostsHelpers'
+import * as proxyHostsApi from '../../api/proxyHosts'
+import * as certificatesApi from '../../api/certificates'
+import * as accessListsApi from '../../api/accessLists'
+import type { AccessList } from '../../api/accessLists'
+import * as settingsApi from '../../api/settings'
+import * as uptimeApi from '../../api/uptime'
+// Certificate type not required in this spec
+import type { UptimeMonitor } from '../../api/uptime'
+// toast is mocked in other tests; not used here
+
+vi.mock('react-hot-toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}))
+
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }))
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }))
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }))
+vi.mock('../../api/backups', () => ({ createBackup: vi.fn() }))
+vi.mock('../../api/uptime', () => ({ getMonitors: vi.fn() }))
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } } })
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost'
+
+const baseHost = (overrides: Partial<ProxyHost> = {}) => createMockProxyHost(overrides)
+
+describe('ProxyHosts - Coverage enhancements', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('shows empty message when no hosts', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
+  })
+
+    it('creates a proxy host via Add Host form submit', async () => {
+      vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([])
+      vi.mocked(proxyHostsApi.createProxyHost).mockResolvedValue({
+        uuid: 'new1',
+        name: 'NewHost',
+        domain_names: 'new.example.com',
+        forward_host: '127.0.0.1',
+        forward_port: 8080,
+        forward_scheme: 'http',
+        enabled: true,
+        ssl_forced: false,
+        http2_support: false,
+        hsts_enabled: false,
+        hsts_subdomains: false,
+        block_exploits: false,
+        websocket_support: false,
+        application: 'none',
+        locations: [],
+        certificate: null,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      } as ProxyHost)
+      vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+      renderWithProviders(<ProxyHosts />)
+      await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
+      const user = userEvent.setup()
+      // Click the first Add Proxy Host button (in empty state)
+      await user.click(screen.getAllByRole('button', { name: 'Add Proxy Host' })[0])
+      await waitFor(() => expect(screen.getByRole('heading', { name: 'Add Proxy Host' })).toBeTruthy())
+      // Fill name
+      const nameInput = screen.getByLabelText('Name *') as HTMLInputElement
+      await user.clear(nameInput)
+      await user.type(nameInput, 'NewHost')
+      const domainInput = screen.getByLabelText('Domain Names (comma-separated)') as HTMLInputElement
+      await user.clear(domainInput)
+      await user.type(domainInput, 'new.example.com')
+      // Fill forward host/port to satisfy required fields and save
+      const forwardHost = screen.getByLabelText('Host') as HTMLInputElement
+      await user.clear(forwardHost)
+      await user.type(forwardHost, '127.0.0.1')
+      const forwardPort = screen.getByLabelText('Port') as HTMLInputElement
+      await user.clear(forwardPort)
+      await user.type(forwardPort, '8080')
+      // Save
+      await user.click(await screen.findByRole('button', { name: 'Save' }))
+      await waitFor(() => expect(proxyHostsApi.createProxyHost).toHaveBeenCalled())
+    })
+
+    it('handles equal sort values gracefully', async () => {
+      const host1 = baseHost({ uuid: 'e1', name: 'Same', domain_names: 'a.example.com' })
+      const host2 = baseHost({ uuid: 'e2', name: 'Same', domain_names: 'b.example.com' })
+      vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host1, host2])
+      vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+      renderWithProviders(<ProxyHosts />)
+      await waitFor(() => expect(screen.getAllByText('Same').length).toBeGreaterThanOrEqual(2))
+      // Sort by name (they are equal) should not throw and maintain rows
+      const user = userEvent.setup()
+      await user.click(screen.getByText('Name'))
+      await waitFor(() => expect(screen.getAllByText('Same').length).toBeGreaterThanOrEqual(2))
+    })
+
+    it('toggle select-all deselects when clicked twice', async () => {
+      vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+        baseHost({ uuid: 's1', name: 'S1' }),
+        baseHost({ uuid: 's2', name: 'S2' }),
+      ])
+      vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+      renderWithProviders(<ProxyHosts />)
+      await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+      // Click select all header checkbox (has aria-label="Select all rows")
+      const user = userEvent.setup()
+      const selectAllBtn = screen.getByLabelText('Select all rows')
+      await user.click(selectAllBtn)
+      // Wait for selection UI to appear - text format includes "<strong>2</strong> host(s) selected (all)"
+      await waitFor(() => expect(screen.getByText(/host\(s\) selected/)).toBeTruthy())
+      // Also check for "(all)" indicator
+      expect(screen.getByText(/\(all\)/)).toBeTruthy()
+      // Click again to deselect
+      await user.click(selectAllBtn)
+      await waitFor(() => expect(screen.queryByText(/\(all\)/)).toBeNull())
+    })
+
+    it('bulk update ACL reject triggers error toast', async () => {
+      const host = baseHost({ uuid: 'b1', name: 'BHost' })
+      vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+      vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+        { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      ] as AccessList[])
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+      vi.mocked(proxyHostsApi.bulkUpdateACL).mockRejectedValue(new Error('Bad things'))
+
+      renderWithProviders(<ProxyHosts />)
+      await waitFor(() => expect(screen.getByText('BHost')).toBeTruthy())
+      const chk = screen.getAllByRole('checkbox')[0]
+      const user = userEvent.setup()
+      await user.click(chk)
+      await user.click(screen.getByText('Manage ACL'))
+      await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
+      const label = screen.getByText('List1').closest('label') as HTMLElement
+      // Radix Checkbox - query by role, not native input
+      const checkbox = within(label).getByRole('checkbox')
+      await user.click(checkbox)
+      const applyBtn = await screen.findByRole('button', { name: /Apply\s*\(/i })
+      await act(async () => {
+        await user.click(applyBtn)
+      })
+      const toast = (await import('react-hot-toast')).toast
+      await waitFor(() => expect(toast.error).toHaveBeenCalled())
+    })
+
+    it('switch toggles from disabled to enabled and calls API', async () => {
+      const host = baseHost({ uuid: 'sw1', name: 'SwitchHost', enabled: false })
+      vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+      vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+      vi.mocked(proxyHostsApi.updateProxyHost).mockResolvedValue({ ...host, enabled: true })
+
+      renderWithProviders(<ProxyHosts />)
+      await waitFor(() => expect(screen.getByText('SwitchHost')).toBeTruthy())
+      const row = screen.getByText('SwitchHost').closest('tr') as HTMLTableRowElement
+      // Switch component uses a label wrapping a hidden checkbox - find the label and click it
+      const switchLabel = row.querySelector('label.cursor-pointer') as HTMLElement
+      const user = userEvent.setup()
+      await user.click(switchLabel)
+      await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalledWith('sw1', { enabled: true }))
+    })
+
+  it('sorts hosts by column and toggles order indicator', async () => {
+    const h1 = baseHost({ uuid: '1', name: 'aaa', domain_names: 'b.com' })
+    const h2 = baseHost({ uuid: '2', name: 'zzz', domain_names: 'a.com' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([h1, h2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('aaa')).toBeTruthy())
+
+    // Check both hosts are rendered
+    expect(screen.getByText('aaa')).toBeTruthy()
+    expect(screen.getByText('zzz')).toBeTruthy()
+
+    // Click domain header - should show sorting indicator
+    const domainHeader = screen.getByText('Domain')
+    const user = userEvent.setup()
+    await user.click(domainHeader)
+
+    // After clicking domain header, the header should have aria-sort attribute
+    await waitFor(() => {
+      const th = domainHeader.closest('th')
+      expect(th?.getAttribute('aria-sort')).toBe('ascending')
+    })
+
+    // Click again to toggle to descending
+    await user.click(domainHeader)
+    await waitFor(() => {
+      const th = domainHeader.closest('th')
+      expect(th?.getAttribute('aria-sort')).toBe('descending')
+    })
+  })
+
+  it('toggles row selection checkbox and shows checked state', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+
+    const row = screen.getByText('S1').closest('tr') as HTMLTableRowElement
+    const selectBtn = within(row).getAllByRole('checkbox')[0]
+    // Initially unchecked
+    expect(selectBtn.getAttribute('aria-checked')).toBe('false')
+    const user = userEvent.setup()
+    await user.click(selectBtn)
+    await waitFor(() => expect(selectBtn.getAttribute('aria-checked')).toBe('true'))
+    await user.click(selectBtn)
+    await waitFor(() => expect(selectBtn.getAttribute('aria-checked')).toBe('false'))
+  })
+
+  it('closes bulk ACL modal when clicking backdrop', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+      vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+        { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist', enabled: true, ip_rules: '[]', country_codes: '', local_network_only: false, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const headerCheckbox = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(headerCheckbox)
+    await user.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('Apply Access List')).toBeTruthy())
+
+    // click backdrop (outer overlay) to close
+    const overlay = document.querySelector('.fixed.inset-0')
+    if (overlay) await user.click(overlay)
+    await waitFor(() => expect(screen.queryByText('Apply Access List')).toBeNull())
+  })
+
+  it('unchecks ACL via onChange (delete path)', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const headerCheckbox = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(headerCheckbox)
+    await user.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
+    const label = screen.getByText('List1').closest('label') as HTMLLabelElement
+    // Radix Checkbox - query by role, not native input
+    const checkbox = within(label).getByRole('checkbox')
+    // initially unchecked via clear, click to check
+    await user.click(checkbox)
+    await waitFor(() => expect(checkbox.getAttribute('aria-checked')).toBe('true'))
+    // click again to uncheck and hit delete path in onChange
+    await user.click(checkbox)
+    await waitFor(() => expect(checkbox.getAttribute('aria-checked')).toBe('false'))
+  })
+
+  it('remove action triggers handleBulkApplyACL and shows removed toast', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+      baseHost({ uuid: 's2', name: 'S2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({ updated: 2, errors: [] })
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const chk = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(chk)
+    await user.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
+    // Toggle to Remove ACL
+    await user.click(screen.getByText('Remove ACL'))
+    // Click the action button (Remove ACL) - it's the primary action (bg-red)
+    const actionBtn = screen.getAllByRole('button', { name: 'Remove ACL' }).pop()
+    if (actionBtn) await user.click(actionBtn)
+    await waitFor(() => expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalledWith(['s1', 's2'], null))
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.success).toHaveBeenCalled())
+  })
+
+  it('toggle action remove -> apply then back', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const chk = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(chk)
+    await user.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('Apply ACL')).toBeTruthy())
+    // Click Remove, then Apply to hit setBulkACLAction('apply')
+    // Toggle Remove (header toggle) and back to Apply (header toggle)
+    const headerToggles = screen.getAllByRole('button')
+    const removeToggle = headerToggles.find(btn => btn.textContent === 'Remove ACL' && btn.className.includes('flex-1'))
+    const applyToggle = headerToggles.find(btn => btn.textContent === 'Apply ACL' && btn.className.includes('flex-1'))
+    if (removeToggle) await user.click(removeToggle)
+    await waitFor(() => expect(removeToggle).toBeTruthy())
+    if (applyToggle) await user.click(applyToggle)
+    await waitFor(() => expect(applyToggle).toBeTruthy())
+  })
+
+  it('remove action shows partial failure toast on API error result', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+      baseHost({ uuid: 's2', name: 'S2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({ updated: 1, errors: [{ uuid: 's2', error: 'Bad' }] })
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const chk = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(chk)
+    await user.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
+    await userEvent.click(screen.getByText('Remove ACL'))
+    const actionBtn = screen.getAllByRole('button', { name: 'Remove ACL' }).pop()
+    if (actionBtn) await userEvent.click(actionBtn)
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.error).toHaveBeenCalled())
+  })
+
+  it('remove action reject triggers error toast', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+      baseHost({ uuid: 's2', name: 'S2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockRejectedValue(new Error('Bulk fail'))
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const chk = screen.getAllByRole('checkbox')[0]
+    await userEvent.click(chk)
+    await userEvent.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
+    // Toggle Remove mode
+    await userEvent.click(screen.getByText('Remove ACL'))
+    const actionBtn = screen.getAllByRole('button', { name: 'Remove ACL' }).pop()
+    if (actionBtn) await userEvent.click(actionBtn)
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.error).toHaveBeenCalled())
+  })
+
+  it('close bulk delete modal by clicking backdrop', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+      baseHost({ uuid: 's2', name: 'S2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const headerCheckbox = screen.getByLabelText('Select all rows')
+    await userEvent.click(headerCheckbox)
+    // Wait for selection bar to appear and find the delete button - text format is "host(s) selected"
+    await waitFor(() => expect(screen.getByText(/host\(s\) selected/)).toBeTruthy())
+    // Click the bulk Delete button (with bg-error class) - there are multiple Delete buttons, get the one in selection bar
+    const deleteButtons = screen.getAllByRole('button', { name: /Delete/ })
+    // The bulk delete button has bg-error class
+    const bulkDeleteBtn = deleteButtons.find(btn => btn.classList.contains('bg-error'))
+    await userEvent.click(bulkDeleteBtn!)
+    await waitFor(() => expect(screen.getByText(/Delete 2 Proxy Hosts?/i)).toBeTruthy())
+    const overlay = document.querySelector('.fixed.inset-0')
+    if (overlay) await userEvent.click(overlay)
+    await waitFor(() => expect(screen.queryByText(/Delete 2 Proxy Hosts?/i)).toBeNull())
+  })
+
+  it('calls window.open when settings link behavior new_window', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([baseHost({ uuid: '1', name: 'One' })])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({ 'ui.domain_link_behavior': 'new_window' })
+
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('One')).toBeTruthy())
+    const anchor = screen.getByRole('link', { name: /(test1\.example\.com|example\.com|One)/i })
+    await userEvent.click(anchor)
+    expect(openSpy).toHaveBeenCalled()
+    openSpy.mockRestore()
+  })
+
+  it('uses same_tab target for domain links when configured', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([baseHost({ uuid: '1', name: 'One' })])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({ 'ui.domain_link_behavior': 'same_tab' })
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('One')).toBeTruthy())
+    const anchor = screen.getByRole('link', { name: /(example\.com|One)/i })
+    // Anchor should render with target _self when same_tab
+    expect(anchor.getAttribute('target')).toBe('_self')
+  })
+
+  it('renders SSL states: custom, staging, letsencrypt variations', async () => {
+    const hostCustom = baseHost({ uuid: 'c1', name: 'CustomHost', domain_names: 'custom.com', ssl_forced: true, certificate: { id: 123, uuid: 'cert-1', name: 'CustomCert', provider: 'custom', domains: 'custom.com', expires_at: '2026-01-01' } })
+    const hostStaging = baseHost({ uuid: 's1', name: 'StagingHost', domain_names: 'staging.com', ssl_forced: true })
+    const hostAuto = baseHost({ uuid: 'a1', name: 'AutoHost', domain_names: 'auto.com', ssl_forced: true })
+    const hostLets = baseHost({ uuid: 'l1', name: 'LetsHost', domain_names: 'lets.com', ssl_forced: true })
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([hostCustom, hostStaging, hostAuto, hostLets])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([
+      { domain: 'staging.com', status: 'untrusted', provider: 'letsencrypt-staging', issuer: 'Let\'s Encrypt', expires_at: '2026-01-01' },
+      { domain: 'lets.com', status: 'valid', provider: 'letsencrypt', issuer: 'Let\'s Encrypt', expires_at: '2026-01-01' },
+    ])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('CustomHost')).toBeTruthy())
+
+    // Custom Cert - just verify the host renders
+    expect(screen.getByText('CustomHost')).toBeTruthy()
+
+    // Staging host should show staging badge text (just "Staging" in Badge)
+    expect(screen.getByText('StagingHost')).toBeTruthy()
+    // The SSL badge for staging hosts shows "Staging" text
+    const stagingBadges = screen.getAllByText('Staging')
+    expect(stagingBadges.length).toBeGreaterThanOrEqual(1)
+
+    // SSL badges are shown for valid certs
+    const sslBadges = screen.getAllByText('SSL')
+    expect(sslBadges.length).toBeGreaterThan(0)
+  })
+
+  it('renders multiple domains and websocket label', async () => {
+    const host = baseHost({ uuid: 'multi1', name: 'Multi', domain_names: 'one.com,two.com,three.com', websocket_support: true })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('Multi')).toBeTruthy())
+    // Check multiple domain anchors; parse anchor hrefs instead of substring checks
+    const anchors = screen.getAllByRole('link')
+    const anchorHasHost = (el: Element | null, host: string) => {
+      if (!el) return false
+      const href = el.getAttribute('href') || ''
+      try {
+        // Use base to resolve relative URLs
+        const parsed = new URL(href, 'http://localhost')
+        return parsed.host === host
+      } catch {
+        return el.textContent?.includes(host) ?? false
+      }
+    }
+    expect(anchors.some(a => anchorHasHost(a, 'one.com'))).toBeTruthy()
+    expect(anchors.some(a => anchorHasHost(a, 'two.com'))).toBeTruthy()
+    expect(anchors.some(a => anchorHasHost(a, 'three.com'))).toBeTruthy()
+    // Check websocket label exists since websocket_support true
+    expect(screen.getByText('WS')).toBeTruthy()
+  })
+
+  it('handles delete confirmation for a single host', async () => {
+    const host = baseHost({ uuid: 'del1', name: 'Del', domain_names: 'del.com' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Del')).toBeTruthy())
+    // Click Delete button in the row
+    const editButton = screen.getByText('Edit')
+    const row = editButton.closest('tr') as HTMLTableRowElement
+    const delButton = within(row).getByText('Delete')
+    await userEvent.click(delButton)
+    // Confirm in dialog
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
+    const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
+    await userEvent.click(confirmBtn)
+    await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del1'))
+    confirmSpy.mockRestore()
+  })
+
+  it('deletes associated uptime monitors when confirmed', async () => {
+    const host = baseHost({ uuid: 'del2', name: 'Del2', forward_host: '127.0.0.5' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    // uptime monitors associated with host
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([{ id: 'm1', name: 'm1', url: 'http://example', type: 'http', interval: 60, enabled: true, status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3, upstream_host: '127.0.0.5' } as UptimeMonitor])
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Del2')).toBeTruthy())
+    const row = screen.getByText('Del2').closest('tr') as HTMLTableRowElement
+    const delButton = within(row).getByText('Delete')
+    await userEvent.click(delButton)
+    // Confirm in dialog
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
+    const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
+    await userEvent.click(confirmBtn)
+    // Should call delete with deleteUptime true
+    await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del2', true))
+    confirmSpy.mockRestore()
+  })
+
+  it('ignores uptime API errors and deletes host without deleting uptime', async () => {
+    const host = baseHost({ uuid: 'del3', name: 'Del3', forward_host: '127.0.0.6' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockResolvedValue()
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    // Make getMonitors throw
+    vi.mocked(uptimeApi.getMonitors).mockRejectedValue(new Error('OOPS'))
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Del3')).toBeTruthy())
+    const row = screen.getByText('Del3').closest('tr') as HTMLTableRowElement
+    const delButton = within(row).getByText('Delete')
+    await userEvent.click(delButton)
+    // Confirm in dialog
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
+    const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
+    await userEvent.click(confirmBtn)
+    // Should call delete without second param
+    await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del3'))
+    confirmSpy.mockRestore()
+  })
+
+  it('applies bulk settings sequentially with progress and updates hosts', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 'host-1', name: 'H1' }),
+      baseHost({ uuid: 'host-2', name: 'H2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.updateProxyHost).mockResolvedValue({} as ProxyHost)
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('H1')).toBeTruthy())
+
+    // Select both hosts
+    const headerCheckbox = screen.getAllByRole('checkbox')[0]
+    await userEvent.click(headerCheckbox)
+
+    // Open Bulk Apply modal
+    await userEvent.click(screen.getByText('Bulk Apply'))
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy())
+
+    // In the modal, find Force SSL row and enable apply and set value true
+    const forceLabel = screen.getByText('Force SSL')
+    // The row has class p-3 not p-2, and we need to get the parent flex container
+    const rowEl = forceLabel.closest('.p-3') as HTMLElement || forceLabel.closest('div')?.parentElement as HTMLElement
+    // Find the Radix checkbox (has role="checkbox" and is a button) and the switch (label with input)
+    const allCheckboxes = within(rowEl).getAllByRole('checkbox')
+    // First checkbox is the Radix Checkbox for "apply"
+    const applyCheckbox = allCheckboxes[0]
+    await userEvent.click(applyCheckbox)
+
+    // Click Apply in the modal - find button within the dialog
+    const applyBtn = screen.getByRole('button', { name: /^Apply$/i })
+    await userEvent.click(applyBtn)
+
+    // Expect updateProxyHost called for each host with ssl_forced true included in payload
+    await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalledTimes(2))
+    const calls = vi.mocked(proxyHostsApi.updateProxyHost).mock.calls
+    expect(calls.some(call => call[1] && (call[1] as Partial<ProxyHost>).ssl_forced === true)).toBeTruthy()
+  })
+
+  it('shows Unnamed when name missing', async () => {
+    const hostNoName = baseHost({ uuid: 'n1', name: '', domain_names: 'no-name.com' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([hostNoName])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('Unnamed')).toBeTruthy())
+  })
+
+  it('toggles host enable state via Switch', async () => {
+    const host = baseHost({ uuid: 't1', name: 'Toggle', enabled: true })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.updateProxyHost).mockResolvedValue(baseHost({ uuid: 't1', name: 'Toggle', enabled: true }))
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('Toggle')).toBeTruthy())
+    // Locate the row and toggle the enabled switch - it's inside a label with cursor-pointer class
+    const row = screen.getByText('Toggle').closest('tr') as HTMLTableRowElement
+    // Switch component uses a label wrapping a hidden checkbox
+    const switchLabel = row.querySelector('label.cursor-pointer') as HTMLElement
+    expect(switchLabel).toBeTruthy()
+    await userEvent.click(switchLabel)
+    await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalled())
+  })
+
+  it('opens add form and cancels', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
+    // Click the first Add Proxy Host button (in empty state)
+    await userEvent.click(screen.getAllByRole('button', { name: 'Add Proxy Host' })[0])
+    // Form should open with Add Proxy Host header
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Add Proxy Host' })).toBeTruthy())
+    // Click Cancel should close the form
+    const cancelButton = screen.getByText('Cancel')
+    await userEvent.click(cancelButton)
+    await waitFor(() => expect(screen.queryByRole('heading', { name: 'Add Proxy Host' })).toBeNull())
+  })
+
+  it('opens edit form and submits update', async () => {
+    const host = baseHost({ uuid: 'edit1', name: 'EditMe' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.updateProxyHost).mockResolvedValue({ ...host, name: 'Edited' })
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('EditMe')).toBeTruthy())
+    const editBtn = screen.getByText('Edit')
+    await userEvent.click(editBtn)
+
+    // Form header should show Edit Proxy Host
+    await waitFor(() => expect(screen.getByText('Edit Proxy Host')).toBeTruthy())
+    // Change name and click Save
+    const nameInput = screen.getByLabelText('Name *') as HTMLInputElement
+    await userEvent.clear(nameInput)
+    await userEvent.type(nameInput, 'Edited')
+    await userEvent.click(screen.getByText('Save'))
+
+    await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalled())
+  })
+
+  it('alerts on delete when API fails', async () => {
+    const host = baseHost({ uuid: 'delerr', name: 'DelErr' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host])
+    vi.mocked(proxyHostsApi.deleteProxyHost).mockRejectedValue(new Error('Boom'))
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('DelErr')).toBeTruthy())
+    const row = screen.getByText('DelErr').closest('tr') as HTMLTableRowElement
+    const delButton = within(row).getByText('Delete')
+    await userEvent.click(delButton)
+    // Confirm in dialog
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
+    const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
+    await userEvent.click(confirmBtn)
+
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.error).toHaveBeenCalled())
+    confirmSpy.mockRestore()
+  })
+
+  it('sorts by domain and forward columns', async () => {
+    const h1 = baseHost({ uuid: 'd1', name: 'A', domain_names: 'b.com', forward_host: 'foo' , forward_port: 8080 })
+    const h2 = baseHost({ uuid: 'd2', name: 'B', domain_names: 'a.com', forward_host: 'bar' , forward_port: 80 })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([h1, h2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('A')).toBeTruthy())
+
+    // Domain sort
+    await userEvent.click(screen.getByText('Domain'))
+    await waitFor(() => expect(screen.getByText('B')).toBeTruthy()) // domain 'a.com' should appear first
+
+    // Forward sort: toggle to change order
+    await userEvent.click(screen.getByText('Forward To'))
+    await waitFor(() => expect(screen.getByText('A')).toBeTruthy())
+  })
+
+  it('applies multiple ACLs sequentially with progress', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 'host-1', name: 'H1' }),
+      baseHost({ uuid: 'host-2', name: 'H2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-a1', name: 'A1', description: 'A1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      { id: 2, uuid: 'acl-a2', name: 'A2', description: 'A2', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockResolvedValue({ updated: 2, errors: [] })
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('H1')).toBeTruthy())
+
+    // Select all hosts
+    const checkboxes = screen.getAllByRole('checkbox')
+    await userEvent.click(checkboxes[0])
+
+    // Open Manage ACL
+    await userEvent.click(screen.getByText('Manage ACL'))
+    await waitFor(() => expect(screen.getByText('A1')).toBeTruthy())
+
+    // Select both ACLs
+    const aclCheckboxes = screen.getAllByRole('checkbox')
+    const checkA1 = aclCheckboxes.find(cb => cb.closest('label')?.textContent?.includes('A1'))
+    const checkA2 = aclCheckboxes.find(cb => cb.closest('label')?.textContent?.includes('A2'))
+    if (checkA1) await userEvent.click(checkA1)
+    if (checkA2) await userEvent.click(checkA2)
+
+    // Click Apply
+    const applyBtn = screen.getByRole('button', { name: /Apply \(2\)/i })
+    await userEvent.click(applyBtn)
+
+    // Should call bulkUpdateACL twice and show success
+    await waitFor(() => expect(proxyHostsApi.bulkUpdateACL).toHaveBeenCalledTimes(2))
+  })
+
+  it('select all / clear header selects and clears ACLs', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+      baseHost({ uuid: 's2', name: 'S2' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-1', name: 'List1', description: 'List 1', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      { id: 2, uuid: 'acl-2', name: 'List2', description: 'List 2', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: true, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+
+    const checkboxes = screen.getAllByRole('checkbox')
+    await userEvent.click(checkboxes[0])
+    await waitFor(() => expect(screen.getByText('Manage ACL')).toBeTruthy())
+    await userEvent.click(screen.getByText('Manage ACL'))
+
+    // Click Select All in modal
+    const selectAllBtn = await screen.findByText('Select All')
+    await userEvent.click(selectAllBtn)
+    // All ACL checkboxes (Radix Checkbox) inside labels should be checked - check via aria-checked
+    const labelEl1 = screen.getByText('List1').closest('label') as HTMLElement
+    const labelEl2 = screen.getByText('List2').closest('label') as HTMLElement
+    const checkbox1 = within(labelEl1).getByRole('checkbox')
+    const checkbox2 = within(labelEl2).getByRole('checkbox')
+    expect(checkbox1.getAttribute('aria-checked')).toBe('true')
+    expect(checkbox2.getAttribute('aria-checked')).toBe('true')
+
+    // Click Clear
+    const clearBtn = await screen.findByText('Clear')
+    await userEvent.click(clearBtn)
+    expect(checkbox1.getAttribute('aria-checked')).toBe('false')
+    expect(checkbox2.getAttribute('aria-checked')).toBe('false')
+  })
+
+  it('shows no enabled access lists message when none are enabled', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' })
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([
+      { id: 1, uuid: 'acl-disable1', name: 'Disabled1', description: 'Disabled 1', type: 'blacklist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: false, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      { id: 2, uuid: 'acl-disable2', name: 'Disabled2', description: 'Disabled 2', type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, enabled: false, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ] as AccessList[])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+
+    const checkboxes = screen.getAllByRole('checkbox')
+    await userEvent.click(checkboxes[0])
+    await waitFor(() => expect(screen.getByText('Manage ACL')).toBeTruthy())
+    await userEvent.click(screen.getByText('Manage ACL'))
+
+    // Should show the 'No enabled access lists available' message
+    await waitFor(() => expect(screen.getByText('No enabled access lists available')).toBeTruthy())
+  })
+
+  it('formatSettingLabel, settingHelpText and settingKeyToField return expected values and defaults', () => {
+    expect(formatSettingLabel('ssl_forced')).toBe('Force SSL')
+    expect(formatSettingLabel('http2_support')).toBe('HTTP/2 Support')
+    expect(formatSettingLabel('hsts_enabled')).toBe('HSTS Enabled')
+    expect(formatSettingLabel('hsts_subdomains')).toBe('HSTS Subdomains')
+    expect(formatSettingLabel('block_exploits')).toBe('Block Exploits')
+    expect(formatSettingLabel('websocket_support')).toBe('Websockets Support')
+    expect(formatSettingLabel('unknown_key')).toBe('unknown_key')
+
+    expect(settingHelpText('ssl_forced')).toContain('Redirect all HTTP traffic')
+    expect(settingHelpText('http2_support')).toContain('Enable HTTP/2')
+    expect(settingHelpText('hsts_enabled')).toContain('Send HSTS header')
+    expect(settingHelpText('hsts_subdomains')).toContain('Include subdomains')
+    expect(settingHelpText('block_exploits')).toContain('Add common exploit-mitigation')
+    expect(settingHelpText('websocket_support')).toContain('Enable websocket proxying')
+    expect(settingHelpText('unknown_key')).toBe('')
+
+    expect(settingKeyToField('ssl_forced')).toBe('ssl_forced')
+    expect(settingKeyToField('http2_support')).toBe('http2_support')
+    expect(settingKeyToField('hsts_enabled')).toBe('hsts_enabled')
+    expect(settingKeyToField('hsts_subdomains')).toBe('hsts_subdomains')
+    expect(settingKeyToField('block_exploits')).toBe('block_exploits')
+    expect(settingKeyToField('websocket_support')).toBe('websocket_support')
+    expect(settingKeyToField('unknown_key')).toBe('unknown_key')
+  })
+
+  it('closes bulk apply modal when clicking backdrop', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([
+      baseHost({ uuid: 's1', name: 'S1' }),
+    ])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
+    const headerCheckbox = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(headerCheckbox)
+    await user.click(screen.getByText('Bulk Apply'))
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy())
+    // click backdrop
+    const overlay = document.querySelector('.fixed.inset-0')
+    if (overlay) await user.click(overlay)
+    await waitFor(() => expect(screen.queryByText('Bulk Apply Settings')).toBeNull())
+  })
+
+  it('shows toast error when updateHost rejects during bulk apply', async () => {
+    const h1 = baseHost({ uuid: 'host-1', name: 'H1' })
+    const h2 = baseHost({ uuid: 'host-2', name: 'H2' })
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([h1, h2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+    // mock updateProxyHost to fail for host-2
+    vi.mocked(proxyHostsApi.updateProxyHost).mockImplementation(async (uuid: string) => {
+      if (uuid === 'host-2') throw new Error('update fail')
+      const result = baseHost({ uuid })
+      return result
+    })
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('H1')).toBeTruthy())
+    // select both
+    const headerCheckbox = screen.getAllByRole('checkbox')[0]
+    const user = userEvent.setup()
+    await user.click(headerCheckbox)
+    // Open Bulk Apply
+    await user.click(screen.getByText('Bulk Apply'))
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy())
+    // enable Force SSL apply + set switch
+    const forceLabel = screen.getByText('Force SSL')
+    // The row has class p-3 not p-2, and we need to get the parent flex container
+    const rowEl = forceLabel.closest('.p-3') as HTMLElement || forceLabel.closest('div')?.parentElement as HTMLElement
+    // Find the Radix checkbox (has role="checkbox" and is a button) and the switch (label with input)
+    const allCheckboxes = within(rowEl).getAllByRole('checkbox')
+    // First checkbox is the Radix Checkbox for "apply", second is the switch's internal checkbox
+    const applyCheckbox = allCheckboxes[0]
+    await user.click(applyCheckbox)
+    // Toggle the switch - click the label containing the checkbox
+    const switchLabel = rowEl.querySelector('label.relative') as HTMLElement
+    if (switchLabel) await user.click(switchLabel)
+    // click Apply - find button within the dialog
+    const applyBtn = screen.getByRole('button', { name: /^Apply$/i })
+    await user.click(applyBtn)
+
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.error).toHaveBeenCalled())
+  })
+
+  it('applyBulkSettingsToHosts returns error when host is not found and reports progress', async () => {
+    const hosts: ProxyHost[] = [] // no hosts
+    const hostUUIDs = ['missing-1']
+    const keysToApply = ['ssl_forced']
+    const bulkApplySettings: Record<string, { apply: boolean; value: boolean }> = { ssl_forced: { apply: true, value: true } }
+    const updateHost = vi.fn().mockResolvedValue({})
+    const setApplyProgress = vi.fn()
+
+    const result = await applyBulkSettingsToHosts({ hosts, hostUUIDs, keysToApply, bulkApplySettings, updateHost, setApplyProgress })
+    expect(result.errors).toBe(1)
+    expect(setApplyProgress).toHaveBeenCalled()
+    expect(updateHost).not.toHaveBeenCalled()
+  })
+
+  it('applyBulkSettingsToHosts handles updateHost rejection and counts errors', async () => {
+    const h1 = baseHost({ uuid: 'h1', name: 'H1' })
+    const hosts = [h1]
+    const hostUUIDs = ['h1']
+    const keysToApply = ['ssl_forced']
+    const bulkApplySettings: Record<string, { apply: boolean; value: boolean }> = { ssl_forced: { apply: true, value: true } }
+    const updateHost = vi.fn().mockRejectedValue(new Error('fail'))
+    const setApplyProgress = vi.fn()
+
+    const result = await applyBulkSettingsToHosts({ hosts, hostUUIDs, keysToApply, bulkApplySettings, updateHost, setApplyProgress })
+    expect(result.errors).toBe(1)
+    expect(updateHost).toHaveBeenCalled()
+  })
+})
+
+export {}

frontend/src/pages/__tests__/ProxyHosts-extra.test.tsx

@@ -0,0 +1,408 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ProxyHost } from '../../api/proxyHosts'
+
+// Helper to create QueryClient provider wrapper
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } })
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createQueryClient()
+  return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>)
+}
+
+const sampleHost = (overrides: Partial<ProxyHost> = {}): ProxyHost => ({
+  uuid: 'h1',
+  name: 'A Name',
+  domain_names: 'a.example.com',
+  forward_scheme: 'http',
+  forward_host: '127.0.0.1',
+  forward_port: 8080,
+  ssl_forced: false,
+  websocket_support: false,
+  enabled: true,
+  http2_support: false,
+  hsts_enabled: false,
+  hsts_subdomains: false,
+  block_exploits: false,
+  application: 'none',
+  locations: [],
+  certificate: null,
+  certificate_id: null,
+  access_list_id: null,
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  ...overrides,
+})
+
+describe('ProxyHosts page extra tests', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  it('shows "No proxy hosts configured" when no hosts', async () => {
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeInTheDocument())
+  })
+
+  it('sort toggles by header click', async () => {
+    const h1 = sampleHost({ uuid: 'a', name: 'Alpha' })
+    const h2 = sampleHost({ uuid: 'b', name: 'Beta' })
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [h2, h1], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+
+    renderWithProviders(<ProxyHosts />)
+
+    // hosts are sorted by name by default (Alpha before Beta) by the component
+    await waitFor(() => expect(screen.getByText('Alpha')).toBeInTheDocument())
+
+    const nameHeader = screen.getByText('Name')
+    // Click header - this only toggles the sort indicator icon, not actual data order
+    // since the component pre-sorts data before passing to DataTable
+    await userEvent.click(nameHeader)
+
+    // Verify that both hosts are still displayed (basic sanity check)
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Beta')).toBeInTheDocument()
+
+    // Verify the sort indicator changes (chevron icon should toggle)
+    // The table header should have aria-sort attribute
+    const table = screen.getByRole('table')
+    expect(table).toBeInTheDocument()
+  })
+
+  it('delete with associated monitors prompts and deletes with deleteUptime true', async () => {
+    const host = sampleHost({ uuid: 'delete-1', name: 'DelHost', forward_host: 'upstream-1' })
+    const deleteHostMock = vi.fn().mockResolvedValue(undefined)
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: deleteHostMock, bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+    vi.doMock('../../api/uptime', () => ({ getMonitors: vi.fn(() => Promise.resolve([{ id: 1, upstream_host: 'upstream-1', proxy_host_id: null }])) }))
+
+    const confirmMock = vi.spyOn(window, 'confirm')
+    // first confirm 'Are you sure' -> true, second confirm 'Delete monitors as well' -> true
+    confirmMock.mockImplementation(() => true)
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('DelHost')).toBeInTheDocument())
+    const deleteBtn = screen.getByRole('button', { name: 'Delete' })
+    await userEvent.click(deleteBtn)
+
+    // Confirm deletion in the dialog
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeInTheDocument())
+    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/ })
+    await userEvent.click(confirmDeleteBtn)
+
+    await waitFor(() => expect(deleteHostMock).toHaveBeenCalled())
+
+    // Should have been called with both uuid and deleteUptime true (because monitors exist and second confirm true)
+    expect(deleteHostMock).toHaveBeenCalledWith('delete-1', true)
+    confirmMock.mockRestore()
+  })
+
+  it('renders SSL badges for SSL-enabled hosts', async () => {
+    const hostValid = sampleHost({ uuid: 'v1', name: 'ValidHost', domain_names: 'valid.example.com', ssl_forced: true })
+    const hostAuto = sampleHost({ uuid: 'a1', name: 'AutoHost', domain_names: 'auto.example.com', ssl_forced: true })
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [hostValid, hostAuto], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [{ id: 1, name: 'LE', domain: 'valid.example.com', status: 'valid', provider: 'letsencrypt' }], isLoading: false, error: null })) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('ValidHost')).toBeInTheDocument())
+    // Check that SSL badges are rendered (text removed for better spacing)
+    const sslBadges = screen.getAllByText('SSL')
+    expect(sslBadges.length).toBeGreaterThan(0)
+  })
+
+  it('shows error banner when hook returns an error', async () => {
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [], loading: false, isFetching: false, error: 'Failed to load', createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('Failed to load')).toBeInTheDocument())
+  })
+
+  it('select all shows (all) selected in summary', async () => {
+    const h1 = sampleHost({ uuid: 'x', name: 'XHost' })
+    const h2 = sampleHost({ uuid: 'y', name: 'YHost' })
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [h1, h2], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('XHost')).toBeInTheDocument())
+    const selectAllBtn = screen.getByRole('checkbox', { name: /Select all/i })
+    // fallback, find by title
+    if (!selectAllBtn) {
+      await userEvent.click(screen.getByTitle('Select all'))
+    } else {
+      await userEvent.click(selectAllBtn)
+    }
+
+    // Text is split across elements: "<strong>2</strong> host(s) selected (all)"
+    // Check for presence of both parts separately
+    await waitFor(() => expect(screen.getByText(/host\(s\) selected/)).toBeInTheDocument())
+    expect(screen.getByText(/\(all\)/)).toBeInTheDocument()
+  })
+
+  it('shows loader when fetching', async () => {
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [sampleHost()], loading: false, isFetching: true, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    const { container } = renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(container.querySelector('.animate-spin')).toBeInTheDocument())
+  })
+
+  it('handles domain link behavior new_window', async () => {
+    const host = sampleHost({ uuid: 'link-h1', domain_names: 'link.example.com', ssl_forced: true })
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({ 'ui.domain_link_behavior': 'new_window' })) }))
+
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('link.example.com')).toBeInTheDocument())
+    const link = screen.getByRole('link', { name: /link.example.com/ })
+    await userEvent.click(link)
+    expect(openSpy).toHaveBeenCalled()
+    openSpy.mockRestore()
+  })
+
+  it('shows WS and ACL badges when appropriate', async () => {
+    const host = sampleHost({ uuid: 'x2', name: 'XHost2', websocket_support: true, access_list_id: 5 })
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('XHost2')).toBeInTheDocument())
+    expect(screen.getByText('WS')).toBeInTheDocument()
+    expect(screen.getByText('ACL')).toBeInTheDocument()
+  })
+
+  it('bulk ACL remove shows the confirmation card and Apply label updates when selecting ACLs', async () => {
+    const host = sampleHost({ uuid: 'acl-1', name: 'AclHost' })
+    const acl = { id: 1, name: 'MyACL', enabled: true }
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(() => Promise.resolve({ updated: 1, errors: [] })), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [acl] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('AclHost')).toBeInTheDocument())
+    // Select host using checkbox - find row first, then first checkbox (selection) within
+    const row = screen.getByText('AclHost').closest('tr') as HTMLTableRowElement
+    const selectBtn = within(row).getAllByRole('checkbox')[0]
+    await userEvent.click(selectBtn)
+
+    // Open Manage ACL modal
+    const manageBtn = screen.getByText('Manage ACL')
+    await userEvent.click(manageBtn)
+
+    // Switch to Remove ACL action
+    const removeBtn = screen.getByText('Remove ACL')
+    await userEvent.click(removeBtn)
+
+    await waitFor(() => expect(screen.getByText(/This will remove the access list from all 1 selected host/i)).toBeInTheDocument())
+
+    // Switch back to Apply ACL and select the ACL
+    const applyBtn = screen.getByText('Apply ACL')
+    await userEvent.click(applyBtn)
+    const selectAll = screen.getByText('Select All')
+    await userEvent.click(selectAll)
+    await waitFor(() => expect(screen.getByText('Apply (1)')).toBeInTheDocument())
+  })
+
+  it('bulk ACL remove action calls bulkUpdateACL with null and shows removed toast', async () => {
+    const host = sampleHost({ uuid: 'acl-2', name: 'AclHost2' })
+    const bulkUpdateACLMock = vi.fn(async () => ({ updated: 1, errors: [] }))
+    const toastSuccess = vi.fn()
+    vi.doMock('react-hot-toast', () => ({ toast: { success: toastSuccess, error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: bulkUpdateACLMock, isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [{ id: 1, name: 'MyACL', enabled: true }] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('AclHost2')).toBeInTheDocument())
+    const row = screen.getByText('AclHost2').closest('tr') as HTMLTableRowElement
+    await userEvent.click(within(row).getAllByRole('checkbox')[0])
+    await userEvent.click(screen.getByText('Manage ACL'))
+    await userEvent.click(screen.getByText('Remove ACL'))
+    // Click Remove ACL confirm button (bottom) - choose the confirmation button rather than the header action
+    const removeButtons = screen.getAllByRole('button', { name: 'Remove ACL' })
+    await userEvent.click(removeButtons[removeButtons.length - 1])
+
+    await waitFor(() => expect(bulkUpdateACLMock).toHaveBeenCalledWith(['acl-2'], null))
+    expect(toastSuccess).toHaveBeenCalledWith(expect.stringContaining('removed'))
+  })
+
+  it('shows no enabled access lists available when none exist', async () => {
+    const host = sampleHost({ uuid: 'acl-3', name: 'AclHost3' })
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('AclHost3')).toBeInTheDocument())
+    const row = screen.getByText('AclHost3').closest('tr') as HTMLTableRowElement
+    await userEvent.click(within(row).getAllByRole('checkbox')[0])
+    await userEvent.click(screen.getByText('Manage ACL'))
+
+    await waitFor(() => expect(screen.getByText('No enabled access lists available')).toBeInTheDocument())
+  })
+
+  it('bulk delete modal lists hosts to be deleted', async () => {
+    const host = sampleHost({ uuid: 'd2', name: 'DeleteMe2' })
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+    vi.doMock('../../api/backups', () => ({ createBackup: vi.fn(async () => ({ filename: 'backup-2' })) }))
+
+    const toastSuccess = vi.fn()
+    vi.doMock('react-hot-toast', () => ({ toast: { success: toastSuccess, error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+    const confirmMock = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('DeleteMe2')).toBeInTheDocument())
+    const row = screen.getByText('DeleteMe2').closest('tr') as HTMLTableRowElement
+    await userEvent.click(within(row).getAllByRole('checkbox')[0])
+    const deleteButtons = screen.getAllByText('Delete')
+    const toolbarBtn = deleteButtons.map((btn: Element) => btn.closest('button') as HTMLButtonElement | null).find((b) => b && b.className.includes('bg-error')) as HTMLButtonElement | undefined
+    if (!toolbarBtn) throw new Error('Toolbar delete button not found')
+    await userEvent.click(toolbarBtn)
+
+    await waitFor(() => expect(screen.getByRole('heading', { name: /Delete 1 Proxy Host/i })).toBeInTheDocument())
+    // Ensure the modal lists the host by scoping to the modal content
+    const listHeader = screen.getByText('Hosts to be deleted:')
+    const modalRoot = listHeader.closest('div')
+    expect(modalRoot).toBeTruthy()
+    if (modalRoot) {
+      const { getByText: getByTextWithin } = within(modalRoot)
+      expect(getByTextWithin('DeleteMe2')).toBeInTheDocument()
+      expect(getByTextWithin('(a.example.com)')).toBeInTheDocument()
+    }
+    // Confirm delete
+    await userEvent.click(screen.getByRole('button', { name: /Delete Permanently/i }))
+    await waitFor(() => expect(toastSuccess).toHaveBeenCalledWith(expect.stringContaining('Backup created')))
+    confirmMock.mockRestore()
+  })
+
+  it('bulk apply modal returns early when no keys selected (no-op)', async () => {
+    const host = sampleHost({ uuid: 'b1', name: 'BlankHost' })
+    const updateHost = vi.fn()
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost, deleteHost: vi.fn(), bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('BlankHost')).toBeInTheDocument())
+    // Select host
+    const row = screen.getByText('BlankHost').closest('tr') as HTMLTableRowElement
+    await userEvent.click(within(row).getAllByRole('checkbox')[0])
+    // Open Bulk Apply modal
+    await userEvent.click(screen.getByText('Bulk Apply'))
+    const applyBtn = screen.getByRole('button', { name: 'Apply' })
+    // Remove disabled to trigger the no-op branch
+    applyBtn.removeAttribute('disabled')
+    await userEvent.click(applyBtn)
+    // No calls to updateHost should be made
+    expect(updateHost).not.toHaveBeenCalled()
+  })
+
+  it('bulk delete creates backup and shows toast success', async () => {
+    const host = sampleHost({ uuid: 'd1', name: 'DeleteMe' })
+    const deleteHostMock = vi.fn().mockResolvedValue(undefined)
+
+    vi.doMock('../../hooks/useProxyHosts', () => ({ useProxyHosts: vi.fn(() => ({ hosts: [host], loading: false, isFetching: false, error: null, createHost: vi.fn(), updateHost: vi.fn(), deleteHost: deleteHostMock, bulkUpdateACL: vi.fn(), isBulkUpdating: false })) }))
+    vi.doMock('../../hooks/useCertificates', () => ({ useCertificates: vi.fn(() => ({ certificates: [], isLoading: false, error: null })) }))
+    vi.doMock('../../hooks/useAccessLists', () => ({ useAccessLists: vi.fn(() => ({ data: [] })) }))
+    vi.doMock('../../api/settings', () => ({ getSettings: vi.fn(() => Promise.resolve({})) }))
+    vi.doMock('../../api/backups', () => ({ createBackup: vi.fn(async () => ({ filename: 'backup-1' })) }))
+
+    const toastSuccess = vi.fn()
+    vi.doMock('react-hot-toast', () => ({ toast: { success: toastSuccess, error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+
+    const confirmMock = vi.spyOn(window, 'confirm')
+    // First confirm to delete overall, returned true for deletion
+    confirmMock.mockImplementation(() => true)
+
+    const { default: ProxyHosts } = await import('../ProxyHosts')
+    renderWithProviders(<ProxyHosts />)
+
+    await waitFor(() => expect(screen.getByText('DeleteMe')).toBeInTheDocument())
+    // Select host
+    const row = screen.getByText('DeleteMe').closest('tr') as HTMLTableRowElement
+    const selectBtn = within(row).getAllByRole('checkbox')[0]
+    await userEvent.click(selectBtn)
+
+    // Open Bulk Delete modal - find the toolbar Delete button near the header
+    const deleteButtons = screen.getAllByText('Delete')
+    const toolbarBtn = deleteButtons.map((btn: Element) => btn.closest('button') as HTMLButtonElement | null).find((b) => b && b.className.includes('bg-error')) as HTMLButtonElement | undefined
+    if (!toolbarBtn) throw new Error('Toolbar delete button not found')
+    await userEvent.click(toolbarBtn)
+
+    // Confirm Delete in modal
+    await userEvent.click(screen.getByRole('button', { name: /Delete Permanently/i }))
+
+    await waitFor(() => expect(toastSuccess).toHaveBeenCalledWith(expect.stringContaining('Backup created')))
+    confirmMock.mockRestore()
+  })
+})

frontend/src/pages/__tests__/ProxyHosts-progress.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import type { ProxyHost, BulkUpdateACLResponse } from '../../api/proxyHosts'
+import ProxyHosts from '../ProxyHosts'
+import * as proxyHostsApi from '../../api/proxyHosts'
+import * as certificatesApi from '../../api/certificates'
+import * as accessListsApi from '../../api/accessLists'
+import * as settingsApi from '../../api/settings'
+import { toast } from 'react-hot-toast'
+
+vi.mock('react-hot-toast', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() },
+}))
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}))
+
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }))
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }))
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }))
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } } })
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+const baseHost = (overrides: Partial<ProxyHost> = {}): ProxyHost => ({
+  uuid: 'host-1',
+  name: 'Host',
+  domain_names: 'example.com',
+  forward_host: '127.0.0.1',
+  forward_port: 8080,
+  forward_scheme: 'http' as const,
+  enabled: true,
+  ssl_forced: false,
+  websocket_support: false,
+  http2_support: false,
+  hsts_enabled: false,
+  hsts_subdomains: false,
+  block_exploits: false,
+  application: 'none',
+  locations: [],
+  certificate: null,
+  certificate_id: null,
+  access_list_id: null,
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  ...overrides,
+})
+
+describe('ProxyHosts progress apply', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('shows progress when applying multiple ACLs', async () => {
+    const host1 = baseHost({ uuid: 'h1', name: 'H1' })
+    const host2 = baseHost({ uuid: 'h2', name: 'H2' })
+    const acls = [
+      { id: 1, uuid: 'acl-1', name: 'ACL1', description: 'Test ACL1', enabled: true, type: 'whitelist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, created_at: '2025-01-01', updated_at: '2025-01-01' },
+      { id: 2, uuid: 'acl-2', name: 'ACL2', description: 'Test ACL2', enabled: true, type: 'blacklist' as const, ip_rules: '[]', country_codes: '', local_network_only: false, created_at: '2025-01-01', updated_at: '2025-01-01' },
+    ]
+
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([host1, host2])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue(acls)
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({})
+
+    // Create controllable promises for bulkUpdateACL invocations
+    const resolvers: Array<(value: BulkUpdateACLResponse) => void> = []
+    vi.mocked(proxyHostsApi.bulkUpdateACL).mockImplementation((...args: unknown[]) => {
+      const [_hostUUIDs, _aclId] = args
+      void _hostUUIDs; void _aclId
+      return new Promise((resolve: (v: BulkUpdateACLResponse) => void) => { resolvers.push(resolve); })
+    })
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('H1')).toBeTruthy())
+
+    // Select both hosts via select-all
+    const checkboxes = screen.getAllByRole('checkbox')
+    await userEvent.click(checkboxes[0])
+
+    // Open bulk ACL modal
+    await waitFor(() => expect(screen.getByText('Manage ACL')).toBeTruthy())
+    await userEvent.click(screen.getByText('Manage ACL'))
+
+    // Wait for ACL list
+    await waitFor(() => expect(screen.getByText('ACL1')).toBeTruthy())
+
+    // Select both ACLs
+    const aclCheckboxes = screen.getAllByRole('checkbox')
+    const adminCheckbox = aclCheckboxes.find(cb => cb.closest('label')?.textContent?.includes('ACL1'))
+    const localCheckbox = aclCheckboxes.find(cb => cb.closest('label')?.textContent?.includes('ACL2'))
+    if (adminCheckbox) await userEvent.click(adminCheckbox)
+    if (localCheckbox) await userEvent.click(localCheckbox)
+
+    // Click Apply; should start progress (total 2)
+    const applyBtn = await screen.findByRole('button', { name: /Apply\s*\(2\)/i })
+    await userEvent.click(applyBtn)
+
+    // Progress indicator should appear
+    await waitFor(() => expect(screen.getByText(/Applying ACLs/)).toBeTruthy())
+    // After the first bulk operation starts, we should have a resolver
+    await waitFor(() => expect(resolvers.length).toBeGreaterThanOrEqual(1))
+
+    // Resolve first bulk operation to allow the sequential loop to continue
+    resolvers[0]({ updated: 2, errors: [] })
+
+    // Wait for the second bulk operation to start and create its resolver
+    await waitFor(() => expect(resolvers.length).toBeGreaterThanOrEqual(2))
+    // Resolve second operation
+    resolvers[1]({ updated: 2, errors: [] })
+
+    await waitFor(() => expect(toast.success).toHaveBeenCalled())
+  })
+
+  it('does not open window for same_tab link behavior', async () => {
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([baseHost({ uuid: '1', name: 'One' })])
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([])
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([])
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({ 'ui.domain_link_behavior': 'same_tab' })
+
+    renderWithProviders(<ProxyHosts />)
+    await waitFor(() => expect(screen.getByText('One')).toBeTruthy())
+    const anchor = screen.getByRole('link', { name: /example\.com/i })
+    expect(anchor.getAttribute('target')).toBe('_self')
+  })
+})
+
+export {}

frontend/src/pages/__tests__/ProxyHosts.bulkApplyHeaders.test.tsx

@@ -0,0 +1,455 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import ProxyHosts from '../ProxyHosts';
+import * as proxyHostsApi from '../../api/proxyHosts';
+import * as certificatesApi from '../../api/certificates';
+import type { Certificate } from '../../api/certificates';
+import type { ProxyHost } from '../../api/proxyHosts';
+import * as accessListsApi from '../../api/accessLists';
+import type { AccessList } from '../../api/accessLists';
+import * as settingsApi from '../../api/settings';
+import * as securityHeadersApi from '../../api/securityHeaders';
+import type { SecurityHeaderProfile } from '../../api/securityHeaders';
+import { createMockProxyHost } from '../../testUtils/createMockProxyHost';
+
+// Mock toast
+vi.mock('react-hot-toast', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() },
+}));
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+  createProxyHost: vi.fn(),
+  updateProxyHost: vi.fn(),
+  deleteProxyHost: vi.fn(),
+  bulkUpdateACL: vi.fn(),
+  bulkUpdateSecurityHeaders: vi.fn(),
+  testProxyHostConnection: vi.fn(),
+}));
+
+vi.mock('../../api/certificates', () => ({ getCertificates: vi.fn() }));
+vi.mock('../../api/accessLists', () => ({ accessListsApi: { list: vi.fn() } }));
+vi.mock('../../api/settings', () => ({ getSettings: vi.fn() }));
+vi.mock('../../api/securityHeaders', () => ({
+  securityHeadersApi: {
+    listProfiles: vi.fn(),
+  },
+}));
+
+const mockProxyHosts = [
+  createMockProxyHost({
+    uuid: 'host-1',
+    name: 'Test Host 1',
+    domain_names: 'test1.example.com',
+    forward_host: '192.168.1.10',
+  }),
+  createMockProxyHost({
+    uuid: 'host-2',
+    name: 'Test Host 2',
+    domain_names: 'test2.example.com',
+    forward_host: '192.168.1.20',
+  }),
+];
+
+const mockSecurityProfiles: SecurityHeaderProfile[] = [
+  {
+    id: 1,
+    uuid: 'profile-1',
+    name: 'Strict Security',
+    description: 'Maximum security headers',
+    security_score: 95,
+    is_preset: true,
+    preset_type: 'strict',
+    hsts_enabled: true,
+    hsts_max_age: 31536000,
+    hsts_include_subdomains: true,
+    hsts_preload: true,
+    x_frame_options: 'DENY',
+    x_content_type_options: true,
+    xss_protection: true,
+    referrer_policy: 'no-referrer',
+    permissions_policy: '',
+    csp_enabled: false,
+    csp_directives: '',
+    csp_report_only: false,
+    csp_report_uri: '',
+    cross_origin_opener_policy: 'same-origin',
+    cross_origin_resource_policy: 'same-origin',
+    cross_origin_embedder_policy: '',
+    cache_control_no_store: false,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  },
+  {
+    id: 2,
+    uuid: 'profile-2',
+    name: 'Moderate Security',
+    description: 'Balanced security headers',
+    security_score: 75,
+    is_preset: true,
+    preset_type: 'basic',
+    hsts_enabled: true,
+    hsts_max_age: 31536000,
+    hsts_include_subdomains: false,
+    hsts_preload: false,
+    x_frame_options: 'SAMEORIGIN',
+    x_content_type_options: true,
+    xss_protection: true,
+    referrer_policy: 'strict-origin-when-cross-origin',
+    permissions_policy: '',
+    csp_enabled: false,
+    csp_directives: '',
+    csp_report_only: false,
+    csp_report_uri: '',
+    cross_origin_opener_policy: 'same-origin',
+    cross_origin_resource_policy: 'same-origin',
+    cross_origin_embedder_policy: '',
+    cache_control_no_store: false,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  },
+  {
+    id: 3,
+    uuid: 'profile-3',
+    name: 'Custom Profile',
+    description: 'My custom headers',
+    security_score: 60,
+    is_preset: false,
+    preset_type: '',
+    hsts_enabled: false,
+    hsts_max_age: 0,
+    hsts_include_subdomains: false,
+    hsts_preload: false,
+    x_frame_options: 'SAMEORIGIN',
+    x_content_type_options: true,
+    xss_protection: true,
+    referrer_policy: 'same-origin',
+    permissions_policy: '',
+    csp_enabled: false,
+    csp_directives: '',
+    csp_report_only: false,
+    csp_report_uri: '',
+    cross_origin_opener_policy: 'same-origin',
+    cross_origin_resource_policy: 'same-origin',
+    cross_origin_embedder_policy: '',
+    cache_control_no_store: false,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  },
+];
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 }, mutations: { retry: false } },
+  });
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('ProxyHosts - Bulk Apply Security Headers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(mockProxyHosts as ProxyHost[]);
+    vi.mocked(certificatesApi.getCertificates).mockResolvedValue([] as Certificate[]);
+    vi.mocked(accessListsApi.accessListsApi.list).mockResolvedValue([] as AccessList[]);
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({} as Record<string, string>);
+    vi.mocked(securityHeadersApi.securityHeadersApi.listProfiles).mockResolvedValue(
+      mockSecurityProfiles
+    );
+  });
+
+  it('shows security header profile option in bulk apply modal', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+
+    // Open Bulk Apply modal
+    const bulkApplyButton = screen.getByText('Bulk Apply');
+    await userEvent.click(bulkApplyButton);
+
+    // Check for security header profile section
+    await waitFor(() => {
+      expect(screen.getByText('Security Header Profile')).toBeTruthy();
+      expect(
+        screen.getByText('Apply a security header profile to all selected hosts')
+      ).toBeTruthy();
+    });
+  });
+
+  it('enables profile selection when checkbox is checked', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+
+    // Find security header checkbox
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+
+    // Dropdown should not be visible initially
+    expect(screen.queryByRole('combobox')).toBeNull();
+
+    // Click checkbox to enable
+    await userEvent.click(securityHeaderCheckbox);
+
+    // Dropdown should now be visible
+    await waitFor(() => {
+      expect(screen.getByRole('combobox')).toBeTruthy();
+    });
+  });
+
+  it('lists all available profiles in dropdown grouped correctly', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    // Check dropdown options
+    await waitFor(() => {
+      const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+      expect(dropdown).toBeTruthy();
+
+      // Check for "None" option
+      const noneOption = within(dropdown).getByText(/None \(Remove Profile\)/i);
+      expect(noneOption).toBeTruthy();
+
+      // Check for preset profiles
+      expect(within(dropdown).getByText(/Strict Security/)).toBeTruthy();
+      expect(within(dropdown).getByText(/Moderate Security/)).toBeTruthy();
+
+      // Check for custom profiles
+      expect(within(dropdown).getByText(/Custom Profile/)).toBeTruthy();
+    });
+  });
+
+  it('applies security header profile to selected hosts using bulk endpoint', async () => {
+    const bulkUpdateMock = vi.mocked(proxyHostsApi.bulkUpdateSecurityHeaders);
+    bulkUpdateMock.mockResolvedValue({ updated: 2, errors: [] });
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    // Select a profile
+    await waitFor(() => expect(screen.getByRole('combobox')).toBeTruthy());
+    const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+    await userEvent.selectOptions(dropdown, '1'); // Select profile ID 1
+
+    // Click Apply
+    const dialog = screen.getByRole('dialog');
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i });
+    await userEvent.click(applyButton);
+
+    // Verify bulk endpoint was called with correct parameters
+    await waitFor(() => {
+      expect(bulkUpdateMock).toHaveBeenCalledWith(['host-1', 'host-2'], 1);
+    });
+  });
+
+  it('removes security header profile when "None" selected', async () => {
+    const bulkUpdateMock = vi.mocked(proxyHostsApi.bulkUpdateSecurityHeaders);
+    bulkUpdateMock.mockResolvedValue({ updated: 2, errors: [] });
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    // Select "None" (value 0)
+    await waitFor(() => expect(screen.getByRole('combobox')).toBeTruthy());
+    const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+    await userEvent.selectOptions(dropdown, '0');
+
+    // Verify warning is shown
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          /This will remove the security header profile from all selected hosts/
+        )
+      ).toBeTruthy();
+    });
+
+    // Click Apply
+    const dialog = screen.getByRole('dialog');
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i });
+    await userEvent.click(applyButton);
+
+    // Verify null was sent to API (remove profile)
+    await waitFor(() => {
+      expect(bulkUpdateMock).toHaveBeenCalledWith(['host-1', 'host-2'], null);
+    });
+  });
+
+  it('disables Apply button when no options selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy());
+
+    // Apply button should be disabled when nothing is selected
+    const dialog = screen.getByRole('dialog');
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i });
+    expect(applyButton).toHaveProperty('disabled', true);
+  });
+
+  it('handles partial failure with appropriate toast', async () => {
+    const bulkUpdateMock = vi.mocked(proxyHostsApi.bulkUpdateSecurityHeaders);
+    bulkUpdateMock.mockResolvedValue({
+      updated: 1,
+      errors: [{ uuid: 'host-2', error: 'Profile not found' }],
+    });
+
+    const toast = await import('react-hot-toast');
+
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option and select a profile
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    await waitFor(() => expect(screen.getByRole('combobox')).toBeTruthy());
+    const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+    await userEvent.selectOptions(dropdown, '1');
+
+    // Click Apply
+    const dialog = screen.getByRole('dialog');
+    const applyButton = within(dialog).getByRole('button', { name: /^Apply$/i });
+    await userEvent.click(applyButton);
+
+    // Verify error toast was called
+    await waitFor(() => {
+      expect(toast.toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('resets state on modal close', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option and select a profile
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    await waitFor(() => expect(screen.getByRole('combobox')).toBeTruthy());
+    const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+    await userEvent.selectOptions(dropdown, '1');
+
+    // Close modal
+    const dialog = screen.getByRole('dialog');
+    const cancelButton = within(dialog).getByRole('button', { name: /Cancel/i });
+    await userEvent.click(cancelButton);
+
+    // Re-open modal
+    await waitFor(() => expect(screen.queryByText('Bulk Apply Settings')).toBeNull());
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Security header checkbox should be unchecked (state was reset)
+    await waitFor(() => {
+      const securityHeaderLabel2 = screen.getByText('Security Header Profile');
+      const securityHeaderRow2 = securityHeaderLabel2.closest('.p-3') as HTMLElement;
+      const securityHeaderCheckbox2 = within(securityHeaderRow2).getByRole('checkbox');
+      expect(securityHeaderCheckbox2).toHaveAttribute('data-state', 'unchecked');
+    });
+  });
+
+  it('shows profile description when profile is selected', async () => {
+    renderWithProviders(<ProxyHosts />);
+
+    await waitFor(() => expect(screen.getByText('Test Host 1')).toBeTruthy());
+
+    // Select hosts and open modal
+    const selectAll = screen.getByLabelText('Select all rows');
+    await userEvent.click(selectAll);
+    await userEvent.click(screen.getByText('Bulk Apply'));
+
+    // Enable security header option
+    const securityHeaderLabel = screen.getByText('Security Header Profile');
+    const securityHeaderRow = securityHeaderLabel.closest('.p-3') as HTMLElement;
+    const securityHeaderCheckbox = within(securityHeaderRow).getByRole('checkbox');
+    await userEvent.click(securityHeaderCheckbox);
+
+    // Select a profile
+    await waitFor(() => expect(screen.getByRole('combobox')).toBeTruthy());
+    const dropdown = screen.getByRole('combobox') as HTMLSelectElement;
+    await userEvent.selectOptions(dropdown, '1'); // Strict Security
+
+    // Verify description is shown
+    await waitFor(() => {
+      expect(screen.getByText('Maximum security headers')).toBeTruthy();
+    });
+  });
+});

frontend/src/pages/__tests__/RateLimiting.spec.tsx

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import RateLimiting from '../RateLimiting'
+import * as securityApi from '../../api/security'
+import * as settingsApi from '../../api/settings'
+import type { SecurityStatus } from '../../api/security'
+
+vi.mock('../../api/security')
+vi.mock('../../api/settings')
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <BrowserRouter>{ui}</BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+const mockStatusEnabled: SecurityStatus = {
+  cerberus: { enabled: true },
+  crowdsec: { enabled: false, mode: 'disabled', api_url: '' },
+  waf: { enabled: false, mode: 'disabled' },
+  rate_limit: { enabled: true, mode: 'enabled' },
+  acl: { enabled: false },
+}
+
+const mockStatusDisabled: SecurityStatus = {
+  cerberus: { enabled: true },
+  crowdsec: { enabled: false, mode: 'disabled', api_url: '' },
+  waf: { enabled: false, mode: 'disabled' },
+  rate_limit: { enabled: false, mode: 'disabled' },
+  acl: { enabled: false },
+}
+
+const mockSecurityConfig = {
+  config: {
+    name: 'default',
+    rate_limit_requests: 10,
+    rate_limit_burst: 5,
+    rate_limit_window_sec: 60,
+  },
+}
+
+describe('RateLimiting page', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('shows loading state while fetching status', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockReturnValue(new Promise(() => {}))
+    vi.mocked(securityApi.getSecurityConfig).mockReturnValue(new Promise(() => {}))
+
+    renderWithProviders(<RateLimiting />)
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  it('renders rate limiting page with toggle disabled when rate_limit is off', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusDisabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Rate Limiting Configuration')).toBeInTheDocument()
+    })
+
+    const toggle = screen.getByTestId('rate-limit-toggle')
+    expect(toggle).toBeInTheDocument()
+    expect((toggle as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('renders rate limiting page with toggle enabled when rate_limit is on', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusEnabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Rate Limiting Configuration')).toBeInTheDocument()
+    })
+
+    const toggle = screen.getByTestId('rate-limit-toggle')
+    expect((toggle as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('shows configuration inputs when enabled', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusEnabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rate-limit-rps')).toBeInTheDocument()
+    })
+
+    expect(screen.getByTestId('rate-limit-burst')).toBeInTheDocument()
+    expect(screen.getByTestId('rate-limit-window')).toBeInTheDocument()
+  })
+
+  it('calls updateSetting when toggle is clicked', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusDisabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rate-limit-toggle')).toBeInTheDocument()
+    })
+
+    const toggle = screen.getByTestId('rate-limit-toggle')
+    await userEvent.click(toggle)
+
+    await waitFor(() => {
+      expect(settingsApi.updateSetting).toHaveBeenCalledWith(
+        'security.rate_limit.enabled',
+        'true',
+        'security',
+        'bool'
+      )
+    })
+  })
+
+  it('calls updateSecurityConfig when save button is clicked', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusEnabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+    vi.mocked(securityApi.updateSecurityConfig).mockResolvedValue({})
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rate-limit-rps')).toBeInTheDocument()
+    })
+
+    // Wait for initial values to be set from config
+    await waitFor(() => {
+      expect(screen.getByTestId('rate-limit-rps')).toHaveValue(10)
+    })
+
+    // Change RPS value using tripleClick to select all then type
+    const rpsInput = screen.getByTestId('rate-limit-rps')
+    await userEvent.tripleClick(rpsInput)
+    await userEvent.keyboard('25')
+
+    // Click save
+    const saveBtn = screen.getByTestId('save-rate-limit-btn')
+    await userEvent.click(saveBtn)
+
+    await waitFor(() => {
+      expect(securityApi.updateSecurityConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          rate_limit_requests: 25,
+          rate_limit_burst: 5,
+          rate_limit_window_sec: 60,
+        })
+      )
+    })
+  })
+
+  it('displays default values from config', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusEnabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rate-limit-rps')).toBeInTheDocument()
+    })
+
+    expect(screen.getByTestId('rate-limit-rps')).toHaveValue(10)
+    expect(screen.getByTestId('rate-limit-burst')).toHaveValue(5)
+    expect(screen.getByTestId('rate-limit-window')).toHaveValue(60)
+  })
+
+  it('hides configuration inputs when disabled', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusDisabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Rate Limiting Configuration')).toBeInTheDocument()
+    })
+
+    expect(screen.queryByTestId('rate-limit-rps')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('rate-limit-burst')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('rate-limit-window')).not.toBeInTheDocument()
+  })
+
+  it('shows info banner about rate limiting', async () => {
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockStatusEnabled)
+    vi.mocked(securityApi.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+
+    renderWithProviders(<RateLimiting />)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Rate limiting helps protect/)).toBeInTheDocument()
+    })
+  })
+})

frontend/src/pages/__tests__/SMTPSettings.test.tsx

@@ -0,0 +1,284 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import SMTPSettings from '../SMTPSettings'
+import * as smtpApi from '../../api/smtp'
+import { toast } from '../../utils/toast'
+import { renderWithQueryClient } from '../../test-utils/renderWithQueryClient'
+
+// Mock API
+vi.mock('../../api/smtp', () => ({
+  getSMTPConfig: vi.fn(),
+  updateSMTPConfig: vi.fn(),
+  testSMTPConnection: vi.fn(),
+  sendTestEmail: vi.fn(),
+}))
+
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+describe('SMTPSettings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(toast.success).mockClear()
+    vi.mocked(toast.error).mockClear()
+  })
+
+  it('renders loading state initially', () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockReturnValue(new Promise(() => {}))
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    // Should show loading skeletons (Skeleton components don't use animate-spin)
+    expect(document.querySelectorAll('[class*="animate-pulse"]').length).toBeGreaterThan(0)
+  })
+
+  it('renders SMTP form with existing config', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: 'smtp.example.com',
+      port: 587,
+      username: 'user@example.com',
+      password: '********',
+      from_address: 'noreply@example.com',
+      encryption: 'starttls',
+      configured: true,
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    // Wait for the form to populate with data
+    await waitFor(() => {
+      const hostInput = screen.getByPlaceholderText('smtp.gmail.com') as HTMLInputElement
+      return hostInput.value === 'smtp.example.com'
+    })
+
+    const hostInput = screen.getByPlaceholderText('smtp.gmail.com') as HTMLInputElement
+    expect(hostInput.value).toBe('smtp.example.com')
+
+    const portInput = screen.getByPlaceholderText('587') as HTMLInputElement
+    expect(portInput.value).toBe('587')
+
+    expect(screen.getByText('SMTP Configured')).toBeTruthy()
+  })
+
+  it('shows not configured state when SMTP is not set up', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: '',
+      port: 587,
+      username: '',
+      password: '',
+      from_address: '',
+      encryption: 'starttls',
+      configured: false,
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    await waitFor(() => {
+      expect(screen.getByText('SMTP Not Configured')).toBeTruthy()
+    })
+  })
+
+  it('saves SMTP settings successfully', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: '',
+      port: 587,
+      username: '',
+      password: '',
+      from_address: '',
+      encryption: 'starttls',
+      configured: false,
+    })
+    vi.mocked(smtpApi.updateSMTPConfig).mockResolvedValue({
+      message: 'SMTP configuration saved successfully',
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('smtp.gmail.com')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.type(screen.getByPlaceholderText('smtp.gmail.com'), 'smtp.gmail.com')
+    await user.type(
+      screen.getByPlaceholderText('Charon <no-reply@example.com>'),
+      'test@example.com'
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Save Settings' }))
+
+    await waitFor(() => {
+      expect(smtpApi.updateSMTPConfig).toHaveBeenCalled()
+    })
+  })
+
+  it('tests SMTP connection', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: 'smtp.example.com',
+      port: 587,
+      username: 'user@example.com',
+      password: '********',
+      from_address: 'noreply@example.com',
+      encryption: 'starttls',
+      configured: true,
+    })
+    vi.mocked(smtpApi.testSMTPConnection).mockResolvedValue({
+      success: true,
+      message: 'Connection successful',
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Connection')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.click(screen.getByText('Test Connection'))
+
+    await waitFor(() => {
+      expect(smtpApi.testSMTPConnection).toHaveBeenCalled()
+    })
+  })
+
+  it('shows test email form when SMTP is configured', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: 'smtp.example.com',
+      port: 587,
+      username: 'user@example.com',
+      password: '********',
+      from_address: 'noreply@example.com',
+      encryption: 'starttls',
+      configured: true,
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Send Test Email')).toBeTruthy()
+    })
+
+    expect(screen.getByPlaceholderText('recipient@example.com')).toBeTruthy()
+  })
+
+  it('sends test email', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: 'smtp.example.com',
+      port: 587,
+      username: 'user@example.com',
+      password: '********',
+      from_address: 'noreply@example.com',
+      encryption: 'starttls',
+      configured: true,
+    })
+    vi.mocked(smtpApi.sendTestEmail).mockResolvedValue({
+      success: true,
+      message: 'Email sent',
+    })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Send Test Email')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.type(
+      screen.getByPlaceholderText('recipient@example.com'),
+      'test@test.com'
+    )
+    await user.click(screen.getByRole('button', { name: /Send Test/i }))
+
+    await waitFor(() => {
+      expect(smtpApi.sendTestEmail).toHaveBeenCalledWith({ to: 'test@test.com' })
+    })
+  })
+
+  it('surfaces backend validation errors on save', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: '',
+      port: 587,
+      username: '',
+      password: '',
+      from_address: '',
+      encryption: 'starttls',
+      configured: false,
+    })
+    vi.mocked(smtpApi.updateSMTPConfig).mockRejectedValue({ response: { data: { error: 'invalid host' } } })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    const user = userEvent.setup()
+    await waitFor(() => expect(screen.getByPlaceholderText('smtp.gmail.com')).toBeInTheDocument())
+    await user.type(screen.getByPlaceholderText('smtp.gmail.com'), 'bad.host')
+    await user.type(screen.getByPlaceholderText('Charon <no-reply@example.com>'), 'ops@example.com')
+
+    await user.click(screen.getByRole('button', { name: 'Save Settings' }))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('invalid host')
+    })
+  })
+
+  it('disables test connection until required fields are set and shows error toast on failure', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: '',
+      port: 587,
+      username: '',
+      password: '',
+      from_address: '',
+      encryption: 'starttls',
+      configured: false,
+    })
+    vi.mocked(smtpApi.testSMTPConnection).mockRejectedValue({ response: { data: { error: 'cannot connect' } } })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    const user = userEvent.setup()
+    await waitFor(() => expect(screen.getByText('Test Connection')).toBeInTheDocument())
+
+    // Button should start disabled until host and from address are provided
+    expect(screen.getByRole('button', { name: 'Test Connection' })).toBeDisabled()
+
+    await user.type(screen.getByPlaceholderText('smtp.gmail.com'), 'smtp.acme.local')
+    await user.type(screen.getByPlaceholderText('Charon <no-reply@example.com>'), 'from@acme.local')
+
+    await user.click(screen.getByRole('button', { name: 'Test Connection' }))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('cannot connect')
+    })
+  })
+
+  it('handles test email failures and keeps input value intact', async () => {
+    vi.mocked(smtpApi.getSMTPConfig).mockResolvedValue({
+      host: 'smtp.example.com',
+      port: 587,
+      username: 'user@example.com',
+      password: '********',
+      from_address: 'noreply@example.com',
+      encryption: 'starttls',
+      configured: true,
+    })
+    vi.mocked(smtpApi.sendTestEmail).mockRejectedValue({ response: { data: { error: 'smtp unreachable' } } })
+
+    renderWithQueryClient(<SMTPSettings />)
+
+    const user = userEvent.setup()
+    await waitFor(() => expect(screen.getByText('Send Test Email')).toBeInTheDocument())
+    const input = screen.getByPlaceholderText('recipient@example.com') as HTMLInputElement
+    await user.type(input, 'keepme@example.com')
+
+    await user.click(screen.getByRole('button', { name: /Send Test/i }))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('smtp unreachable')
+      expect(input.value).toBe('keepme@example.com')
+    })
+  })
+})

frontend/src/pages/__tests__/Security.audit.test.tsx

@@ -0,0 +1,415 @@
+/**
+ * Security Page - QA Security Audit Tests
+ *
+ * Tests edge cases, input validation, error states, and security concerns
+ * for the Cerberus Dashboard implementation.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as settingsApi from '../../api/settings'
+import { toast } from '../../utils/toast'
+
+const mockSecurityStatus = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/settings')
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+}))
+vi.mock('../../hooks/useSecurity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../hooks/useSecurity')>()
+  return {
+    ...actual,
+    useSecurityConfig: vi.fn(() => ({ data: { config: { admin_whitelist: '' } } })),
+    useUpdateSecurityConfig: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useGenerateBreakGlassToken: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useRuleSets: vi.fn(() => ({ data: { rulesets: [] } })),
+  }
+})
+
+describe('Security Page - QA Security Audit', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    vi.clearAllMocks()
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob())
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  )
+
+  const renderSecurityPage = async () => {
+    await act(async () => {
+      render(<Security />, { wrapper })
+    })
+  }
+
+  describe('Input Validation', () => {
+    it('React escapes XSS in rendered text - validation check', async () => {
+      // Note: React automatically escapes text content, so XSS in input values
+      // won't execute. This test verifies that property.
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // DOM should not contain any actual script elements from user input
+      expect(document.querySelectorAll('script[src*="alert"]').length).toBe(0)
+
+      // Verify React is escaping properly - any text rendered should be text, not HTML
+      expect(screen.queryByText('<script>')).toBeNull()
+    })
+
+    it('handles empty admin whitelist gracefully', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Find the admin whitelist input by placeholder
+      const whitelistInput = screen.getByPlaceholderText(/192.168.1.0\/24/i)
+      expect(whitelistInput).toBeInTheDocument()
+      expect(whitelistInput).toHaveValue('')
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('displays error toast when toggle mutation fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      // CrowdSec is not running, so toggle will try to START it
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Network error'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to start CrowdSec'))
+      })
+    })
+
+    it('handles CrowdSec start failure gracefully', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatus,
+        crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: false },
+      })
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(crowdsecApi.startCrowdsec).mockRejectedValue(new Error('Failed to start'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalled()
+      })
+    })
+
+    it('handles CrowdSec stop failure gracefully', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(crowdsecApi.stopCrowdsec).mockRejectedValue(new Error('Failed to stop'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalled()
+      })
+    })
+
+
+
+    it('handles CrowdSec status check failure gracefully', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockRejectedValue(new Error('Status check failed'))
+
+      await renderSecurityPage()
+
+      // Page should still render even if status check fails
+      await waitFor(() => expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument())
+    })
+  })
+
+  describe('Concurrent Operations', () => {
+    it('disables controls during pending mutations', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      // Never resolving promise to simulate pending state
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      const toggle = screen.getByTestId('toggle-waf')
+      await user.click(toggle)
+
+      // Overlay should appear indicating operation in progress
+      await waitFor(() => expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument())
+    })
+
+    it('prevents double toggle when starting CrowdSec', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatus,
+        crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: false },
+      })
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      let callCount = 0
+      vi.mocked(crowdsecApi.startCrowdsec).mockImplementation(async () => {
+        callCount++
+        await new Promise(resolve => setTimeout(resolve, 100))
+        return { status: 'started', pid: 123, lapi_ready: true }
+      })
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+
+      // First click
+      await user.click(toggle)
+
+      // Wait for toggle to become disabled (mutation in progress)
+      await waitFor(() => {
+        expect(toggle).toBeDisabled()
+      })
+
+      // Second click attempt while disabled should be ignored
+      await user.click(toggle)
+
+      // Wait for potential multiple calls
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 150))
+      })
+
+      // Should only be called once due to disabled state
+      expect(callCount).toBe(1)
+    })
+  })
+
+  describe('UI Consistency', () => {
+    it('maintains card order when services are toggled', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Get initial card order
+      const initialCards = screen.getAllByRole('heading', { level: 3 })
+      const initialOrder = initialCards.map(card => card.textContent)
+
+      // Toggle a service
+      const toggle = screen.getByTestId('toggle-waf')
+      await user.click(toggle)
+
+      // Wait for mutation to settle
+      await waitFor(() => expect(settingsApi.updateSetting).toHaveBeenCalled())
+
+      // Cards should still be in same order
+      const finalCards = screen.getAllByRole('heading', { level: 3 })
+      const finalOrder = finalCards.map(card => card.textContent)
+
+      expect(finalOrder).toEqual(initialOrder)
+    })
+
+    it('shows correct layer indicator badges', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Each layer should have a Badge with layer number
+      expect(screen.getByText('Layer 1')).toBeInTheDocument()
+      expect(screen.getByText('Layer 2')).toBeInTheDocument()
+      expect(screen.getByText('Layer 3')).toBeInTheDocument()
+      expect(screen.getByText('Layer 4')).toBeInTheDocument()
+    })
+
+    it('shows all four security cards even when all disabled', async () => {
+      const disabledStatus = {
+        cerberus: { enabled: true },
+        crowdsec: { mode: 'local' as const, api_url: '', enabled: false },
+        waf: { mode: 'enabled' as const, enabled: false },
+        rate_limit: { enabled: false },
+        acl: { enabled: false }
+      }
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(disabledStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // All 4 cards should be present - check for h3 headings
+      const cards = screen.getAllByRole('heading', { level: 3 })
+      const cardNames = cards.map(card => card.textContent)
+      expect(cardNames).toContain('CrowdSec')
+      expect(cardNames).toContain('Access Control')
+      expect(cardNames).toContain('Coraza WAF')
+      expect(cardNames).toContain('Rate Limiting')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('all toggles have proper test IDs for automation', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      expect(screen.getByTestId('toggle-crowdsec')).toBeInTheDocument()
+      expect(screen.getByTestId('toggle-acl')).toBeInTheDocument()
+      expect(screen.getByTestId('toggle-waf')).toBeInTheDocument()
+      expect(screen.getByTestId('toggle-rate-limit')).toBeInTheDocument()
+    })
+
+    it('CrowdSec controls surface primary actions when enabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      expect(screen.getByTestId('toggle-crowdsec')).toBeInTheDocument()
+      // CrowdSec card should have Configure button now
+      const configButtons = screen.getAllByRole('button', { name: /Configure/i })
+      expect(configButtons.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Contract Verification (Spec Compliance)', () => {
+    it('pipeline order matches spec: CrowdSec → ACL → WAF → Rate Limiting', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      const cards = screen.getAllByRole('heading', { level: 3 })
+      const cardNames = cards.map(card => card.textContent)
+
+      // Spec requirement: Admin Whitelist + security cards + Security Access Logs
+      expect(cardNames).toEqual(['Admin Whitelist', 'CrowdSec', 'Access Control', 'Coraza WAF', 'Rate Limiting', 'Security Access Logs'])
+    })
+
+    it('layer indicators match spec descriptions', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Layer indicators are now Badges with just the layer number
+      expect(screen.getByText('Layer 1')).toBeInTheDocument()
+      expect(screen.getByText('Layer 2')).toBeInTheDocument()
+      expect(screen.getByText('Layer 3')).toBeInTheDocument()
+      expect(screen.getByText('Layer 4')).toBeInTheDocument()
+    })
+
+    it('threat summaries match spec when services enabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      // CrowdSec must be running to show threat protection descriptions
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // From spec:
+      // CrowdSec: "Known attackers, botnets, brute-force attempts"
+      // ACL: "Unauthorized IPs, geo-based attacks, insider threats"
+      // WAF: "SQL injection, XSS, RCE, zero-day exploits*"
+      // Rate Limiting: "DDoS attacks, credential stuffing, API abuse"
+      expect(screen.getByText(/Known attackers, botnets/i)).toBeInTheDocument()
+      expect(screen.getByText(/Unauthorized IPs, geo-based attacks/i)).toBeInTheDocument()
+      expect(screen.getByText(/SQL injection, XSS, RCE/i)).toBeInTheDocument()
+      expect(screen.getByText(/DDoS attacks, credential stuffing/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles rapid toggle clicks without crashing', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(
+        () => new Promise(resolve => setTimeout(resolve, 50))
+      )
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+
+      const toggle = screen.getByTestId('toggle-waf')
+
+      // Rapid clicks
+      for (let i = 0; i < 5; i++) {
+        await user.click(toggle)
+      }
+
+      // Page should still be functional
+      await waitFor(() => expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument())
+    })
+
+    it('handles undefined crowdsec status gracefully', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue(null as never)
+
+      await renderSecurityPage()
+
+      // Should not crash
+      await waitFor(() => expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument())
+    })
+  })
+})

frontend/src/pages/__tests__/Security.dashboard.test.tsx

@@ -0,0 +1,357 @@
+/**
+ * Security Dashboard Card Status Verification Tests
+ * Test IDs: SD-01 through SD-10
+ *
+ * Tests all 4 security cards display correct status, Cerberus disabled banner,
+ * and toggle switches disabled when Cerberus is off.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as settingsApi from '../../api/settings'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/settings')
+vi.mock('../../hooks/useSecurity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../hooks/useSecurity')>()
+  return {
+    ...actual,
+    useSecurityConfig: vi.fn(() => ({ data: { config: { admin_whitelist: '10.0.0.0/8' } } })),
+    useUpdateSecurityConfig: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useGenerateBreakGlassToken: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useRuleSets: vi.fn(() => ({
+      data: {
+        rulesets: [
+          { id: 1, uuid: 'abc', name: 'OWASP CRS', source_url: 'https://example.com', mode: 'blocking', last_updated: '2025-12-04', content: 'rules' }
+        ]
+      }
+    })),
+  }
+})
+
+// Test Data Fixtures
+const mockSecurityStatusAllEnabled = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+const mockSecurityStatusCerberusDisabled = {
+  cerberus: { enabled: false },
+  crowdsec: { mode: 'disabled' as const, api_url: '', enabled: false },
+  waf: { mode: 'disabled' as const, enabled: false },
+  rate_limit: { enabled: false },
+  acl: { enabled: false },
+}
+
+const mockSecurityStatusMixed = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+  waf: { mode: 'disabled' as const, enabled: false },
+  rate_limit: { enabled: true },
+  acl: { enabled: false },
+}
+
+describe('Security Dashboard - Card Status Tests', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    vi.clearAllMocks()
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob())
+    vi.spyOn(window, 'open').mockImplementation(() => null)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  )
+
+  const renderSecurityPage = async () => {
+    await act(async () => {
+      render(<Security />, { wrapper })
+    })
+  }
+
+  describe('SD-01: Cerberus Disabled Banner', () => {
+    it('should show "Security Features Unavailable" banner when cerberus.enabled=false', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCerberusDisabled)
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Security Features Unavailable/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should show documentation link in disabled banner', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCerberusDisabled)
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        // Documentation link uses "Learn More" text in current UI
+        const docButtons = screen.getAllByRole('button', { name: /Learn More/i })
+        expect(docButtons.length).toBeGreaterThanOrEqual(1)
+        expect(docButtons[0]).toBeInTheDocument()
+      })
+    })
+
+    it('should not show banner when Cerberus is enabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+      expect(screen.queryByText(/^Cerberus Disabled$/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('SD-02: CrowdSec Card Active Status', () => {
+    it('should show "Enabled" when crowdsec.enabled=true', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        // Status badges now show 'Enabled' text
+        const enabledBadges = screen.getAllByText('Enabled')
+        expect(enabledBadges.length).toBeGreaterThan(0)
+      })
+
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      expect(toggle).toBeChecked()
+    })
+
+    it('should show running PID when CrowdSec is running', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Running \(pid 1234\)/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('SD-03: CrowdSec Card Disabled Status', () => {
+    it('should show "Disabled" when crowdsec.enabled=false', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatusAllEnabled,
+        crowdsec: { mode: 'disabled', api_url: '', enabled: false },
+      })
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      expect(toggle).not.toBeChecked()
+    })
+  })
+
+  describe('SD-04: WAF (Coraza) Card Status', () => {
+    it('should show "Active" when waf.enabled=true', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-waf')).toBeChecked()
+      })
+    })
+
+    it('should show "Disabled" when waf.enabled=false', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusMixed)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-waf')).not.toBeChecked()
+      })
+    })
+  })
+
+  describe('SD-05: Rate Limiting Card Status', () => {
+    it('should show badge and text when rate_limit.enabled=true', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-rate-limit')).toBeChecked()
+        const enabledBadges = screen.getAllByText('Enabled')
+        expect(enabledBadges.length).toBeGreaterThan(0)
+      })
+    })
+
+    it('should show "Disabled" badge when rate_limit.enabled=false', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatusAllEnabled,
+        rate_limit: { enabled: false },
+      })
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-rate-limit')).not.toBeChecked()
+        const disabledBadges = screen.getAllByText('Disabled')
+        expect(disabledBadges.length).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  describe('SD-06: ACL Card Status', () => {
+    it('should show "Active" when acl.enabled=true', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-acl')).toBeChecked()
+      })
+    })
+
+    it('should show "Disabled" when acl.enabled=false', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusMixed)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-acl')).not.toBeChecked()
+      })
+    })
+  })
+
+  describe('SD-07: Layer Indicators', () => {
+    it('should display all layer indicators in correct order', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      // Layer indicators are now Badges with just the layer number
+      expect(screen.getByText('Layer 1')).toBeInTheDocument()
+      expect(screen.getByText('Layer 2')).toBeInTheDocument()
+      expect(screen.getByText('Layer 3')).toBeInTheDocument()
+      expect(screen.getByText('Layer 4')).toBeInTheDocument()
+    })
+  })
+
+  describe('SD-08: Threat Protection Summaries', () => {
+    it('should display threat protection descriptions for each card', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      // CrowdSec must be running to show threat protection descriptions
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      // Verify threat protection descriptions
+      expect(screen.getByText(/Known attackers, botnets/i)).toBeInTheDocument()
+      expect(screen.getByText(/Unauthorized IPs, geo-based attacks/i)).toBeInTheDocument()
+      expect(screen.getByText(/SQL injection, XSS, RCE/i)).toBeInTheDocument()
+      expect(screen.getByText(/DDoS attacks, credential stuffing/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('SD-09: Card Order (Pipeline Sequence)', () => {
+    it('should maintain card order: CrowdSec → ACL → WAF → Rate Limiting', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      // Get all card headings (includes Admin Whitelist when Cerberus is enabled)
+      const cards = screen.getAllByRole('heading', { level: 3 })
+      const cardNames = cards.map((card: HTMLElement) => card.textContent)
+
+      // Verify pipeline order with Admin Whitelist first (when Cerberus enabled)
+      expect(cardNames).toEqual(['Admin Whitelist', 'CrowdSec', 'Access Control', 'Coraza WAF', 'Rate Limiting', 'Security Access Logs'])
+    })
+
+    it('should maintain card order even after toggle', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-waf')).toBeInTheDocument()
+      })
+
+      // Toggle WAF off
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      // Cards should still be in order
+      const cards = screen.getAllByRole('heading', { level: 3 })
+      const cardNames = cards.map((card: HTMLElement) => card.textContent)
+      expect(cardNames).toEqual(['Admin Whitelist', 'CrowdSec', 'Access Control', 'Coraza WAF', 'Rate Limiting', 'Security Access Logs'])
+    })
+  })
+
+  describe('SD-10: Toggle Switches Disabled When Cerberus Off', () => {
+    it('should disable all service toggles when Cerberus is disabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCerberusDisabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Security Features Unavailable/i)).toBeInTheDocument()
+      })
+
+      // All toggles should be disabled
+      expect(screen.getByTestId('toggle-crowdsec')).toBeDisabled()
+      expect(screen.getByTestId('toggle-waf')).toBeDisabled()
+      expect(screen.getByTestId('toggle-acl')).toBeDisabled()
+      expect(screen.getByTestId('toggle-rate-limit')).toBeDisabled()
+    })
+
+    it('should enable toggles when Cerberus is enabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      // All toggles should be enabled
+      expect(screen.getByTestId('toggle-crowdsec')).not.toBeDisabled()
+      expect(screen.getByTestId('toggle-waf')).not.toBeDisabled()
+      expect(screen.getByTestId('toggle-acl')).not.toBeDisabled()
+      expect(screen.getByTestId('toggle-rate-limit')).not.toBeDisabled()
+    })
+  })
+})

frontend/src/pages/__tests__/Security.errors.test.tsx

@@ -0,0 +1,362 @@
+/**
+ * Security Error Handling Tests
+ * Test IDs: EH-01 through EH-10
+ *
+ * Tests error messages on API failures, toast notifications on mutation errors,
+ * and optimistic update rollback.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as settingsApi from '../../api/settings'
+import { toast } from '../../utils/toast'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/settings')
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+}))
+vi.mock('../../hooks/useSecurity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../hooks/useSecurity')>()
+  return {
+    ...actual,
+    useSecurityConfig: vi.fn(() => ({ data: { config: { admin_whitelist: '10.0.0.0/8' } } })),
+    useUpdateSecurityConfig: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useGenerateBreakGlassToken: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useRuleSets: vi.fn(() => ({
+      data: {
+        rulesets: [
+          { id: 1, uuid: 'abc', name: 'OWASP CRS', source_url: 'https://example.com', mode: 'blocking', last_updated: '2025-12-04', content: 'rules' }
+        ]
+      }
+    })),
+  }
+})
+
+// Test Data Fixtures
+const mockSecurityStatusAllEnabled = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+const mockSecurityStatusCrowdsecDisabled = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: false },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+describe('Security Error Handling Tests', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    vi.clearAllMocks()
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob())
+    vi.spyOn(window, 'open').mockImplementation(() => null)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  )
+
+  const renderSecurityPage = async () => {
+    await act(async () => {
+      render(<Security />, { wrapper })
+    })
+  }
+
+  describe('EH-01: Failed Security Status Fetch Shows Error', () => {
+    it('should show "Failed to load security configuration" when API fails', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockRejectedValue(new Error('Network error'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Failed to load security configuration/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('EH-02: Toggle Mutation Failure Shows Toast', () => {
+    it('should call toast.error() when toggle mutation fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Permission denied'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to update setting'))
+      })
+    })
+  })
+
+  describe('EH-03: CrowdSec Start Failure Shows Specific Toast', () => {
+    it('should show "Failed to start CrowdSec: [message]" on start failure', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCrowdsecDisabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      vi.mocked(crowdsecApi.startCrowdsec).mockRejectedValue(new Error('Service unavailable'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      await user.click(screen.getByTestId('toggle-crowdsec'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to start CrowdSec'))
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Service unavailable'))
+      })
+    })
+  })
+
+  describe('EH-04: CrowdSec Stop Failure Shows Specific Toast', () => {
+    it('should show "Failed to stop CrowdSec: [message]" on stop failure', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      vi.mocked(crowdsecApi.stopCrowdsec).mockRejectedValue(new Error('Process locked'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      await user.click(screen.getByTestId('toggle-crowdsec'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to stop CrowdSec'))
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Process locked'))
+      })
+    })
+  })
+
+  describe('EH-05: WAF Toggle Failure Shows Error', () => {
+    it('should show error toast when WAF toggle fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('WAF configuration error'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to update setting'))
+      })
+    })
+  })
+
+  describe('EH-06: Rate Limiting Update Failure Shows Toast', () => {
+    it('should show error toast when rate limiting toggle fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Rate limit config error'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-rate-limit'))
+      await user.click(screen.getByTestId('toggle-rate-limit'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to update setting'))
+      })
+    })
+  })
+
+  describe('EH-07: Network Error Shows Generic Message', () => {
+    it('should handle network errors gracefully', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Network request failed'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-acl'))
+      await user.click(screen.getByTestId('toggle-acl'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Network request failed'))
+      })
+    })
+
+    it('should handle non-Error objects gracefully', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue('Unknown error string')
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-acl'))
+      await user.click(screen.getByTestId('toggle-acl'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('EH-08: ACL Toggle Failure Shows Error', () => {
+    it('should show error when ACL toggle fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('ACL update failed'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-acl'))
+      await user.click(screen.getByTestId('toggle-acl'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to update setting'))
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('ACL update failed'))
+      })
+    })
+  })
+
+  describe('EH-09: Multiple Consecutive Failures Show Multiple Toasts', () => {
+    it('should show separate toast for each failed operation', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Server error'))
+
+      await renderSecurityPage()
+
+      // First failure
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledTimes(1)
+      })
+
+      // Second failure
+      await user.click(screen.getByTestId('toggle-acl'))
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledTimes(2)
+      })
+    })
+  })
+
+  describe('EH-10: Optimistic Update Reverts on Error', () => {
+    it('should revert toggle state when mutation fails', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Update failed'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+
+      // WAF is initially enabled
+      const toggle = screen.getByTestId('toggle-waf')
+      expect(toggle).toBeChecked()
+
+      // Click to disable - optimistic update will uncheck it
+      await user.click(toggle)
+
+      // Wait for error and rollback
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalled()
+      })
+
+      // After rollback, the toggle should be back to checked (enabled)
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-waf')).toBeChecked()
+      })
+    })
+
+    it('should revert CrowdSec state on start failure', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCrowdsecDisabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      vi.mocked(crowdsecApi.startCrowdsec).mockRejectedValue(new Error('Start failed'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+
+      // CrowdSec is initially disabled
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      expect(toggle).not.toBeChecked()
+
+      // Click to enable
+      await user.click(toggle)
+
+      // Wait for error
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to start CrowdSec'))
+      })
+
+      // After rollback, toggle should be back to unchecked (disabled)
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-crowdsec')).not.toBeChecked()
+      })
+    })
+
+    it('should revert CrowdSec state on stop failure', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      vi.mocked(crowdsecApi.stopCrowdsec).mockRejectedValue(new Error('Stop failed'))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+
+      // CrowdSec is initially enabled
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      expect(toggle).toBeChecked()
+
+      // Click to disable
+      await user.click(toggle)
+
+      // Wait for error
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Failed to stop CrowdSec'))
+      })
+
+      // After rollback, toggle should be back to checked (enabled)
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-crowdsec')).toBeChecked()
+      })
+    })
+  })
+})

frontend/src/pages/__tests__/Security.loading.test.tsx

@@ -0,0 +1,304 @@
+/**
+ * Security Loading Overlay Tests
+ * Test IDs: LS-01 through LS-10
+ *
+ * Tests ConfigReloadOverlay appears during operations, specific loading messages,
+ * and overlay blocks interactions.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as settingsApi from '../../api/settings'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/settings')
+vi.mock('../../hooks/useSecurity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../hooks/useSecurity')>()
+  return {
+    ...actual,
+    useSecurityConfig: vi.fn(() => ({ data: { config: { admin_whitelist: '10.0.0.0/8' } } })),
+    useUpdateSecurityConfig: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useGenerateBreakGlassToken: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useRuleSets: vi.fn(() => ({
+      data: {
+        rulesets: [
+          { id: 1, uuid: 'abc', name: 'OWASP CRS', source_url: 'https://example.com', mode: 'blocking', last_updated: '2025-12-04', content: 'rules' }
+        ]
+      }
+    })),
+  }
+})
+
+// Test Data Fixtures
+const mockSecurityStatusAllEnabled = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+const mockSecurityStatusCrowdsecDisabled = {
+  cerberus: { enabled: true },
+  crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: false },
+  waf: { mode: 'enabled' as const, enabled: true },
+  rate_limit: { enabled: true },
+  acl: { enabled: true },
+}
+
+describe('Security Loading Overlay Tests', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    vi.clearAllMocks()
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob())
+    vi.spyOn(window, 'open').mockImplementation(() => null)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  )
+
+  const renderSecurityPage = async () => {
+    await act(async () => {
+      render(<Security />, { wrapper })
+    })
+  }
+
+  describe('LS-01: Initial Page Load Shows Loading Text', () => {
+    it('should show Skeleton components during initial load', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockReturnValue(new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      // Loading state now uses Skeleton components instead of text
+      const skeletons = document.querySelectorAll('.animate-pulse')
+      expect(skeletons.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('LS-02: Toggling Service Shows CerberusLoader Overlay', () => {
+    it('should show ConfigReloadOverlay with type="cerberus" when toggling', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      // Never-resolving promise to keep loading state
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      const toggle = screen.getByTestId('toggle-waf')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument()
+        expect(screen.getByText(/Cerberus configuration updating/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-03: Starting CrowdSec Shows "Summoning the guardian..."', () => {
+    it('should show specific message for CrowdSec start operation', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusCrowdsecDisabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      // Never-resolving promise to keep loading state
+      vi.mocked(crowdsecApi.startCrowdsec).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Summoning the guardian/i)).toBeInTheDocument()
+        expect(screen.getByText(/CrowdSec is starting/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-04: Stopping CrowdSec Shows "Guardian rests..."', () => {
+    it('should show specific message for CrowdSec stop operation', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+      // Never-resolving promise to keep loading state
+      vi.mocked(crowdsecApi.stopCrowdsec).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Guardian rests/i)).toBeInTheDocument()
+        expect(screen.getByText(/CrowdSec is stopping/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-05: WAF Config Operations Show Overlay', () => {
+    it('should show overlay when toggling WAF', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-06: Rate Limiting Toggle Shows Overlay', () => {
+    it('should show overlay when toggling rate limiting', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-rate-limit'))
+      await user.click(screen.getByTestId('toggle-rate-limit'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument()
+        expect(screen.getByText(/Cerberus configuration updating/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-07: ACL Toggle Shows Overlay', () => {
+    it('should show overlay when toggling ACL', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-acl'))
+      await user.click(screen.getByTestId('toggle-acl'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-08: Overlay Contains CerberusLoader Component', () => {
+    it('should render CerberusLoader animation within overlay', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        // The CerberusLoader has role="status" with aria-label="Security Loading"
+        expect(screen.getByRole('status', { name: /Security Loading/i })).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-09: Overlay Blocks Interactions', () => {
+    it('should show overlay during toggle operation', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        // Verify the fixed overlay is present (it has class "fixed inset-0")
+        const overlay = document.querySelector('.fixed.inset-0')
+        expect(overlay).toBeInTheDocument()
+      })
+    })
+
+    it('should have z-50 overlay that covers content', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      await waitFor(() => {
+        const overlay = document.querySelector('.z-50')
+        expect(overlay).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('LS-10: Overlay Disappears on Mutation Success', () => {
+    it('should remove overlay after toggle completes successfully', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+
+      // First call - resolves quickly to simulate successful toggle
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+
+      // The overlay might flash briefly and disappear, so we verify no overlay after completion
+      await user.click(screen.getByTestId('toggle-waf'))
+
+      // Wait for mutation to complete and overlay to disappear
+      await waitFor(() => {
+        const overlay = document.querySelector('.fixed.inset-0.bg-slate-900\\/70')
+        // After successful mutation, overlay should be gone
+        expect(overlay).not.toBeInTheDocument()
+      }, { timeout: 3000 })
+    })
+
+    it('should not show overlay when mutation completes instantly', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatusAllEnabled)
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => {
+        expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument()
+      })
+
+      // After successful load, no overlay should be present
+      const overlay = document.querySelector('.fixed.inset-0.bg-slate-900\\/70')
+      expect(overlay).not.toBeInTheDocument()
+    })
+  })
+})

frontend/src/pages/__tests__/Security.spec.tsx

@@ -0,0 +1,207 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as api from '../../api/security'
+import type { SecurityStatus, RuleSetsResponse } from '../../api/security'
+import * as settingsApi from '../../api/settings'
+import * as crowdsecApi from '../../api/crowdsec'
+import { createTestQueryClient } from '../../test/createTestQueryClient'
+
+const mockNavigate = vi.fn()
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom')
+  return { ...actual, useNavigate: () => mockNavigate }
+})
+
+vi.mock('../../api/security')
+vi.mock('../../api/settings')
+vi.mock('../../api/crowdsec')
+
+const defaultFeatureFlags = {
+  'feature.cerberus.enabled': true,
+  'feature.uptime.enabled': true,
+}
+
+const baseStatus: SecurityStatus = {
+  cerberus: { enabled: true },
+  crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+  waf: { enabled: false, mode: 'disabled' as const },
+  rate_limit: { enabled: false },
+  acl: { enabled: false },
+}
+
+const createQueryClient = (initialData = []) => createTestQueryClient([
+  { key: ['securityConfig'], data: mockSecurityConfig },
+  { key: ['securityRulesets'], data: mockRuleSets },
+  { key: ['feature-flags'], data: defaultFeatureFlags },
+  ...initialData,
+])
+
+const renderWithProviders = (ui: React.ReactNode, initialData = []) => {
+  const qc = createQueryClient(initialData)
+  return render(
+    <QueryClientProvider client={qc}>
+      <BrowserRouter>
+        {ui}
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+const mockSecurityConfig = {
+  config: {
+    name: 'default',
+    waf_mode: 'block',
+    waf_rules_source: '',
+    admin_whitelist: '',
+  },
+}
+
+const mockRuleSets: RuleSetsResponse = {
+  rulesets: [
+    { id: 1, uuid: 'uuid-1', name: 'OWASP CRS', source_url: '', mode: 'blocking', last_updated: '', content: '' },
+    { id: 2, uuid: 'uuid-2', name: 'Custom Rules', source_url: '', mode: 'detection', last_updated: '', content: '' },
+  ],
+}
+    // Types already imported at top-level; avoid duplicate declarations
+describe('Security page', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(baseStatus as SecurityStatus)
+    vi.mocked(api.getSecurityConfig).mockResolvedValue(mockSecurityConfig)
+    vi.mocked(api.getRuleSets).mockResolvedValue(mockRuleSets)
+    vi.mocked(api.updateSecurityConfig).mockResolvedValue({})
+  })
+
+  it('shows banner when all services are disabled and links to docs', async () => {
+    const status: SecurityStatus = {
+      cerberus: { enabled: false },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: false, mode: 'disabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+    vi.mocked(api.getSecurityStatus).mockResolvedValueOnce(status as SecurityStatus)
+    vi.mocked(api.getSecurityStatus).mockResolvedValueOnce({
+      ...status,
+      crowdsec: { ...status.crowdsec, enabled: true }
+    } as SecurityStatus)
+
+    renderWithProviders(<Security />)
+    expect(await screen.findByText('Security Features Unavailable')).toBeInTheDocument()
+    const docBtns = screen.getAllByText('Learn More')
+    expect(docBtns.length).toBeGreaterThan(0)
+  })
+
+  it('renders per-service toggles and calls updateSetting on change', async () => {
+    const status: SecurityStatus = {
+      cerberus: { enabled: true },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: false, mode: 'disabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status as SecurityStatus)
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)
+
+    renderWithProviders(<Security />)
+    await waitFor(() => expect(screen.getByText('Cerberus Dashboard')).toBeInTheDocument())
+    const crowdsecToggle = screen.getByTestId('toggle-crowdsec') as HTMLInputElement
+    expect(crowdsecToggle.disabled).toBe(false)
+    // Ensure enable-all controls were removed
+    expect(screen.queryByTestId('enable-all-btn')).toBeNull()
+  })
+
+  it('calls updateSetting when toggling ACL', async () => {
+    const status: SecurityStatus = {
+      cerberus: { enabled: true },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: false, mode: 'disabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status as SecurityStatus)
+    const updateSpy = vi.mocked(settingsApi.updateSetting)
+    renderWithProviders(<Security />)
+    await waitFor(() => expect(screen.getByText('Cerberus Dashboard')).toBeInTheDocument())
+    const aclToggle = screen.getByTestId('toggle-acl')
+    await userEvent.click(aclToggle)
+    await waitFor(() => expect(updateSpy).toHaveBeenCalledWith('security.acl.enabled', 'true', 'security', 'bool'))
+  })
+
+  // Export button is in CrowdSecConfig component, not Security page
+
+  it('calls start/stop endpoints for CrowdSec via toggle', async () => {
+    const user = userEvent.setup()
+    const baseStatus: SecurityStatus = {
+      cerberus: { enabled: true },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: false, mode: 'disabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(baseStatus as SecurityStatus)
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(crowdsecApi.startCrowdsec).mockResolvedValue({ status: 'started', pid: 123, lapi_ready: true })
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)
+
+    renderWithProviders(<Security />)
+    await waitFor(() => expect(screen.getByText('Cerberus Dashboard')).toBeInTheDocument())
+    const toggle = screen.getByTestId('toggle-crowdsec')
+    await user.click(toggle)
+    await waitFor(() => expect(crowdsecApi.startCrowdsec).toHaveBeenCalled())
+
+    cleanup()
+
+    const enabledStatus: SecurityStatus = { ...baseStatus, crowdsec: { enabled: true, mode: 'local' as const, api_url: '' } }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(enabledStatus as SecurityStatus)
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 123, lapi_ready: true })
+    vi.mocked(crowdsecApi.stopCrowdsec).mockResolvedValue(undefined)
+
+    renderWithProviders(<Security />)
+    await waitFor(() => expect(screen.getByText('Cerberus Dashboard')).toBeInTheDocument())
+    const stopToggle = screen.getByTestId('toggle-crowdsec')
+    await user.click(stopToggle)
+    await waitFor(() => expect(crowdsecApi.stopCrowdsec).toHaveBeenCalled())
+  })
+
+  it('disables service toggles when cerberus is off', async () => {
+    const status: SecurityStatus = {
+      cerberus: { enabled: false },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: false, mode: 'disabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status as SecurityStatus)
+    renderWithProviders(<Security />)
+    await waitFor(() => expect(screen.getByText('Security Features Unavailable')).toBeInTheDocument())
+    const crowdsecToggle = screen.getByTestId('toggle-crowdsec')
+    expect(crowdsecToggle).toBeDisabled()
+  })
+
+  it('displays correct WAF threat protection summary when enabled', async () => {
+    const status: SecurityStatus = {
+      cerberus: { enabled: true },
+      crowdsec: { enabled: false, mode: 'disabled' as const, api_url: '' },
+      waf: { enabled: true, mode: 'enabled' as const },
+      rate_limit: { enabled: false },
+      acl: { enabled: false },
+    }
+    vi.mocked(api.getSecurityStatus).mockResolvedValue(status as SecurityStatus)
+    vi.mocked(api.getSecurityConfig).mockResolvedValue({
+      config: { ...mockSecurityConfig.config, waf_mode: 'monitor' },
+    })
+    vi.mocked(api.getRuleSets).mockResolvedValue(mockRuleSets)
+
+    renderWithProviders(<Security />)
+    // WAF now shows threat protection summary instead of mode text
+    await waitFor(() => expect(screen.getByText(/SQL injection, XSS, RCE/i)).toBeInTheDocument())
+  })
+})

frontend/src/pages/__tests__/Security.test.tsx

@@ -0,0 +1,331 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import Security from '../Security'
+import * as securityApi from '../../api/security'
+import * as crowdsecApi from '../../api/crowdsec'
+import * as settingsApi from '../../api/settings'
+
+vi.mock('../../api/security')
+vi.mock('../../api/crowdsec')
+vi.mock('../../api/settings')
+vi.mock('../../hooks/useSecurity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../hooks/useSecurity')>()
+  return {
+    ...actual,
+    useSecurityConfig: vi.fn(() => ({ data: { config: { admin_whitelist: '10.0.0.0/8' } } })),
+    useUpdateSecurityConfig: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useGenerateBreakGlassToken: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+    useRuleSets: vi.fn(() => ({
+      data: {
+        rulesets: [
+          { id: 1, uuid: 'abc', name: 'OWASP CRS', source_url: 'https://example.com', mode: 'blocking', last_updated: '2025-12-04', content: 'rules' }
+        ]
+      }
+    })),
+  }
+})
+
+describe('Security', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    vi.clearAllMocks()
+    vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+    vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+    vi.mocked(crowdsecApi.exportCrowdsecConfig).mockResolvedValue(new Blob())
+    vi.spyOn(window, 'open').mockImplementation(() => null)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    vi.spyOn(window, 'prompt').mockReturnValue('crowdsec-export.tar.gz')
+  })
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{children}</BrowserRouter>
+    </QueryClientProvider>
+  )
+
+  const renderSecurityPage = async () => {
+    await act(async () => {
+      render(<Security />, { wrapper })
+    })
+  }
+
+  const mockSecurityStatus = {
+    cerberus: { enabled: true },
+    crowdsec: { mode: 'local' as const, api_url: 'http://localhost', enabled: true },
+    waf: { mode: 'enabled' as const, enabled: true },
+    rate_limit: { enabled: true },
+    acl: { enabled: true }
+  }
+
+  describe('Rendering', () => {
+    it('should show loading state initially', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockReturnValue(new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      // Loading state now uses Skeleton components instead of text
+      const skeletons = document.querySelectorAll('.animate-pulse')
+      expect(skeletons.length).toBeGreaterThan(0)
+    })
+
+    it('should show error if security status fails to load', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockRejectedValue(new Error('Failed'))
+      await renderSecurityPage()
+      await waitFor(() => expect(screen.getByText(/Failed to load security configuration/i)).toBeInTheDocument())
+    })
+
+    it('should render Cerberus Dashboard when status loads', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      await renderSecurityPage()
+      await waitFor(() => expect(screen.getByText(/Cerberus Dashboard/i)).toBeInTheDocument())
+    })
+
+    it('should show banner when Cerberus is disabled', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({ ...mockSecurityStatus, cerberus: { enabled: false } })
+      await renderSecurityPage()
+      await waitFor(() => expect(screen.getByText(/Security Features Unavailable/i)).toBeInTheDocument())
+    })
+  })
+
+  describe('Service Toggles', () => {
+    it('should toggle CrowdSec on', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({ ...mockSecurityStatus, crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: false } })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.crowdsec.enabled', 'true', 'security', 'bool'))
+    })
+
+    it('should toggle WAF on', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({ ...mockSecurityStatus, waf: { mode: 'enabled', enabled: false } })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      const toggle = screen.getByTestId('toggle-waf')
+      await act(async () => {
+        await user.click(toggle)
+      })
+
+      await waitFor(() => expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.waf.enabled', 'true', 'security', 'bool'))
+    })
+
+    it('should toggle ACL on', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({ ...mockSecurityStatus, acl: { enabled: false } })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-acl'))
+      const toggle = screen.getByTestId('toggle-acl')
+      await user.click(toggle)
+
+      await waitFor(() => expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.acl.enabled', 'true', 'security', 'bool'))
+    })
+
+    it('should toggle Rate Limiting on', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({ ...mockSecurityStatus, rate_limit: { enabled: false } })
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue()
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-rate-limit'))
+      const toggle = screen.getByTestId('toggle-rate-limit')
+      await user.click(toggle)
+
+      await waitFor(() => expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.rate_limit.enabled', 'true', 'security', 'bool'))
+    })
+  })
+
+  describe('Admin Whitelist', () => {
+    it('should load admin whitelist from config', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+      await waitFor(() => screen.getByDisplayValue('10.0.0.0/8'))
+      expect(screen.getByDisplayValue('10.0.0.0/8')).toBeInTheDocument()
+    })
+
+    it('should update admin whitelist on save', async () => {
+      const user = userEvent.setup()
+      const mockMutate = vi.fn()
+      const { useUpdateSecurityConfig } = await import('../../hooks/useSecurity')
+      vi.mocked(useUpdateSecurityConfig).mockReturnValue({ mutate: mockMutate, isPending: false } as unknown as ReturnType<typeof useUpdateSecurityConfig>)
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByDisplayValue('10.0.0.0/8'))
+
+      const saveButton = screen.getByRole('button', { name: /Save/i })
+      await user.click(saveButton)
+
+      await waitFor(() => {
+        expect(mockMutate).toHaveBeenCalledWith({ name: 'default', admin_whitelist: '10.0.0.0/8' })
+      })
+    })
+  })
+
+  describe('CrowdSec Controls', () => {
+    it('should start CrowdSec when toggling on', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatus,
+        crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: false },
+      })
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(crowdsecApi.startCrowdsec).mockResolvedValue({ status: 'started', pid: 123, lapi_ready: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await act(async () => {
+        await user.click(toggle)
+      })
+
+      await waitFor(() => {
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.crowdsec.enabled', 'true', 'security', 'bool')
+        expect(crowdsecApi.startCrowdsec).toHaveBeenCalled()
+      })
+    })
+
+    it('should stop CrowdSec when toggling off', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(crowdsecApi.stopCrowdsec).mockResolvedValue({ success: true })
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await act(async () => {
+        await user.click(toggle)
+      })
+
+      await waitFor(() => {
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith('security.crowdsec.enabled', 'false', 'security', 'bool')
+        expect(crowdsecApi.stopCrowdsec).toHaveBeenCalled()
+      })
+    })
+
+
+  })
+
+  // Note: WAF Controls tests removed - dropdowns moved to dedicated WAF config page (/security/waf)
+
+  describe('Card Order (Pipeline Sequence)', () => {
+    it('should render cards in correct pipeline order: CrowdSec → ACL → WAF → Rate Limiting', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Get all card headings (CardTitle uses text-base class)
+      const cards = screen.getAllByRole('heading', { level: 3 })
+      const cardNames = cards.map(card => card.textContent)
+
+      // Verify pipeline order: Admin Whitelist + CrowdSec (Layer 1) → ACL (Layer 2) → Coraza (Layer 3) → Rate Limiting (Layer 4) + Security Access Logs
+      expect(cardNames).toEqual(['Admin Whitelist', 'CrowdSec', 'Access Control', 'Coraza WAF', 'Rate Limiting', 'Security Access Logs'])
+    })
+
+    it('should display layer indicators on each card', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+
+      await renderSecurityPage()
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Layer indicators are now Badges with just the layer number
+      expect(screen.getByText('Layer 1')).toBeInTheDocument()
+      expect(screen.getByText('Layer 2')).toBeInTheDocument()
+      expect(screen.getByText('Layer 3')).toBeInTheDocument()
+      expect(screen.getByText('Layer 4')).toBeInTheDocument()
+    })
+
+    it('should display threat protection summaries', async () => {
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      // CrowdSec must be running to show threat protection descriptions
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+
+      await renderSecurityPage()
+      await waitFor(() => screen.getByText(/Cerberus Dashboard/i))
+
+      // Verify threat protection descriptions
+      expect(screen.getByText(/Known attackers, botnets/i)).toBeInTheDocument()
+      expect(screen.getByText(/Unauthorized IPs, geo-based attacks/i)).toBeInTheDocument()
+      expect(screen.getByText(/SQL injection, XSS, RCE/i)).toBeInTheDocument()
+      expect(screen.getByText(/DDoS attacks, credential stuffing/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Loading Overlay', () => {
+    it('should show overlay when service is toggling', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(settingsApi.updateSetting).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-waf'))
+      const toggle = screen.getByTestId('toggle-waf')
+      await user.click(toggle)
+
+      await waitFor(() => expect(screen.getByText(/Three heads turn/i)).toBeInTheDocument())
+    })
+
+    it('should show overlay when starting CrowdSec', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue({
+        ...mockSecurityStatus,
+        crowdsec: { mode: 'local', api_url: 'http://localhost', enabled: false },
+      })
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: false, pid: 0, lapi_ready: false })
+      vi.mocked(crowdsecApi.startCrowdsec).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => expect(screen.getByText(/Summoning the guardian/i)).toBeInTheDocument())
+    })
+
+    it('should show overlay when stopping CrowdSec', async () => {
+      const user = userEvent.setup()
+      vi.mocked(securityApi.getSecurityStatus).mockResolvedValue(mockSecurityStatus)
+      vi.mocked(crowdsecApi.statusCrowdsec).mockResolvedValue({ running: true, pid: 1234, lapi_ready: true })
+      vi.mocked(crowdsecApi.stopCrowdsec).mockImplementation(() => new Promise(() => {}))
+
+      await renderSecurityPage()
+
+      await waitFor(() => screen.getByTestId('toggle-crowdsec'))
+      const toggle = screen.getByTestId('toggle-crowdsec')
+      await user.click(toggle)
+
+      await waitFor(() => expect(screen.getByText(/Guardian rests/i)).toBeInTheDocument())
+    })
+  })
+})

frontend/src/pages/__tests__/SecurityHeaders.test.tsx

@@ -0,0 +1,310 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, it, expect, vi } from 'vitest';
+import SecurityHeaders from '../../pages/SecurityHeaders';
+import { securityHeadersApi, SecurityHeaderProfile } from '../../api/securityHeaders';
+import { createBackup } from '../../api/backups';
+
+vi.mock('../../api/securityHeaders');
+vi.mock('../../api/backups');
+vi.mock('react-hot-toast');
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('SecurityHeaders', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render loading state', () => {
+    vi.mocked(securityHeadersApi.listProfiles).mockImplementation(() => new Promise(() => {}));
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    expect(screen.getByText('Security Headers')).toBeInTheDocument();
+  });
+
+  it('should render empty state', async () => {
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue([]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('No custom profiles yet')).toBeInTheDocument();
+    });
+  });
+
+  it('should render list of profiles', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Profile 1',
+        is_preset: false,
+        security_score: 85,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+      {
+        id: 2,
+        name: 'Profile 2',
+        is_preset: false,
+        security_score: 90,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('Profile 1')).toBeInTheDocument();
+      expect(screen.getByText('Profile 2')).toBeInTheDocument();
+    });
+  });
+
+  it('should render presets', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Basic Security',
+        description: 'Essential headers',
+        is_preset: true,
+        preset_type: 'basic',
+        security_score: 65,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+      {
+        id: 2,
+        name: 'Strict Security',
+        description: 'Strong security',
+        is_preset: true,
+        preset_type: 'strict',
+        security_score: 85,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('Basic Security')).toBeInTheDocument();
+      expect(screen.getByText('Strict Security')).toBeInTheDocument();
+    });
+  });
+
+  it('should open create form dialog', async () => {
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue([]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Create Profile/ })).toBeInTheDocument();
+    });
+
+    const createButton = screen.getAllByRole('button', { name: /Create Profile/ })[0];
+    fireEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Create Security Header Profile/)).toBeInTheDocument();
+    });
+  });
+
+  it('should open edit dialog', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Test Profile',
+        is_preset: false,
+        security_score: 85,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+    vi.mocked(securityHeadersApi.calculateScore).mockResolvedValue({
+      score: 85,
+      max_score: 100,
+      breakdown: {},
+      suggestions: [],
+    });
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Profile')).toBeInTheDocument();
+    });
+
+    const editButton = screen.getByRole('button', { name: /Edit/ });
+    fireEvent.click(editButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Edit Security Header Profile/)).toBeInTheDocument();
+    });
+  });
+
+  it('should clone profile', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Original Profile',
+        description: 'Test description',
+        is_preset: false,
+        security_score: 85,
+        hsts_enabled: true,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+    vi.mocked(securityHeadersApi.createProfile).mockResolvedValue({
+      id: 2,
+      name: 'Original Profile (Copy)',
+      security_score: 85,
+    } as SecurityHeaderProfile);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('Original Profile')).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const cloneButton = buttons.find(btn => btn.querySelector('.lucide-copy'));
+    if (cloneButton) {
+      fireEvent.click(cloneButton);
+    }
+
+    await waitFor(() => {
+      expect(securityHeadersApi.createProfile).toHaveBeenCalled();
+    });
+
+    const createCall = vi.mocked(securityHeadersApi.createProfile).mock.calls[0][0];
+    expect(createCall.name).toBe('Original Profile (Copy)');
+  });
+
+  it('should delete profile with backup', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Test Profile',
+        is_preset: false,
+        security_score: 85,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+    vi.mocked(createBackup).mockResolvedValue({ filename: 'backup.tar.gz' });
+    vi.mocked(securityHeadersApi.deleteProfile).mockResolvedValue(undefined);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Profile')).toBeInTheDocument();
+    });
+
+    // Click delete button
+    const buttons = screen.getAllByRole('button');
+    const deleteButton = buttons.find(btn => btn.querySelector('.lucide-trash-2, .lucide-trash'));
+    if (deleteButton) {
+      fireEvent.click(deleteButton);
+    }
+
+    // Confirm deletion - wait for the dialog to appear
+    await waitFor(() => {
+      const headings = screen.getAllByText(/Confirm Deletion/i);
+      expect(headings.length).toBeGreaterThan(0);
+    }, { timeout: 2000 });
+
+    const confirmButton = screen.getByRole('button', { name: /Delete/i });
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(createBackup).toHaveBeenCalled();
+      expect(securityHeadersApi.deleteProfile).toHaveBeenCalledWith(1);
+    });
+  });
+
+  it('should separate quick presets from custom profiles', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'Custom Profile',
+        is_preset: false,
+        security_score: 85,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+      {
+        id: 2,
+        name: 'Basic Security',
+        is_preset: true,
+        preset_type: 'basic',
+        security_score: 65,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('System Profiles (Read-Only)')).toBeInTheDocument();
+      expect(screen.getByText('Custom Profiles')).toBeInTheDocument();
+    });
+
+    // System profiles should have View and Clone buttons
+    const presetCard = screen.getByText('Basic Security').closest('div');
+    expect(presetCard).toBeInTheDocument();
+
+    // Custom profile should have Edit button
+    const customCard = screen.getByText('Custom Profile').closest('div');
+    expect(customCard?.textContent).toContain('Custom Profile');
+  });
+
+  it('should display security scores', async () => {
+    const mockProfiles = [
+      {
+        id: 1,
+        name: 'High Score Profile',
+        is_preset: false,
+        security_score: 95,
+        updated_at: '2025-12-18T00:00:00Z',
+      },
+    ];
+
+    vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
+    vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
+
+    render(<SecurityHeaders />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      expect(screen.getByText('95')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/pages/__tests__/Setup.test.tsx

@@ -0,0 +1,166 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import Setup from '../Setup';
+import * as setupApi from '../../api/setup';
+
+// Mock AuthContext so useAuth works in tests
+vi.mock('../../hooks/useAuth', () => ({
+  useAuth: () => ({
+    login: vi.fn(),
+    logout: vi.fn(),
+    isAuthenticated: false,
+    isLoading: false,
+    user: null,
+  }),
+}));
+
+// Mock API client
+vi.mock('../../api/client', () => ({
+  default: {
+    post: vi.fn().mockResolvedValue({ data: {} }),
+    get: vi.fn().mockResolvedValue({ data: {} }),
+  },
+}));
+
+// Mock react-router-dom
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock the API module
+vi.mock('../../api/setup', () => ({
+  getSetupStatus: vi.fn(),
+  performSetup: vi.fn(),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        {ui}
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe('Setup Page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    queryClient.clear();
+  });
+
+  it('renders setup form when setup is required', async () => {
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: true });
+
+    renderWithProviders(<Setup />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Charon')).toBeTruthy();
+    });
+
+    // Verify logo is present
+    expect(screen.getAllByAltText('Charon').length).toBeGreaterThan(0);
+
+    expect(screen.getByLabelText('Name')).toBeTruthy();
+    expect(screen.getByLabelText('Email Address')).toBeTruthy();
+    expect(screen.getByLabelText('Password')).toBeTruthy();
+  });
+
+  it('does not render form when setup is not required', async () => {
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: false });
+
+    renderWithProviders(<Setup />);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Welcome to Charon')).toBeNull();
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/login');
+    });
+  });
+
+  it('submits form successfully', async () => {
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: true });
+    vi.mocked(setupApi.performSetup).mockResolvedValue();
+
+    renderWithProviders(<Setup />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Charon')).toBeTruthy();
+    });
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Name'), 'Admin')
+    await user.type(screen.getByLabelText('Email Address'), 'admin@example.com')
+    await user.type(screen.getByLabelText('Password'), 'password123')
+    await user.click(screen.getByRole('button', { name: 'Create Admin Account' }))
+
+    await waitFor(() => {
+      expect(setupApi.performSetup).toHaveBeenCalledWith({
+        name: 'Admin',
+        email: 'admin@example.com',
+        password: 'password123',
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/');
+    });
+  });
+
+  it('displays error on submission failure', async () => {
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: true });
+    vi.mocked(setupApi.performSetup).mockRejectedValue({
+      response: { data: { error: 'Setup failed' } }
+    });
+
+    renderWithProviders(<Setup />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Charon')).toBeTruthy();
+    });
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Name'), 'Admin')
+    await user.type(screen.getByLabelText('Email Address'), 'admin@example.com')
+    await user.type(screen.getByLabelText('Password'), 'password123')
+    await user.click(screen.getByRole('button', { name: 'Create Admin Account' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Setup failed')).toBeTruthy();
+    });
+  });
+
+  it('has proper autocomplete attributes for password managers', async () => {
+    vi.mocked(setupApi.getSetupStatus).mockResolvedValue({ setupRequired: true });
+
+    renderWithProviders(<Setup />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Charon')).toBeTruthy();
+    });
+
+    const emailInput = screen.getByLabelText('Email Address')
+    const passwordInput = screen.getByLabelText('Password')
+
+    expect(emailInput).toHaveAttribute('autocomplete', 'email')
+    expect(passwordInput).toHaveAttribute('autocomplete', 'new-password')
+  });
+});

frontend/src/pages/__tests__/SystemSettings.test.tsx

@@ -0,0 +1,644 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import SystemSettings from '../SystemSettings'
+import * as settingsApi from '../../api/settings'
+import * as featureFlagsApi from '../../api/featureFlags'
+import client from '../../api/client'
+import { LanguageProvider } from '../../context/LanguageContext'
+
+// Note: react-i18next mock is provided globally by src/test/setup.ts
+
+// Mock API modules
+vi.mock('../../api/settings', () => ({
+  getSettings: vi.fn(),
+  updateSetting: vi.fn(),
+  validatePublicURL: vi.fn(),
+  testPublicURL: vi.fn(),
+}))
+
+vi.mock('../../api/featureFlags', () => ({
+  getFeatureFlags: vi.fn(),
+  updateFeatureFlags: vi.fn(),
+}))
+
+vi.mock('../../api/client', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+  },
+}))
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <LanguageProvider>
+        <MemoryRouter>{ui}</MemoryRouter>
+      </LanguageProvider>
+    </QueryClientProvider>
+  )
+}
+
+describe('SystemSettings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Default mock responses
+    vi.mocked(settingsApi.getSettings).mockResolvedValue({
+      'caddy.admin_api': 'http://localhost:2019',
+      'caddy.ssl_provider': 'auto',
+      'ui.domain_link_behavior': 'new_tab',
+      'security.cerberus.enabled': 'false',
+    })
+
+    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+      'feature.cerberus.enabled': false,
+      'feature.crowdsec.console_enrollment': false,
+      'feature.uptime.enabled': false,
+    })
+
+    vi.mocked(client.get).mockResolvedValue({
+      data: {
+        status: 'healthy',
+        service: 'charon',
+        version: '0.1.0',
+        git_commit: 'abc123',
+        build_time: '2025-01-01T00:00:00Z',
+      },
+    })
+  })
+
+  describe('SSL Provider Selection', () => {
+    it('renders SSL Provider label', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('SSL Provider')).toBeTruthy()
+      })
+    })
+
+    it('displays the correct help text for SSL provider', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText(/Choose the Certificate Authority/i)).toBeTruthy()
+      })
+    })
+
+    it('renders the SSL provider select trigger', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('SSL Provider')).toBeTruthy()
+      })
+
+      // Radix UI Select uses a button as the trigger
+      const selectTrigger = screen.getByRole('combobox', { name: /ssl provider/i })
+      expect(selectTrigger).toBeTruthy()
+    })
+
+    it('displays Auto as default selection', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Auto (Recommended)')).toBeTruthy()
+      })
+    })
+
+    it('saves SSL provider setting when save button is clicked', async () => {
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('SSL Provider')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const saveButtons = screen.getAllByRole('button', { name: /Save Settings/i })
+      await user.click(saveButtons[0])
+
+      await waitFor(() => {
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
+          'caddy.ssl_provider',
+          expect.any(String),
+          'caddy',
+          'string'
+        )
+      })
+    })
+  })
+
+  describe('General Settings', () => {
+    it('renders the page title', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('System Settings')).toBeTruthy()
+      })
+    })
+
+    it('loads and displays Caddy Admin API setting', async () => {
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({
+        'caddy.admin_api': 'http://custom:2019',
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        const input = screen.getByPlaceholderText('http://localhost:2019') as HTMLInputElement
+        expect(input.value).toBe('http://custom:2019')
+      })
+    })
+
+    it('saves all settings when save button is clicked', async () => {
+      vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Save Settings')).toHaveLength(2)
+      })
+
+      const user = userEvent.setup()
+      const saveButtons = screen.getAllByRole('button', { name: /Save Settings/i })
+      await user.click(saveButtons[0])
+
+      await waitFor(() => {
+        expect(settingsApi.updateSetting).toHaveBeenCalledTimes(4)
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
+          'caddy.admin_api',
+          expect.any(String),
+          'caddy',
+          'string'
+        )
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
+          'caddy.ssl_provider',
+          expect.any(String),
+          'caddy',
+          'string'
+        )
+        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
+          'ui.domain_link_behavior',
+          expect.any(String),
+          'ui',
+          'string'
+        )
+      })
+    })
+  })
+
+  describe('System Status', () => {
+    it('displays system health information', async () => {
+      vi.mocked(client.get).mockResolvedValue({
+        data: {
+          status: 'healthy',
+          service: 'charon',
+          version: '1.0.0',
+          git_commit: 'abc123def',
+          build_time: '2025-12-06T00:00:00Z',
+        },
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('charon')).toBeTruthy()
+        expect(screen.getByText('1.0.0')).toBeTruthy()
+        expect(screen.getByText('abc123def')).toBeTruthy()
+      })
+    })
+
+    it('displays System Status section', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('System Status')).toBeTruthy()
+      })
+    })
+  })
+
+  describe('Features', () => {
+    it('renders the Features section', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Features')).toBeTruthy()
+      })
+    })
+
+    it('displays all feature flag toggles', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
+        expect(screen.getByText('CrowdSec Console Enrollment')).toBeTruthy()
+        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
+      })
+    })
+
+    it('shows Cerberus toggle as checked when enabled', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': true,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
+      })
+
+      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
+      expect(switchInput).toBeChecked()
+    })
+
+    it('shows Uptime toggle as checked when enabled', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.uptime.enabled': true,
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
+      })
+
+      const switchInput = screen.getByRole('checkbox', { name: /uptime monitoring toggle/i })
+      expect(switchInput).toBeChecked()
+    })
+
+    it('shows Cerberus toggle as unchecked when disabled', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
+      })
+
+      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
+      expect(switchInput).not.toBeChecked()
+    })
+
+    it('toggles Cerberus feature flag when switch is clicked', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
+
+      await user.click(switchInput)
+
+      await waitFor(() => {
+        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
+          'feature.cerberus.enabled': true,
+        })
+      })
+    })
+
+    it('toggles CrowdSec Console Enrollment feature flag when switch is clicked', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('CrowdSec Console Enrollment')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const switchInput = screen.getByRole('checkbox', { name: /crowdsec console enrollment toggle/i })
+
+      await user.click(switchInput)
+
+      await waitFor(() => {
+        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
+          'feature.crowdsec.console_enrollment': true,
+        })
+      })
+    })
+
+    it('toggles Uptime feature flag when switch is clicked', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.uptime.enabled': true,
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+      })
+      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const switchInput = screen.getByRole('checkbox', { name: /uptime monitoring toggle/i })
+
+      await user.click(switchInput)
+
+      await waitFor(() => {
+        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
+          'feature.uptime.enabled': false,
+        })
+      })
+    })
+
+    it('shows loading skeleton when feature flags are not loaded', async () => {
+      // Set settings to resolve but feature flags to never resolve (pending state)
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({
+        'caddy.admin_api': 'http://localhost:2019',
+        'caddy.ssl_provider': 'auto',
+        'ui.domain_link_behavior': 'new_tab',
+      })
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockReturnValue(new Promise(() => {}))
+
+      renderWithProviders(<SystemSettings />)
+
+      // When featureFlags is undefined but settings is loaded, it shows skeleton in the Features card
+      await waitFor(() => {
+        expect(screen.getByText('Features')).toBeTruthy()
+      })
+
+      // Verify skeleton elements are rendered (Skeleton component uses animate-pulse class)
+      const skeletons = document.querySelectorAll('.animate-pulse')
+      expect(skeletons.length).toBeGreaterThan(0)
+    })
+
+    it('shows loading overlay while toggling a feature flag', async () => {
+      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
+        'feature.cerberus.enabled': false,
+        'feature.crowdsec.console_enrollment': false,
+        'feature.uptime.enabled': false,
+      })
+      vi.mocked(featureFlagsApi.updateFeatureFlags).mockImplementation(
+        () => new Promise(() => {})
+      )
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
+
+      await user.click(switchInput)
+
+      await waitFor(() => {
+        expect(screen.getByText('Updating features...')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Application URL Card', () => {
+    it('renders public URL input field', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+    })
+
+    it('shows green border and checkmark when URL is valid', async () => {
+      vi.mocked(client.get).mockResolvedValue({
+        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByPlaceholderText('https://charon.example.com')
+
+      // Mock validation response for valid URL
+      vi.mocked(client.post).mockResolvedValue({
+        data: { valid: true, normalized: 'https://example.com' },
+      })
+
+      await user.clear(input)
+      await user.type(input, 'https://example.com')
+
+      // Wait for debounced validation
+      await waitFor(() => {
+        expect(client.post).toHaveBeenCalledWith('/settings/validate-url', {
+          url: 'https://example.com',
+        })
+      }, { timeout: 1000 })
+
+      await waitFor(() => {
+        const checkIcon = document.querySelector('.text-green-500')
+        expect(checkIcon).toBeTruthy()
+      })
+
+      await waitFor(() => {
+        expect(input.className).toContain('border-green-500')
+      })
+    })
+
+    it('shows red border and X icon when URL is invalid', async () => {
+      vi.mocked(client.get).mockResolvedValue({
+        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByPlaceholderText('https://charon.example.com')
+
+      // Mock validation response for invalid URL
+      vi.mocked(client.post).mockResolvedValue({
+        data: { valid: false, error: 'Invalid URL format' },
+      })
+
+      await user.clear(input)
+      await user.type(input, 'invalid-url')
+
+      await waitFor(() => {
+        expect(client.post).toHaveBeenCalledWith('/settings/validate-url', {
+          url: 'invalid-url',
+        })
+      }, { timeout: 1000 })
+
+      await waitFor(() => {
+        const xIcon = document.querySelector('.text-red-500')
+        expect(xIcon).toBeTruthy()
+      })
+
+      await waitFor(() => {
+        expect(input.className).toContain('border-red-500')
+      })
+    })
+
+    it('shows invalid URL error message when validation fails', async () => {
+      vi.mocked(client.get).mockResolvedValue({
+        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByPlaceholderText('https://charon.example.com')
+
+      vi.mocked(client.post).mockResolvedValue({
+        data: { valid: false, error: 'Invalid URL format' },
+      })
+
+      await user.clear(input)
+      await user.type(input, 'bad-url')
+
+      // Wait for debounce and validation
+      await new Promise(resolve => setTimeout(resolve, 400))
+
+      await waitFor(() => {
+        // Check for red border class indicating invalid state
+        const inputElement = screen.getByPlaceholderText('https://charon.example.com')
+        expect(inputElement.className).toContain('border-red')
+      }, { timeout: 1000 })
+    })
+
+    it('clears validation state when URL is cleared', async () => {
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({
+        'app.public_url': 'https://example.com',
+      })
+      vi.mocked(client.get).mockResolvedValue({
+        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        const input = screen.getByPlaceholderText('https://charon.example.com') as HTMLInputElement
+        expect(input.value).toBe('https://example.com')
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByPlaceholderText('https://charon.example.com')
+
+      await user.clear(input)
+
+      await waitFor(() => {
+        expect(input.className).not.toContain('border-green-500')
+        expect(input.className).not.toContain('border-red-500')
+      })
+    })
+
+    it('renders test button and verifies functionality', async () => {
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({
+        'app.public_url': 'https://example.com',
+      })
+      vi.mocked(settingsApi.testPublicURL).mockResolvedValue({
+        reachable: true,
+        latency: 42,
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+
+      // Find test button by looking for buttons with External Link icon
+      const buttons = screen.getAllByRole('button')
+      const testButton = buttons.find((btn) => btn.querySelector('.lucide-external-link'))
+      expect(testButton).toBeTruthy()
+      expect(testButton).not.toBeDisabled()
+
+      const user = userEvent.setup()
+      await user.click(testButton!)
+
+      await waitFor(() => {
+        expect(settingsApi.testPublicURL).toHaveBeenCalledWith('https://example.com')
+      })
+    })
+
+    it('disables test button when URL is empty', async () => {
+      vi.mocked(settingsApi.getSettings).mockResolvedValue({
+        'app.public_url': '',
+      })
+
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        const input = screen.getByPlaceholderText('https://charon.example.com') as HTMLInputElement
+        expect(input.value).toBe('')
+      })
+
+      const buttons = screen.getAllByRole('button')
+      const testButton = buttons.find((btn) => btn.querySelector('.lucide-external-link'))
+      expect(testButton).toBeDisabled()
+    })
+
+    it('handles validation API error gracefully', async () => {
+      renderWithProviders(<SystemSettings />)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByPlaceholderText('https://charon.example.com')
+
+      vi.mocked(client.post).mockRejectedValue(new Error('Network error'))
+
+      await user.clear(input)
+      await user.type(input, 'https://example.com')
+
+      await waitFor(() => {
+        const xIcon = document.querySelector('.text-red-500')
+        expect(xIcon).toBeTruthy()
+      }, { timeout: 1000 })
+    })
+  })
+})

frontend/src/pages/__tests__/Uptime.spec.tsx

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import Uptime from '../Uptime'
+import * as uptimeApi from '../../api/uptime'
+
+vi.mock('react-hot-toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() } }))
+vi.mock('../../api/uptime')
+
+const createQueryClient = () => new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } })
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+
+describe('Uptime page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders no monitors message', async () => {
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([])
+    renderWithProviders(<Uptime />)
+    expect(await screen.findByText(/No monitors found/i)).toBeTruthy()
+  })
+
+  it('calls updateMonitor when toggling monitoring', async () => {
+    const monitor = {
+      id: 'm1', name: 'Test Monitor', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3, proxy_host_id: 1,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+    vi.mocked(uptimeApi.updateMonitor).mockResolvedValue({ ...monitor, enabled: false })
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('Test Monitor')).toBeInTheDocument())
+    const card = screen.getByText('Test Monitor').closest('div') as HTMLElement
+    const settingsBtn = within(card).getByTitle('Monitor settings')
+    await userEvent.click(settingsBtn)
+    const toggleBtn = within(card).getByText('Pause')
+    await userEvent.click(toggleBtn)
+    await waitFor(() => expect(uptimeApi.updateMonitor).toHaveBeenCalledWith('m1', { enabled: false }))
+  })
+
+  it('shows Never when last_check is missing', async () => {
+    const monitor = {
+      id: 'm2', name: 'NoLastCheck', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: null, latency: 10, max_retries: 3,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('NoLastCheck')).toBeInTheDocument())
+    const lastCheck = screen.getByText('Never')
+    expect(lastCheck).toBeTruthy()
+  })
+
+  it('shows PAUSED state when monitor is disabled', async () => {
+    const monitor = {
+      id: 'm3', name: 'PausedMonitor', url: 'http://example.com', type: 'http', interval: 60, enabled: false,
+      status: 'down', last_check: new Date().toISOString(), latency: 10, max_retries: 3,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('PausedMonitor')).toBeInTheDocument())
+    expect(screen.getByText('PAUSED')).toBeTruthy()
+  })
+
+  it('renders heartbeat bars from history and displays status in bar titles', async () => {
+    const monitor = {
+      id: 'm4', name: 'WithHistory', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3,
+    }
+    const now = new Date()
+    const history = [
+      { id: 1, monitor_id: 'm4', status: 'up', latency: 10, message: 'OK', created_at: new Date(now.getTime() - 30000).toISOString() },
+      { id: 2, monitor_id: 'm4', status: 'down', latency: 20, message: 'Fail', created_at: new Date(now.getTime() - 20000).toISOString() },
+      { id: 3, monitor_id: 'm4', status: 'up', latency: 5, message: 'OK', created_at: new Date(now.getTime() - 10000).toISOString() },
+    ]
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue(history)
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('WithHistory')).toBeInTheDocument())
+
+    // Bar titles include 'Status:' and the status should be capitalized
+    await waitFor(() => expect(document.querySelectorAll('[title*="Status:"]').length).toBeGreaterThanOrEqual(history.length))
+    const barTitles = Array.from(document.querySelectorAll('[title*="Status:"]'))
+    expect(barTitles.some(el => (el.getAttribute('title') || '').includes('Status: UP'))).toBeTruthy()
+    expect(barTitles.some(el => (el.getAttribute('title') || '').includes('Status: DOWN'))).toBeTruthy()
+  })
+
+  it('pause button is yellow and appears before delete in settings menu', async () => {
+    const monitor = {
+      id: 'm12', name: 'OrderTest', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('OrderTest')).toBeInTheDocument())
+    const card = screen.getByText('OrderTest').closest('div') as HTMLElement
+    await userEvent.click(within(card).getByTitle('Monitor settings'))
+
+    const configureBtn = within(card).getByText('Configure')
+    // Find the menu container by traversing up until the absolute positioned menu is found
+    let menuContainer: HTMLElement | null = configureBtn.parentElement
+    while (menuContainer && !menuContainer.className.includes('absolute')) {
+      menuContainer = menuContainer.parentElement
+    }
+    expect(menuContainer).toBeTruthy()
+    const buttons = Array.from(menuContainer!.querySelectorAll('button'))
+    const pauseBtn = buttons.find(b => b.textContent?.trim() === 'Pause')
+    const deleteBtn = buttons.find(b => b.textContent?.trim() === 'Delete')
+    expect(pauseBtn).toBeTruthy()
+    expect(deleteBtn).toBeTruthy()
+    // Ensure Pause appears before Delete
+    expect(buttons.indexOf(pauseBtn!)).toBeLessThan(buttons.indexOf(deleteBtn!))
+    // Ensure Pause has yellow styling class
+    expect(pauseBtn!.className).toContain('text-yellow-600')
+  })
+
+  it('deletes monitor when delete confirmed and shows toast', async () => {
+    const monitor = {
+      id: 'm5', name: 'DeleteMe', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+    vi.mocked(uptimeApi.deleteMonitor).mockResolvedValue(undefined)
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('DeleteMe')).toBeInTheDocument())
+    const card = screen.getByText('DeleteMe').closest('div') as HTMLElement
+    const settingsBtn = within(card).getByTitle('Monitor settings')
+    await userEvent.click(settingsBtn)
+    const deleteBtn = within(card).getByText('Delete')
+    await userEvent.click(deleteBtn)
+    await waitFor(() => expect(uptimeApi.deleteMonitor).toHaveBeenCalledWith('m5'))
+    confirmSpy.mockRestore()
+  })
+
+  it('opens configure modal and saves changes via updateMonitor', async () => {
+    const monitor = {
+      id: 'm6', name: 'ConfigMe', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3, proxy_host_id: 1,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+    vi.mocked(uptimeApi.updateMonitor).mockResolvedValue({ ...monitor, max_retries: 6 })
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('ConfigMe')).toBeInTheDocument())
+    const card = screen.getByText('ConfigMe').closest('div') as HTMLElement
+    await userEvent.click(within(card).getByTitle('Monitor settings'))
+    await userEvent.click(within(card).getByText('Configure'))
+    // Modal should open
+    await waitFor(() => expect(screen.getByText('Configure Monitor')).toBeInTheDocument())
+    const spinbuttons = screen.getAllByRole('spinbutton')
+    const maxRetriesInput = spinbuttons.find(el => el.getAttribute('value') === '3') as HTMLInputElement
+    await userEvent.clear(maxRetriesInput)
+    await userEvent.type(maxRetriesInput, '6')
+    await userEvent.clear(screen.getByLabelText('Name'))
+    await userEvent.type(screen.getByLabelText('Name'), 'Renamed Monitor')
+    await userEvent.click(screen.getByText('Save Changes'))
+    await waitFor(() => expect(uptimeApi.updateMonitor).toHaveBeenCalledWith('m6', { name: 'Renamed Monitor', max_retries: 6, interval: 60 }))
+  })
+
+  it('does not call deleteMonitor when canceling delete', async () => {
+    const monitor = {
+      id: 'm7', name: 'DoNotDelete', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+    vi.mocked(uptimeApi.deleteMonitor).mockResolvedValue(undefined)
+
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => false)
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('DoNotDelete')).toBeInTheDocument())
+    const card = screen.getByText('DoNotDelete').closest('div') as HTMLElement
+    await userEvent.click(within(card).getByTitle('Monitor settings'))
+    await userEvent.click(within(card).getByText('Delete'))
+    expect(uptimeApi.deleteMonitor).not.toHaveBeenCalled()
+    confirmSpy.mockRestore()
+  })
+
+  it('shows toast error when toggle update fails', async () => {
+    const monitor = {
+      id: 'm8', name: 'ToggleFail', url: 'http://example.com', type: 'http', interval: 60, enabled: true,
+      status: 'up', last_check: new Date().toISOString(), latency: 10, max_retries: 3, proxy_host_id: 1,
+    }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([monitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+    vi.mocked(uptimeApi.updateMonitor).mockRejectedValue(new Error('Update failed'))
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('ToggleFail')).toBeInTheDocument())
+    const card = screen.getByText('ToggleFail').closest('div') as HTMLElement
+    await userEvent.click(within(card).getByTitle('Monitor settings'))
+    await userEvent.click(within(card).getByText('Pause'))
+    const toast = (await import('react-hot-toast')).toast
+    await waitFor(() => expect(toast.error).toHaveBeenCalled())
+  })
+
+  it('separates monitors into Proxy Hosts, Remote Servers and Other sections', async () => {
+    const proxyMonitor = { id: 'm9', name: 'ProxyMon', url: 'http://p', type: 'http', interval: 60, enabled: true, status: 'up', last_check: new Date().toISOString(), latency: 1, max_retries: 2, proxy_host_id: 1 }
+    const remoteMonitor = { id: 'm10', name: 'RemoteMon', url: 'http://r', type: 'http', interval: 60, enabled: true, status: 'up', last_check: new Date().toISOString(), latency: 2, max_retries: 2, remote_server_id: 2 }
+    const otherMonitor = { id: 'm11', name: 'OtherMon', url: 'http://o', type: 'http', interval: 60, enabled: true, status: 'up', last_check: new Date().toISOString(), latency: 3, max_retries: 2 }
+    vi.mocked(uptimeApi.getMonitors).mockResolvedValue([proxyMonitor, remoteMonitor, otherMonitor])
+    vi.mocked(uptimeApi.getMonitorHistory).mockResolvedValue([])
+
+    renderWithProviders(<Uptime />)
+    await waitFor(() => expect(screen.getByText('Proxy Hosts')).toBeInTheDocument())
+    expect(screen.getByText('Remote Servers')).toBeInTheDocument()
+    expect(screen.getByText('Other Monitors')).toBeInTheDocument()
+    expect(screen.getByText('ProxyMon')).toBeInTheDocument()
+    expect(screen.getByText('RemoteMon')).toBeInTheDocument()
+    expect(screen.getByText('OtherMon')).toBeInTheDocument()
+  })
+})

frontend/src/pages/__tests__/UsersPage.test.tsx

@@ -0,0 +1,524 @@
+import { screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import UsersPage from '../UsersPage'
+import * as usersApi from '../../api/users'
+import * as proxyHostsApi from '../../api/proxyHosts'
+import client from '../../api/client'
+import { renderWithQueryClient } from '../../test-utils/renderWithQueryClient'
+import { toast } from '../../utils/toast'
+
+// Mock APIs
+vi.mock('../../api/users', () => ({
+  listUsers: vi.fn(),
+  getUser: vi.fn(),
+  createUser: vi.fn(),
+  inviteUser: vi.fn(),
+  updateUser: vi.fn(),
+  deleteUser: vi.fn(),
+  updateUserPermissions: vi.fn(),
+  validateInvite: vi.fn(),
+  acceptInvite: vi.fn(),
+  previewInviteURL: vi.fn(),
+}))
+
+vi.mock('../../api/proxyHosts', () => ({
+  getProxyHosts: vi.fn(),
+}))
+
+vi.mock('../../api/client', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+  },
+}))
+
+vi.mock('../../utils/toast', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+const mockUsers = [
+  {
+    id: 1,
+    uuid: '123-456',
+    email: 'admin@example.com',
+    name: 'Admin User',
+    role: 'admin' as const,
+    enabled: true,
+    permission_mode: 'allow_all' as const,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: 2,
+    uuid: '789-012',
+    email: 'user@example.com',
+    name: 'Regular User',
+    role: 'user' as const,
+    enabled: true,
+    invite_status: 'accepted' as const,
+    permission_mode: 'allow_all' as const,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: 3,
+    uuid: '345-678',
+    email: 'pending@example.com',
+    name: '',
+    role: 'user' as const,
+    enabled: false,
+    invite_status: 'pending' as const,
+    permission_mode: 'deny_all' as const,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+]
+
+const mockProxyHosts = [
+  {
+    uuid: '1',
+    name: 'Test Host',
+    domain_names: 'test.example.com',
+    forward_scheme: 'http',
+    forward_host: 'localhost',
+    forward_port: 8080,
+    ssl_forced: true,
+    http2_support: true,
+    hsts_enabled: true,
+    hsts_subdomains: false,
+    block_exploits: true,
+    websocket_support: false,
+    application: 'none' as const,
+    locations: [],
+    enabled: true,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+  },
+]
+
+describe('UsersPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue(mockProxyHosts)
+    vi.mocked(toast.success).mockClear()
+    vi.mocked(toast.error).mockClear()
+  })
+
+  it('renders loading state initially', () => {
+    vi.mocked(usersApi.listUsers).mockReturnValue(new Promise(() => {}))
+
+    renderWithQueryClient(<UsersPage />)
+
+    expect(document.querySelector('.animate-spin')).toBeTruthy()
+  })
+
+  it('renders user list', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('User Management')).toBeTruthy()
+    })
+
+    expect(screen.getByText('Admin User')).toBeTruthy()
+    expect(screen.getByText('admin@example.com')).toBeTruthy()
+    expect(screen.getByText('Regular User')).toBeTruthy()
+    expect(screen.getByText('user@example.com')).toBeTruthy()
+  })
+
+  it('shows pending invite status', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Pending Invite')).toBeTruthy()
+    })
+  })
+
+  it('shows active status for accepted users', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Active').length).toBeGreaterThan(0)
+    })
+  })
+
+  it('opens invite modal when clicking invite button', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Invite User')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('user@example.com')).toBeTruthy()
+    })
+  })
+
+  it('shows permission mode in user list', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Blacklist').length).toBeGreaterThan(0)
+    })
+
+    expect(screen.getByText('Whitelist')).toBeTruthy()
+  })
+
+  it('toggles user enabled status', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+    vi.mocked(usersApi.updateUser).mockResolvedValue({ message: 'Updated' })
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Regular User')).toBeTruthy()
+    })
+
+    // Find the switch for the non-admin user and toggle it
+    const switches = screen.getAllByRole('checkbox')
+    // The second switch should be for the regular user (admin switch is disabled)
+    const userSwitch = switches.find(
+      (sw) => !(sw as HTMLInputElement).disabled && (sw as HTMLInputElement).checked
+    )
+
+    if (userSwitch) {
+      const user = userEvent.setup()
+      await user.click(userSwitch)
+
+      await waitFor(() => {
+        expect(usersApi.updateUser).toHaveBeenCalledWith(2, { enabled: false })
+      })
+    }
+  })
+
+  it('invites a new user', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+    vi.mocked(usersApi.inviteUser).mockResolvedValue({
+      id: 4,
+      uuid: 'new-user',
+      email: 'new@example.com',
+      role: 'user',
+      invite_token: 'test-token-123',
+      email_sent: false,
+      expires_at: '2024-01-03T00:00:00Z',
+    })
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Invite User')).toBeTruthy()
+    })
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+    // Wait for modal to open - look for the modal's email input placeholder
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('user@example.com')).toBeTruthy()
+    })
+
+    await user.type(screen.getByPlaceholderText('user@example.com'), 'new@example.com')
+    await user.click(screen.getByRole('button', { name: /Send Invite/i }))
+
+    await waitFor(() => {
+      expect(usersApi.inviteUser).toHaveBeenCalledWith({
+        email: 'new@example.com',
+        role: 'user',
+        permission_mode: 'allow_all',
+        permitted_hosts: [],
+      })
+    })
+  })
+
+  it('deletes a user after confirmation', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+    vi.mocked(usersApi.deleteUser).mockResolvedValue({ message: 'Deleted' })
+
+    // Mock window.confirm
+    const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Regular User')).toBeTruthy()
+    })
+
+    // Find delete buttons (trash icons) - admin user's delete button is disabled
+    const deleteButtons = screen.getAllByTitle('Delete User')
+    // Find the first non-disabled delete button
+    const enabledDeleteButton = deleteButtons.find((btn) => !(btn as HTMLButtonElement).disabled)
+
+    expect(enabledDeleteButton).toBeTruthy()
+
+    const user = userEvent.setup()
+    await user.click(enabledDeleteButton!)
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledWith('Are you sure you want to delete this user?')
+    })
+
+    await waitFor(() => {
+      expect(usersApi.deleteUser).toHaveBeenCalled()
+    })
+
+    confirmSpy.mockRestore()
+  })
+
+  it('updates user permissions from the modal', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+    vi.mocked(usersApi.updateUserPermissions).mockResolvedValue({ message: 'ok' })
+
+    renderWithQueryClient(<UsersPage />)
+
+    await waitFor(() => expect(screen.getByText('Regular User')).toBeInTheDocument())
+
+    const editButtons = screen.getAllByTitle('Edit Permissions')
+    const firstEditable = editButtons.find((btn) => !(btn as HTMLButtonElement).disabled)
+    expect(firstEditable).toBeTruthy()
+
+    const user = userEvent.setup()
+    await user.click(firstEditable!)
+
+    const modal = await screen.findByText(/Edit Permissions/i)
+    const modalContainer = modal.closest('.bg-dark-card') as HTMLElement
+
+    // Switch to whitelist (deny_all) and toggle first host
+    const modeSelect = within(modalContainer).getByDisplayValue('Allow All (Blacklist)')
+    await user.selectOptions(modeSelect, 'deny_all')
+    const checkbox = within(modalContainer).getByLabelText(/Test Host/) as HTMLInputElement
+    expect(checkbox.checked).toBe(false)
+    await user.click(checkbox)
+
+    await user.click(screen.getByRole('button', { name: 'Save Permissions' }))
+
+    await waitFor(() => {
+      expect(usersApi.updateUserPermissions).toHaveBeenCalledWith(2, {
+        permission_mode: 'deny_all',
+        permitted_hosts: expect.arrayContaining([expect.any(Number)]),
+      })
+      expect(toast.success).toHaveBeenCalledWith('Permissions updated')
+    })
+  })
+
+  it('shows manual invite link flow when email is not sent and allows copy', async () => {
+    vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+    vi.mocked(usersApi.inviteUser).mockResolvedValue({
+      id: 5,
+      uuid: 'invitee',
+      email: 'manual@example.com',
+      role: 'user',
+      invite_token: 'token-123',
+      email_sent: false,
+      expires_at: '2025-01-01T00:00:00Z',
+    })
+
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    const originalDescriptor = Object.getOwnPropertyDescriptor(navigator, 'clipboard')
+    Object.defineProperty(navigator, 'clipboard', {
+      get: () => ({ writeText }),
+      configurable: true,
+    })
+
+    renderWithQueryClient(<UsersPage />)
+
+    const user = userEvent.setup()
+    await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+    await user.click(screen.getByRole('button', { name: /Invite User/i }))
+    await user.type(screen.getByPlaceholderText('user@example.com'), 'manual@example.com')
+    await user.click(screen.getByRole('button', { name: /Send Invite/i }))
+
+    await screen.findByDisplayValue(/accept-invite\?token=token-123/)
+    const copyButton = await screen.findByRole('button', { name: /copy invite link/i })
+
+    await user.click(copyButton)
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Invite link copied to clipboard')
+    })
+
+    if (originalDescriptor) {
+      Object.defineProperty(navigator, 'clipboard', originalDescriptor)
+    } else {
+      delete (navigator as unknown as { clipboard?: unknown }).clipboard
+    }
+  })
+
+  describe('URL Preview in InviteModal', () => {
+    it('shows URL preview when valid email is entered', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+      vi.mocked(client.post).mockResolvedValue({
+        data: {
+          preview_url: 'https://charon.example.com/accept-invite?token=SAMPLE_TOKEN_PREVIEW',
+          base_url: 'https://charon.example.com',
+          is_configured: true,
+          warning: false,
+          warning_message: '',
+        },
+      })
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'test@example.com')
+
+      await waitFor(() => {
+        expect(client.post).toHaveBeenCalledWith('/users/preview-invite-url', { email: 'test@example.com' })
+      }, { timeout: 1000 })
+
+      // Look for the preview URL content with ellipsis replacing the token
+      await waitFor(() => {
+        const previewText = screen.getByText(/charon\.example\.com.*accept-invite.*\.\.\./)
+        expect(previewText).toBeTruthy()
+      }, { timeout: 1000 })
+    })
+
+    it('debounces URL preview for 500ms', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+      vi.mocked(client.post).mockResolvedValue({
+        data: {
+          preview_url: 'https://example.com/accept-invite?token=SAMPLE_TOKEN_PREVIEW',
+          base_url: 'https://example.com',
+          is_configured: true,
+          warning: false,
+          warning_message: '',
+        },
+      })
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'test@example.com')
+
+      // Wait 600ms to ensure debounce has completed
+      await new Promise(resolve => setTimeout(resolve, 600))
+
+      await waitFor(() => {
+        expect(client.post).toHaveBeenCalledTimes(1)
+        expect(client.post).toHaveBeenCalledWith('/users/preview-invite-url', { email: 'test@example.com' })
+      }, { timeout: 1000 })
+    })
+
+    it('replaces sample token with ellipsis in preview', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+      vi.mocked(client.post).mockResolvedValue({
+        data: {
+          preview_url: 'https://example.com/accept-invite?token=SAMPLE_TOKEN_PREVIEW',
+          base_url: 'https://example.com',
+          is_configured: true,
+          warning: false,
+          warning_message: '',
+        },
+      })
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'test@example.com')
+
+      await waitFor(() => {
+        const preview = screen.getByText(/example\.com.*accept-invite/)
+        expect(preview.textContent).toContain('...')
+        expect(preview.textContent).not.toContain('SAMPLE_TOKEN_PREVIEW')
+      }, { timeout: 1000 })
+    })
+
+    it('shows warning when not configured', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+      vi.mocked(client.post).mockResolvedValue({
+        data: {
+          preview_url: 'http://localhost:8080/accept-invite?token=SAMPLE_TOKEN_PREVIEW',
+          base_url: 'http://localhost:8080',
+          is_configured: false,
+          warning: true,
+          warning_message: 'Application URL not configured',
+        },
+      })
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'test@example.com')
+
+      await waitFor(() => {
+        // Look for link to system settings
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toContain('/settings/system')
+      }, { timeout: 1000 })
+    })
+
+    it('does not show preview when email is invalid', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'invalid')
+
+      await new Promise(resolve => setTimeout(resolve, 600))
+
+      // Preview should not be fetched or displayed
+      expect(client.post).not.toHaveBeenCalled()
+    })
+
+    it('handles preview API error gracefully', async () => {
+      vi.mocked(usersApi.listUsers).mockResolvedValue(mockUsers)
+      vi.mocked(client.post).mockRejectedValue(new Error('API error'))
+
+      renderWithQueryClient(<UsersPage />)
+
+      const user = userEvent.setup()
+      await waitFor(() => expect(screen.getByText('Invite User')).toBeInTheDocument())
+      await user.click(screen.getByRole('button', { name: /Invite User/i }))
+
+      const emailInput = screen.getByPlaceholderText('user@example.com')
+      await user.type(emailInput, 'test@example.com')
+
+      // Wait for debounce
+      await new Promise(resolve => setTimeout(resolve, 600))
+
+      await waitFor(() => {
+        expect(client.post).toHaveBeenCalledWith('/users/preview-invite-url', { email: 'test@example.com' })
+      }, { timeout: 1000 })
+
+      // Verify preview is not displayed after error
+      const previewQuery = screen.queryByText(/accept-invite/)
+      expect(previewQuery).toBeNull()
+    })
+  })
+})

frontend/src/pages/__tests__/WafConfig.spec.tsx

@@ -0,0 +1,541 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import WafConfig from '../WafConfig'
+import * as securityApi from '../../api/security'
+import type { SecurityRuleSet, RuleSetsResponse } from '../../api/security'
+
+vi.mock('../../api/security')
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactNode) => {
+  const qc = createQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <BrowserRouter>{ui}</BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+const mockRuleSet: SecurityRuleSet = {
+  id: 1,
+  uuid: 'uuid-1',
+  name: 'OWASP CRS',
+  source_url: '',
+  mode: 'blocking',
+  last_updated: '2024-01-15T10:00:00Z',
+  content: 'SecRule REQUEST_URI "@contains /admin" "id:1000,phase:1,deny,status:403"',
+}
+
+describe('WafConfig page', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('shows loading state while fetching rulesets', async () => {
+    // Keep the promise pending to test loading state
+    vi.mocked(securityApi.getRuleSets).mockReturnValue(new Promise(() => {}))
+
+    renderWithProviders(<WafConfig />)
+
+    expect(screen.getByTestId('waf-loading')).toBeInTheDocument()
+    expect(screen.getByText('Loading WAF configuration...')).toBeInTheDocument()
+  })
+
+  it('shows error state when fetch fails', async () => {
+    vi.mocked(securityApi.getRuleSets).mockRejectedValue(new Error('Network error'))
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('waf-error')).toBeInTheDocument()
+    })
+    expect(screen.getByText(/Failed to load WAF configuration/)).toBeInTheDocument()
+    expect(screen.getByText(/Network error/)).toBeInTheDocument()
+  })
+
+  it('shows empty state when no rulesets exist', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('waf-empty-state')).toBeInTheDocument()
+    })
+    expect(screen.getByText('No Rule Sets')).toBeInTheDocument()
+    expect(screen.getByText(/Create your first WAF rule set/)).toBeInTheDocument()
+  })
+
+  it('renders rulesets table when data exists', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+    expect(screen.getByText('OWASP CRS')).toBeInTheDocument()
+    expect(screen.getByText('Blocking')).toBeInTheDocument()
+    expect(screen.getByText('Inline')).toBeInTheDocument()
+  })
+
+  it('shows create form when Add Rule Set button is clicked', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    expect(screen.getByRole('heading', { name: 'Create Rule Set' })).toBeInTheDocument()
+    expect(screen.getByTestId('ruleset-name-input')).toBeInTheDocument()
+    expect(screen.getByTestId('ruleset-content-input')).toBeInTheDocument()
+  })
+
+  it('submits new ruleset and closes form on success', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+    vi.mocked(securityApi.upsertRuleSet).mockResolvedValue({ id: 1 })
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Fill in the form
+    await userEvent.type(screen.getByTestId('ruleset-name-input'), 'Test Rules')
+    await userEvent.type(
+      screen.getByTestId('ruleset-content-input'),
+      'SecRule ARGS "@contains test" "id:1,phase:1,deny"'
+    )
+
+    // Submit
+    const submitBtn = screen.getByRole('button', { name: 'Create Rule Set' })
+    await userEvent.click(submitBtn)
+
+    await waitFor(() => {
+      expect(securityApi.upsertRuleSet).toHaveBeenCalledWith({
+        id: undefined,
+        name: 'Test Rules',
+        source_url: undefined,
+        content: 'SecRule ARGS "@contains test" "id:1,phase:1,deny"',
+        mode: 'blocking',
+      })
+    })
+  })
+
+  it('opens edit form when edit button is clicked', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('edit-ruleset-1'))
+
+    expect(screen.getByText('Edit Rule Set')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('OWASP CRS')).toBeInTheDocument()
+  })
+
+  it('opens delete confirmation dialog and deletes on confirm', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+    vi.mocked(securityApi.deleteRuleSet).mockResolvedValue(undefined)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    // Click delete button
+    await userEvent.click(screen.getByTestId('delete-ruleset-1'))
+
+    // Confirm dialog should appear
+    expect(screen.getByText('Delete Rule Set')).toBeInTheDocument()
+    expect(screen.getByText(/Are you sure you want to delete "OWASP CRS"/)).toBeInTheDocument()
+
+    // Confirm deletion
+    await userEvent.click(screen.getByTestId('confirm-delete-btn'))
+
+    await waitFor(() => {
+      expect(securityApi.deleteRuleSet).toHaveBeenCalledWith(1)
+    })
+  })
+
+  it('cancels delete when clicking cancel button', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    // Click delete button
+    await userEvent.click(screen.getByTestId('delete-ruleset-1'))
+
+    // Click cancel
+    await userEvent.click(screen.getByText('Cancel'))
+
+    // Dialog should be closed
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Rule Set')).not.toBeInTheDocument()
+    })
+    expect(securityApi.deleteRuleSet).not.toHaveBeenCalled()
+  })
+
+  it('cancels delete when clicking backdrop', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    // Click delete button
+    await userEvent.click(screen.getByTestId('delete-ruleset-1'))
+
+    // Click backdrop
+    await userEvent.click(screen.getByTestId('confirm-dialog-backdrop'))
+
+    // Dialog should be closed
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Rule Set')).not.toBeInTheDocument()
+    })
+  })
+
+  it('displays mode correctly for detection-only rulesets', async () => {
+    const detectionRuleset: SecurityRuleSet = {
+      ...mockRuleSet,
+      mode: 'detection',
+    }
+    const response: RuleSetsResponse = { rulesets: [detectionRuleset] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('Detection')).toBeInTheDocument()
+  })
+
+  it('displays URL link when source_url is provided', async () => {
+    const urlRuleset: SecurityRuleSet = {
+      ...mockRuleSet,
+      source_url: 'https://example.com/rules.conf',
+      content: '',
+    }
+    const response: RuleSetsResponse = { rulesets: [urlRuleset] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    const urlLink = screen.getByText('URL')
+    expect(urlLink).toHaveAttribute('href', 'https://example.com/rules.conf')
+    expect(urlLink).toHaveAttribute('target', '_blank')
+  })
+
+  it('validates form - submit disabled without name', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Only add content, no name
+    await userEvent.type(screen.getByTestId('ruleset-content-input'), 'SecRule test')
+
+    const submitBtn = screen.getByRole('button', { name: 'Create Rule Set' })
+    expect(submitBtn).toBeDisabled()
+  })
+
+  it('validates form - submit disabled without content or URL', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Only add name, no content or URL
+    await userEvent.type(screen.getByTestId('ruleset-name-input'), 'Test')
+
+    const submitBtn = screen.getByRole('button', { name: 'Create Rule Set' })
+    expect(submitBtn).toBeDisabled()
+  })
+
+  it('allows form submission with URL instead of content', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+    vi.mocked(securityApi.upsertRuleSet).mockResolvedValue({ id: 1 })
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Add name and URL, no content
+    await userEvent.type(screen.getByTestId('ruleset-name-input'), 'Remote Rules')
+    await userEvent.type(screen.getByTestId('ruleset-url-input'), 'https://example.com/rules.conf')
+
+    const submitBtn = screen.getByRole('button', { name: 'Create Rule Set' })
+    expect(submitBtn).not.toBeDisabled()
+
+    await userEvent.click(submitBtn)
+
+    await waitFor(() => {
+      expect(securityApi.upsertRuleSet).toHaveBeenCalledWith({
+        id: undefined,
+        name: 'Remote Rules',
+        source_url: 'https://example.com/rules.conf',
+        content: undefined,
+        mode: 'blocking',
+      })
+    })
+  })
+
+  it('toggles between blocking and detection mode', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+    vi.mocked(securityApi.upsertRuleSet).mockResolvedValue({ id: 1 })
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Fill required fields
+    await userEvent.type(screen.getByTestId('ruleset-name-input'), 'Test')
+    await userEvent.type(screen.getByTestId('ruleset-content-input'), 'SecRule test')
+
+    // Select detection mode
+    await userEvent.click(screen.getByTestId('mode-detection'))
+
+    // Verify mode description changed
+    expect(screen.getByText(/Malicious requests will be logged but not blocked/)).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Create Rule Set' }))
+
+    await waitFor(() => {
+      expect(securityApi.upsertRuleSet).toHaveBeenCalledWith(
+        expect.objectContaining({ mode: 'detection' })
+      )
+    })
+  })
+
+  it('hides form when cancel is clicked', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+    expect(screen.getByRole('heading', { name: 'Create Rule Set' })).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    // Form should be hidden, empty state visible
+    await waitFor(() => {
+      expect(screen.getByTestId('waf-empty-state')).toBeInTheDocument()
+    })
+  })
+
+  it('updates existing ruleset correctly', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+    vi.mocked(securityApi.upsertRuleSet).mockResolvedValue({ id: 1 })
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    // Open edit form
+    await userEvent.click(screen.getByTestId('edit-ruleset-1'))
+
+    // Update name
+    const nameInput = screen.getByTestId('ruleset-name-input')
+    await userEvent.clear(nameInput)
+    await userEvent.type(nameInput, 'Updated CRS')
+
+    // Submit
+    await userEvent.click(screen.getByText('Update Rule Set'))
+
+    await waitFor(() => {
+      expect(securityApi.upsertRuleSet).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 1,
+          name: 'Updated CRS',
+        })
+      )
+    })
+  })
+
+  it('opens delete from edit form', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    // Open edit form
+    await userEvent.click(screen.getByTestId('edit-ruleset-1'))
+
+    // Click delete button in edit form header
+    const deleteBtn = screen.getByRole('button', { name: /delete/i })
+    await userEvent.click(deleteBtn)
+
+    // Confirm dialog should appear
+    expect(screen.getByText('Delete Rule Set')).toBeInTheDocument()
+  })
+
+  it('counts rules correctly in table', async () => {
+    const multiRuleSet: SecurityRuleSet = {
+      ...mockRuleSet,
+      content: `SecRule ARGS "@contains test1" "id:1,phase:1,deny"
+SecRule ARGS "@contains test2" "id:2,phase:1,deny"
+SecRule ARGS "@contains test3" "id:3,phase:1,deny"`,
+    }
+    const response: RuleSetsResponse = { rulesets: [multiRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('3 rule(s)')).toBeInTheDocument()
+  })
+
+  it('shows preset dropdown when creating new ruleset', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    expect(screen.getByTestId('preset-select')).toBeInTheDocument()
+    expect(screen.getByText('Choose a preset...')).toBeInTheDocument()
+  })
+
+  it('auto-fills form when preset is selected', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Select OWASP CRS preset
+    const presetSelect = screen.getByTestId('preset-select')
+    await userEvent.selectOptions(presetSelect, 'OWASP Core Rule Set')
+
+    // Verify form is auto-filled
+    expect(screen.getByTestId('ruleset-name-input')).toHaveValue('OWASP Core Rule Set')
+    expect(screen.getByTestId('ruleset-url-input')).toHaveValue(
+      'https://github.com/coreruleset/coreruleset/archive/refs/tags/v3.3.5.tar.gz'
+    )
+  })
+
+  it('auto-fills content for inline preset', async () => {
+    const response: RuleSetsResponse = { rulesets: [] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('create-ruleset-btn')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('create-ruleset-btn'))
+
+    // Select SQL Injection preset (has inline content)
+    const presetSelect = screen.getByTestId('preset-select')
+    await userEvent.selectOptions(presetSelect, 'Basic SQL Injection Protection')
+
+    // Verify content is auto-filled
+    const contentInput = screen.getByTestId('ruleset-content-input') as HTMLTextAreaElement
+    expect(contentInput.value).toContain('SecRule')
+    expect(contentInput.value).toContain('SQLi')
+  })
+
+  it('does not show preset dropdown when editing', async () => {
+    const response: RuleSetsResponse = { rulesets: [mockRuleSet] }
+    vi.mocked(securityApi.getRuleSets).mockResolvedValue(response)
+
+    renderWithProviders(<WafConfig />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('rulesets-table')).toBeInTheDocument()
+    })
+
+    await userEvent.click(screen.getByTestId('edit-ruleset-1'))
+
+    // Preset dropdown should not be visible when editing
+    expect(screen.queryByTestId('preset-select')).not.toBeInTheDocument()
+  })
+})