diff --git a/frontend/src/authschemes/webauthn/helpers.ts b/frontend/src/authschemes/webauthn/helpers.ts
index c564a0cab..38485af8b 100644
--- a/frontend/src/authschemes/webauthn/helpers.ts
+++ b/frontend/src/authschemes/webauthn/helpers.ts
@@ -1,4 +1,7 @@
-import { type ProvidedCredentialCreationOptions, type ProvidedCredentialRequestOptions } from './types'
+import {
+  type ProvidedCredentialCreationOptions,
+  type ProvidedCredentialRequestOptions,
+} from './types'
 
 export const encodeAsB64 = (ab: ArrayBuffer) => {
   return base64UrlEncode(arrayBufferToString(ab))
diff --git a/frontend/src/components/bullet_chooser/evidence_type_chooser.tsx b/frontend/src/components/bullet_chooser/evidence_type_chooser.tsx
index c6c3bdaa1..f9207a361 100644
--- a/frontend/src/components/bullet_chooser/evidence_type_chooser.tsx
+++ b/frontend/src/components/bullet_chooser/evidence_type_chooser.tsx
@@ -1,4 +1,3 @@
-
 import BulletChooser, { type BulletProps } from 'src/components/bullet_chooser'
 import { type SupportedEvidenceType } from 'src/global_types'
 
diff --git a/frontend/src/components/bullet_chooser/index.tsx b/frontend/src/components/bullet_chooser/index.tsx
index 50bed0a1a..69c26e4c5 100644
--- a/frontend/src/components/bullet_chooser/index.tsx
+++ b/frontend/src/components/bullet_chooser/index.tsx
@@ -169,9 +169,7 @@ export type BulletRendererProps<T extends BulletProps> = {
   selected?: boolean
 }
 
-export type BulletRenderer<T extends BulletProps> = (
-  props: BulletRendererProps<T>,
-) => ReactNode
+export type BulletRenderer<T extends BulletProps> = (props: BulletRendererProps<T>) => ReactNode
 
 function StandardBulletRenderer<T extends BulletProps>(props: BulletRendererProps<T>) {
   return (
diff --git a/frontend/src/components/bullet_chooser/text_chooser.tsx b/frontend/src/components/bullet_chooser/text_chooser.tsx
index 90fd2e316..f180a1f6a 100644
--- a/frontend/src/components/bullet_chooser/text_chooser.tsx
+++ b/frontend/src/components/bullet_chooser/text_chooser.tsx
@@ -1,4 +1,3 @@
-
 import BulletChooser, { type BulletProps } from 'src/components/bullet_chooser'
 import Tag from 'src/components/tag'
 
diff --git a/frontend/src/components/chooser/index.tsx b/frontend/src/components/chooser/index.tsx
index fc3a689db..6512fa6cf 100644
--- a/frontend/src/components/chooser/index.tsx
+++ b/frontend/src/components/chooser/index.tsx
@@ -84,11 +84,7 @@ export default function <T extends { uuid: string }>(props: {
   )
 }
 
-const Row = (props: {
-  selected: boolean
-  onChange: (v: boolean) => void
-  children: ReactNode
-}) => (
+const Row = (props: { selected: boolean; onChange: (v: boolean) => void; children: ReactNode }) => (
   <div
     className={cx('row', { selected: props.selected })}
     onClick={() => props.onChange(!props.selected)}
diff --git a/frontend/src/components/code_block/ace_editor/index.tsx b/frontend/src/components/code_block/ace_editor/index.tsx
index 15b033969..7e0e77aa1 100644
--- a/frontend/src/components/code_block/ace_editor/index.tsx
+++ b/frontend/src/components/code_block/ace_editor/index.tsx
@@ -47,7 +47,9 @@ function useLoadAceModeWithWebpack(requestedMode: string): string {
     }
     import(`ace-builds/src-noconflict/mode-${requestedMode}`)
       .then(() => setLoadedMode(requestedMode))
-      .catch(() => { /* mode load failed, editor will use plain_text fallback */ })
+      .catch(() => {
+        /* mode load failed, editor will use plain_text fallback */
+      })
   }, [requestedMode])
 
   return loadedMode
@@ -84,9 +86,7 @@ function useSizeOfParentContainer(parentRef: MutableRefObject<HTMLDivElement | n
 // are a few places where we listen to keydown events higher up in the dom e.g. timeline.
 // Since search field is self-contained within the ace-editor it seems reasonable that
 // a user typing in the search field shouldn't emit keydown events up the dom.
-function useStopPropagationOfSearchKeydowns(
-  parentRef: MutableRefObject<HTMLDivElement | null>,
-) {
+function useStopPropagationOfSearchKeydowns(parentRef: MutableRefObject<HTMLDivElement | null>) {
   const onKeyDown = (e: KeyboardEvent) => {
     if (e.target && (e.target as HTMLElement).className === 'ace_search_field') {
       e.stopPropagation()
diff --git a/frontend/src/components/date_range_picker/index.tsx b/frontend/src/components/date_range_picker/index.tsx
index 4e2e53c94..ea02a3022 100644
--- a/frontend/src/components/date_range_picker/index.tsx
+++ b/frontend/src/components/date_range_picker/index.tsx
@@ -55,7 +55,10 @@ const DropDown = (props: {
   </div>
 )
 
-export default function DateRangePicker(props: { range: MaybeDateRange; onSelectRange: (r: MaybeDateRange) => void }) {
+export default function DateRangePicker(props: {
+  range: MaybeDateRange
+  onSelectRange: (r: MaybeDateRange) => void
+}) {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
diff --git a/frontend/src/components/error_boundary/index.tsx b/frontend/src/components/error_boundary/index.tsx
new file mode 100644
index 000000000..9ad3119ea
--- /dev/null
+++ b/frontend/src/components/error_boundary/index.tsx
@@ -0,0 +1,24 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react'
+import ErrorDisplay from 'src/components/error_display'
+
+type Props = { children: ReactNode }
+type State = { error: Error | null }
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(_error: Error, _info: ErrorInfo) {
+    // Errors are surfaced via the render method
+  }
+
+  render() {
+    if (this.state.error) {
+      return <ErrorDisplay err={this.state.error} />
+    }
+    return this.props.children
+  }
+}
diff --git a/frontend/src/components/form/index.test.tsx b/frontend/src/components/form/index.test.tsx
new file mode 100644
index 000000000..69fa873eb
--- /dev/null
+++ b/frontend/src/components/form/index.test.tsx
@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import Form from './index'
+
+describe('Form', () => {
+  it('renders children', () => {
+    render(
+      <Form result={null} loading={false} onSubmit={() => {}}>
+        <input placeholder="Name" />
+      </Form>,
+    )
+    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument()
+  })
+
+  it('renders submit button when submitText is provided', () => {
+    render(<Form result={null} loading={false} onSubmit={() => {}} submitText="Save" />)
+    expect(screen.getByText('Save')).toBeInTheDocument()
+  })
+
+  it('does not render submit button when submitText is absent', () => {
+    render(<Form result={null} loading={false} onSubmit={() => {}} />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('renders cancel button when onCancel is provided', () => {
+    render(
+      <Form
+        result={null}
+        loading={false}
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        cancelText="Cancel"
+      />,
+    )
+    expect(screen.getByText('Cancel')).toBeInTheDocument()
+  })
+
+  it('calls onSubmit when form is submitted', async () => {
+    const onSubmit = vi.fn((e) => e.preventDefault())
+    const user = userEvent.setup()
+    render(
+      <Form result={null} loading={false} onSubmit={onSubmit} submitText="Go">
+        <input />
+      </Form>,
+    )
+    await user.click(screen.getByText('Go'))
+    expect(onSubmit).toHaveBeenCalled()
+  })
+
+  it('calls onCancel when cancel button is clicked', async () => {
+    const onCancel = vi.fn()
+    const user = userEvent.setup()
+    render(
+      <Form
+        result={null}
+        loading={false}
+        onSubmit={() => {}}
+        onCancel={onCancel}
+        cancelText="Cancel"
+      />,
+    )
+    await user.click(screen.getByText('Cancel'))
+    expect(onCancel).toHaveBeenCalled()
+  })
+
+  it('displays an error result message', () => {
+    render(
+      <Form
+        result={{ err: new Error('Something went wrong') }}
+        loading={false}
+        onSubmit={() => {}}
+      />,
+    )
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+  })
+
+  it('displays a success result message', () => {
+    render(<Form result={{ success: 'Saved!' }} loading={false} onSubmit={() => {}} />)
+    expect(screen.getByText('Saved!')).toBeInTheDocument()
+  })
+
+  it('shows loading state on submit button', () => {
+    render(<Form result={null} loading={true} onSubmit={() => {}} submitText="Save" />)
+    // Button renders a spinner when loading; the text may be hidden or replaced
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('disables cancel when loading', () => {
+    render(
+      <Form
+        result={null}
+        loading={true}
+        onSubmit={() => {}}
+        onCancel={() => {}}
+        cancelText="Cancel"
+      />,
+    )
+    // Cancel button is disabled when loading
+    const buttons = screen.getAllByRole('button')
+    const cancelButton = buttons.find((b) => b.textContent === 'Cancel')
+    expect(cancelButton).toBeDisabled()
+  })
+
+  it('disables submit when disableSubmit is true', () => {
+    render(
+      <Form result={null} loading={false} onSubmit={() => {}} submitText="Save" disableSubmit />,
+    )
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+})
diff --git a/frontend/src/components/help/index.tsx b/frontend/src/components/help/index.tsx
index f951435d3..cbf33855f 100644
--- a/frontend/src/components/help/index.tsx
+++ b/frontend/src/components/help/index.tsx
@@ -142,6 +142,4 @@ const KeyboardShortcutKey = (props: { shortcut: KeyboardShortcut }) => {
   )
 }
 
-const Key = (props: { children: ReactNode }) => (
-  <div className={cx('key')}>{props.children}</div>
-)
+const Key = (props: { children: ReactNode }) => <div className={cx('key')}>{props.children}</div>
diff --git a/frontend/src/components/http_cycle_viewer/index.tsx b/frontend/src/components/http_cycle_viewer/index.tsx
index 332516c54..8ec66af26 100644
--- a/frontend/src/components/http_cycle_viewer/index.tsx
+++ b/frontend/src/components/http_cycle_viewer/index.tsx
@@ -1,6 +1,14 @@
 import { useState, useRef, type MouseEvent } from 'react'
 import classnames from 'classnames/bind'
-import { type Har, type Entry, type Log, type Header, type PostData, type Response, type Request } from 'har-format'
+import {
+  type Har,
+  type Entry,
+  type Log,
+  type Header,
+  type PostData,
+  type Response,
+  type Request,
+} from 'har-format'
 import { type EvidenceViewHint } from 'src/global_types'
 import { trimURL, clamp } from 'src/helpers'
 import { mimetypeToAceLang } from './helpers'
@@ -200,10 +208,9 @@ const RequestTable = (props: {
     }
   }
 
-  const onRowSelected =
-    (index: number) => (e: MouseEvent<HTMLTableRowElement>) => {
-      props.setSelectedRow(props.selectedRow == index ? -1 : index)
-    }
+  const onRowSelected = (index: number) => (e: MouseEvent<HTMLTableRowElement>) => {
+    props.setSelectedRow(props.selectedRow == index ? -1 : index)
+  }
 
   return (
     <div
diff --git a/frontend/src/components/markdown_renderer/index.tsx b/frontend/src/components/markdown_renderer/index.tsx
index 8576697e2..d1e3d0835 100644
--- a/frontend/src/components/markdown_renderer/index.tsx
+++ b/frontend/src/components/markdown_renderer/index.tsx
@@ -1,4 +1,3 @@
-
 import SyncMarkdownRenderer from './sync_renderer'
 
 const MarkdownRenderer = (props: { className?: string; children: string }) => (
diff --git a/frontend/src/components/modal/index.test.tsx b/frontend/src/components/modal/index.test.tsx
new file mode 100644
index 000000000..b44596827
--- /dev/null
+++ b/frontend/src/components/modal/index.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import Modal from './index'
+
+describe('Modal', () => {
+  it('renders the title', () => {
+    render(
+      <Modal title="My Modal" onRequestClose={() => {}}>
+        {'.'}
+      </Modal>,
+    )
+    expect(screen.getByText('My Modal')).toBeInTheDocument()
+  })
+
+  it('renders children', () => {
+    render(
+      <Modal title="Test" onRequestClose={() => {}}>
+        <p>Modal content here</p>
+      </Modal>,
+    )
+    expect(screen.getByText('Modal content here')).toBeInTheDocument()
+  })
+
+  it('renders via a portal into document.body', () => {
+    const { baseElement } = render(
+      <Modal title="Portal Test" onRequestClose={() => {}}>
+        <span>portal child</span>
+      </Modal>,
+    )
+    expect(within(baseElement).getByText('Portal Test')).toBeInTheDocument()
+  })
+
+  it('calls onRequestClose when the backdrop is clicked', async () => {
+    const user = userEvent.setup()
+    const onRequestClose = vi.fn()
+    render(
+      <Modal title="Close test" onRequestClose={onRequestClose}>
+        <button>inside</button>
+      </Modal>,
+    )
+    const backdrop = document.body.querySelector('[aria-modal]')?.parentElement
+    if (backdrop) {
+      await user.pointer({ target: backdrop, keys: '[MouseLeft]' })
+    }
+    expect(onRequestClose).toHaveBeenCalled()
+  })
+
+  it('does not call onRequestClose when the inner modal is clicked', async () => {
+    const user = userEvent.setup()
+    const onRequestClose = vi.fn()
+    render(
+      <Modal title="No close" onRequestClose={onRequestClose}>
+        <button>inside modal</button>
+      </Modal>,
+    )
+    await user.click(screen.getByText('No close'))
+    expect(onRequestClose).not.toHaveBeenCalled()
+  })
+
+  it('has role="dialog" and aria-modal on the dialog element', () => {
+    render(
+      <Modal title="ARIA test" onRequestClose={() => {}}>
+        {'.'}
+      </Modal>,
+    )
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+  })
+
+  it('dialog is labelled by the title', () => {
+    render(
+      <Modal title="Labelled Modal" onRequestClose={() => {}}>
+        {'.'}
+      </Modal>,
+    )
+    const dialog = screen.getByRole('dialog', { name: 'Labelled Modal' })
+    expect(dialog).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/components/modal/index.tsx b/frontend/src/components/modal/index.tsx
index af954bff8..bade71735 100644
--- a/frontend/src/components/modal/index.tsx
+++ b/frontend/src/components/modal/index.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useRef, useEffect } from 'react'
+import { type ReactNode, useId, useRef, useEffect } from 'react'
 import classnames from 'classnames/bind'
 import { createPortal } from 'react-dom'
 import { useFocusFirstFocusableChild } from 'src/helpers'
@@ -10,7 +10,8 @@ export default function Modal(props: {
   title: string
   smallerWidth?: boolean
 }) {
-  const rootRef = useRef(null)
+  const titleId = useId()
+  const rootRef = useRef<HTMLDivElement | null>(null)
   useFocusFirstFocusableChild(rootRef)
 
   useEffect(() => {
@@ -20,15 +21,20 @@ export default function Modal(props: {
     return () => {
       main.style.removeProperty('filter')
     }
-  })
+  }, [])
 
   return createPortal(
     <div className={cx('root')} onMouseDown={props.onRequestClose} ref={rootRef}>
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
         className={cx('modal', props.smallerWidth ? 'smaller-width' : '')}
         onMouseDown={(e) => e.stopPropagation()}
       >
-        <h1 className={cx('title')}>{props.title}</h1>
+        <h1 id={titleId} className={cx('title')}>
+          {props.title}
+        </h1>
         <div className={cx('content')}>{props.children}</div>
       </div>
     </div>,
diff --git a/frontend/src/components/operation_badges/index.tsx b/frontend/src/components/operation_badges/index.tsx
index d59197bd3..ad0215f5b 100644
--- a/frontend/src/components/operation_badges/index.tsx
+++ b/frontend/src/components/operation_badges/index.tsx
@@ -1,7 +1,11 @@
 import classnames from 'classnames/bind'
 const cx = classnames.bind(require('./stylesheet'))
 
-const OperationBadges = (props: { className?: string; numUsers: number; showDetailsModal: () => void }) => (
+const OperationBadges = (props: {
+  className?: string
+  numUsers: number
+  showDetailsModal: () => void
+}) => (
   <button className={cx('root', props.className)} onClick={() => props.showDetailsModal()}>
     <div
       className={cx('icon', 'users')}
diff --git a/frontend/src/components/paging/index.test.tsx b/frontend/src/components/paging/index.test.tsx
new file mode 100644
index 000000000..036cd86e2
--- /dev/null
+++ b/frontend/src/components/paging/index.test.tsx
@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import Pager, { StandardPager } from './index'
+
+describe('Pager', () => {
+  it('renders children', () => {
+    render(
+      <Pager pageNumber={1} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>Page 1</span>
+      </Pager>,
+    )
+    expect(screen.getByText('Page 1')).toBeInTheDocument()
+  })
+
+  it('renders previous and next buttons', () => {
+    render(
+      <Pager pageNumber={2} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>2</span>
+      </Pager>,
+    )
+    expect(screen.getByRole('button', { name: 'previous' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'next' })).toBeInTheDocument()
+  })
+
+  it('disables previous button on page 1', () => {
+    render(
+      <Pager pageNumber={1} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>1</span>
+      </Pager>,
+    )
+    expect(screen.getByRole('button', { name: 'previous' })).toBeDisabled()
+  })
+
+  it('enables previous button on page > 1', () => {
+    render(
+      <Pager pageNumber={2} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>2</span>
+      </Pager>,
+    )
+    expect(screen.getByRole('button', { name: 'previous' })).not.toBeDisabled()
+  })
+
+  it('disables next button when at max page', () => {
+    render(
+      <Pager pageNumber={3} maxPageNumber={3} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>3</span>
+      </Pager>,
+    )
+    expect(screen.getByRole('button', { name: 'next' })).toBeDisabled()
+  })
+
+  it('enables next button when below max page', () => {
+    render(
+      <Pager pageNumber={2} maxPageNumber={5} onPageUp={() => {}} onPageDown={() => {}}>
+        <span>2</span>
+      </Pager>,
+    )
+    expect(screen.getByRole('button', { name: 'next' })).not.toBeDisabled()
+  })
+
+  it('calls onPageUp when next is clicked', async () => {
+    const onPageUp = vi.fn()
+    const user = userEvent.setup()
+    render(
+      <Pager pageNumber={1} onPageUp={onPageUp} onPageDown={() => {}}>
+        <span>1</span>
+      </Pager>,
+    )
+    await user.click(screen.getByRole('button', { name: 'next' }))
+    expect(onPageUp).toHaveBeenCalled()
+  })
+
+  it('calls onPageDown when previous is clicked', async () => {
+    const onPageDown = vi.fn()
+    const user = userEvent.setup()
+    render(
+      <Pager pageNumber={2} onPageUp={() => {}} onPageDown={onPageDown}>
+        <span>2</span>
+      </Pager>,
+    )
+    await user.click(screen.getByRole('button', { name: 'previous' }))
+    expect(onPageDown).toHaveBeenCalled()
+  })
+})
+
+describe('StandardPager', () => {
+  it('renders the current page number', () => {
+    render(<StandardPager page={3} onPageChange={() => {}} />)
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('calls onPageChange with incremented page when next is clicked', async () => {
+    const onPageChange = vi.fn()
+    const user = userEvent.setup()
+    render(<StandardPager page={2} maxPages={5} onPageChange={onPageChange} />)
+    await user.click(screen.getByRole('button', { name: 'next' }))
+    expect(onPageChange).toHaveBeenCalledWith(3)
+  })
+
+  it('calls onPageChange with decremented page when previous is clicked', async () => {
+    const onPageChange = vi.fn()
+    const user = userEvent.setup()
+    render(<StandardPager page={3} onPageChange={onPageChange} />)
+    await user.click(screen.getByRole('button', { name: 'previous' }))
+    expect(onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it('disables previous button on page 1', () => {
+    render(<StandardPager page={1} onPageChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'previous' })).toBeDisabled()
+  })
+
+  it('disables next when at max pages', () => {
+    render(<StandardPager page={5} maxPages={5} onPageChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'next' })).toBeDisabled()
+  })
+})
diff --git a/frontend/src/components/popover/index.tsx b/frontend/src/components/popover/index.tsx
index 01f043bd0..7a8b277ca 100644
--- a/frontend/src/components/popover/index.tsx
+++ b/frontend/src/components/popover/index.tsx
@@ -1,4 +1,12 @@
-import { type MutableRefObject, useEffect, type ReactElement, type ReactNode, useRef, type CSSProperties, useState } from 'react'
+import {
+  type MutableRefObject,
+  useEffect,
+  type ReactElement,
+  type ReactNode,
+  useRef,
+  type CSSProperties,
+  useState,
+} from 'react'
 import classnames from 'classnames/bind'
 import { createPortal } from 'react-dom'
 import { useWindowSize, useElementRect } from 'src/helpers'
diff --git a/frontend/src/components/table/index.test.tsx b/frontend/src/components/table/index.test.tsx
new file mode 100644
index 000000000..cfb7fcf94
--- /dev/null
+++ b/frontend/src/components/table/index.test.tsx
@@ -0,0 +1,143 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { useRef } from 'react'
+import { renderHook } from '@testing-library/react'
+import Table, { SortAsc, SortDesc, type ColumnData } from './index'
+
+describe('Table', () => {
+  it('renders string column headers', () => {
+    render(
+      <Table columns={['Name', 'Age']}>
+        <tr>
+          <td>Alice</td>
+          <td>30</td>
+        </tr>
+      </Table>,
+    )
+    expect(screen.getByText('Name')).toBeInTheDocument()
+    expect(screen.getByText('Age')).toBeInTheDocument()
+  })
+
+  it('renders ColumnData object headers', () => {
+    const cols: ColumnData[] = [{ label: 'Name', title: 'Sort by name', clickable: true }]
+    render(
+      <Table columns={cols}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    expect(screen.getByText('Name')).toBeInTheDocument()
+  })
+
+  it('renders children in tbody', () => {
+    render(
+      <Table columns={['Name']}>
+        <tr>
+          <td>Alice</td>
+        </tr>
+        <tr>
+          <td>Bob</td>
+        </tr>
+      </Table>,
+    )
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+    expect(screen.getByText('Bob')).toBeInTheDocument()
+  })
+
+  it('calls onColumnClicked with column index when a clickable column is clicked', () => {
+    const onColumnClicked = vi.fn()
+    const cols: ColumnData[] = [
+      { label: 'Name', title: 'Sort', clickable: true },
+      { label: 'Age', title: 'Sort age', clickable: true },
+    ]
+    render(
+      <Table columns={cols} onColumnClicked={onColumnClicked}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    screen.getByText('Name').click()
+    expect(onColumnClicked).toHaveBeenCalledWith(0)
+  })
+
+  it('does not call onColumnClicked for non-clickable columns', () => {
+    const onColumnClicked = vi.fn()
+    const cols: ColumnData[] = [{ label: 'Name', title: 'Name', clickable: false }]
+    render(
+      <Table columns={cols} onColumnClicked={onColumnClicked}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    screen.getByText('Name').click()
+    expect(onColumnClicked).not.toHaveBeenCalled()
+  })
+
+  it('renders sort ascending indicator', () => {
+    const cols: ColumnData[] = [{ label: 'Name', title: 'Name', sortDirection: SortAsc }]
+    const { container } = render(
+      <Table columns={cols}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    expect(container.querySelector('.asc')).toBeInTheDocument()
+  })
+
+  it('renders sort descending indicator', () => {
+    const cols: ColumnData[] = [{ label: 'Name', title: 'Name', sortDirection: SortDesc }]
+    const { container } = render(
+      <Table columns={cols}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    expect(container.querySelector('.desc')).toBeInTheDocument()
+  })
+
+  it('sets tabIndex when onKeyDown is provided', () => {
+    const { container } = render(
+      <Table columns={['Name']} onKeyDown={() => {}}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    expect(container.querySelector('table')).toHaveAttribute('tabindex', '0')
+  })
+
+  it('does not set tabIndex when onKeyDown is not provided', () => {
+    const { container } = render(
+      <Table columns={['Name']}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+    expect(container.querySelector('table')).not.toHaveAttribute('tabindex')
+  })
+
+  it('fires keydown events via tableRef', () => {
+    const onKeyDown = vi.fn()
+    const { result } = renderHook(() => useRef<HTMLTableElement | null>(null))
+    const tableRef = result.current
+
+    render(
+      <Table columns={['Name']} onKeyDown={onKeyDown} tableRef={tableRef}>
+        <tr>
+          <td>-</td>
+        </tr>
+      </Table>,
+    )
+
+    if (tableRef.current) {
+      fireEvent.keyDown(tableRef.current, { key: 'ArrowDown' })
+    }
+    expect(onKeyDown).toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/components/table/index.tsx b/frontend/src/components/table/index.tsx
index ec0708938..a9433c345 100644
--- a/frontend/src/components/table/index.tsx
+++ b/frontend/src/components/table/index.tsx
@@ -47,7 +47,7 @@ export default function Table(props: {
     return () => {
       curRootRef.removeEventListener('keydown', props.onKeyDown || noop)
     }
-  })
+  }, [props.onKeyDown, props.tableRef])
 
   return (
     <table
diff --git a/frontend/src/components/table/spanned_row.tsx b/frontend/src/components/table/spanned_row.tsx
index 517f2ea4b..8dd358852 100644
--- a/frontend/src/components/table/spanned_row.tsx
+++ b/frontend/src/components/table/spanned_row.tsx
@@ -1,9 +1,6 @@
 import { type ReactNode, type ReactElement } from 'react'
 
-export const SpannedRow = (props: {
-  span: number
-  children?: ReactNode
-}): ReactElement => (
+export const SpannedRow = (props: { span: number; children?: ReactNode }): ReactElement => (
   <tr>
     <td colSpan={props.span}>{props.children}</td>
   </tr>
diff --git a/frontend/src/components/terminal_player/view.tsx b/frontend/src/components/terminal_player/view.tsx
index 554b49e2f..19cbfb241 100644
--- a/frontend/src/components/terminal_player/view.tsx
+++ b/frontend/src/components/terminal_player/view.tsx
@@ -1,6 +1,18 @@
-import { useRef, useState, type CSSProperties, useEffect, useMemo, type MouseEvent, type ReactNode } from 'react'
+import {
+  useRef,
+  useState,
+  type CSSProperties,
+  useEffect,
+  useMemo,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
 import classnames from 'classnames/bind'
-import { type PositionChangeEventBody, type RateChangeEventBody, type ExpandedTerminalEvent } from './types'
+import {
+  type PositionChangeEventBody,
+  type RateChangeEventBody,
+  type ExpandedTerminalEvent,
+} from './types'
 import { format } from 'date-fns'
 
 import { ClickPopover } from 'src/components/popover'
diff --git a/frontend/src/components/timeline/index.tsx b/frontend/src/components/timeline/index.tsx
index cf19e0e13..52c8af613 100644
--- a/frontend/src/components/timeline/index.tsx
+++ b/frontend/src/components/timeline/index.tsx
@@ -254,10 +254,7 @@ const renderExtraActions = (evidence: Evidence, extraActions?: Actions) => {
 }
 
 // Returns true if the element el is a child of any of the supplied react refs
-function elementInRef(
-  el: HTMLElement,
-  refs: Array<MutableRefObject<HTMLElement | null>>,
-): boolean {
+function elementInRef(el: HTMLElement, refs: Array<MutableRefObject<HTMLElement | null>>): boolean {
   const targetEls = refs.map((el) => el.current)
   while (!targetEls.includes(el)) {
     if (el === document.body) return false
diff --git a/frontend/src/components/with_label/index.tsx b/frontend/src/components/with_label/index.tsx
index 0be0ee276..f3760134d 100644
--- a/frontend/src/components/with_label/index.tsx
+++ b/frontend/src/components/with_label/index.tsx
@@ -2,7 +2,11 @@ import { type ReactNode } from 'react'
 import classnames from 'classnames/bind'
 const cx = classnames.bind(require('./stylesheet'))
 
-export default function WithLabel(props: { children?: ReactNode; className?: string; label?: string }) {
+export default function WithLabel(props: {
+  children?: ReactNode
+  className?: string
+  label?: string
+}) {
   if (!props.label) {
     if (!props.children) return null
     return <div className={props.className}>{props.children}</div>
diff --git a/frontend/src/helpers/clamp.test.ts b/frontend/src/helpers/clamp.test.ts
new file mode 100644
index 000000000..749bd2063
--- /dev/null
+++ b/frontend/src/helpers/clamp.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { clamp } from './clamp'
+
+describe('clamp', () => {
+  it('returns min when value is below min', () => {
+    expect(clamp(-1, 0, 4)).toBe(0)
+  })
+
+  it('returns max when value is above max', () => {
+    expect(clamp(5, 0, 4)).toBe(4)
+  })
+
+  it('returns value when within range', () => {
+    expect(clamp(2, 0, 4)).toBe(2)
+  })
+
+  it('returns value when equal to min', () => {
+    expect(clamp(0, 0, 4)).toBe(0)
+  })
+
+  it('returns value when equal to max', () => {
+    expect(clamp(4, 0, 4)).toBe(4)
+  })
+
+  it('handles floating point values', () => {
+    expect(clamp(2.5, 0, 4)).toBe(2.5)
+  })
+
+  it('handles negative ranges', () => {
+    expect(clamp(-5, -10, -1)).toBe(-5)
+  })
+
+  it('clamps to min in a negative range', () => {
+    expect(clamp(-15, -10, -1)).toBe(-10)
+  })
+})
diff --git a/frontend/src/helpers/codeblock_to_blob.test.ts b/frontend/src/helpers/codeblock_to_blob.test.ts
new file mode 100644
index 000000000..56ea1b050
--- /dev/null
+++ b/frontend/src/helpers/codeblock_to_blob.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { codeblockToBlob } from './codeblock_to_blob'
+
+function readBlobAsText(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsText(blob)
+  })
+}
+
+describe('codeblockToBlob', () => {
+  it('returns a Blob', () => {
+    const blob = codeblockToBlob({
+      type: 'codeblock',
+      code: 'hello',
+      language: 'plaintext',
+      source: null,
+    })
+    expect(blob).toBeInstanceOf(Blob)
+  })
+
+  it('encodes code and language in the blob', async () => {
+    const blob = codeblockToBlob({
+      type: 'codeblock',
+      code: 'console.log(1)',
+      language: 'javascript',
+      source: null,
+    })
+    const text = await readBlobAsText(blob)
+    const parsed = JSON.parse(text)
+    expect(parsed.content).toBe('console.log(1)')
+    expect(parsed.contentSubtype).toBe('javascript')
+  })
+
+  it('includes source in metadata when provided', async () => {
+    const blob = codeblockToBlob({
+      type: 'codeblock',
+      code: 'x',
+      language: 'text',
+      source: 'myfile.txt',
+    })
+    const text = await readBlobAsText(blob)
+    const parsed = JSON.parse(text)
+    expect(parsed.metadata).toEqual({ source: 'myfile.txt' })
+  })
+
+  it('omits metadata when source is not provided', async () => {
+    const blob = codeblockToBlob({ type: 'codeblock', code: 'x', language: 'text', source: null })
+    const text = await readBlobAsText(blob)
+    const parsed = JSON.parse(text)
+    expect(parsed.metadata).toBeUndefined()
+  })
+
+  it('omits metadata when source is null', async () => {
+    const blob = codeblockToBlob({ type: 'codeblock', code: 'x', language: 'text', source: null })
+    const text = await readBlobAsText(blob)
+    const parsed = JSON.parse(text)
+    expect(parsed.metadata).toBeUndefined()
+  })
+})
diff --git a/frontend/src/helpers/highlight_substring.test.tsx b/frontend/src/helpers/highlight_substring.test.tsx
new file mode 100644
index 000000000..1461bdc11
--- /dev/null
+++ b/frontend/src/helpers/highlight_substring.test.tsx
@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { highlightSubstring } from './highlight_substring'
+
+describe('highlightSubstring', () => {
+  it('returns an array with all text when no match is found', () => {
+    const result = highlightSubstring('hello world', 'xyz', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.textContent).toBe('hello world')
+  })
+
+  it('returns a single span for an empty string', () => {
+    const result = highlightSubstring('', 'abc', 'hl')
+    expect(result).toHaveLength(1)
+  })
+
+  it('respects minLength option and skips highlighting when query is too short', () => {
+    const result = highlightSubstring('hello', 'h', 'hl', { minLength: 2 })
+    const { container } = render(<div>{result}</div>)
+    expect(container.textContent).toBe('hello')
+    expect(container.querySelectorAll('.hl')).toHaveLength(0)
+  })
+
+  it('highlights a single match in the middle', () => {
+    const result = highlightSubstring('hello world', 'world', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelector('.hl')?.textContent).toBe('world')
+  })
+
+  it('highlights multiple matches', () => {
+    const result = highlightSubstring('the cat and the dog', 'the', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelectorAll('.hl')).toHaveLength(2)
+  })
+
+  it('highlights a match at the start of the string', () => {
+    const result = highlightSubstring('hello world', 'hello', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelector('.hl')?.textContent).toBe('hello')
+  })
+
+  it('highlights a match at the end of the string', () => {
+    const result = highlightSubstring('hello world', 'world', 'hl')
+    const { container } = render(<div>{result}</div>)
+    const spans = container.querySelectorAll('.hl')
+    expect(spans[spans.length - 1].textContent).toBe('world')
+  })
+
+  it('is case-sensitive by default', () => {
+    const result = highlightSubstring('Hello World', 'hello', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelectorAll('.hl')).toHaveLength(0)
+  })
+
+  it('supports case-insensitive matching via regexFlags', () => {
+    const result = highlightSubstring('Hello World', 'hello', 'hl', { regexFlags: 'i' })
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelectorAll('.hl')).toHaveLength(1)
+  })
+
+  it('escapes regex special characters in the query', () => {
+    const result = highlightSubstring('1+1=2', '1+1', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.querySelector('.hl')?.textContent).toBe('1+1')
+  })
+
+  it('preserves non-matching text around matches', () => {
+    const result = highlightSubstring('abc def ghi', 'def', 'hl')
+    const { container } = render(<div>{result}</div>)
+    expect(container.textContent).toBe('abc def ghi')
+  })
+})
diff --git a/frontend/src/helpers/localStorage.test.ts b/frontend/src/helpers/localStorage.test.ts
new file mode 100644
index 000000000..aafa4f725
--- /dev/null
+++ b/frontend/src/helpers/localStorage.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { getIncludeDeletedUsers, setIncludeDeletedUsers } from './localStorage'
+
+function makeLocalStorageMock() {
+  const store = new Map<string, string>()
+  return {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => store.set(key, value),
+    removeItem: (key: string) => store.delete(key),
+    clear: () => store.clear(),
+  }
+}
+
+beforeEach(() => {
+  vi.stubGlobal('localStorage', makeLocalStorageMock())
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('getIncludeDeletedUsers / setIncludeDeletedUsers', () => {
+  it('returns false by default', () => {
+    expect(getIncludeDeletedUsers()).toBe(false)
+  })
+
+  it('returns true after setting to true', () => {
+    setIncludeDeletedUsers(true)
+    expect(getIncludeDeletedUsers()).toBe(true)
+  })
+
+  it('returns false after setting to false', () => {
+    setIncludeDeletedUsers(true)
+    setIncludeDeletedUsers(false)
+    expect(getIncludeDeletedUsers()).toBe(false)
+  })
+
+  it('persists across multiple get calls', () => {
+    setIncludeDeletedUsers(true)
+    expect(getIncludeDeletedUsers()).toBe(true)
+    expect(getIncludeDeletedUsers()).toBe(true)
+  })
+
+  it('can toggle back and forth', () => {
+    setIncludeDeletedUsers(true)
+    expect(getIncludeDeletedUsers()).toBe(true)
+    setIncludeDeletedUsers(false)
+    expect(getIncludeDeletedUsers()).toBe(false)
+  })
+})
diff --git a/frontend/src/helpers/tag_colors.test.ts b/frontend/src/helpers/tag_colors.test.ts
new file mode 100644
index 000000000..168530b1b
--- /dev/null
+++ b/frontend/src/helpers/tag_colors.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { tagColorNames, tagColorNameToColor, shiftColor, randomTagColorName } from './tag_colors'
+
+describe('tagColorNames', () => {
+  it('contains expected colors', () => {
+    expect(tagColorNames).toContain('blue')
+    expect(tagColorNames).toContain('red')
+    expect(tagColorNames).toContain('disabledGray')
+  })
+
+  it('contains light variants', () => {
+    expect(tagColorNames).toContain('lightBlue')
+    expect(tagColorNames).toContain('lightRed')
+  })
+
+  it('has 21 colors', () => {
+    expect(tagColorNames).toHaveLength(21)
+  })
+})
+
+describe('tagColorNameToColor', () => {
+  it('returns the correct hex value for blue', () => {
+    expect(tagColorNameToColor('blue')).toBe(0x0e5a8a)
+  })
+
+  it('returns the correct hex value for red', () => {
+    expect(tagColorNameToColor('red')).toBe(0xa82a2a)
+  })
+
+  it('returns 0x000000 for an unknown color', () => {
+    expect(tagColorNameToColor('notacolor')).toBe(0x000000)
+  })
+})
+
+describe('shiftColor', () => {
+  it('shifts blue to lightBlue', () => {
+    expect(shiftColor('blue')).toBe('lightBlue')
+  })
+
+  it('shifts lightBlue back to blue', () => {
+    expect(shiftColor('lightBlue')).toBe('blue')
+  })
+
+  it('shifts red to lightRed', () => {
+    expect(shiftColor('red')).toBe('lightRed')
+  })
+
+  it('disabledGray shifts to itself', () => {
+    expect(shiftColor('disabledGray')).toBe('disabledGray')
+  })
+})
+
+describe('randomTagColorName', () => {
+  it('returns a string in tagColorNames', () => {
+    const result = randomTagColorName()
+    expect(tagColorNames).toContain(result)
+  })
+
+  it('returns different values over multiple calls', () => {
+    const results = new Set(Array.from({ length: 50 }, () => randomTagColorName()))
+    expect(results.size).toBeGreaterThan(1)
+  })
+})
diff --git a/frontend/src/helpers/trim_url.test.ts b/frontend/src/helpers/trim_url.test.ts
new file mode 100644
index 000000000..0bb9b35a8
--- /dev/null
+++ b/frontend/src/helpers/trim_url.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { trimURL } from './trim_url'
+
+describe('trimURL', () => {
+  it('detects a URL', () => {
+    expect(trimURL('https://github.com/owner/repo').isAUrl).toBe(true)
+  })
+
+  it('detects a non-URL string', () => {
+    expect(trimURL('just some text').isAUrl).toBe(false)
+  })
+
+  it('returns the string unchanged when it is short enough', () => {
+    expect(trimURL('short text').trimmedValue).toBe('short text')
+  })
+
+  it('truncates a long non-URL string', () => {
+    const long = 'a'.repeat(60)
+    const { trimmedValue } = trimURL(long)
+    expect(trimmedValue.endsWith('...')).toBe(true)
+    expect(trimmedValue.length).toBeLessThan(60)
+  })
+
+  it('elides middle path segments for deep URLs', () => {
+    const { trimmedValue } = trimURL('https://github.com/microsoft/vscode/blob/master/README.md')
+    expect(trimmedValue).toContain('...')
+    expect(trimmedValue).toContain('README.md')
+    expect(trimmedValue).toContain('github.com')
+  })
+
+  it('keeps short URL paths intact', () => {
+    const { trimmedValue } = trimURL('https://github.com/owner/repo')
+    expect(trimmedValue).not.toContain('...')
+    expect(trimmedValue).toBe('github.com/owner/repo')
+  })
+
+  it('strips query string from URL', () => {
+    const { trimmedValue } = trimURL('https://example.com/path?foo=bar')
+    expect(trimmedValue).not.toContain('?')
+    expect(trimmedValue).not.toContain('foo')
+  })
+
+  it('strips fragment from the last path segment', () => {
+    const { trimmedValue } = trimURL('https://example.com/page#section')
+    expect(trimmedValue).not.toContain('#')
+  })
+})
diff --git a/frontend/src/helpers/use_element_rect.ts b/frontend/src/helpers/use_element_rect.ts
index df08ab7f3..8afd81952 100644
--- a/frontend/src/helpers/use_element_rect.ts
+++ b/frontend/src/helpers/use_element_rect.ts
@@ -4,9 +4,7 @@ import { type MutableRefObject, useState, useLayoutEffect } from 'react'
 // HTMLElement that updates automatically on window resize/scroll
 //
 // This is useful for portals that want to position themselves over a target area
-export function useElementRect(
-  el: MutableRefObject<HTMLElement | null> | null,
-): ClientRect | null {
+export function useElementRect(el: MutableRefObject<HTMLElement | null> | null): ClientRect | null {
   const [rect, setRect] = useState<ClientRect | null>(null)
 
   useLayoutEffect(() => {
diff --git a/frontend/src/helpers/use_form.test.ts b/frontend/src/helpers/use_form.test.ts
new file mode 100644
index 000000000..648212b57
--- /dev/null
+++ b/frontend/src/helpers/use_form.test.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect, vi } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { type FormEvent } from 'react'
+import { useForm, useFormField } from './use_form'
+
+const mockEvent = { preventDefault: vi.fn() } as unknown as FormEvent
+
+describe('useFormField', () => {
+  it('initializes with the given value', () => {
+    const { result } = renderHook(() => useFormField('hello'))
+    expect(result.current.value).toBe('hello')
+  })
+
+  it('updates value via onChange', () => {
+    const { result } = renderHook(() => useFormField('hello'))
+    act(() => result.current.onChange('world'))
+    expect(result.current.value).toBe('world')
+  })
+
+  it('starts enabled', () => {
+    const { result } = renderHook(() => useFormField(''))
+    expect(result.current.disabled).toBe(false)
+  })
+
+  it('can be disabled via setDisabled', () => {
+    const { result } = renderHook(() => useFormField(''))
+    act(() => result.current.setDisabled(true))
+    expect(result.current.disabled).toBe(true)
+  })
+})
+
+describe('useForm', () => {
+  it('starts not loading', () => {
+    const { result } = renderHook(() => useForm({ handleSubmit: () => Promise.resolve() }))
+    expect(result.current.loading).toBe(false)
+  })
+
+  it('starts with null result', () => {
+    const { result } = renderHook(() => useForm({ handleSubmit: () => Promise.resolve() }))
+    expect(result.current.result).toBeNull()
+  })
+
+  it('calls handleSubmit on submit', async () => {
+    const handleSubmit = vi.fn(() => Promise.resolve())
+    const { result } = renderHook(() => useForm({ handleSubmit }))
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('sets result.err when handleSubmit rejects with an Error', async () => {
+    const handleSubmit = vi.fn(() => Promise.reject(new Error('fail')))
+    const { result } = renderHook(() => useForm({ handleSubmit }))
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(result.current.result).toMatchObject({ err: expect.any(Error) })
+  })
+
+  it('sets result.err for non-Error throws', async () => {
+    const handleSubmit = vi.fn(() => Promise.reject('string error'))
+    const { result } = renderHook(() => useForm({ handleSubmit }))
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(result.current.result).toMatchObject({ err: expect.any(Error) })
+  })
+
+  it('sets result.success after success when onSuccessText is provided', async () => {
+    const { result } = renderHook(() =>
+      useForm({ handleSubmit: () => Promise.resolve(), onSuccessText: 'Saved!' }),
+    )
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(result.current.result).toMatchObject({ success: 'Saved!' })
+  })
+
+  it('calls onSuccess callback after successful submit', async () => {
+    const onSuccess = vi.fn()
+    const { result } = renderHook(() =>
+      useForm({ handleSubmit: () => Promise.resolve(), onSuccess }),
+    )
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables and re-enables fields during submit', async () => {
+    let resolveSubmit!: () => void
+    const handleSubmit = () =>
+      new Promise<void>((r) => {
+        resolveSubmit = r
+      })
+    const field = { setDisabled: vi.fn() }
+    const { result } = renderHook(() => useForm({ handleSubmit, fields: [field] }))
+
+    const submitPromise = act(() => result.current.onSubmit(mockEvent))
+    expect(field.setDisabled).toHaveBeenCalledWith(true)
+
+    act(() => resolveSubmit())
+    await submitPromise
+    expect(field.setDisabled).toHaveBeenCalledWith(false)
+  })
+
+  it('is not loading before submit and is loading after submit resolves', async () => {
+    const { result } = renderHook(() => useForm({ handleSubmit: () => Promise.resolve() }))
+    expect(result.current.loading).toBe(false)
+    await act(() => result.current.onSubmit(mockEvent))
+    expect(result.current.loading).toBe(false)
+  })
+})
diff --git a/frontend/src/helpers/use_modal.test.tsx b/frontend/src/helpers/use_modal.test.tsx
new file mode 100644
index 000000000..03201c506
--- /dev/null
+++ b/frontend/src/helpers/use_modal.test.tsx
@@ -0,0 +1,84 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
+import { useModal, renderModals } from './use_modal'
+
+describe('useModal', () => {
+  it('starts with node as null', () => {
+    const { result } = renderHook(() => useModal(() => <div>modal</div>))
+    expect(result.current.node).toBeNull()
+  })
+
+  it('renders the modal node after show()', () => {
+    const { result } = renderHook(() => useModal(() => <div>modal content</div>))
+    act(() => result.current.show({}))
+    const { getByText } = render(<>{result.current.node}</>)
+    expect(getByText('modal content')).toBeInTheDocument()
+  })
+
+  it('passes props to the modal renderer', () => {
+    const { result } = renderHook(() =>
+      useModal<{ name: string }>((p) => <div>Hello {p.name}</div>),
+    )
+    act(() => result.current.show({ name: 'Alice' }))
+    const { getByText } = render(<>{result.current.node}</>)
+    expect(getByText('Hello Alice')).toBeInTheDocument()
+  })
+
+  it('hides the modal after onRequestClose is called', () => {
+    let capturedClose: (() => void) | null = null
+    const { result } = renderHook(() =>
+      useModal<object>((p) => {
+        capturedClose = p.onRequestClose
+        return <div>modal</div>
+      }),
+    )
+    act(() => result.current.show({}))
+    render(<>{result.current.node}</>)
+    act(() => capturedClose?.())
+    expect(result.current.node).toBeNull()
+  })
+
+  it('calls the onClose callback when modal closes', () => {
+    const onClose = vi.fn()
+    let capturedClose: (() => void) | null = null
+    const { result } = renderHook(() =>
+      useModal<object>((p) => {
+        capturedClose = p.onRequestClose
+        return <div>modal</div>
+      }, onClose),
+    )
+    act(() => result.current.show({}))
+    render(<>{result.current.node}</>)
+    act(() => capturedClose?.())
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('updates when show() is called again with new props', () => {
+    const { result } = renderHook(() =>
+      useModal<{ name: string }>((p) => <div>Hello {p.name}</div>),
+    )
+    act(() => result.current.show({ name: 'Alice' }))
+    act(() => result.current.show({ name: 'Bob' }))
+    const { getByText } = render(<>{result.current.node}</>)
+    expect(getByText('Hello Bob')).toBeInTheDocument()
+  })
+})
+
+describe('renderModals', () => {
+  it('returns null when all modals have null nodes', () => {
+    const a = { node: null }
+    const b = { node: null }
+    expect(renderModals(a, b)).toBeNull()
+  })
+
+  it('returns the first non-null modal node', () => {
+    const a = { node: null }
+    const b = { node: <div>first visible</div> }
+    const c = { node: <div>second visible</div> }
+    const result = renderModals(a, b, c)
+    const { getByText } = render(<>{result}</>)
+    expect(getByText('first visible')).toBeInTheDocument()
+    expect(screen.queryByText('second visible')).toBeNull()
+  })
+})
diff --git a/frontend/src/helpers/use_wired_data.test.tsx b/frontend/src/helpers/use_wired_data.test.tsx
new file mode 100644
index 000000000..fa902ef78
--- /dev/null
+++ b/frontend/src/helpers/use_wired_data.test.tsx
@@ -0,0 +1,187 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, waitFor, act } from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
+import { useWiredData, usePaginatedWiredData } from './use_wired_data'
+
+const loadingRenderer = () => <div>loading</div>
+const errorRenderer = (err: Error) => <div>error: {err.message}</div>
+
+describe('useWiredData', () => {
+  it('starts in loading state', () => {
+    const fetchFn = vi.fn(() => new Promise(() => {}))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    expect(result.current.loading).toBe(true)
+  })
+
+  it('renders loading renderer while fetch is pending', () => {
+    const fetchFn = vi.fn(() => new Promise(() => {}))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    const { getByText } = render(
+      <>
+        {result.current.render(() => (
+          <div>success</div>
+        ))}
+      </>,
+    )
+    expect(getByText('loading')).toBeInTheDocument()
+  })
+
+  it('transitions to non-loading after fetch resolves', async () => {
+    const fetchFn = vi.fn().mockResolvedValue({ name: 'Alice' })
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+  })
+
+  it('renders data after fetch resolves', async () => {
+    const fetchFn = vi.fn(() => Promise.resolve({ name: 'Alice' }))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    const { getByText } = render(
+      <>
+        {result.current.render((data) => (
+          <div>data: {data.name}</div>
+        ))}
+      </>,
+    )
+    expect(getByText('data: Alice')).toBeInTheDocument()
+  })
+
+  it('renders error renderer when fetch rejects', async () => {
+    const fetchFn = vi.fn().mockRejectedValue(new Error('network error'))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    const { getByText } = render(
+      <>
+        {result.current.render(() => (
+          <div>success</div>
+        ))}
+      </>,
+    )
+    expect(getByText('error: network error')).toBeInTheDocument()
+  })
+
+  it('calls fetchDataFn exactly once on mount', async () => {
+    const fetchFn = vi.fn().mockResolvedValue('data')
+    renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(fetchFn).toHaveBeenCalledTimes(1))
+  })
+
+  it('expose() does not call exposer when data is not yet loaded', () => {
+    const fetchFn = vi.fn(() => new Promise(() => {}))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    const exposer = vi.fn()
+    result.current.expose(exposer)
+    expect(exposer).not.toHaveBeenCalled()
+  })
+
+  it('expose() calls exposer with data after load', async () => {
+    const fetchFn = vi.fn().mockResolvedValue({ name: 'Bob' })
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    const exposer = vi.fn()
+    result.current.expose(exposer)
+    expect(exposer).toHaveBeenCalledWith({ name: 'Bob' })
+  })
+
+  it('reload() triggers a re-fetch', async () => {
+    const fetchFn = vi.fn().mockResolvedValue('data')
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+    act(() => result.current.reload())
+    await waitFor(() => expect(fetchFn).toHaveBeenCalledTimes(2))
+  })
+
+  it('uses a custom error renderer', async () => {
+    const custom = (err: Error) => <div>custom: {err.message}</div>
+    const fetchFn = vi.fn().mockRejectedValue(new Error('oops'))
+    const { result } = renderHook(() => useWiredData(fetchFn, custom, loadingRenderer))
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    const { getByText } = render(
+      <>
+        {result.current.render(() => (
+          <div>ok</div>
+        ))}
+      </>,
+    )
+    expect(getByText('custom: oops')).toBeInTheDocument()
+  })
+
+  it('uses a custom loading renderer', () => {
+    const custom = () => <div>custom loading</div>
+    const fetchFn = vi.fn(() => new Promise(() => {}))
+    const { result } = renderHook(() => useWiredData(fetchFn, errorRenderer, custom))
+    const { getByText } = render(
+      <>
+        {result.current.render(() => (
+          <div>ok</div>
+        ))}
+      </>,
+    )
+    expect(getByText('custom loading')).toBeInTheDocument()
+  })
+})
+
+describe('usePaginatedWiredData', () => {
+  it('starts at page 1 with maxPages 1', () => {
+    const fetchFn = vi.fn((_page: number) => new Promise<never>(() => {}))
+    const { result } = renderHook(() =>
+      usePaginatedWiredData(fetchFn, errorRenderer, loadingRenderer),
+    )
+    expect(result.current.pagerProps.page).toBe(1)
+    expect(result.current.pagerProps.maxPages).toBe(1)
+  })
+
+  it('calls fetchFn with the current page number', async () => {
+    const fetchFn = vi.fn((_page: number) =>
+      Promise.resolve({ content: [], totalPages: 1, totalCount: 0, page: 1, pageSize: 10 }),
+    )
+    const { result } = renderHook(() =>
+      usePaginatedWiredData(fetchFn, errorRenderer, loadingRenderer),
+    )
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    expect(fetchFn).toHaveBeenCalledWith(1)
+  })
+
+  it('parses totalPages from the fetch result', async () => {
+    const fetchFn = vi.fn((_page: number) =>
+      Promise.resolve({ content: [], totalPages: 7, totalCount: 0, page: 1, pageSize: 10 }),
+    )
+    const { result } = renderHook(() =>
+      usePaginatedWiredData(fetchFn, errorRenderer, loadingRenderer),
+    )
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    expect(result.current.pagerProps.maxPages).toBe(7)
+  })
+
+  it('renders paginated content', async () => {
+    const fetchFn = vi.fn((_page: number) =>
+      Promise.resolve({ content: ['x', 'y'], totalPages: 1, totalCount: 2, page: 1, pageSize: 10 }),
+    )
+    const { result } = renderHook(() =>
+      usePaginatedWiredData(fetchFn, errorRenderer, loadingRenderer),
+    )
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    const { getByText } = render(
+      <>
+        {result.current.render((data) => (
+          <div>{data.join(',')}</div>
+        ))}
+      </>,
+    )
+    expect(getByText('x,y')).toBeInTheDocument()
+  })
+
+  it('re-fetches when page changes', async () => {
+    const fetchFn = vi.fn((_page: number) =>
+      Promise.resolve({ content: [], totalPages: 3, totalCount: 0, page: 1, pageSize: 10 }),
+    )
+    const { result } = renderHook(() =>
+      usePaginatedWiredData(fetchFn, errorRenderer, loadingRenderer),
+    )
+    await waitFor(() => expect(result.current.loading).toBe(false))
+    act(() => result.current.pagerProps.onPageChange(2))
+    await waitFor(() => expect(fetchFn).toHaveBeenCalledWith(2))
+    expect(result.current.pagerProps.page).toBe(2)
+  })
+})
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index f075c9995..f084885fd 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,11 +1,14 @@
-require('./base_css')
+import { Suspense } from 'react'
 import AuthContext from 'src/auth_context'
+import ErrorBoundary from 'src/components/error_boundary'
 import Layout from 'src/components/layout'
+import LoadingSpinner from 'src/components/loading_spinner'
 import Routes from 'src/routes'
 import { BrowserRouter } from 'react-router'
 import { getCurrentUser } from 'src/services'
 import { createRoot } from 'react-dom/client'
 import { useWiredData } from 'src/helpers'
+require('./base_css')
 
 const RootComponent = () => {
   const wiredUser = useWiredData(getCurrentUser)
@@ -14,7 +17,9 @@ const RootComponent = () => {
     <AuthContext.Provider value={{ user }}>
       <BrowserRouter>
         <Layout>
-          <Routes />
+          <Suspense fallback={<LoadingSpinner />}>
+            <Routes />
+          </Suspense>
         </Layout>
       </BrowserRouter>
     </AuthContext.Provider>
@@ -25,4 +30,8 @@ const container = document.createElement('div')
 document.body.appendChild(container)
 container.style.height = '100%'
 const root = createRoot(container)
-root.render(<RootComponent />)
+root.render(
+  <ErrorBoundary>
+    <RootComponent />
+  </ErrorBoundary>,
+)
diff --git a/frontend/src/pages/admin/service_worker_table/index.tsx b/frontend/src/pages/admin/service_worker_table/index.tsx
index 9bd2608e0..7a2f936e1 100644
--- a/frontend/src/pages/admin/service_worker_table/index.tsx
+++ b/frontend/src/pages/admin/service_worker_table/index.tsx
@@ -115,11 +115,7 @@ const emptyActions: Actions = {
 }
 
 function cellOrder(): Array<string>
-function cellOrder(
-  worker: ServiceWorker,
-  testData: TestData,
-  actions: Actions,
-): Array<ReactNode>
+function cellOrder(worker: ServiceWorker, testData: TestData, actions: Actions): Array<ReactNode>
 function cellOrder(
   worker?: ServiceWorker,
   testData?: TestData,
diff --git a/frontend/src/pages/admin/service_worker_table/modals.tsx b/frontend/src/pages/admin/service_worker_table/modals.tsx
index ceed53fa3..260df1aee 100644
--- a/frontend/src/pages/admin/service_worker_table/modals.tsx
+++ b/frontend/src/pages/admin/service_worker_table/modals.tsx
@@ -1,4 +1,3 @@
-
 import { type ServiceWorker } from 'src/global_types'
 import { useForm, useFormField } from 'src/helpers'
 
diff --git a/frontend/src/pages/admin/user_group_table/index.tsx b/frontend/src/pages/admin/user_group_table/index.tsx
index abe7b6b1b..d6d7bbc70 100644
--- a/frontend/src/pages/admin/user_group_table/index.tsx
+++ b/frontend/src/pages/admin/user_group_table/index.tsx
@@ -24,9 +24,7 @@ export default function UserGroupTable(props: {
   offReload: (listener: () => void) => void
 }) {
   const [deletingUserGroup, setDeletingUserGroup] = useState<null | UserGroupAdminView>(null)
-  const [modifyingUserGroup, setModifyingUserGroup] = useState<null | UserGroupAdminView>(
-    null,
-  )
+  const [modifyingUserGroup, setModifyingUserGroup] = useState<null | UserGroupAdminView>(null)
   const [withDeleted, setWithDeleted] = useState(getIncludeDeletedUsers())
   const itemsPerPage = 10
   const [page, setPage] = useState(1)
diff --git a/frontend/src/pages/operation_edit/operation_vars_table/index.tsx b/frontend/src/pages/operation_edit/operation_vars_table/index.tsx
index 43bb876d1..cadfbca93 100644
--- a/frontend/src/pages/operation_edit/operation_vars_table/index.tsx
+++ b/frontend/src/pages/operation_edit/operation_vars_table/index.tsx
@@ -15,9 +15,7 @@ export default function OperationVarsTable(props: { operationSlug: string; isAdm
   const bus = BuildReloadBus()
 
   const [deletingOperationVar, setDeletingOperationVar] = useState<null | OperationVar>(null)
-  const [modifyingOperationVar, setModifyingOperationVar] = useState<null | OperationVar>(
-    null,
-  )
+  const [modifyingOperationVar, setModifyingOperationVar] = useState<null | OperationVar>(null)
 
   const columns = Object.keys(rowBuilder(null, <span />))
 
diff --git a/frontend/src/pages/operation_edit/user_group_permission_editor/index.tsx b/frontend/src/pages/operation_edit/user_group_permission_editor/index.tsx
index 10bd12d0c..be958a5d7 100644
--- a/frontend/src/pages/operation_edit/user_group_permission_editor/index.tsx
+++ b/frontend/src/pages/operation_edit/user_group_permission_editor/index.tsx
@@ -222,7 +222,10 @@ const PermissionTable = (props: {
   )
 }
 
-export default function UserGroupPermissionEditor(props: { operationSlug: string; isAdmin: boolean }) {
+export default function UserGroupPermissionEditor(props: {
+  operationSlug: string
+  isAdmin: boolean
+}) {
   const bus = BuildReloadBus()
   const currentUser = useContext(AuthContext)?.user
 
diff --git a/frontend/src/pages/operation_show/evidence_list/index.tsx b/frontend/src/pages/operation_show/evidence_list/index.tsx
index 12d0af338..fde814311 100644
--- a/frontend/src/pages/operation_show/evidence_list/index.tsx
+++ b/frontend/src/pages/operation_show/evidence_list/index.tsx
@@ -8,7 +8,13 @@ import {
   MoveEvidenceModal,
   EvidenceMetadataModal,
 } from '../evidence_modals'
-import { type Codeblock, type Evidence, type ExportedEvidence, type Media, type Tag } from 'src/global_types'
+import {
+  type Codeblock,
+  type Evidence,
+  type ExportedEvidence,
+  type Media,
+  type Tag,
+} from 'src/global_types'
 import { useNavigate, useLocation, useParams } from 'react-router'
 import { getEvidenceList } from 'src/services'
 import { useWiredData, useModal, renderModals } from 'src/helpers'
diff --git a/frontend/src/pages/operation_show/layout/sidebar/index.tsx b/frontend/src/pages/operation_show/layout/sidebar/index.tsx
index a9dd5dcbb..38228cb14 100644
--- a/frontend/src/pages/operation_show/layout/sidebar/index.tsx
+++ b/frontend/src/pages/operation_show/layout/sidebar/index.tsx
@@ -5,7 +5,12 @@ import OperationBadgesModal from 'src/components/operation_badges_modal'
 import classnames from 'classnames/bind'
 import { Link } from 'react-router'
 import { DeleteQueryModal } from './query_modal'
-import { type Operation, type SavedQuery, type SavedQueryType, type ViewName } from 'src/global_types'
+import {
+  type Operation,
+  type SavedQuery,
+  type SavedQueryType,
+  type ViewName,
+} from 'src/global_types'
 import {
   default as ListMenu,
   ListItem,
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index be030f22a..3f5c4ce9b 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -1,22 +1,23 @@
-import { useContext, type FunctionComponent } from 'react'
+import { lazy, Suspense, useContext } from 'react'
 import classnames from 'classnames/bind'
 import AuthContext from 'src/auth_context'
 import ErrorDisplay from 'src/components/error_display'
+import LoadingSpinner from 'src/components/loading_spinner'
 import { NavLinkButton } from './components/button'
 import { Route, Routes, Navigate, useParams, type Params } from 'react-router'
-import { useAsyncComponent, useUserIsSuperAdmin } from 'src/helpers'
+import { useUserIsSuperAdmin } from 'src/helpers'
 
 const cx = classnames.bind(require('./stylesheet'))
 
-const AsyncLogin = makeAsyncPage(() => import('src/pages/login'))
-const AsyncOperationList = makeAsyncPage(() => import('src/pages/operation_list'))
-const AsyncOperationEdit = makeAsyncPage(() => import('src/pages/operation_edit'))
-const AsyncFindingShow = makeAsyncPage(() => import('src/pages/operation_show/finding_show'))
-const AsyncEvidenceList = makeAsyncPage(() => import('src/pages/operation_show/evidence_list'))
-const AsyncFindingList = makeAsyncPage(() => import('src/pages/operation_show/finding_list'))
-const AsyncAdminSettings = makeAsyncPage(() => import('src/pages/admin'))
-const AsyncAccountSettings = makeAsyncPage(() => import('src/pages/account_settings'))
-const AsyncNotFound = makeAsyncPage(() => import('src/pages/not_found'))
+const AsyncLogin = lazy(() => import('src/pages/login'))
+const AsyncOperationList = lazy(() => import('src/pages/operation_list'))
+const AsyncOperationEdit = lazy(() => import('src/pages/operation_edit'))
+const AsyncFindingShow = lazy(() => import('src/pages/operation_show/finding_show'))
+const AsyncEvidenceList = lazy(() => import('src/pages/operation_show/evidence_list'))
+const AsyncFindingList = lazy(() => import('src/pages/operation_show/finding_list'))
+const AsyncAdminSettings = lazy(() => import('src/pages/admin'))
+const AsyncAccountSettings = lazy(() => import('src/pages/account_settings'))
+const AsyncNotFound = lazy(() => import('src/pages/not_found'))
 
 /**
  * Redirect provides a mechanism to redirect a user to the indicated URL
@@ -41,80 +42,71 @@ export default function AppRoutes() {
 
   if (user == null)
     return (
-      <Routes>
-        <Route path="/login" element={<AsyncLogin />} />
-        <Route path="/login/:schemeCode" element={<AsyncLogin />} />
-        <Route path="/autherror/*">
-          <Route index element={<Redirect to="/login" />} />
-          <Route path="recoveryfailed" element={<AuthRecoveryFailed />} />
-          <Route path="noaccess" element={<AuthNoAccess />} />
-          <Route path="noverify" element={<AuthNoVerify />} />
-          <Route path="incomplete" element={<AuthIncomplete />} />
-          <Route path="disabled" element={<AuthDisabled />} />
-          <Route path="registrationdisabled" element={<AuthNoRegistration />} />
-        </Route>
-        <Route path="*" element={<Redirect to="/login" />} />
-      </Routes>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route path="/login" element={<AsyncLogin />} />
+          <Route path="/login/:schemeCode" element={<AsyncLogin />} />
+          <Route path="/autherror/*">
+            <Route index element={<Redirect to="/login" />} />
+            <Route path="recoveryfailed" element={<AuthRecoveryFailed />} />
+            <Route path="noaccess" element={<AuthNoAccess />} />
+            <Route path="noverify" element={<AuthNoVerify />} />
+            <Route path="incomplete" element={<AuthIncomplete />} />
+            <Route path="disabled" element={<AuthDisabled />} />
+            <Route path="registrationdisabled" element={<AuthNoRegistration />} />
+          </Route>
+          <Route path="*" element={<Redirect to="/login" />} />
+        </Routes>
+      </Suspense>
     )
 
   return (
-    <Routes>
-      <Route path="/login" element={<Redirect to="/operations" />} />
-      <Route path="/" element={<Redirect to="/operations" />} />
+    <Suspense fallback={<LoadingSpinner />}>
+      <Routes>
+        <Route path="/login" element={<Redirect to="/operations" />} />
+        <Route path="/" element={<Redirect to="/operations" />} />
 
-      <Route path="/operations/*">
-        <Route index element={<AsyncOperationList />} />
-        <Route path=":slug/*">
-          <Route index element={<Redirect to={`evidence`} />} />
-          <Route path="evidence" element={<AsyncEvidenceList />} />
-          <Route
-            path="evidence/:uuid"
-            element={
-              <Redirect to={`../evidence`} queryBuilder={(params) => `q=uuid%3A${params.uuid}`} />
-            }
-          />
-          {/* ^^^ we need to do ../evidence because .. points to :slug, while . points to evidence/:uuid */}
-          <Route path="findings" element={<AsyncFindingList />} />
-          <Route path="findings/:uuid" element={<AsyncFindingShow />} />
-          <Route path="edit/*">
-            <Route index element={<Redirect to={`settings`} />} />
-            <Route path="*" element={<AsyncOperationEdit />} />
+        <Route path="/operations/*">
+          <Route index element={<AsyncOperationList />} />
+          <Route path=":slug/*">
+            <Route index element={<Redirect to={`evidence`} />} />
+            <Route path="evidence" element={<AsyncEvidenceList />} />
+            <Route
+              path="evidence/:uuid"
+              element={
+                <Redirect to={`../evidence`} queryBuilder={(params) => `q=uuid%3A${params.uuid}`} />
+              }
+            />
+            {/* ^^^ we need to do ../evidence because .. points to :slug, while . points to evidence/:uuid */}
+            <Route path="findings" element={<AsyncFindingList />} />
+            <Route path="findings/:uuid" element={<AsyncFindingShow />} />
+            <Route path="edit/*">
+              <Route index element={<Redirect to={`settings`} />} />
+              <Route path="*" element={<AsyncOperationEdit />} />
+            </Route>
           </Route>
         </Route>
-      </Route>
-
-      {/* Account Settings */}
-      <Route path="/account/*">
-        <Route index element={<Redirect to="profile" />} />
-        <Route path="*" element={<AsyncAccountSettings />} />
-      </Route>
 
-      {/* Admin Settings */}
-      {isSuperAdmin && (
-        <Route path="/admin/*">
-          <Route index element={<Redirect to="users" />} />
-          <Route path="*" element={<AsyncAdminSettings />} />
+        {/* Account Settings */}
+        <Route path="/account/*">
+          <Route index element={<Redirect to="profile" />} />
+          <Route path="*" element={<AsyncAccountSettings />} />
         </Route>
-      )}
 
-      {/* AuthError routes that an admin might reach if testing */}
-      <Route path="/autherror/recoveryfailed" element={<NoAccess />} />
-      <Route path="*" element={<AsyncNotFound />} />
-    </Routes>
-  )
-}
+        {/* Admin Settings */}
+        {isSuperAdmin && (
+          <Route path="/admin/*">
+            <Route index element={<Redirect to="users" />} />
+            <Route path="*" element={<AsyncAdminSettings />} />
+          </Route>
+        )}
 
-// makeAsyncPage turns a `() => import('path/to/page/component')` into a react component ready to be passed into <Route />
-// It uses useAsyncComponent to properly render a loading spinner or error as appropriate
-//
-// This is used to break up each page into its own bundle to prevent the main entry bundle from becoming too large and allows
-// page javascript to load on demand.
-function makeAsyncPage(page: () => Promise<{ default: FunctionComponent }>) {
-  const defaultPage = () => page().then((module) => module.default)
-  return () => {
-    const Page = useAsyncComponent(defaultPage)
-    return <Page />
-  }
+        {/* AuthError routes that an admin might reach if testing */}
+        <Route path="/autherror/recoveryfailed" element={<NoAccess />} />
+        <Route path="*" element={<AsyncNotFound />} />
+      </Routes>
+    </Suspense>
+  )
 }
 
 const makeErrorDisplay =
diff --git a/frontend/src/services/data_sources/backend/request_helper.test.ts b/frontend/src/services/data_sources/backend/request_helper.test.ts
new file mode 100644
index 000000000..04c3478f6
--- /dev/null
+++ b/frontend/src/services/data_sources/backend/request_helper.test.ts
@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import xhr, { xhrText, reqMultipart } from './request_helper'
+
+function mockFetch(status: number, body: unknown) {
+  const isText = typeof body === 'string'
+  const response = {
+    status,
+    json: () => Promise.resolve(isText ? {} : body),
+    text: () => Promise.resolve(isText ? body : JSON.stringify(body)),
+  } as unknown as Response
+  vi.mocked(globalThis.fetch).mockResolvedValue(response)
+}
+
+beforeEach(() => {
+  vi.spyOn(globalThis, 'fetch')
+})
+
+describe('xhr', () => {
+  it('makes a GET request to /web + path', async () => {
+    mockFetch(200, { ok: true })
+    await xhr('GET', '/api/data')
+    expect(fetch).toHaveBeenCalledWith('/web/api/data', { method: 'GET' })
+  })
+
+  it('returns parsed JSON on success', async () => {
+    mockFetch(200, { value: 42 })
+    const result = await xhr('GET', '/api/data')
+    expect(result).toEqual({ value: 42 })
+  })
+
+  it('makes a POST request with JSON body', async () => {
+    mockFetch(201, {})
+    await xhr('POST', '/api/data', { name: 'Alice' })
+    expect(fetch).toHaveBeenCalledWith('/web/api/data', {
+      method: 'POST',
+      body: JSON.stringify({ name: 'Alice' }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+  })
+
+  it('appends query string parameters', async () => {
+    mockFetch(200, {})
+    await xhr('GET', '/api/data', null, { page: '2' })
+    const [url] = vi.mocked(fetch).mock.calls[0]
+    expect(url).toContain('page=2')
+  })
+
+  it('throws HttpError on 4xx responses', async () => {
+    mockFetch(404, {})
+    await expect(xhr('GET', '/api/missing')).rejects.toThrow()
+  })
+
+  it('throws HttpError on 5xx responses', async () => {
+    mockFetch(500, {})
+    await expect(xhr('GET', '/api/error')).rejects.toThrow()
+  })
+
+  it('throws HttpError with body.error message when present', async () => {
+    mockFetch(400, { error: 'bad request' })
+    await expect(xhr('GET', '/api/bad')).rejects.toThrow('bad request')
+  })
+
+  it('makes a PUT request', async () => {
+    mockFetch(200, {})
+    await xhr('PUT', '/api/data', { updated: true })
+    expect(fetch).toHaveBeenCalledWith('/web/api/data', expect.objectContaining({ method: 'PUT' }))
+  })
+})
+
+describe('xhrText', () => {
+  it('returns text response', async () => {
+    mockFetch(200, 'hello text')
+    const result = await xhrText('GET', '/api/text')
+    expect(result).toBe('hello text')
+  })
+})
+
+describe('reqMultipart', () => {
+  it('makes a multipart request and returns JSON', async () => {
+    mockFetch(200, { id: 1 })
+    const formData = new FormData()
+    const result = await reqMultipart('POST', '/api/upload', formData)
+    expect(result).toEqual({ id: 1 })
+    expect(fetch).toHaveBeenCalledWith('/web/api/upload', {
+      method: 'POST',
+      body: formData,
+    })
+  })
+
+  it('throws on error status in multipart response', async () => {
+    mockFetch(500, { error: 'upload failed' })
+    await expect(reqMultipart('POST', '/api/upload', new FormData())).rejects.toThrow()
+  })
+})
diff --git a/frontend/src/services/service_workers.ts b/frontend/src/services/service_workers.ts
index 4f043ee87..c22872e79 100644
--- a/frontend/src/services/service_workers.ts
+++ b/frontend/src/services/service_workers.ts
@@ -1,4 +1,8 @@
-import { type ActiveServiceWorker, type ServiceWorker, type ServiceWorkerTestOutput } from 'src/global_types'
+import {
+  type ActiveServiceWorker,
+  type ServiceWorker,
+  type ServiceWorkerTestOutput,
+} from 'src/global_types'
 import { backendDataSource as ds } from './data_sources/backend'
 
 export async function createServiceWorker(i: { name: string; config: string }): Promise<void> {