feat(ui): add tabbed failure view for toMatchScreenshot with comparison slider

[macarie]

Description

This PR adds a new failure view for toMatchScreenshot in the report panel. The view displays diff, reference, and actual screenshots in separate tabs, with a slider tab for side-by-side comparison. Under the hood, this feature is implemented using the new artifacts API.

Preview:

slider-demo-h264.mp4

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
• Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[sheremet-va]

I like the direction of this, but I wonder if instead of adding a separate artifact entity, we can just extend attachments with additional fields, but have them as @private? The two share a lot of similarities and it's hard to justify the separation, to be honest.

I feel like in the future we could also make the API public, the metadata seems useful

[sheremet-va]

Can't all of the new required fields just go into an artifact field? The message can be set to '' until the next major. And attachments can be added to TestAnnotation alongside the attachment as an @experimental feature

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9287be4
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/6902479acc6d66000800c3e4
😎 Deploy Preview	https://deploy-preview-8813--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[macarie]

Not entirely sure about this, but without it Vite would trigger a reload and hang the test until the pipeline reaches the 30m timeout: https://github.com/vitest-dev/vitest/actions/runs/19538883275/job/55939684333?pr=8813

[sheremet-va]

Found a bug. I was using expect-dom/toMatchScreenshot to test this, not sure if it was a good idea, but if you click between different tests, the screenshots are lost:

Screen.Recording.2025-11-21.at.17.37.21.mov

[macarie]

Should be fixed now @sheremet-va. Noticed Vue reused the node when switching test results so "Reference" moved to the left, that should be fixed now too.

[sheremet-va]

Thank you!