UI Diff

Inspiration

Reviewing a frontend merge request means pulling the branch, building it, hunting for what changed and comparing by eye, then doing it again after every push. Code review tools show the code. Nobody shows the reviewer what users will actually see.

What it does

UI Diff is a GitLab Duo flow. When a merge request is created or marked ready, it reads the diff, decides which pages and states changed, builds the target branch and the merge request branch inside Duo's own runner, drives a headless Chromium through both, and posts one note on the merge request: before, after and the changes in red for every affected page, the percentage of pixels that changed, and a one-line summary. Multi-step flows, such as creating a wallet, become a GIF. If nothing visual changed, it says so in one line and stops. Mention it with "dark", "mobile" or "create wallet" to re-run with those options.

No review app, no screenshot SaaS, no code leaving GitLab.

How we built it

A custom flow (flow registry v1) with one agent and six tools: get_merge_request, list_merge_request_diffs, list_all_merge_request_notes, run_command, read_file and create_merge_request_note. A custom runner image built by CI into the project registry: Playwright Chromium, bun, ffmpeg and Anthropic's sandbox runtime, so the flow stays sandboxed. agent-config.yml sets the image, installs dependencies and allows only the two font domains the build needs. One script builds both refs as static exports in a git worktree, serves them on localhost, screenshots full pages with animations frozen and Math.random seeded, measures changes with pixelmatch, composes the panels, and uploads the images with the flow's own token through the project uploads API. Triggers: merge request created, marked ready, and mention.

Challenges

Chromium could not find its browser because the sandbox strips environment variables; Google Fonts were blocked at build time; the flow's read_file refuses gitignored paths; and the catalog schema rejects HTML comments and some keys. Each one was found by a smoke-test flow that prints what the runner can do, and fixed in config, not in the agent.

Accomplishments

A real before/after note on a real merge request, 3 minutes from mention to note, entirely inside GitLab's hosted runner and sandbox.

What's next

Review-app URLs, wallet-connected states through Mock Wallet's agent mode, and publishing the flow publicly in the AI Catalog.

Path B, what is new since October 5

Everything on GitLab: the CI pipeline (typecheck, unit tests, SAST, secret detection, static build, runner image, Pages), the UI Diff flow and its runner image, three more flows (wallet security review, pipeline medic, release captain), and the deployment. Original project: https://github.com/ChaituVR/mock-wallet (MIT).