diff --git a/docs/KNOWN_ISSUES.md b/docs/KNOWN_ISSUES.md
index ed28b9a494..a566370f5f 100644
--- a/docs/KNOWN_ISSUES.md
+++ b/docs/KNOWN_ISSUES.md
@@ -18,3 +18,24 @@
   on a document-level `pointerdown` outside it.
 - Affected files: src/ui/components/SettingsView/settingRowHover.ts and any row using
   Fuselage `Select`.
+
+## RTL auto-cleanup vs manual `document.body.innerHTML = ''` in `afterEach` orphans portal anchors
+- Status: Confirmed (RTL 14.3.1, @kayahr/jest-electron-runner, single shared `src/.jest/setup.ts`).
+- Symptom: A renderer spec that renders a portal/anchor component (e.g. TooltipProvider ->
+  TooltipPortal -> createAnchor's `#tooltip-root`) crashes the ENTIRE `yarn test:coverage` run with
+  `process.exit(1)` from `src/.jest/setup.ts` (uncaughtException handler), stack originating in
+  React `safelyCallDestroy` / `commitPassiveUnmountInsideDeletedTreeOnFiber`. The thrown error is
+  `NotFoundError: The node to be removed is not a child of this node` from
+  `document.body.removeChild(a)` in `src/ui/components/utils/createAnchor.ts`.
+- Root cause: A spec adds `afterEach(() => { document.body.innerHTML = ''; })`. Jest runs afterEach
+  hooks LIFO; RTL's auto-cleanup `afterEach(cleanup)` is registered at import time so it runs LAST.
+  The manual `innerHTML=''` runs FIRST and removes body-appended portal anchors WITHOUT going through
+  their `deleteAnchor`/effect-cleanup path. RTL `cleanup()` then unmounts the React tree, the portal's
+  unmount effect calls `removeChild` on the already-detached node, and it throws. Because the shared
+  setup converts any uncaughtException into `process.exit(1)`, one orphaned anchor kills the whole run.
+- Workaround / rule: Do NOT manually wipe `document.body.innerHTML` in renderer-spec `afterEach`. RTL
+  auto-cleanup already unmounts the React tree and lets components remove their own anchors. If a test
+  needs a clean body, call the render result's `unmount()` explicitly instead.
+- Affected files: src/ui/components/utils/TooltipProvider.spec.tsx,
+  src/ui/components/utils/ReparentingContainer.spec.tsx, src/ui/components/utils/createAnchor.ts,
+  src/ui/components/utils/TooltipPortal.tsx, src/.jest/setup.ts.
diff --git a/jest.config.js b/jest.config.js
index 85d23d1884..d5643ec555 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,10 +12,10 @@ module.exports = {
   coveragePathIgnorePatterns: ['/node_modules/', '/app/', '/dist/'],
   coverageThreshold: {
     global: {
-      lines: 25,
-      statements: 25,
-      branches: 22,
-      functions: 18,
+      lines: 32,
+      statements: 32,
+      branches: 28,
+      functions: 26,
     },
   },
   projects: [
diff --git a/package.json b/package.json
index 0afe8910ed..3ba992b8f2 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,10 @@
     "@rollup/plugin-json": "~6.1.0",
     "@rollup/plugin-node-resolve": "~15.2.3",
     "@rollup/plugin-replace": "~5.0.5",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/archiver": "~7.0.0",
     "@types/dompurify": "~3.2.0",
     "@types/electron-devtools-installer": "~2.2.5",
diff --git a/src/.jest/setup.ts b/src/.jest/setup.ts
index 80474ce76e..d9685faae6 100644
--- a/src/.jest/setup.ts
+++ b/src/.jest/setup.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 
+import '@testing-library/jest-dom';
 import { app } from 'electron';
 
 expect.extend({
diff --git a/src/jest-dom.d.ts b/src/jest-dom.d.ts
new file mode 100644
index 0000000000..4db929ad4a
--- /dev/null
+++ b/src/jest-dom.d.ts
@@ -0,0 +1,22 @@
+// Registers @testing-library/jest-dom matcher types on jest's global
+// `expect` for type-checking (`tsc --noEmit`). The package ships the same
+// augmentation, but it is only reachable through a nested triple-slash
+// reference that TypeScript does not propagate under this project's classic
+// `node` module resolution. It also cannot live under `src/.jest/`, because
+// TypeScript excludes dot-prefixed directories from the compilation program.
+// The matching runtime side-effect import lives in `src/.jest/setup.ts`.
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    // The signature must mirror @types/jest's `Matchers<R, T = {}>` exactly so
+    // the declarations merge; renaming or retyping the parameters breaks it.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/ban-types
+    interface Matchers<R = void, T = {}>
+      extends TestingLibraryMatchers<
+        ReturnType<typeof expect.stringContaining>,
+        R
+      > {}
+  }
+}
diff --git a/src/logging/main/index.main.spec.ts b/src/logging/main/index.main.spec.ts
index e53b5e846a..d796bbc82b 100644
--- a/src/logging/main/index.main.spec.ts
+++ b/src/logging/main/index.main.spec.ts
@@ -127,7 +127,10 @@ const loadModule = (): typeof LoggingModule => {
 describe('logging/index', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest.useRealTimers();
+    // Fake timers so the error-buffer flush setInterval scheduled by
+    // configureLogging() is a fake (non-ref'd) handle rather than a real timer
+    // that would keep the process alive and block jest --forceExit.
+    jest.useFakeTimers();
     fakeLog = makeFakeLog(true);
     selectImpl = jest.fn(() => false);
     watchImpl = jest.fn();
@@ -141,6 +144,15 @@ describe('logging/index', () => {
 
   afterEach(() => {
     setProcessType(originalProcessType);
+    // configureLogging() schedules a real, ref'd setInterval (the error-buffer
+    // flush timer) on every module load. It is only cleared on 'before-quit',
+    // which most tests never fire — left alone, each load leaks a live timer
+    // that keeps the libuv loop alive and blocks jest --forceExit. Switching to
+    // fake timers in beforeEach makes that interval a fake handle, and
+    // clearAllTimers here disposes it.
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    jest.restoreAllMocks();
   });
 
   describe('configureLogging at import (main / browser process)', () => {
diff --git a/src/screenSharing/main/ScreenSharingRequestTracker.main.spec.ts b/src/screenSharing/main/ScreenSharingRequestTracker.main.spec.ts
index f849786c55..2d9529d687 100644
--- a/src/screenSharing/main/ScreenSharingRequestTracker.main.spec.ts
+++ b/src/screenSharing/main/ScreenSharingRequestTracker.main.spec.ts
@@ -41,11 +41,20 @@ const getRegisteredListener = (): ResponseListener => {
 
 beforeEach(() => {
   jest.clearAllMocks();
+  // Every createRequest() schedules a real setTimeout (default 60s). Tests that
+  // neither fire the response listener nor call cleanup would leak a live,
+  // ref'd timer that keeps the process alive and blocks jest --forceExit. Fake
+  // timers make those handles fake; clearAllTimers in afterEach disposes them.
+  // setImmediate is left real so flushPromises() (used by the async response
+  // listener tests) still resolves without manual timer advancement.
+  jest.useFakeTimers({ doNotFake: ['setImmediate'] });
   jest.spyOn(console, 'warn').mockImplementation(() => undefined);
   jest.spyOn(console, 'error').mockImplementation(() => undefined);
 });
 
 afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
   jest.restoreAllMocks();
 });
 
diff --git a/src/screenSharing/main/desktopCapturerCache.main.spec.ts b/src/screenSharing/main/desktopCapturerCache.main.spec.ts
index 4806ac7727..c759ab3b74 100644
--- a/src/screenSharing/main/desktopCapturerCache.main.spec.ts
+++ b/src/screenSharing/main/desktopCapturerCache.main.spec.ts
@@ -58,6 +58,10 @@ describe('screenSharing/desktopCapturerCache', () => {
   });
 
   afterEach(() => {
+    // The module schedules no timers of its own, but two tests opt into fake
+    // timers; clear any pending fake handle before restoring real timers so
+    // nothing survives into the next test or blocks jest --forceExit.
+    jest.clearAllTimers();
     jest.useRealTimers();
     clearDesktopCapturerCache();
   });
diff --git a/src/ui/components/AddServerView/index.spec.tsx b/src/ui/components/AddServerView/index.spec.tsx
new file mode 100644
index 0000000000..c755b1b0e5
--- /dev/null
+++ b/src/ui/components/AddServerView/index.spec.tsx
@@ -0,0 +1,192 @@
+import { AddServerView } from '.';
+import { ServerUrlResolutionStatus } from '../../../servers/common';
+import { ADD_SERVER_VIEW_SERVER_ADDED } from '../../actions';
+import {
+  renderWithStore,
+  screen,
+  userEvent,
+  fireEvent,
+  waitFor,
+} from '../../test-utils';
+
+// Under the jest-electron renderer, `userEvent.type` mutates the DOM input but
+// React's controlled-input value tracker does not pick the change up, so the
+// component's `useState` value (and therefore the submit handler) never sees the
+// typed text. `fireEvent.change` dispatches a native change event that React's
+// value tracker does recognise, faithfully driving `onChange` -> `setInput`.
+const typeUrl = (value: string): void => {
+  fireEvent.change(screen.getByRole('textbox'), { target: { value } });
+};
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+const mockRequest = jest.fn();
+
+jest.mock('../../../store', () => ({
+  request: (...args: unknown[]) => mockRequest(...args),
+}));
+
+const defaultServerHref = 'https://open.rocket.chat/';
+
+const visibleState = { currentView: 'add-new-server' } as any;
+
+beforeEach(() => {
+  mockDispatch.mockClear();
+  mockRequest.mockReset();
+  // jsdom defaults navigator.onLine to true; assert it explicitly.
+  Object.defineProperty(navigator, 'onLine', {
+    configurable: true,
+    value: true,
+  });
+});
+
+describe('AddServerView', () => {
+  it('renders nothing when the current view is not add-new-server', () => {
+    const { container } = renderWithStore(<AddServerView />, {
+      preloadedState: { currentView: 'add-new-server-disabled' } as any,
+    });
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  describe('online', () => {
+    it('renders the url input and connect button', () => {
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      expect(screen.getByText('landing.inputUrl')).toBeInTheDocument();
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'landing.connect' })
+      ).toBeInTheDocument();
+    });
+
+    it('adds the default server when submitting an empty input', async () => {
+      const user = userEvent.setup();
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      await user.click(screen.getByRole('button', { name: 'landing.connect' }));
+
+      expect(mockRequest).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: ADD_SERVER_VIEW_SERVER_ADDED,
+        payload: defaultServerHref,
+      });
+    });
+
+    it('resolves a typed url and dispatches the resolved server on success', async () => {
+      const user = userEvent.setup();
+      mockRequest.mockResolvedValue([
+        'https://chat.example.com/',
+        ServerUrlResolutionStatus.OK,
+      ]);
+
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      typeUrl('chat.example.com');
+      await user.click(screen.getByRole('button', { name: 'landing.connect' }));
+
+      await waitFor(() =>
+        expect(mockDispatch).toHaveBeenCalledWith({
+          type: ADD_SERVER_VIEW_SERVER_ADDED,
+          payload: 'https://chat.example.com/',
+        })
+      );
+
+      expect(mockRequest).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows an invalid-url error when resolution fails', async () => {
+      const user = userEvent.setup();
+      mockRequest.mockResolvedValue([
+        'bad-url',
+        ServerUrlResolutionStatus.INVALID_URL,
+      ]);
+
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      typeUrl('bad-url');
+      await user.click(screen.getByRole('button', { name: 'landing.connect' }));
+
+      expect(
+        await screen.findByText('error.noValidServerFound')
+      ).toBeInTheDocument();
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('shows a timeout error when resolution times out', async () => {
+      const user = userEvent.setup();
+      mockRequest.mockResolvedValue([
+        'https://slow.example.com/',
+        ServerUrlResolutionStatus.TIMEOUT,
+      ]);
+
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      typeUrl('slow.example.com');
+      await user.click(screen.getByRole('button', { name: 'landing.connect' }));
+
+      expect(
+        await screen.findByText('error.connectTimeout')
+      ).toBeInTheDocument();
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('clears the validation error when the input is edited again', async () => {
+      const user = userEvent.setup();
+      mockRequest.mockResolvedValue([
+        'bad-url',
+        ServerUrlResolutionStatus.INVALID,
+      ]);
+
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      typeUrl('bad-url');
+      await user.click(screen.getByRole('button', { name: 'landing.connect' }));
+
+      expect(
+        await screen.findByText('error.noValidServerFound')
+      ).toBeInTheDocument();
+
+      // Editing the input again resets the validation state and clears the error.
+      typeUrl('bad-urlx');
+
+      await waitFor(() =>
+        expect(
+          screen.queryByText('error.noValidServerFound')
+        ).not.toBeInTheDocument()
+      );
+    });
+  });
+
+  describe('offline', () => {
+    it('shows the offline callout instead of the form', () => {
+      Object.defineProperty(navigator, 'onLine', {
+        configurable: true,
+        value: false,
+      });
+
+      renderWithStore(<AddServerView />, { preloadedState: visibleState });
+
+      expect(screen.getByText('error.offline')).toBeInTheDocument();
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/ui/components/ClearCacheDialog/index.spec.tsx b/src/ui/components/ClearCacheDialog/index.spec.tsx
new file mode 100644
index 0000000000..51d492bf04
--- /dev/null
+++ b/src/ui/components/ClearCacheDialog/index.spec.tsx
@@ -0,0 +1,158 @@
+import { ClearCacheDialog } from '.';
+import {
+  CLEAR_CACHE_DIALOG_DELETE_LOGIN_DATA_CLICKED,
+  CLEAR_CACHE_DIALOG_DISMISSED,
+  CLEAR_CACHE_DIALOG_KEEP_LOGIN_DATA_CLICKED,
+  CLEAR_CACHE_TRIGGERED,
+} from '../../actions';
+import { renderWithStore, screen, userEvent, act } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+// `listen` registers a callback per action type. Capture them so the test can
+// drive the dialog's local state (visibility + webContents id) by invoking the
+// registered listener, mirroring how the real store dispatches actions.
+const listeners = new Map<string, (action: unknown) => void>();
+
+jest.mock('../../../store', () => ({
+  listen: (type: string, listener: (action: unknown) => void) => {
+    listeners.set(type, listener);
+    return () => listeners.delete(type);
+  },
+}));
+
+const triggerOpen = (webContentsId = 7) => {
+  act(() => {
+    listeners.get(CLEAR_CACHE_TRIGGERED)?.({
+      type: CLEAR_CACHE_TRIGGERED,
+      payload: webContentsId,
+    });
+  });
+};
+
+describe('ClearCacheDialog', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    listeners.clear();
+    // The component's clearingCacheState() schedules a 2s `setTimeout` that
+    // updates state after the clear. Under real timers that callback fires
+    // after RTL's auto-unmount, updating an unmounted tree and triggering the
+    // global `uncaughtException` -> `process.exit(1)` in src/.jest/setup.ts,
+    // which kills the whole suite. Fake timers keep the 2s callback from ever
+    // firing for real.
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    // Drop any pending timers BEFORE RTL cleanup unmounts the tree, then
+    // restore real timers so nothing leaks into the next test.
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders the announcement, title and message', () => {
+    renderWithStore(<ClearCacheDialog />);
+
+    expect(
+      screen.getByText('dialog.clearCache.announcement')
+    ).toBeInTheDocument();
+    expect(screen.getByText('dialog.clearCache.title')).toBeInTheDocument();
+    expect(screen.getByText('dialog.clearCache.message')).toBeInTheDocument();
+  });
+
+  it('renders the keep, delete and cancel buttons', () => {
+    renderWithStore(<ClearCacheDialog />);
+
+    expect(
+      screen.getByText('dialog.clearCache.keepLoginData')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('dialog.clearCache.deleteLoginData')
+    ).toBeInTheDocument();
+    expect(screen.getByText('dialog.clearCache.cancel')).toBeInTheDocument();
+  });
+
+  it('does not dispatch keep/delete before a webContents id is known', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    renderWithStore(<ClearCacheDialog />);
+
+    await user.click(screen.getByText('dialog.clearCache.keepLoginData'));
+
+    expect(mockDispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: CLEAR_CACHE_DIALOG_KEEP_LOGIN_DATA_CLICKED,
+      })
+    );
+  });
+
+  it('dispatches keep-login-data with the triggered webContents id', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    renderWithStore(<ClearCacheDialog />);
+
+    triggerOpen(7);
+    await user.click(screen.getByText('dialog.clearCache.keepLoginData'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: CLEAR_CACHE_DIALOG_KEEP_LOGIN_DATA_CLICKED,
+      payload: 7,
+    });
+  });
+
+  it('dispatches delete-login-data with the triggered webContents id', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    renderWithStore(<ClearCacheDialog />);
+
+    triggerOpen(9);
+    await user.click(screen.getByText('dialog.clearCache.deleteLoginData'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: CLEAR_CACHE_DIALOG_DELETE_LOGIN_DATA_CLICKED,
+      payload: 9,
+    });
+  });
+
+  it('dispatches dismissed from the cancel button', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    renderWithStore(<ClearCacheDialog />);
+
+    triggerOpen();
+    await user.click(screen.getByText('dialog.clearCache.cancel'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: CLEAR_CACHE_DIALOG_DISMISSED,
+    });
+  });
+
+  it('shows the clearing throbber and hides the buttons after confirming', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    renderWithStore(<ClearCacheDialog />);
+
+    triggerOpen();
+    await user.click(screen.getByText('dialog.clearCache.keepLoginData'));
+
+    expect(
+      screen.getByText('dialog.clearCache.clearingWait')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('dialog.clearCache.keepLoginData')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/ui/components/DownloadsManagerView/DownloadItem.spec.tsx b/src/ui/components/DownloadsManagerView/DownloadItem.spec.tsx
new file mode 100644
index 0000000000..6a81051834
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/DownloadItem.spec.tsx
@@ -0,0 +1,201 @@
+import { invoke } from '../../../ipc/renderer';
+import { renderWithStore, screen, userEvent } from '../../test-utils';
+import DownloadItem from './DownloadItem';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: {
+      language: 'en',
+      changeLanguage: jest.fn(),
+      format: (value: unknown, format: string) => `${format}:${value}`,
+    },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+jest.mock('../../../ipc/renderer', () => ({
+  invoke: jest.fn(),
+}));
+
+const invokeMock = invoke as jest.MockedFunction<typeof invoke>;
+
+const baseDownload = {
+  itemId: 42,
+  status: 'All' as const,
+  fileName: 'report.pdf',
+  receivedBytes: 500,
+  totalBytes: 1000,
+  startTime: 0,
+  endTime: 1000,
+  url: 'https://example.com/report.pdf',
+  serverUrl: 'https://chat.example.com',
+  serverTitle: 'Example Server',
+  savePath: '/downloads/report.pdf',
+  mimeType: 'application/pdf',
+};
+
+const renderItem = (overrides: Record<string, unknown> = {}) =>
+  renderWithStore(<DownloadItem {...(baseDownload as any)} {...overrides} />);
+
+beforeEach(() => {
+  invokeMock.mockClear();
+});
+
+describe('DownloadItem', () => {
+  it('renders the file name and server title', () => {
+    renderItem({ state: 'progressing' });
+
+    expect(screen.getByText('report.pdf')).toBeInTheDocument();
+    expect(screen.getByText('Example Server')).toBeInTheDocument();
+  });
+
+  it('renders the file icon label from the extension', () => {
+    renderItem({ state: 'progressing' });
+
+    expect(screen.getByAltText('pdf')).toBeInTheDocument();
+  });
+
+  describe('progressing state', () => {
+    it('shows copy link, pause and cancel actions', () => {
+      renderItem({ state: 'progressing' });
+
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.copyLink' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.pause' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.cancel' })
+      ).toBeInTheDocument();
+    });
+
+    it('invokes downloads/pause and downloads/cancel with the item id', async () => {
+      renderItem({ state: 'progressing' });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.pause' })
+      );
+      expect(invokeMock).toHaveBeenCalledWith('downloads/pause', 42);
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.cancel' })
+      );
+      expect(invokeMock).toHaveBeenCalledWith('downloads/cancel', 42);
+    });
+
+    it('invokes downloads/copy-link when copy link is clicked', async () => {
+      renderItem({ state: 'progressing' });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.copyLink' })
+      );
+
+      expect(invokeMock).toHaveBeenCalledWith('downloads/copy-link', 42);
+    });
+  });
+
+  describe('paused state', () => {
+    it('shows resume and cancel actions', () => {
+      renderItem({ state: 'paused' });
+
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.resume' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.cancel' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'downloads.item.pause' })
+      ).not.toBeInTheDocument();
+    });
+
+    it('invokes downloads/resume when resume is clicked', async () => {
+      renderItem({ state: 'paused' });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.resume' })
+      );
+
+      expect(invokeMock).toHaveBeenCalledWith('downloads/resume', 42);
+    });
+  });
+
+  describe('completed state', () => {
+    it('shows show in folder and remove actions', () => {
+      renderItem({ state: 'completed', receivedBytes: 1000 });
+
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.showInFolder' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.remove' })
+      ).toBeInTheDocument();
+    });
+
+    it('invokes downloads/show-in-folder and downloads/remove', async () => {
+      renderItem({ state: 'completed', receivedBytes: 1000 });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.showInFolder' })
+      );
+      expect(invokeMock).toHaveBeenCalledWith('downloads/show-in-folder', 42);
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.remove' })
+      );
+      expect(invokeMock).toHaveBeenCalledWith('downloads/remove', 42);
+    });
+  });
+
+  describe('errored state', () => {
+    it.each(['interrupted', 'cancelled'])(
+      'shows retry and remove actions when %s',
+      (state) => {
+        renderItem({ state });
+
+        expect(
+          screen.getByRole('button', { name: 'downloads.item.retry' })
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole('button', { name: 'downloads.item.remove' })
+        ).toBeInTheDocument();
+      }
+    );
+
+    it('invokes downloads/retry when retry is clicked', async () => {
+      renderItem({ state: 'interrupted' });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.retry' })
+      );
+
+      expect(invokeMock).toHaveBeenCalledWith('downloads/retry', 42);
+    });
+  });
+
+  describe('expired state', () => {
+    it('shows only a remove action and no copy link', () => {
+      renderItem({ state: 'expired' });
+
+      expect(
+        screen.getByRole('button', { name: 'downloads.item.remove' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'downloads.item.copyLink' })
+      ).not.toBeInTheDocument();
+    });
+
+    it('invokes downloads/remove when remove is clicked', async () => {
+      renderItem({ state: 'expired' });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'downloads.item.remove' })
+      );
+
+      expect(invokeMock).toHaveBeenCalledWith('downloads/remove', 42);
+    });
+  });
+});
diff --git a/src/ui/components/DownloadsManagerView/index.spec.tsx b/src/ui/components/DownloadsManagerView/index.spec.tsx
new file mode 100644
index 0000000000..941de809e6
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/index.spec.tsx
@@ -0,0 +1,209 @@
+import DownloadsManagerView from '.';
+import type { Download } from '../../../downloads/common';
+import { DOWNLOADS_BACK_BUTTON_CLICKED } from '../../actions';
+import { renderWithStore, screen, userEvent } from '../../test-utils';
+
+// The filter values are persisted through fuselage's `useLocalStorage`, which
+// is backed by `useSyncExternalStore` + a module-level event emitter. Under the
+// jest-electron renderer that subscription does not re-render the component when
+// the value is written at runtime, so typing into the search box updates the DOM
+// input but never the React state the list filters on. Seeding the persisted
+// value before render reproduces the production filter behaviour deterministically
+// (the hook reads its initial value straight from localStorage on mount). The key
+// prefix is fuselage's internal `fuselage-localStorage-<key>` format.
+const seedFilter = (key: string, value: string): void => {
+  window.localStorage.setItem(
+    `fuselage-localStorage-${key}`,
+    JSON.stringify(value)
+  );
+};
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('../../../store', () => ({
+  dispatch: (action: unknown) => mockDispatch(action),
+}));
+
+// Stub the child item so the list renders cheaply and is easy to assert on.
+jest.mock('./DownloadItem', () => ({
+  __esModule: true,
+  default: ({ itemId, fileName }: { itemId: number; fileName: string }) => (
+    <div data-testid={`download-item-${itemId}`}>{fileName}</div>
+  ),
+}));
+
+const baseDownload: Download = {
+  itemId: 1,
+  state: 'completed',
+  status: 'All',
+  fileName: 'alpha.pdf',
+  receivedBytes: 1000,
+  totalBytes: 1000,
+  startTime: 0,
+  endTime: 1000,
+  url: 'https://example.com/alpha.pdf',
+  serverUrl: 'https://chat.example.com',
+  serverTitle: 'Example Server',
+  savePath: '/downloads/alpha.pdf',
+  mimeType: 'application/pdf',
+};
+
+const makeDownload = (overrides: Partial<Download>): Download => ({
+  ...baseDownload,
+  ...overrides,
+});
+
+const visibleState = {
+  currentView: 'downloads',
+  isSideBarEnabled: false,
+  lastSelectedServerUrl: 'https://chat.example.com',
+  downloads: {},
+} as any;
+
+beforeEach(() => {
+  mockDispatch.mockClear();
+  window.localStorage.clear();
+});
+
+describe('DownloadsManagerView', () => {
+  it('renders the title', () => {
+    renderWithStore(<DownloadsManagerView />, {
+      preloadedState: visibleState,
+    });
+
+    expect(screen.getByText('downloads.title')).toBeInTheDocument();
+  });
+
+  describe('empty state', () => {
+    it('shows the empty title and subtitle when there are no downloads', () => {
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: { ...visibleState, downloads: {} },
+      });
+
+      expect(screen.getByText('downloads.empty.title')).toBeInTheDocument();
+      expect(screen.getByText('downloads.empty.subtitle')).toBeInTheDocument();
+    });
+  });
+
+  describe('populated state', () => {
+    const populatedState = {
+      ...visibleState,
+      downloads: {
+        1: makeDownload({ itemId: 1, fileName: 'alpha.pdf' }),
+        2: makeDownload({ itemId: 2, fileName: 'beta.png' }),
+      },
+    } as any;
+
+    it('renders one item per download', () => {
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: populatedState,
+      });
+
+      expect(screen.getByTestId('download-item-1')).toBeInTheDocument();
+      expect(screen.getByTestId('download-item-2')).toBeInTheDocument();
+      expect(screen.getByText('alpha.pdf')).toBeInTheDocument();
+      expect(screen.getByText('beta.png')).toBeInTheDocument();
+    });
+
+    it('does not show the empty state when there are downloads', () => {
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: populatedState,
+      });
+
+      expect(
+        screen.queryByText('downloads.empty.title')
+      ).not.toBeInTheDocument();
+    });
+
+    it('filters the list by the search input (file name substring)', () => {
+      seedFilter('download-search', 'beta');
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: populatedState,
+      });
+
+      const search = screen.getByLabelText(
+        'downloads.filters.search'
+      ) as HTMLInputElement;
+      expect(search.value).toBe('beta');
+      expect(screen.queryByTestId('download-item-1')).not.toBeInTheDocument();
+      expect(screen.getByTestId('download-item-2')).toBeInTheDocument();
+    });
+
+    it('shows the no-results state when search matches nothing', () => {
+      seedFilter('download-search', 'zzz-nomatch');
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: populatedState,
+      });
+
+      expect(screen.getByText('downloads.noResults.title')).toBeInTheDocument();
+      expect(screen.queryByTestId('download-item-1')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('download-item-2')).not.toBeInTheDocument();
+    });
+
+    it('clears the search filter when the clear-all button is clicked', async () => {
+      const user = userEvent.setup();
+      renderWithStore(<DownloadsManagerView />, {
+        preloadedState: populatedState,
+      });
+
+      const search = screen.getByLabelText(
+        'downloads.filters.search'
+      ) as HTMLInputElement;
+      await user.type(search, 'beta');
+      expect(search.value).toBe('beta');
+
+      await user.click(
+        screen.getByRole('button', { name: 'downloads.filters.clear' })
+      );
+
+      expect(search.value).toBe('');
+      expect(screen.getByTestId('download-item-1')).toBeInTheDocument();
+      expect(screen.getByTestId('download-item-2')).toBeInTheDocument();
+    });
+  });
+
+  describe('back button', () => {
+    // The back IconButton renders only its `arrow-back` icon with no `title` /
+    // `aria-label`, so it has no accessible name and cannot be queried by role
+    // name. It is located through the rendered icon's button ancestor instead.
+    // (Component a11y gap: the back button should expose an accessible label —
+    // flagged, not changed here.)
+    const getBackButton = (container: HTMLElement): HTMLButtonElement | null =>
+      container
+        .querySelector('.rcx-icon--name-arrow-back')
+        ?.closest('button') ?? null;
+
+    it('renders the back button and dispatches on click when the sidebar is disabled', async () => {
+      const user = userEvent.setup();
+      const { container } = renderWithStore(<DownloadsManagerView />, {
+        preloadedState: { ...visibleState, isSideBarEnabled: false },
+      });
+
+      const backButton = getBackButton(container);
+      expect(backButton).not.toBeNull();
+      await user.click(backButton as HTMLButtonElement);
+
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: DOWNLOADS_BACK_BUTTON_CLICKED,
+        payload: 'https://chat.example.com',
+      });
+    });
+
+    it('hides the back button when the sidebar is enabled', () => {
+      const { container } = renderWithStore(<DownloadsManagerView />, {
+        preloadedState: { ...visibleState, isSideBarEnabled: true },
+      });
+
+      expect(getBackButton(container)).toBeNull();
+    });
+  });
+});
diff --git a/src/ui/components/Modal/ModalBackdrop.spec.tsx b/src/ui/components/Modal/ModalBackdrop.spec.tsx
new file mode 100644
index 0000000000..d015875f37
--- /dev/null
+++ b/src/ui/components/Modal/ModalBackdrop.spec.tsx
@@ -0,0 +1,147 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ModalBackdrop from './ModalBackdrop';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+describe('ModalBackdrop', () => {
+  it('renders its children', () => {
+    render(
+      <ModalBackdrop onDismiss={jest.fn()}>
+        <div data-testid='content'>modal body</div>
+      </ModalBackdrop>
+    );
+
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+    expect(screen.getByText('modal body')).toBeInTheDocument();
+  });
+
+  it('exposes the backdrop element with the expected class', () => {
+    const { container } = render(
+      <ModalBackdrop onDismiss={jest.fn()}>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    expect(container.querySelector('.rcx-modal__backdrop')).toBeInTheDocument();
+  });
+
+  it('calls onDismiss on a complete click on the backdrop itself', () => {
+    const onDismiss = jest.fn();
+    const { container } = render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    const backdrop = container.querySelector(
+      '.rcx-modal__backdrop'
+    ) as HTMLElement;
+
+    fireEvent.mouseDown(backdrop);
+    fireEvent.mouseUp(backdrop);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onDismiss when the click lands on a child of the backdrop', () => {
+    const onDismiss = jest.fn();
+    render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div data-testid='content'>body</div>
+      </ModalBackdrop>
+    );
+
+    const child = screen.getByTestId('content');
+
+    fireEvent.mouseDown(child);
+    fireEvent.mouseUp(child);
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('does not call onDismiss when mousedown starts inside and mouseup ends on the backdrop', () => {
+    const onDismiss = jest.fn();
+    const { container } = render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div data-testid='content'>body</div>
+      </ModalBackdrop>
+    );
+
+    const backdrop = container.querySelector(
+      '.rcx-modal__backdrop'
+    ) as HTMLElement;
+    const child = screen.getByTestId('content');
+
+    fireEvent.mouseDown(child);
+    fireEvent.mouseUp(backdrop);
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('calls onDismiss when the Escape key is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores non-Escape key presses', () => {
+    const onDismiss = jest.fn();
+    render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    fireEvent.keyDown(window, { key: 'Enter' });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('removes the Escape listener on unmount', () => {
+    const onDismiss = jest.fn();
+    const { unmount } = render(
+      <ModalBackdrop onDismiss={onDismiss}>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    unmount();
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('does not throw when dismissed without an onDismiss handler', () => {
+    const { container } = render(
+      <ModalBackdrop>
+        <div>body</div>
+      </ModalBackdrop>
+    );
+
+    const backdrop = container.querySelector(
+      '.rcx-modal__backdrop'
+    ) as HTMLElement;
+
+    expect(() => {
+      fireEvent.mouseDown(backdrop);
+      fireEvent.mouseUp(backdrop);
+      fireEvent.keyDown(window, { key: 'Escape' });
+    }).not.toThrow();
+  });
+});
diff --git a/src/ui/components/OutlookCredentialsDialog/index.spec.tsx b/src/ui/components/OutlookCredentialsDialog/index.spec.tsx
new file mode 100644
index 0000000000..b633cc36bb
--- /dev/null
+++ b/src/ui/components/OutlookCredentialsDialog/index.spec.tsx
@@ -0,0 +1,194 @@
+import { OutlookCredentialsDialog } from '.';
+import {
+  OUTLOOK_CALENDAR_ASK_CREDENTIALS,
+  OUTLOOK_CALENDAR_DIALOG_DISMISSED,
+  OUTLOOK_CALENDAR_SET_CREDENTIALS,
+} from '../../../outlookCalendar/actions';
+import {
+  renderWithStore,
+  screen,
+  userEvent,
+  act,
+  waitFor,
+  fireEvent,
+} from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+// `listen` registers a callback per action type. Capture it so the test can
+// drive the dialog's local state (server, userId, encryption availability) the
+// way OUTLOOK_CALENDAR_ASK_CREDENTIALS would in the real store.
+const listeners = new Map<string, (action: unknown) => void>();
+
+jest.mock('../../../store', () => ({
+  listen: (type: string, listener: (action: unknown) => void) => {
+    listeners.set(type, listener);
+    return () => listeners.delete(type);
+  },
+}));
+
+const SERVER_URL = 'https://chat.example.com/';
+const REQUEST_ID = 'req-1';
+
+const askCredentials = ({
+  isEncryptionAvailable = true,
+}: { isEncryptionAvailable?: boolean } = {}) => {
+  act(() => {
+    listeners.get(OUTLOOK_CALENDAR_ASK_CREDENTIALS)?.({
+      type: OUTLOOK_CALENDAR_ASK_CREDENTIALS,
+      payload: {
+        server: {
+          url: SERVER_URL,
+          outlookCredentials: { serverUrl: 'https://exchange.example.com' },
+        },
+        userId: 'user-42',
+        isEncryptionAvailable,
+      },
+      meta: { request: true, id: REQUEST_ID },
+    });
+  });
+};
+
+const preloadedState = { openDialog: 'outlook-credentials' } as any;
+
+describe('OutlookCredentialsDialog', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    listeners.clear();
+  });
+
+  it('renders the title, both inputs and the remember-credentials checkbox', () => {
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+
+    expect(
+      screen.getByText('dialog.outlookCalendar.title')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Login')).toBeInTheDocument();
+    expect(screen.getByText('Password')).toBeInTheDocument();
+    expect(
+      screen.getByText('dialog.outlookCalendar.remember_credentials')
+    ).toBeInTheDocument();
+  });
+
+  it('shows required-field errors for empty inputs', async () => {
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+    askCredentials();
+
+    // The form validates with react-hook-form in `onChange` mode. Touching then
+    // clearing each required field deterministically drives validation and
+    // surfaces the required-field errors. Submitting untouched-empty fields and
+    // relying on the submit-time validation pass is racy under the jest-electron
+    // renderer (the async validation result intermittently fails to flush), so
+    // the per-field onChange path is used instead. `userEvent.type` is avoided
+    // because its synthetic keystrokes do not reach react-hook-form's value
+    // tracker in this environment — `fireEvent.change` dispatches the native
+    // change event the tracker recognises.
+    const [login] = screen.getAllByRole('textbox');
+    const password = document.querySelector(
+      'input[type="password"]'
+    ) as HTMLInputElement;
+    fireEvent.change(login, { target: { value: 'a' } });
+    fireEvent.change(login, { target: { value: '' } });
+    fireEvent.change(password, { target: { value: 'a' } });
+    fireEvent.change(password, { target: { value: '' } });
+
+    await waitFor(() =>
+      expect(
+        screen.queryAllByText('dialog.outlookCalendar.field_required')
+      ).toHaveLength(2)
+    );
+    expect(mockDispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: OUTLOOK_CALENDAR_SET_CREDENTIALS })
+    );
+  });
+
+  it('dispatches the credentials with the captured server, userId and request id', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+    askCredentials();
+
+    // Login renders as a textbox; PasswordInput renders type=password, which is
+    // not exposed with the textbox role, so it is queried by its input type.
+    // `fireEvent.change` is used over `userEvent.type` because the latter's
+    // keystrokes do not propagate to react-hook-form's value tracker under the
+    // jest-electron renderer.
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'jane' },
+    });
+    const password = document.querySelector(
+      'input[type="password"]'
+    ) as HTMLInputElement;
+    fireEvent.change(password, { target: { value: 's3cret' } });
+
+    await user.click(screen.getByText('dialog.outlookCalendar.submit'));
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: OUTLOOK_CALENDAR_SET_CREDENTIALS,
+        payload: expect.objectContaining({
+          url: SERVER_URL,
+          saveCredentials: true,
+          outlookCredentials: expect.objectContaining({
+            login: 'jane',
+            password: 's3cret',
+            userId: 'user-42',
+            serverUrl: 'https://exchange.example.com',
+          }),
+        }),
+        meta: { response: true, id: REQUEST_ID },
+      })
+    );
+  });
+
+  it('dispatches the dismissed action with the request id on cancel', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+    askCredentials();
+
+    await user.click(screen.getByText('dialog.outlookCalendar.cancel'));
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: OUTLOOK_CALENDAR_DIALOG_DISMISSED,
+        payload: { dismissDialog: true },
+        meta: { response: true, id: REQUEST_ID },
+      })
+    );
+  });
+
+  it('warns when encryption is unavailable and remember-credentials is on', async () => {
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+    askCredentials({ isEncryptionAvailable: false });
+
+    expect(
+      await screen.findByText('dialog.outlookCalendar.encryptionUnavailable')
+    ).toBeInTheDocument();
+  });
+
+  it('hides the encryption warning while encryption is available', () => {
+    renderWithStore(<OutlookCredentialsDialog />, { preloadedState });
+    askCredentials({ isEncryptionAvailable: true });
+
+    expect(
+      screen.queryByText('dialog.outlookCalendar.encryptionUnavailable')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/ui/components/ScreenSharingDialog/index.spec.tsx b/src/ui/components/ScreenSharingDialog/index.spec.tsx
new file mode 100644
index 0000000000..e501de57cd
--- /dev/null
+++ b/src/ui/components/ScreenSharingDialog/index.spec.tsx
@@ -0,0 +1,117 @@
+import { desktopCapturer } from 'electron';
+
+import { ScreenSharingDialog } from '.';
+import { SCREEN_SHARING_DIALOG_DISMISSED } from '../../../screenSharing/actions';
+import { WEBVIEW_SCREEN_SHARING_SOURCE_RESPONDED } from '../../actions';
+import { renderWithStore, screen, userEvent, act } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+jest.mock('electron', () => ({
+  desktopCapturer: {
+    getSources: jest.fn(),
+  },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+const getSourcesMock = desktopCapturer.getSources as jest.MockedFunction<
+  typeof desktopCapturer.getSources
+>;
+
+const makeSource = (id: string, name: string) =>
+  ({
+    id,
+    name,
+    thumbnail: { toDataURL: () => `data:image/png;base64,${id}` },
+  }) as unknown as Electron.DesktopCapturerSource;
+
+const preloadedState = { openDialog: 'screen-sharing' } as any;
+
+const flushSources = async () => {
+  await act(async () => {
+    jest.advanceTimersByTime(1000);
+    // allow the awaited getSources promise to resolve
+    await Promise.resolve();
+  });
+};
+
+describe('ScreenSharingDialog', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockDispatch.mockClear();
+    getSourcesMock.mockReset();
+    getSourcesMock.mockResolvedValue([
+      makeSource('screen:1', 'Entire Screen'),
+      makeSource('window:1', 'Some Window'),
+    ]);
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders the announcement title', () => {
+    renderWithStore(<ScreenSharingDialog />, { preloadedState });
+
+    expect(
+      screen.getByText('dialog.screenshare.announcement')
+    ).toBeInTheDocument();
+  });
+
+  it('lists capturer sources fetched on the polling interval', async () => {
+    renderWithStore(<ScreenSharingDialog />, { preloadedState });
+
+    await flushSources();
+
+    expect(screen.getByText('Entire Screen')).toBeInTheDocument();
+    expect(screen.getByText('Some Window')).toBeInTheDocument();
+    expect(getSourcesMock).toHaveBeenCalledWith({
+      types: ['window', 'screen'],
+    });
+  });
+
+  it('dispatches the source-responded action when a source is clicked', async () => {
+    const user = userEvent.setup({
+      advanceTimers: jest.advanceTimersByTime,
+    });
+    renderWithStore(<ScreenSharingDialog />, { preloadedState });
+
+    await flushSources();
+
+    await user.click(screen.getByText('Entire Screen'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: WEBVIEW_SCREEN_SHARING_SOURCE_RESPONDED,
+      payload: 'screen:1',
+    });
+  });
+
+  it('dispatches dismissed when the dialog is closed', () => {
+    renderWithStore(<ScreenSharingDialog />, { preloadedState });
+
+    const dialog = document.querySelector('dialog') as HTMLDialogElement;
+    dialog.dispatchEvent(new Event('close'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SCREEN_SHARING_DIALOG_DISMISSED,
+    });
+  });
+});
diff --git a/src/ui/components/Shell/index.spec.tsx b/src/ui/components/Shell/index.spec.tsx
new file mode 100644
index 0000000000..34fa8ce185
--- /dev/null
+++ b/src/ui/components/Shell/index.spec.tsx
@@ -0,0 +1,224 @@
+import { Shell } from '.';
+import { renderWithStore, screen } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+// Shell is a top-level layout that mounts every view and dialog (webviews,
+// portals, IPC-backed effects). We stub each child to a marker node so the test
+// exercises Shell's OWN logic — selectors, the theme effect, the appPath
+// stylesheet effect and the conditional layout — without dragging in the heavy
+// subtrees. TooltipProvider is kept as a passthrough so its children render.
+jest.mock('../utils/TooltipProvider', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid='tooltip-provider'>{children}</div>
+  ),
+}));
+
+jest.mock('../ServersView', () => ({
+  __esModule: true,
+  ServersView: () => <div data-testid='servers-view' />,
+}));
+
+jest.mock('../AddServerView', () => ({
+  __esModule: true,
+  AddServerView: () => <div data-testid='add-server-view' />,
+}));
+
+jest.mock('../DownloadsManagerView', () => ({
+  __esModule: true,
+  default: () => <div data-testid='downloads-manager-view' />,
+}));
+
+jest.mock('../SettingsView', () => ({
+  __esModule: true,
+  SettingsView: () => <div data-testid='settings-view' />,
+}));
+
+jest.mock('../SideBar', () => ({
+  __esModule: true,
+  SideBar: () => <div data-testid='side-bar' />,
+}));
+
+jest.mock('../TopBar', () => ({
+  __esModule: true,
+  TopBar: () => <div data-testid='top-bar' />,
+}));
+
+jest.mock('../AboutDialog', () => ({
+  __esModule: true,
+  AboutDialog: () => <div data-testid='about-dialog' />,
+}));
+
+jest.mock('../ServerInfoModal', () => ({
+  __esModule: true,
+  ServerInfoModal: () => <div data-testid='server-info-modal' />,
+}));
+
+jest.mock('../SupportedVersionDialog', () => ({
+  __esModule: true,
+  SupportedVersionDialog: () => <div data-testid='supported-version-dialog' />,
+}));
+
+jest.mock('../ScreenSharingDialog', () => ({
+  __esModule: true,
+  ScreenSharingDialog: () => <div data-testid='screen-sharing-dialog' />,
+}));
+
+jest.mock('../RootScreenSharePicker', () => ({
+  __esModule: true,
+  RootScreenSharePicker: () => <div data-testid='root-screen-share-picker' />,
+}));
+
+jest.mock('../SelectClientCertificateDialog', () => ({
+  __esModule: true,
+  SelectClientCertificateDialog: () => (
+    <div data-testid='select-client-certificate-dialog' />
+  ),
+}));
+
+jest.mock('../UpdateDialog', () => ({
+  __esModule: true,
+  UpdateDialog: () => <div data-testid='update-dialog' />,
+}));
+
+jest.mock('../ClearCacheDialog', () => ({
+  __esModule: true,
+  ClearCacheDialog: () => <div data-testid='clear-cache-dialog' />,
+}));
+
+jest.mock('../OutlookCredentialsDialog', () => ({
+  __esModule: true,
+  OutlookCredentialsDialog: () => (
+    <div data-testid='outlook-credentials-dialog' />
+  ),
+}));
+
+// PaletteStyleTag / GlobalStyles / WindowDragBar emit raw <style>/<link> tags
+// and palette CSS that are noise for these assertions. Reduce them to markers.
+jest.mock('@rocket.chat/fuselage', () => {
+  const actual = jest.requireActual('@rocket.chat/fuselage');
+  return {
+    __esModule: true,
+    ...actual,
+    PaletteStyleTag: ({ theme }: { theme?: string }) => (
+      <div data-testid='palette-style-tag' data-theme={theme} />
+    ),
+  };
+});
+
+jest.mock('./styles', () => ({
+  __esModule: true,
+  GlobalStyles: ({
+    isTransparentWindowEnabled,
+  }: {
+    isTransparentWindowEnabled?: boolean;
+  }) => (
+    <div
+      data-testid='global-styles'
+      data-transparent={String(!!isTransparentWindowEnabled)}
+    />
+  ),
+  WindowDragBar: () => <div data-testid='window-drag-bar' />,
+}));
+
+const buildState = (overrides: Record<string, unknown> = {}) =>
+  ({
+    appPath: '/app',
+    machineTheme: 'light',
+    userThemePreference: 'auto',
+    isTransparentWindowEnabled: false,
+    ...overrides,
+  }) as any;
+
+describe('Shell', () => {
+  it('renders the layout and its primary views without crashing', () => {
+    renderWithStore(<Shell />, { preloadedState: buildState() });
+
+    expect(screen.getByTestId('tooltip-provider')).toBeInTheDocument();
+    expect(screen.getByTestId('side-bar')).toBeInTheDocument();
+    expect(screen.getByTestId('servers-view')).toBeInTheDocument();
+    expect(screen.getByTestId('add-server-view')).toBeInTheDocument();
+    expect(screen.getByTestId('downloads-manager-view')).toBeInTheDocument();
+    expect(screen.getByTestId('settings-view')).toBeInTheDocument();
+  });
+
+  it('mounts the top-level dialogs', () => {
+    renderWithStore(<Shell />, { preloadedState: buildState() });
+
+    expect(screen.getByTestId('about-dialog')).toBeInTheDocument();
+    expect(screen.getByTestId('server-info-modal')).toBeInTheDocument();
+    expect(screen.getByTestId('supported-version-dialog')).toBeInTheDocument();
+    expect(screen.getByTestId('update-dialog')).toBeInTheDocument();
+    expect(screen.getByTestId('clear-cache-dialog')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('outlook-credentials-dialog')
+    ).toBeInTheDocument();
+  });
+
+  it('applies the machine theme when the user preference is auto', () => {
+    renderWithStore(<Shell />, {
+      preloadedState: buildState({
+        machineTheme: 'dark',
+        userThemePreference: 'auto',
+      }),
+    });
+
+    expect(screen.getByTestId('palette-style-tag')).toHaveAttribute(
+      'data-theme',
+      'dark'
+    );
+  });
+
+  it('applies the explicit user theme preference when it is not auto', () => {
+    renderWithStore(<Shell />, {
+      preloadedState: buildState({
+        machineTheme: 'dark',
+        userThemePreference: 'light',
+      }),
+    });
+
+    expect(screen.getByTestId('palette-style-tag')).toHaveAttribute(
+      'data-theme',
+      'light'
+    );
+  });
+
+  it('forwards the transparency flag to the global styles', () => {
+    renderWithStore(<Shell />, {
+      preloadedState: buildState({ isTransparentWindowEnabled: true }),
+    });
+
+    expect(screen.getByTestId('global-styles')).toHaveAttribute(
+      'data-transparent',
+      'true'
+    );
+  });
+
+  it('injects the rocketchat stylesheet link from appPath', () => {
+    renderWithStore(<Shell />, {
+      preloadedState: buildState({ appPath: '/app' }),
+    });
+
+    const link = document.head.querySelector(
+      'link[href="/app/app/icons/rocketchat.css"]'
+    );
+    expect(link).toBeInTheDocument();
+  });
+
+  it('does not inject the stylesheet link when appPath is empty', () => {
+    renderWithStore(<Shell />, { preloadedState: buildState({ appPath: '' }) });
+
+    const link = document.head.querySelector(
+      'link[href$="/app/icons/rocketchat.css"]'
+    );
+    expect(link).not.toBeInTheDocument();
+  });
+});
diff --git a/src/ui/components/SideBar/ServerButton.spec.tsx b/src/ui/components/SideBar/ServerButton.spec.tsx
new file mode 100644
index 0000000000..64eeb26a6b
--- /dev/null
+++ b/src/ui/components/SideBar/ServerButton.spec.tsx
@@ -0,0 +1,212 @@
+import {
+  SIDE_BAR_SERVER_SELECTED,
+  SIDE_BAR_SERVER_RELOAD,
+  SIDE_BAR_SERVER_COPY_URL,
+  SIDE_BAR_SERVER_OPEN_DEV_TOOLS,
+  SIDE_BAR_SERVER_FORCE_RELOAD,
+  SIDE_BAR_SERVER_REMOVE,
+  OPEN_SERVER_INFO_MODAL,
+} from '../../actions';
+import { render, screen, userEvent } from '../../test-utils';
+import ServerButton from './ServerButton';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('../../../store', () => ({
+  dispatch: (action: unknown) => mockDispatch(action),
+}));
+
+jest.mock('./ServerInfoDropdown', () => ({
+  __esModule: true,
+  default: () => <div data-testid='server-info-dropdown' />,
+}));
+
+// Fuselage's <Dropdown> resolves to its mobile variant under jsdom (matchMedia
+// has no real layout) and renders its children into an unreachable portal/tile.
+// Replace only that component with an inline passthrough so the menu Options
+// render in the tree; every other Fuselage component stays real.
+jest.mock('@rocket.chat/fuselage', () => {
+  const actual = jest.requireActual('@rocket.chat/fuselage');
+  return {
+    __esModule: true,
+    ...actual,
+    Dropdown: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid='dropdown'>{children}</div>
+    ),
+  };
+});
+
+const dragNoop = {
+  onDragStart: jest.fn(),
+  onDragEnd: jest.fn(),
+  onDragEnter: jest.fn(),
+  onDrop: jest.fn(),
+};
+
+const renderButton = (
+  overrides: Partial<React.ComponentProps<typeof ServerButton>> = {}
+) =>
+  render(
+    <ServerButton
+      url='https://open.rocket.chat'
+      title='Open Rocket.Chat'
+      shortcutNumber='1'
+      isSelected={false}
+      favicon={null}
+      isShortcutVisible={false}
+      hasUnreadMessages={false}
+      isDragged={false}
+      userLoggedIn
+      {...dragNoop}
+      {...overrides}
+    />
+  );
+
+describe('ServerButton', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('renders computed initials from the title when no favicon is set', () => {
+    renderButton({ title: 'Open Rocket', favicon: null });
+
+    expect(screen.getByText('OR')).toBeInTheDocument();
+  });
+
+  it('renders an avatar image when a favicon is provided', () => {
+    renderButton({ favicon: 'https://open.rocket.chat/favicon.png' });
+
+    const avatar = document.querySelector('img');
+    expect(avatar).toBeInTheDocument();
+    expect(avatar).toHaveAttribute(
+      'src',
+      'https://open.rocket.chat/favicon.png'
+    );
+  });
+
+  it('shows a mention badge when there are mentions', () => {
+    renderButton({ mentionCount: 3, hasUnreadMessages: true });
+
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('shows a warning badge when the user is not logged in', () => {
+    renderButton({ userLoggedIn: false });
+
+    expect(screen.getByText('!')).toBeInTheDocument();
+  });
+
+  it('dispatches a server-selected action on click', async () => {
+    const user = userEvent.setup();
+    renderButton();
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_SELECTED,
+      payload: 'https://open.rocket.chat',
+    });
+  });
+
+  it('does not render the action dropdown until the context menu opens', () => {
+    renderButton();
+
+    expect(screen.queryByText('sidebar.item.reload')).not.toBeInTheDocument();
+  });
+
+  it('opens the action dropdown on context menu and dispatches reload', async () => {
+    const user = userEvent.setup();
+    const { container } = renderButton();
+
+    const wrapper = container.querySelector(
+      '[draggable="true"]'
+    ) as HTMLElement;
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+
+    expect(screen.getByText('sidebar.item.reload')).toBeInTheDocument();
+
+    await user.click(screen.getByText('sidebar.item.reload'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_RELOAD,
+      payload: 'https://open.rocket.chat',
+    });
+  });
+
+  it('dispatches copy-url, dev-tools, force-reload and remove actions from the dropdown', async () => {
+    const user = userEvent.setup();
+    const { container } = renderButton();
+
+    const wrapper = container.querySelector(
+      '[draggable="true"]'
+    ) as HTMLElement;
+
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+    await user.click(screen.getByText('sidebar.item.copyCurrentUrl'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_COPY_URL,
+      payload: 'https://open.rocket.chat',
+    });
+
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+    await user.click(screen.getByText('sidebar.item.openDevTools'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_OPEN_DEV_TOOLS,
+      payload: 'https://open.rocket.chat',
+    });
+
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+    await user.click(screen.getByText('sidebar.item.reloadClearingCache'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_FORCE_RELOAD,
+      payload: 'https://open.rocket.chat',
+    });
+
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+    await user.click(screen.getByText('sidebar.item.remove'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SERVER_REMOVE,
+      payload: 'https://open.rocket.chat',
+    });
+  });
+
+  it('dispatches the open-server-info-modal action with the server details', async () => {
+    const user = userEvent.setup();
+    const { container } = renderButton({
+      version: '6.5.0',
+      exchangeUrl: 'https://exchange.example.com',
+      isSupportedVersion: true,
+      supportedVersionsSource: 'cloud',
+      supportedVersionsFetchState: 'success',
+    });
+
+    const wrapper = container.querySelector(
+      '[draggable="true"]'
+    ) as HTMLElement;
+    await user.pointer({ keys: '[MouseRight]', target: wrapper });
+
+    await user.click(screen.getByText('sidebar.item.serverInfo'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: OPEN_SERVER_INFO_MODAL,
+      payload: {
+        url: 'https://open.rocket.chat',
+        version: '6.5.0',
+        exchangeUrl: 'https://exchange.example.com',
+        isSupportedVersion: true,
+        supportedVersionsSource: 'cloud',
+        supportedVersionsFetchState: 'success',
+        supportedVersions: undefined,
+      },
+    });
+  });
+});
diff --git a/src/ui/components/SideBar/index.spec.tsx b/src/ui/components/SideBar/index.spec.tsx
new file mode 100644
index 0000000000..817b16c8a4
--- /dev/null
+++ b/src/ui/components/SideBar/index.spec.tsx
@@ -0,0 +1,156 @@
+import { SideBar } from '.';
+import {
+  SIDE_BAR_ADD_NEW_SERVER_CLICKED,
+  SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
+  SIDE_BAR_SETTINGS_BUTTON_CLICKED,
+} from '../../actions';
+import { renderWithStore, screen, userEvent } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('../../../store', () => ({
+  dispatch: (action: unknown) => mockDispatch(action),
+}));
+
+// ServerButton pulls in avatars, the action dropdown and Fuselage portal
+// machinery that is irrelevant to SideBar's own composition. Stub it down to a
+// node that exposes the url it was handed so we can assert that one button is
+// rendered per server.
+jest.mock('./ServerButton', () => ({
+  __esModule: true,
+  default: ({ url, isSelected }: { url: string; isSelected: boolean }) => (
+    <div
+      data-testid='server-button'
+      data-url={url}
+      data-selected={isSelected}
+    />
+  ),
+}));
+
+const buildState = (overrides: Record<string, unknown> = {}) =>
+  ({
+    servers: [
+      { url: 'https://a.rocket.chat/', title: 'Server A' },
+      { url: 'https://b.rocket.chat/', title: 'Server B' },
+    ],
+    currentView: { url: 'https://a.rocket.chat/' },
+    isSideBarEnabled: true,
+    isAddNewServersEnabled: true,
+    isTransparentWindowEnabled: false,
+    ...overrides,
+  }) as any;
+
+describe('SideBar', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('renders one server button per server in state', () => {
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    const buttons = screen.getAllByTestId('server-button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons.map((b) => b.getAttribute('data-url'))).toEqual([
+      'https://a.rocket.chat/',
+      'https://b.rocket.chat/',
+    ]);
+  });
+
+  it('marks the server matching the current view as selected', () => {
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    const buttons = screen.getAllByTestId('server-button');
+    const selected = buttons.filter(
+      (b) => b.getAttribute('data-selected') === 'true'
+    );
+    expect(selected).toHaveLength(1);
+    expect(selected[0].getAttribute('data-url')).toBe('https://a.rocket.chat/');
+  });
+
+  it('renders the add-server button when adding servers is enabled', () => {
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    expect(
+      screen.getByTitle('sidebar.tooltips.addWorkspace')
+    ).toBeInTheDocument();
+  });
+
+  it('hides the add-server button when adding servers is disabled', () => {
+    renderWithStore(<SideBar />, {
+      preloadedState: buildState({ isAddNewServersEnabled: false }),
+    });
+
+    expect(
+      screen.queryByTitle('sidebar.tooltips.addWorkspace')
+    ).not.toBeInTheDocument();
+  });
+
+  it('dispatches the add-new-server action when the add button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    await user.click(screen.getByTitle('sidebar.tooltips.addWorkspace'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_ADD_NEW_SERVER_CLICKED,
+    });
+  });
+
+  it('shows the server column when the sidebar is enabled and servers exist', () => {
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    const wrapper = document.querySelector('.rcx-sidebar--main')
+      ?.firstElementChild as HTMLElement;
+    expect(wrapper).toHaveStyle({ display: 'flex' });
+  });
+
+  it('collapses the server column when the sidebar is disabled', () => {
+    renderWithStore(<SideBar />, {
+      preloadedState: buildState({ isSideBarEnabled: false }),
+    });
+
+    const wrapper = document.querySelector('.rcx-sidebar--main')
+      ?.firstElementChild as HTMLElement;
+    expect(wrapper).toHaveStyle({ display: 'none' });
+  });
+
+  it('collapses the server column when there are no servers', () => {
+    renderWithStore(<SideBar />, {
+      preloadedState: buildState({
+        servers: [],
+        currentView: 'add-new-server',
+      }),
+    });
+
+    expect(screen.queryByTestId('server-button')).not.toBeInTheDocument();
+    const wrapper = document.querySelector('.rcx-sidebar--main')
+      ?.firstElementChild as HTMLElement;
+    expect(wrapper).toHaveStyle({ display: 'none' });
+  });
+
+  it('dispatches downloads and settings actions from the settings menu', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<SideBar />, { preloadedState: buildState() });
+
+    await user.click(screen.getByTitle('sidebar.tooltips.settingsMenu'));
+    await user.click(screen.getByText('sidebar.downloads'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
+    });
+
+    await user.click(screen.getByTitle('sidebar.tooltips.settingsMenu'));
+    await user.click(screen.getByText('sidebar.settings'));
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SIDE_BAR_SETTINGS_BUTTON_CLICKED,
+    });
+  });
+});
diff --git a/src/ui/components/SupportedVersionDialog/index.spec.tsx b/src/ui/components/SupportedVersionDialog/index.spec.tsx
new file mode 100644
index 0000000000..f1cc37b7a2
--- /dev/null
+++ b/src/ui/components/SupportedVersionDialog/index.spec.tsx
@@ -0,0 +1,167 @@
+import { ipcRenderer } from 'electron';
+
+import { SupportedVersionDialog } from '.';
+import * as urls from '../../../urls';
+import { SUPPORTED_VERSION_DIALOG_DISMISS } from '../../actions';
+import { renderWithStore, screen, userEvent, waitFor } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+jest.mock('electron', () => ({
+  ipcRenderer: {
+    invoke: jest.fn(),
+  },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+// The dialog only becomes visible once `isServerVersionSupported` resolves an
+// expiration message; mock both the support check and the translation helper so
+// the visible branch renders deterministically.
+const isServerVersionSupported = jest.fn();
+const getExpirationMessageTranslated = jest.fn();
+
+jest.mock('../../../servers/supportedVersions/main', () => ({
+  isServerVersionSupported: (...args: unknown[]) =>
+    isServerVersionSupported(...args),
+  getExpirationMessageTranslated: (...args: unknown[]) =>
+    getExpirationMessageTranslated(...args),
+}));
+
+const invokeMock = ipcRenderer.invoke as jest.MockedFunction<
+  typeof ipcRenderer.invoke
+>;
+
+const SERVER_URL = 'https://chat.example.com/';
+
+const translatedMessage = {
+  title: 'Workspace expiring',
+  subtitle: 'Action required',
+  description: 'Your workspace will lose support soon.',
+  link: 'https://chat.example.com/learn-more',
+};
+
+const preloadedState = {
+  currentView: { url: SERVER_URL },
+  servers: [
+    {
+      url: SERVER_URL,
+      title: 'Example',
+      version: '6.0.0',
+      supportedVersions: { versions: [], messages: [] },
+    },
+  ],
+} as any;
+
+describe('SupportedVersionDialog', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    invokeMock.mockClear();
+    isServerVersionSupported.mockReset();
+    getExpirationMessageTranslated.mockReset();
+
+    isServerVersionSupported.mockResolvedValue({
+      supported: true,
+      message: { title: 'x' },
+      expiration: new Date('2099-01-01'),
+      i18n: {},
+    });
+    getExpirationMessageTranslated.mockReturnValue(translatedMessage);
+  });
+
+  it('renders the translated expiration message once the check resolves', async () => {
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    expect(await screen.findByText('Workspace expiring')).toBeInTheDocument();
+    expect(screen.getByText('Action required')).toBeInTheDocument();
+    expect(
+      screen.getByText('Your workspace will lose support soon.')
+    ).toBeInTheDocument();
+  });
+
+  it('renders the more-information button', async () => {
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    await screen.findByText('Workspace expiring');
+    expect(
+      screen.getByText('unsupportedServer.moreInformation')
+    ).toBeInTheDocument();
+  });
+
+  it('opens both the message link and the docs url on more-information', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    await screen.findByText('Workspace expiring');
+    await user.click(screen.getByText('unsupportedServer.moreInformation'));
+
+    expect(invokeMock).toHaveBeenCalledWith(
+      'server-view/open-url-on-browser',
+      translatedMessage.link
+    );
+    expect(invokeMock).toHaveBeenCalledWith(
+      'server-view/open-url-on-browser',
+      urls.docs.supportedVersions
+    );
+  });
+
+  it('only opens the docs url when the message has no link', async () => {
+    getExpirationMessageTranslated.mockReturnValue({
+      ...translatedMessage,
+      link: '',
+    });
+    const user = userEvent.setup();
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    await screen.findByText('Workspace expiring');
+    await user.click(screen.getByText('unsupportedServer.moreInformation'));
+
+    expect(invokeMock).toHaveBeenCalledTimes(1);
+    expect(invokeMock).toHaveBeenCalledWith(
+      'server-view/open-url-on-browser',
+      urls.docs.supportedVersions
+    );
+  });
+
+  it('dispatches the dismiss action with the server url on close', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    await screen.findByText('Workspace expiring');
+    // ModalClose renders an IconButton with aria-label="Close".
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SUPPORTED_VERSION_DIALOG_DISMISS,
+      payload: { url: SERVER_URL },
+    });
+  });
+
+  it('does not become visible when no server version check resolves a message', async () => {
+    isServerVersionSupported.mockResolvedValue({
+      supported: true,
+      message: undefined,
+      expiration: undefined,
+    });
+    renderWithStore(<SupportedVersionDialog />, { preloadedState });
+
+    await waitFor(() => expect(isServerVersionSupported).toHaveBeenCalled());
+    expect(screen.queryByText('Workspace expiring')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/ui/components/UpdateDialog/index.spec.tsx b/src/ui/components/UpdateDialog/index.spec.tsx
new file mode 100644
index 0000000000..88f17253c8
--- /dev/null
+++ b/src/ui/components/UpdateDialog/index.spec.tsx
@@ -0,0 +1,102 @@
+import { UpdateDialog } from '.';
+import {
+  UPDATE_DIALOG_DISMISSED,
+  UPDATE_DIALOG_INSTALL_BUTTON_CLICKED,
+  UPDATE_DIALOG_REMIND_UPDATE_LATER_CLICKED,
+  UPDATE_DIALOG_SKIP_UPDATE_CLICKED,
+} from '../../actions';
+import { renderWithStore, screen, userEvent } from '../../test-utils';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: 'en', changeLanguage: jest.fn() },
+  }),
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+  initReactI18next: { type: '3rdParty', init: () => {} },
+}));
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+const preloadedState = {
+  appVersion: '4.0.0',
+  newUpdateVersion: '4.1.0',
+  openDialog: 'update',
+} as any;
+
+describe('UpdateDialog', () => {
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('renders the announcement, message and both versions', () => {
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    expect(screen.getByText('dialog.update.announcement')).toBeInTheDocument();
+    expect(screen.getByText('dialog.update.message')).toBeInTheDocument();
+    expect(screen.getByText('4.0.0')).toBeInTheDocument();
+    expect(screen.getByText('4.1.0')).toBeInTheDocument();
+  });
+
+  it('renders the skip, remind-later and install buttons', () => {
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    expect(screen.getByText('dialog.update.skip')).toBeInTheDocument();
+    expect(screen.getByText('dialog.update.remindLater')).toBeInTheDocument();
+    expect(screen.getByText('dialog.update.install')).toBeInTheDocument();
+  });
+
+  it('dispatches skip-update with the new version', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    await user.click(screen.getByText('dialog.update.skip'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: UPDATE_DIALOG_SKIP_UPDATE_CLICKED,
+      payload: '4.1.0',
+    });
+  });
+
+  it('dispatches remind-later', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    await user.click(screen.getByText('dialog.update.remindLater'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: UPDATE_DIALOG_REMIND_UPDATE_LATER_CLICKED,
+    });
+  });
+
+  it('dispatches install on the install button', async () => {
+    const user = userEvent.setup();
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    await user.click(screen.getByText('dialog.update.install'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: UPDATE_DIALOG_INSTALL_BUTTON_CLICKED,
+    });
+  });
+
+  it('dispatches dismissed when the dialog is closed', () => {
+    renderWithStore(<UpdateDialog />, { preloadedState });
+
+    const dialog = document.querySelector('dialog') as HTMLDialogElement;
+    dialog.dispatchEvent(new Event('close'));
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: UPDATE_DIALOG_DISMISSED,
+    });
+  });
+});
diff --git a/src/ui/components/utils/ReparentingContainer.spec.tsx b/src/ui/components/utils/ReparentingContainer.spec.tsx
new file mode 100644
index 0000000000..f8bdbee4fc
--- /dev/null
+++ b/src/ui/components/utils/ReparentingContainer.spec.tsx
@@ -0,0 +1,159 @@
+import { createRef } from 'react';
+
+import { act, render } from '../../test-utils';
+import { ReparentingContainer } from './ReparentingContainer';
+
+describe('ReparentingContainer', () => {
+  it('renders keyed children reparented out of the inner container div', () => {
+    const { container } = render(
+      <ReparentingContainer>
+        <span key='a'>alpha</span>
+        <span key='b'>beta</span>
+      </ReparentingContainer>
+    );
+
+    expect(container).toHaveTextContent('alpha');
+    expect(container).toHaveTextContent('beta');
+
+    const containerNodes = container.querySelectorAll('[data-container]');
+    expect(containerNodes).toHaveLength(2);
+  });
+
+  it('forwards a ref to the inner container div', () => {
+    const ref = createRef<HTMLDivElement>();
+
+    render(
+      <ReparentingContainer ref={ref}>
+        <span key='a'>alpha</span>
+      </ReparentingContainer>
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('copies the inner div attributes onto each reparented child node', () => {
+    // ReparentingContainer spreads extra props onto its inner div at runtime,
+    // but its prop type only declares `children`; cast to exercise that path.
+    const Container = ReparentingContainer as unknown as React.FC<
+      React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+    >;
+
+    const { container } = render(
+      <Container className='wrapper' data-foo='bar'>
+        <span key='a'>alpha</span>
+      </Container>
+    );
+
+    const node = container.querySelector('[data-container]');
+    expect(node).not.toBeNull();
+    expect(node).toHaveClass('wrapper');
+    expect(node).toHaveAttribute('data-foo', 'bar');
+  });
+
+  it('reuses the same DOM node for a child kept across re-renders', () => {
+    const { container, rerender } = render(
+      <ReparentingContainer>
+        <span key='a'>alpha</span>
+      </ReparentingContainer>
+    );
+
+    const nodeBefore = container.querySelector('[data-container]');
+
+    rerender(
+      <ReparentingContainer>
+        <span key='a'>alpha-updated</span>
+      </ReparentingContainer>
+    );
+
+    const nodeAfter = container.querySelector('[data-container]');
+    expect(nodeAfter).toBe(nodeBefore);
+    expect(nodeAfter).toHaveTextContent('alpha-updated');
+  });
+
+  it('adds a node when a new keyed child is introduced', () => {
+    const { container, rerender } = render(
+      <ReparentingContainer>
+        <span key='a'>alpha</span>
+      </ReparentingContainer>
+    );
+
+    expect(container.querySelectorAll('[data-container]')).toHaveLength(1);
+
+    rerender(
+      <ReparentingContainer>
+        <span key='a'>alpha</span>
+        <span key='b'>beta</span>
+      </ReparentingContainer>
+    );
+
+    expect(container.querySelectorAll('[data-container]')).toHaveLength(2);
+    expect(container).toHaveTextContent('beta');
+  });
+
+  it('removes a dropped child node after the deferred cleanup timeout elapses', () => {
+    jest.useFakeTimers();
+
+    try {
+      const { container, rerender } = render(
+        <ReparentingContainer>
+          <span key='a'>alpha</span>
+          <span key='b'>beta</span>
+        </ReparentingContainer>
+      );
+
+      expect(container.querySelectorAll('[data-container]')).toHaveLength(2);
+
+      rerender(
+        <ReparentingContainer>
+          <span key='a'>alpha</span>
+        </ReparentingContainer>
+      );
+
+      // The dropped node is scheduled for removal but not removed yet.
+      expect(container.querySelectorAll('[data-container]')).toHaveLength(2);
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      expect(container.querySelectorAll('[data-container]')).toHaveLength(1);
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('clears all reparented nodes after the deferred unmount cleanup elapses', () => {
+    jest.useFakeTimers();
+
+    try {
+      const { unmount } = render(
+        <ReparentingContainer>
+          <span key='a'>alpha</span>
+          <span key='b'>beta</span>
+        </ReparentingContainer>
+      );
+
+      expect(document.querySelectorAll('[data-container]')).toHaveLength(2);
+
+      unmount();
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      expect(document.querySelectorAll('[data-container]')).toHaveLength(0);
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('reparents children without an explicit key (flattenChildren assigns a synthetic key)', () => {
+    const { container } = render(
+      <ReparentingContainer>
+        <span>no-key</span>
+      </ReparentingContainer>
+    );
+
+    expect(container.querySelectorAll('[data-container]')).toHaveLength(1);
+  });
+});
diff --git a/src/ui/components/utils/createAnchor.spec.ts b/src/ui/components/utils/createAnchor.spec.ts
new file mode 100644
index 0000000000..f3669da4ff
--- /dev/null
+++ b/src/ui/components/utils/createAnchor.spec.ts
@@ -0,0 +1,86 @@
+import { createAnchor } from './createAnchor';
+import { deleteAnchor, registerAnchor } from './deleteAnchor';
+
+describe('createAnchor', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('creates a div anchor by default and appends it to the body', () => {
+    const anchor = createAnchor('anchor-default');
+
+    expect(anchor.tagName.toLowerCase()).toBe('div');
+    expect(anchor.id).toBe('anchor-default');
+    expect(document.getElementById('anchor-default')).toBe(anchor);
+    expect(anchor.parentElement).toBe(document.body);
+  });
+
+  it('creates an anchor using the requested tag name', () => {
+    const anchor = createAnchor('anchor-span', 'span');
+
+    expect(anchor.tagName.toLowerCase()).toBe('span');
+    expect(document.body.contains(anchor)).toBe(true);
+  });
+
+  it('reuses an existing anchor when id and tag match', () => {
+    const first = createAnchor('anchor-reuse');
+    const second = createAnchor('anchor-reuse');
+
+    expect(second).toBe(first);
+    expect(document.querySelectorAll('#anchor-reuse')).toHaveLength(1);
+  });
+
+  it('creates a fresh anchor when an element with the id exists but the tag differs', () => {
+    const first = createAnchor('anchor-tag-mismatch', 'div');
+    const second = createAnchor('anchor-tag-mismatch', 'span');
+
+    expect(second).not.toBe(first);
+    expect(second.tagName.toLowerCase()).toBe('span');
+  });
+
+  it('registers a cleanup function that removes the anchor on deleteAnchor', () => {
+    const anchor = createAnchor('anchor-cleanup');
+
+    expect(document.body.contains(anchor)).toBe(true);
+
+    deleteAnchor(anchor);
+
+    expect(document.body.contains(anchor)).toBe(false);
+    expect(document.getElementById('anchor-cleanup')).toBeNull();
+  });
+});
+
+describe('deleteAnchor', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('invokes the cleanup callback registered for the element', () => {
+    const element = document.createElement('div');
+    const cleanup = jest.fn();
+    registerAnchor(element, cleanup);
+
+    deleteAnchor(element);
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it('does nothing for an element that was never registered', () => {
+    const element = document.createElement('div');
+
+    expect(() => deleteAnchor(element)).not.toThrow();
+  });
+
+  it('runs the latest cleanup callback when an element is re-registered', () => {
+    const element = document.createElement('div');
+    const first = jest.fn();
+    const second = jest.fn();
+
+    registerAnchor(element, first);
+    registerAnchor(element, second);
+    deleteAnchor(element);
+
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/ui/test-utils.tsx b/src/ui/test-utils.tsx
new file mode 100644
index 0000000000..01b30f2839
--- /dev/null
+++ b/src/ui/test-utils.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable import/export */
+import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement, ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import type { Store } from 'redux';
+import { createStore } from 'redux';
+
+import type { RootState } from '../store/rootReducer';
+import { rootReducer } from '../store/rootReducer';
+
+/*
+ * i18n strategy for component specs:
+ * components use `useTranslation` / `Trans` from `react-i18next`. To keep
+ * specs deterministic (no async i18n boot, translation keys returned verbatim)
+ * each spec file MUST declare the mock below at the TOP of the file. The mock
+ * cannot live in this helper — jest.mock only hoists when it sits in the spec
+ * module itself. Copy this block into every component spec:
+ *
+ *   jest.mock('react-i18next', () => ({
+ *     useTranslation: () => ({
+ *       t: (key: string) => key,
+ *       i18n: { language: 'en', changeLanguage: jest.fn() },
+ *     }),
+ *     Trans: ({ children }: { children: React.ReactNode }) => children,
+ *     initReactI18next: { type: '3rdParty', init: () => {} },
+ *   }));
+ */
+
+type RenderWithStoreOptions = Omit<RenderOptions, 'wrapper'> & {
+  preloadedState?: Partial<RootState>;
+  store?: Store;
+};
+
+export const renderWithStore = (
+  ui: ReactElement,
+  {
+    preloadedState,
+    store = createStore(rootReducer, preloadedState as any),
+    ...renderOptions
+  }: RenderWithStoreOptions = {}
+) => {
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return {
+    store,
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  };
+};
+
+export * from '@testing-library/react';
+export { userEvent };
diff --git a/yarn.lock b/yarn.lock
index 34500b66b9..07a71a2728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -63,6 +63,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.5.0
+  resolution: "@adobe/css-tools@npm:4.5.0"
+  checksum: 10/a332050614f7e08928aba518ac65534621672590bdfc2079886e9ead90da78c7fe2498152c5083318e93ee909260ec13854c21ac77c24053f7d30c5d2d2adcc1
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -84,6 +91,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.10.4":
+  version: 7.29.7
+  resolution: "@babel/code-frame@npm:7.29.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.1.1"
+  checksum: 10/84da552e51a55795a50b3589116edb2f9e368a647d266380683775f18effd9acd4521b0246bebd0b049a7f32af1f87b1e8475d3bcb665f876bd04ade8da99697
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.28.6":
   version: 7.29.0
   resolution: "@babel/compat-data@npm:7.29.0"
@@ -352,6 +370,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-identifier@npm:7.29.7"
+  checksum: 10/2efa42701eb05babf26dff3332109c9e5e1a3400a71fb9e68ee27af28235036a2a72c2494c04bdab3f909075f42a58b2e8271074372bc7f8e79ec02bd364d7a7
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-option@npm:7.27.1"
@@ -4527,6 +4552,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.4":
+  version: 9.3.4
+  resolution: "@testing-library/dom@npm:9.3.4"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.1.3"
+    chalk: "npm:^4.1.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    pretty-format: "npm:^27.0.2"
+  checksum: 10/510da752ea76f4a10a0a4e3a77917b0302cf03effe576cd3534cab7e796533ee2b0e9fb6fb11b911a1ebd7c70a0bb6f235bf4f816c9b82b95b8fe0cddfd10975
+  languageName: node
+  linkType: hard
+
+"@testing-library/jest-dom@npm:^6.4.8":
+  version: 6.9.1
+  resolution: "@testing-library/jest-dom@npm:6.9.1"
+  dependencies:
+    "@adobe/css-tools": "npm:^4.4.0"
+    aria-query: "npm:^5.0.0"
+    css.escape: "npm:^1.5.1"
+    dom-accessibility-api: "npm:^0.6.3"
+    picocolors: "npm:^1.1.1"
+    redent: "npm:^3.0.0"
+  checksum: 10/409b4f519e4c68f4d31e3b0317338cc19098b9029513fca61aa2af8270086ae3956a1eaedd19bbce2d2c9e2cf9ff27a616c06556be7a26e101c0d529a0062233
+  languageName: node
+  linkType: hard
+
+"@testing-library/react@npm:^14.3.1":
+  version: 14.3.1
+  resolution: "@testing-library/react@npm:14.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@testing-library/dom": "npm:^9.0.0"
+    "@types/react-dom": "npm:^18.0.0"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 10/83359dcdf9eaf067839f34604e1a181cbc14fc09f3a07672403700fcc6a900c4b8054ad1114fc24b4b9f89d84e2a09e1b7c9afce2306b1d4b4c9e30eb1cb12de
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.5.2":
+  version: 14.6.1
+  resolution: "@testing-library/user-event@npm:14.6.1"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 10/34b74fff56a0447731a94b40d4cf246deb8dbc1c1e3aec93acd1c3377a760bb062e979f1572bb34ec164ad28ee2a391744b42d0d6d6cc16c4ce527e5e09610e1
+  languageName: node
+  linkType: hard
+
 "@tokenizer/token@npm:^0.3.0":
   version: 0.3.0
   resolution: "@tokenizer/token@npm:0.3.0"
@@ -4585,6 +4663,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: 10/c0084c389dc030daeaf0115a92ce43a3f4d42fc8fef2d0e22112d87a42798d4a15aac413019d4a63f868327d52ad6740ab99609462b442fe6b9286b172d2e82e
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.14":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -4935,7 +5020,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:~18.3.5":
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:~18.3.5":
   version: 18.3.7
   resolution: "@types/react-dom@npm:18.3.7"
   peerDependencies:
@@ -5749,14 +5834,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.3.2":
+"aria-query@npm:5.1.3":
+  version: 5.1.3
+  resolution: "aria-query@npm:5.1.3"
+  dependencies:
+    deep-equal: "npm:^2.0.5"
+  checksum: 10/e5da608a7c4954bfece2d879342b6c218b6b207e2d9e5af270b5e38ef8418f02d122afdc948b68e32649b849a38377785252059090d66fa8081da95d1609c0d2
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:^5.0.0, aria-query@npm:^5.3.2":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
   checksum: 10/b2fe9bc98bd401bc322ccb99717c1ae2aaf53ea0d468d6e7aebdc02fac736e4a99b46971ee05b783b08ade23c675b2d8b60e4a1222a95f6e27bc4d2a0bfdcc03
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
+"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-buffer-byte-length@npm:1.0.2"
   dependencies:
@@ -6528,6 +6622,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "call-bind@npm:1.0.9"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.2"
+    es-define-property: "npm:^1.0.1"
+    get-intrinsic: "npm:^1.3.0"
+    set-function-length: "npm:^1.2.2"
+  checksum: 10/25b1a98d6158f0adf9fface594ca82be4e3ed481d8ff7f36ad1fccb0c8377e38c6a04ff3248693723222d378677e93077c739defc8a6741c82b7e00bcee1245d
+  languageName: node
+  linkType: hard
+
 "call-bind@npm:^1.0.7, call-bind@npm:^1.0.8":
   version: 1.0.8
   resolution: "call-bind@npm:1.0.8"
@@ -7362,6 +7468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: 10/f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.5.0":
   version: 0.5.0
   resolution: "cssom@npm:0.5.0"
@@ -7560,6 +7673,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-equal@npm:^2.0.5":
+  version: 2.2.3
+  resolution: "deep-equal@npm:2.2.3"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.0"
+    call-bind: "npm:^1.0.5"
+    es-get-iterator: "npm:^1.1.3"
+    get-intrinsic: "npm:^1.2.2"
+    is-arguments: "npm:^1.1.1"
+    is-array-buffer: "npm:^3.0.2"
+    is-date-object: "npm:^1.0.5"
+    is-regex: "npm:^1.1.4"
+    is-shared-array-buffer: "npm:^1.0.2"
+    isarray: "npm:^2.0.5"
+    object-is: "npm:^1.1.5"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.4"
+    regexp.prototype.flags: "npm:^1.5.1"
+    side-channel: "npm:^1.0.4"
+    which-boxed-primitive: "npm:^1.0.2"
+    which-collection: "npm:^1.0.1"
+    which-typed-array: "npm:^1.1.13"
+  checksum: 10/1ce49d0b71d0f14d8ef991a742665eccd488dfc9b3cada069d4d7a86291e591c92d2589c832811dea182b4015736b210acaaebce6184be356c1060d176f5a05f
+  languageName: node
+  linkType: hard
+
 "deep-extend@npm:^0.6.0":
   version: 0.6.0
   resolution: "deep-extend@npm:0.6.0"
@@ -7784,6 +7923,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 10/377b4a7f9eae0a5d72e1068c369c99e0e4ca17fdfd5219f3abd32a73a590749a267475a59d7b03a891f9b673c27429133a818c44b2e47e32fec024b34274e2ca
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: 10/83d3371f8226487fbad36e160d44f1d9017fb26d46faba6a06fcad15f34633fc827b8c3e99d49f71d5f3253d866e2131826866fd0a3c86626f8eccfc361881ff
+  languageName: node
+  linkType: hard
+
 "dom-serializer@npm:^2.0.0":
   version: 2.0.0
   resolution: "dom-serializer@npm:2.0.0"
@@ -8260,6 +8413,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-get-iterator@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "es-get-iterator@npm:1.1.3"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.1.3"
+    has-symbols: "npm:^1.0.3"
+    is-arguments: "npm:^1.1.1"
+    is-map: "npm:^2.0.2"
+    is-set: "npm:^2.0.2"
+    is-string: "npm:^1.0.7"
+    isarray: "npm:^2.0.5"
+    stop-iteration-iterator: "npm:^1.0.0"
+  checksum: 10/bc2194befbe55725f9489098626479deee3c801eda7e83ce0dff2eb266a28dc808edb9b623ff01d31ebc1328f09d661333d86b601036692c2e3c1a6942319433
+  languageName: node
+  linkType: hard
+
 "es-iterator-helpers@npm:^1.0.12":
   version: 1.2.2
   resolution: "es-iterator-helpers@npm:1.2.2"
@@ -9391,7 +9561,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
   version: 1.3.1
   resolution: "get-intrinsic@npm:1.3.1"
   dependencies:
@@ -10191,7 +10361,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
+"is-arguments@npm:^1.1.1":
+  version: 1.2.0
+  resolution: "is-arguments@npm:1.2.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/471a8ef631b8ee8829c43a8ab05c081700c0e25180c73d19f3bf819c1a8448c426a9e8e601f278973eca68966384b16ceb78b8c63af795b099cd199ea5afc457
+  languageName: node
+  linkType: hard
+
+"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
   dependencies:
@@ -10396,7 +10576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.3":
+"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-map@npm:2.0.3"
   checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
@@ -10485,7 +10665,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.2.1":
+"is-regex@npm:^1.1.4, is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
   dependencies:
@@ -10497,14 +10677,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.3":
+"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-set@npm:2.0.3"
   checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
   languageName: node
   linkType: hard
 
-"is-shared-array-buffer@npm:^1.0.4":
+"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.4":
   version: 1.0.4
   resolution: "is-shared-array-buffer@npm:1.0.4"
   dependencies:
@@ -10520,7 +10700,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-string@npm:^1.1.1":
+"is-string@npm:^1.0.7, is-string@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-string@npm:1.1.1"
   dependencies:
@@ -11918,6 +12098,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 10/e86f0280e99a8d8cd4eef24d8601ddae15ce54e43ac9990dfcb79e1e081c255ad24424a30d78d2ad8e51a8ce82a66a930047fed4b4aa38c6f0b392ff9300edfc
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.3":
   version: 0.30.21
   resolution: "magic-string@npm:0.30.21"
@@ -12783,6 +12972,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-is@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "object-is@npm:1.1.6"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+  checksum: 10/4f6f544773a595da21c69a7531e0e1d6250670f4e09c55f47eb02c516035cfcb1b46ceb744edfd3ecb362309dbccb6d7f88e43bf42e4d4595ac10a329061053a
+  languageName: node
+  linkType: hard
+
 "object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
@@ -13482,6 +13681,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+    ansi-styles: "npm:^5.0.0"
+    react-is: "npm:^17.0.1"
+  checksum: 10/248990cbef9e96fb36a3e1ae6b903c551ca4ddd733f8d0912b9cc5141d3d0b3f9f8dfb4d799fb1c6723382c9c2083ffbfa4ad43ff9a0e7535d32d41fd5f01da6
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
@@ -13846,6 +14056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 10/73b36281e58eeb27c9cc6031301b6ae19ecdc9f18ae2d518bdb39b0ac564e65c5779405d623f1df9abf378a13858b79442480244bd579968afc1faf9a2ce5e05
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
@@ -14202,7 +14419,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
+"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
   version: 1.5.4
   resolution: "regexp.prototype.flags@npm:1.5.4"
   dependencies:
@@ -14483,6 +14700,10 @@ __metadata:
     "@rollup/plugin-json": "npm:~6.1.0"
     "@rollup/plugin-node-resolve": "npm:~15.2.3"
     "@rollup/plugin-replace": "npm:~5.0.5"
+    "@testing-library/dom": "npm:^9.3.4"
+    "@testing-library/jest-dom": "npm:^6.4.8"
+    "@testing-library/react": "npm:^14.3.1"
+    "@testing-library/user-event": "npm:^14.5.2"
     "@types/archiver": "npm:~7.0.0"
     "@types/dompurify": "npm:~3.2.0"
     "@types/electron-devtools-installer": "npm:~2.2.5"
@@ -14887,6 +15108,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"side-channel-list@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "side-channel-list@npm:1.0.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.4"
+  checksum: 10/3499671cd52adaee739eac1e14d07530b8e3530192741aeb05e7fe4ad1b51d1368ceea2cd3c21b0f62b05410a5c70a7c4d997ba4b143303ef73d0c65dfd1c252
+  languageName: node
+  linkType: hard
+
 "side-channel-map@npm:^1.0.1":
   version: 1.0.1
   resolution: "side-channel-map@npm:1.0.1"
@@ -14912,6 +15143,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"side-channel@npm:^1.0.4":
+  version: 1.1.1
+  resolution: "side-channel@npm:1.1.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.4"
+    side-channel-list: "npm:^1.0.1"
+    side-channel-map: "npm:^1.0.1"
+    side-channel-weakmap: "npm:^1.0.2"
+  checksum: 10/5fa6393ff6ad25d8b4a38e9ba095481e498c8ebe5ab78481c1455146255a3d18ca37a6f936595cc671a6149134cdc295bbd2fa017620bdc73cbc7380634fa2fc
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.1.0":
   version: 1.1.0
   resolution: "side-channel@npm:1.1.0"
@@ -15210,7 +15454,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.1.0":
+"stop-iteration-iterator@npm:^1.0.0, stop-iteration-iterator@npm:^1.1.0":
   version: 1.1.0
   resolution: "stop-iteration-iterator@npm:1.1.0"
   dependencies:
@@ -16558,7 +16802,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
+"which-boxed-primitive@npm:^1.0.2, which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"
   dependencies:
@@ -16592,7 +16836,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.2":
+"which-collection@npm:^1.0.1, which-collection@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-collection@npm:1.0.2"
   dependencies:
@@ -16604,6 +16848,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which-typed-array@npm:^1.1.13":
+  version: 1.1.22
+  resolution: "which-typed-array@npm:1.1.22"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.9"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/59b0383347e2f3b0bc5be570c2dfae551b172a9c83e0a6b03c6e17401d6161dfa1d912c7657062fe9add254a0d3c25ef70593dbaec8fefa8714715ff69e0a3fc
+  languageName: node
+  linkType: hard
+
 "which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
   version: 1.1.20
   resolution: "which-typed-array@npm:1.1.20"