# Visual parity evidence

The existing Cefense frontend is the visual source of truth. These images compare it with the React port using the same browser, viewport, device-pixel ratio, route, data, and interaction state.

## Route matrix

Every route below was compared at 1440x900, 1920x1080, 834x1112, and 390x844:

| Page | Route |
| --- | --- |
| Home | `/` |
| Product | `/product` |
| Docs | `/docs` |
| Pricing | `/pricing` |
| Company | `/company` |
| Threat library | `/threats` |
| Login | `/login` |
| Feed | `/app/feed` |
| Immunity | `/app/reports` |
| Repositories | `/app/repositories` |
| Containers | `/app/containers` |
| Clouds | `/app/clouds` |
| Domains | `/app/domains` |
| Pentests | `/app/pentests` |
| Code audit | `/app/code-audit` |
| Integrations | `/app/integrations` |
| Library | `/app/library` |
| Autofix | `/app/autofix` |

The complete 1440x900 source/port set is in [`desktop`](./desktop). Representative large-desktop, tablet, and mobile captures are in [`responsive`](./responsive).

## Interactive states

The paired captures in [`states`](./states) cover:

- native login validation
- public navigation hover
- repository selector open
- finding detail view
- Fix and Proof workflow stages
- workspace settings
- repository URL validation error
- Immunity search empty state
- Immunity threat detail and return flow
- Immunity A-Z letter navigation
- mobile navigation drawer

In addition to the captured states, browser automation verified browser back/forward, direct route loads, refreshes, the Matched workflow stage, keyboard stage selection, populated backend data, React Query refetching, and a clean console on representative routes.

## Results

- Text, DOM geometry, document dimensions, element counts, and overflow behavior matched on all 18 routes at all four viewports.
- At 1440x900 against the production frontend build, 17 of 18 route pairs were pixel-identical.
- The Immunity route differed by 1,567 of 1,296,000 pixels (`0.121%`) from browser text antialiasing/compositing; its geometry and content were identical.
- At mobile size, all 18 route pairs were pixel-identical.
- Important interaction states were equal or within the same sub-pixel text-rendering tolerance.

The default tolerance is `0.003` (0.3%). This is intentionally above the highest measured transient antialiasing/compositing variance (`0.258%`) and well below a visible layout, color, spacing, or content regression.

## Run the check

```sh
bun run test:visual
```

For diagnostic diff images:

```sh
VISUAL_WRITE_DIFFS=1 bun run test:visual
```

Generated `diff-*.png` files are ignored and are not part of the baseline.