From 8399a66d803fb47f4f0479b7675dcde3aa5b5543 Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Sun, 9 Nov 2025 14:08:35 +0100
Subject: [PATCH 1/5] refactor(browser): get `annotate` from matcher state in
 `toMatchScreenshot`

---
 .../src/client/tester/expect/toMatchScreenshot.ts    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
index e30898f365a3..ffd8ad0e3ac0 100644
--- a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
+++ b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
@@ -2,7 +2,7 @@ import type { AsyncExpectationResult, MatcherState } from '@vitest/expect'
 import type { ScreenshotMatcherOptions } from '../../../../context'
 import type { ScreenshotMatcherArguments, ScreenshotMatcherOutput } from '../../../shared/screenshotMatcher/types'
 import type { Locator } from '../locators'
-import { getBrowserState, getWorkerState } from '../../utils'
+import { getBrowserState } from '../../utils'
 import { convertToSelector } from '../tester-utils'
 
 const counters = new Map<string, { current: number }>([])
@@ -19,13 +19,11 @@ export default async function toMatchScreenshot(
     throw new Error('\'toMatchScreenshot\' cannot be used with "not"')
   }
 
-  const currentTest = getWorkerState().current
-
-  if (currentTest === undefined || this.currentTestName === undefined) {
+  if (this.task === undefined || this.currentTestName === undefined) {
     throw new Error('\'toMatchScreenshot\' cannot be used without test context')
   }
 
-  const counterName = `${currentTest.result?.repeatCount ?? 0}${this.testPath}${this.currentTestName}`
+  const counterName = `${this.task.result?.repeatCount ?? 0}${this.testPath}${this.currentTestName}`
   let counter = counters.get(counterName)
 
   if (counter === undefined) {
@@ -66,8 +64,8 @@ export default async function toMatchScreenshot(
     ] satisfies ScreenshotMatcherArguments,
   )
 
-  if (result.pass === false && 'context' in currentTest) {
-    const { annotate } = currentTest.context
+  if (result.pass === false) {
+    const { annotate } = this.task.context
 
     const annotations: ReturnType<typeof annotate>[] = []
 

From 2fc025c8b98781be6d2872baa3fee1ccd2a3d085 Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Wed, 19 Nov 2025 23:42:25 +0100
Subject: [PATCH 2/5] feat(ui): create reference/actual slider for
 `toMatchScreenshot` failures

---
 .../client/tester/expect/toMatchScreenshot.ts | 26 ++++---
 .../node/commands/screenshotMatcher/index.ts  |  9 ++-
 .../src/shared/screenshotMatcher/types.ts     |  6 +-
 packages/runner/src/types.ts                  |  1 +
 packages/runner/src/types/tasks.ts            | 20 ++++-
 .../components/artifacts/ArtifactTemplate.vue | 17 +++++
 .../artifacts/visual-regression/SmallTabs.vue | 62 ++++++++++++++++
 .../visual-regression/SmallTabsPane.vue       | 39 ++++++++++
 .../visual-regression/VisualRegression.vue    | 46 ++++++++++++
 .../VisualRegressionImage.vue                 | 26 +++++++
 .../VisualRegressionImageContainer.vue        | 14 ++++
 .../VisualRegressionSlider.vue                | 74 +++++++++++++++++++
 .../components/views/ViewTestReport.vue       | 51 +++++++++++--
 packages/ui/client/composables/attachments.ts | 10 +++
 packages/ui/client/composables/codemirror.ts  |  8 +-
 packages/ui/client/composables/small-tabs.ts  | 22 ++++++
 16 files changed, 405 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui/client/components/artifacts/ArtifactTemplate.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/SmallTabsPane.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegressionImage.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegressionImageContainer.vue
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.vue
 create mode 100644 packages/ui/client/composables/small-tabs.ts

diff --git a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
index ffd8ad0e3ac0..91567c330eec 100644
--- a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
+++ b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts
@@ -1,7 +1,9 @@
 import type { AsyncExpectationResult, MatcherState } from '@vitest/expect'
+import type { VisualRegressionArtifact } from '@vitest/runner'
 import type { ScreenshotMatcherOptions } from '../../../../context'
 import type { ScreenshotMatcherArguments, ScreenshotMatcherOutput } from '../../../shared/screenshotMatcher/types'
 import type { Locator } from '../locators'
+import { recordArtifact } from '@vitest/runner'
 import { getBrowserState } from '../../utils'
 import { convertToSelector } from '../tester-utils'
 
@@ -65,23 +67,28 @@ export default async function toMatchScreenshot(
   )
 
   if (result.pass === false) {
-    const { annotate } = this.task.context
-
-    const annotations: ReturnType<typeof annotate>[] = []
+    const attachments: VisualRegressionArtifact['attachments'] = []
 
     if (result.reference) {
-      annotations.push(annotate('Reference screenshot', { path: result.reference }))
+      attachments.push({ name: 'reference', ...result.reference })
     }
 
     if (result.actual) {
-      annotations.push(annotate('Actual screenshot', { path: result.actual }))
+      attachments.push({ name: 'actual', ...result.actual })
     }
 
     if (result.diff) {
-      annotations.push(annotate('Diff', { path: result.diff }))
+      attachments.push({ name: 'diff', path: result.diff })
     }
 
-    await Promise.all(annotations)
+    if (attachments.length > 0) {
+      await recordArtifact(this.task, {
+        type: 'internal:toMatchScreenshot',
+        kind: 'visual-regression',
+        message: result.message,
+        attachments,
+      })
+    }
   }
 
   return {
@@ -94,14 +101,15 @@ export default async function toMatchScreenshot(
             '',
             result.message,
             result.reference
-              ? `\nReference screenshot:\n  ${this.utils.EXPECTED_COLOR(result.reference)}`
+              ? `\nReference screenshot:\n  ${this.utils.EXPECTED_COLOR(result.reference.path)}`
               : null,
             result.actual
-              ? `\nActual screenshot:\n  ${this.utils.RECEIVED_COLOR(result.actual)}`
+              ? `\nActual screenshot:\n  ${this.utils.RECEIVED_COLOR(result.actual.path)}`
               : null,
             result.diff
               ? this.utils.DIM_COLOR(`\nDiff image:\n  ${result.diff}`)
               : null,
+            '',
           ]
             .filter(element => element !== null)
             .join('\n'),
diff --git a/packages/browser/src/node/commands/screenshotMatcher/index.ts b/packages/browser/src/node/commands/screenshotMatcher/index.ts
index 200ed96a3bae..1d35054d4aa9 100644
--- a/packages/browser/src/node/commands/screenshotMatcher/index.ts
+++ b/packages/browser/src/node/commands/screenshotMatcher/index.ts
@@ -55,7 +55,7 @@ export const screenshotMatcher: BrowserCommand<
   if (value === null || value.actual === null) {
     return {
       pass: false,
-      reference: referenceFile && paths.reference,
+      reference: referenceFile && { path: paths.reference, width: reference!.metadata.width, height: reference!.metadata.height },
       actual: null,
       diff: null,
       message: `Could not capture a stable screenshot within ${timeout}ms.`,
@@ -80,7 +80,8 @@ export const screenshotMatcher: BrowserCommand<
     if (updateSnapshot !== 'all') {
       return {
         pass: false,
-        reference: referencePath,
+        // we use `actual`'s metadata because that's the screenshot we saved
+        reference: { path: referencePath, width: value.actual.metadata.width, height: value.actual.metadata.height },
         actual: null,
         diff: null,
         message: `No existing reference screenshot found${
@@ -143,8 +144,8 @@ export const screenshotMatcher: BrowserCommand<
   //  - fail
   return {
     pass: false,
-    reference: paths.reference,
-    actual: paths.diffs.actual,
+    reference: { path: paths.reference, width: reference.metadata.width, height: reference.metadata.height },
+    actual: { path: paths.diffs.actual, width: value.actual.metadata.width, height: value.actual.metadata.height },
     diff: finalResult.diff && paths.diffs.diff,
     message: `Screenshot does not match the stored reference.${
       finalResult.message === null
diff --git a/packages/browser/src/shared/screenshotMatcher/types.ts b/packages/browser/src/shared/screenshotMatcher/types.ts
index 1bc124de30b7..2af6c2e02238 100644
--- a/packages/browser/src/shared/screenshotMatcher/types.ts
+++ b/packages/browser/src/shared/screenshotMatcher/types.ts
@@ -12,11 +12,13 @@ export type ScreenshotMatcherArguments<
     },
 ]
 
+interface ScreenshotData { path: string; width: number; height: number }
+
 export type ScreenshotMatcherOutput = Promise<
   {
     pass: false
-    reference: string | null
-    actual: string | null
+    reference: ScreenshotData | null
+    actual: ScreenshotData | null
     diff: string | null
     message: string
   }
diff --git a/packages/runner/src/types.ts b/packages/runner/src/types.ts
index eaccf81481b8..84e2379eef8f 100644
--- a/packages/runner/src/types.ts
+++ b/packages/runner/src/types.ts
@@ -54,4 +54,5 @@ export type {
   TestFunction,
   TestOptions,
   Use,
+  VisualRegressionArtifact,
 } from './types/tasks'
diff --git a/packages/runner/src/types/tasks.ts b/packages/runner/src/types/tasks.ts
index b726e0829d2c..3ae8f199f6b8 100644
--- a/packages/runner/src/types/tasks.ts
+++ b/packages/runner/src/types/tasks.ts
@@ -780,6 +780,24 @@ export interface TestAnnotationArtifact extends TestArtifactBase {
   annotation: TestAnnotation
 }
 
+type VisualRegressionArtifactAttachment = TestAttachment & ({
+  name: 'reference' | 'actual'
+  width: number
+  height: number
+} | { name: 'diff' })
+
+/**
+ * @experimental
+ *
+ * Artifact type for visual regressions.
+ */
+export interface VisualRegressionArtifact extends TestArtifactBase {
+  type: 'internal:toMatchScreenshot'
+  kind: 'visual-regression'
+  message: string
+  attachments: VisualRegressionArtifactAttachment[]
+}
+
 /**
  * @experimental
  * @advanced
@@ -861,4 +879,4 @@ export interface TestArtifactRegistry {}
  *
  * This type automatically includes all artifacts registered via {@link TestArtifactRegistry}.
  */
-export type TestArtifact = TestAnnotationArtifact | TestArtifactRegistry[keyof TestArtifactRegistry]
+export type TestArtifact = TestAnnotationArtifact | VisualRegressionArtifact | TestArtifactRegistry[keyof TestArtifactRegistry]
diff --git a/packages/ui/client/components/artifacts/ArtifactTemplate.vue b/packages/ui/client/components/artifacts/ArtifactTemplate.vue
new file mode 100644
index 000000000000..0b5ab742e643
--- /dev/null
+++ b/packages/ui/client/components/artifacts/ArtifactTemplate.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
+<template>
+  <article class="flex flex-col gap-4">
+    <h1>
+      <slot name="title" />
+    </h1>
+    <p v-if="slots.message">
+      <slot name="message" />
+    </p>
+    <slot />
+  </article>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
new file mode 100644
index 000000000000..32ecbc68e51f
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { SmallTabsConfig } from '~/composables/small-tabs'
+import { provide, ref, useId } from 'vue'
+import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
+
+const activeTab = ref<string | null>(null)
+const tabs = ref<SmallTabsConfig[]>([])
+
+function setActive(key: string) {
+  activeTab.value = key
+}
+
+const id = useId()
+
+provide(SMALL_TABS_CONTEXT, {
+  id,
+  activeTab,
+  registerTab: (tab) => {
+    if (!tabs.value.some(({ id }) => id === tab.id)) {
+      tabs.value.push(tab)
+    }
+
+    if (tabs.value.length === 1) {
+      setActive(tab.id)
+    }
+  },
+  unregisterTab: (tab) => {
+    const index = tabs.value.findIndex(({ id }) => id === tab.id)
+
+    if (index > -1) {
+      tabs.value.splice(index, 1)
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center gap-6"
+  >
+    <div
+      role="tablist"
+      aria-orientation="horizontal"
+      class="flex gap-4"
+    >
+      <button
+        v-for="tab in tabs"
+        :id="idFor.tab(tab.id, id)"
+        :key="tab.id"
+        role="tab"
+        :aria-selected="activeTab === tab.id"
+        :aria-controls="idFor.tabpanel(tab.id, id)"
+        type="button"
+        class="aria-[selected=true]:underline underline-offset-4"
+        @click="setActive(tab.id)"
+      >
+        {{ tab.title }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/SmallTabsPane.vue b/packages/ui/client/components/artifacts/visual-regression/SmallTabsPane.vue
new file mode 100644
index 000000000000..3477af76a0b5
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/SmallTabsPane.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SmallTabsConfig } from '~/composables/small-tabs'
+import { computed, inject, onMounted, onUnmounted, useId } from 'vue'
+import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
+
+interface TabPaneProps extends Omit<SmallTabsConfig, 'id'> {}
+
+const props = defineProps<TabPaneProps>()
+
+const context = inject(SMALL_TABS_CONTEXT)
+
+if (!context) {
+  throw new Error('TabPane must be used within Tabs')
+}
+
+const id = useId()
+
+const isActive = computed(() => context.activeTab.value === id)
+
+onMounted(() => {
+  context.registerTab({ ...props, id })
+})
+
+onUnmounted(() => {
+  context.unregisterTab({ ...props, id })
+})
+</script>
+
+<template>
+  <div
+    :id="idFor.tabpanel(id, context.id)"
+    role="tabpanel"
+    :aria-labelledby="idFor.tab(id, context.id)"
+    :hidden="!isActive"
+    class="max-w-full"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
new file mode 100644
index 000000000000..bda7a3869991
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VisualRegressionArtifact } from '@vitest/runner'
+import { computed } from 'vue'
+import ArtifactTemplate from '../ArtifactTemplate.vue'
+import SmallTabs from './SmallTabs.vue'
+import SmallTabsPane from './SmallTabsPane.vue'
+import VisualRegressionImage from './VisualRegressionImage.vue'
+import VisualRegressionSlider from './VisualRegressionSlider.vue'
+
+const { regression } = defineProps<{
+  regression: VisualRegressionArtifact
+}>()
+
+type AttachmentWithMeta = Exclude<VisualRegressionArtifact['attachments'][number], { name: 'diff' }>
+
+const groups = computed(() => ({
+  diff: regression.attachments.find(artifact => artifact.name === 'diff'),
+  reference: regression.attachments.find((artifact): artifact is AttachmentWithMeta => artifact.name === 'reference'),
+  actual: regression.attachments.find((artifact): artifact is AttachmentWithMeta => artifact.name === 'actual'),
+}))
+</script>
+
+<template>
+  <ArtifactTemplate>
+    <template #title>
+      Visual Regression
+    </template>
+    <template #message>
+      {{ regression.message }}
+    </template>
+    <SmallTabs>
+      <SmallTabsPane v-if="groups.diff" title="Diff">
+        <VisualRegressionImage :attachment="groups.diff" />
+      </SmallTabsPane>
+      <SmallTabsPane v-if="groups.reference" title="Reference">
+        <VisualRegressionImage :attachment="groups.reference" />
+      </SmallTabsPane>
+      <SmallTabsPane v-if="groups.actual" title="Actual">
+        <VisualRegressionImage :attachment="groups.actual" />
+      </SmallTabsPane>
+      <SmallTabsPane v-if="groups.reference && groups.actual" title="Slider">
+        <VisualRegressionSlider :actual="groups.actual" :reference="groups.reference" />
+      </SmallTabsPane>
+    </SmallTabs>
+  </ArtifactTemplate>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImage.vue b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImage.vue
new file mode 100644
index 000000000000..b238497a6060
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImage.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TestAttachment } from '@vitest/runner'
+import { computed } from 'vue'
+import { internalOrExternalUrl, isExternalAttachment } from '~/composables/attachments'
+import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
+
+const { attachment } = defineProps<{
+  attachment: TestAttachment
+}>()
+
+const href = computed<string>(() => internalOrExternalUrl(attachment))
+</script>
+
+<template>
+  <VisualRegressionImageContainer>
+    <a
+      target="_blank"
+      :href="href"
+      :referrerPolicy="isExternalAttachment(attachment) ? 'no-referrer' : undefined"
+    >
+      <img
+        :src="href"
+      >
+    </a>
+  </VisualRegressionImageContainer>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImageContainer.vue b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImageContainer.vue
new file mode 100644
index 000000000000..1dcadc41ad12
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionImageContainer.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const checkeredBackground = `url("${
+  CSS.escape('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".05"/></svg>')
+}")`
+</script>
+
+<template>
+  <div
+    class="max-w-full w-fit mx-auto bg-[size:16px_16px] bg-[#fafafa] dark:bg-[#3a3a3a] bg-center p-4 rounded user-select-none outline-0 outline-black dark:outline-white outline-offset-4 outline-solid focus-within:has-focus-visible:outline-2"
+    :style="{ backgroundImage: checkeredBackground }"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.vue b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.vue
new file mode 100644
index 000000000000..76101543d17c
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { VisualRegressionArtifact } from '@vitest/runner'
+import { computed, ref, useId } from 'vue'
+import { internalOrExternalUrl } from '~/composables/attachments'
+import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
+
+type AttachmentWithMeta = Exclude<VisualRegressionArtifact['attachments'][number], { name: 'diff' }>
+
+const { actual, reference } = defineProps<{
+  reference: AttachmentWithMeta
+  actual: AttachmentWithMeta
+}>()
+
+const referenceUrl = computed(() => internalOrExternalUrl(reference))
+const actualUrl = computed(() => internalOrExternalUrl(actual))
+
+const maxWidth = computed(() =>
+  Math.max(reference.width, actual.width),
+)
+const maxHeight = computed(() =>
+  Math.max(reference.height, actual.height),
+)
+
+const splitPercentage = ref(50)
+
+const inputId = useId()
+</script>
+
+<template>
+  <VisualRegressionImageContainer>
+    <div
+      aria-label="Image comparison slider showing reference and actual screenshots"
+      class="relative max-w-full h-full overflow-hidden"
+      :style="{
+        '--split': `${splitPercentage}%`,
+        'aspectRatio': `${maxWidth} / ${maxHeight}`,
+        'width': `${maxWidth}px`,
+      }"
+    >
+      <div
+        class="absolute w-full h-full place-content-center place-items-center [clip-path:polygon(0%_0%,var(--split)_0%,var(--split)_100%,0%_100%)]"
+        aria-hidden="true"
+        role="presentation"
+      >
+        <img :src="referenceUrl">
+      </div>
+      <div
+        class="absolute w-full h-full place-content-center place-items-center [clip-path:polygon(var(--split)_0%,100%_0%,100%_100%,var(--split)_100%)]"
+        aria-hidden="true"
+        role="presentation"
+      >
+        <img :src="actualUrl">
+      </div>
+      <div
+        class="absolute left-[--split] h-full w-[2px] -translate-x-1/2 bg-white shadow-[0_0_3px_rgb(0_0_0/.2),0_0_10px_rgb(0_0_0/.5)] before:content-[''] before:absolute before:top-1/2 before:size-[16px] before:bg-white before:border-[2px] before:border-black before:rounded-full before:-translate-y-1/2 before:translate-x-[calc(-50%+1px)]"
+        aria-hidden="true"
+        role="presentation"
+      />
+      <input
+        :id="inputId"
+        v-model="splitPercentage"
+        type="range"
+        min="0"
+        max="100"
+        step="0.1"
+        aria-label="Adjust slider to compare reference and actual images"
+        class="absolute inset-0 opacity-0 cursor-col-resize"
+      >
+      <output :for="inputId" class="sr-only">
+        Showing {{ splitPercentage }}% reference, {{ 100 - splitPercentage }}% actual
+      </output>
+    </div>
+  </VisualRegressionImageContainer>
+</template>
diff --git a/packages/ui/client/components/views/ViewTestReport.vue b/packages/ui/client/components/views/ViewTestReport.vue
index c20043bb5338..13530a71f840 100644
--- a/packages/ui/client/components/views/ViewTestReport.vue
+++ b/packages/ui/client/components/views/ViewTestReport.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { TestAnnotation, TestAnnotationLocation } from '@vitest/runner'
+import type { TestArtifactLocation } from '@vitest/runner'
 import type { RunnerTestCase } from 'vitest'
 import { relative } from 'pathe'
 import { computed } from 'vue'
 import { getAttachmentUrl, sanitizeFilePath } from '~/composables/attachments'
 import { browserState, config } from '~/composables/client'
-import { showAnnotationSource } from '~/composables/codemirror'
+import { showAttachmentSource } from '~/composables/codemirror'
 import { isDark } from '~/composables/dark'
 import { mapLeveledTaskStacks } from '~/composables/error'
 import { openScreenshot, useScreenshot } from '~/composables/screenshot'
 import AnnotationAttachmentImage from '../AnnotationAttachmentImage.vue'
+import VisualRegression from '../artifacts/visual-regression/VisualRegression.vue'
 import IconButton from '../IconButton.vue'
 import Modal from '../Modal.vue'
 import ScreenshotError from './ScreenshotError.vue'
@@ -26,8 +27,8 @@ const failed = computed(() => {
   return mapLeveledTaskStacks(isDark.value, [props.test])[0] as RunnerTestCase | null
 })
 
-function openAnnotation(annotation: TestAnnotation) {
-  return showAnnotationSource(props.test, annotation)
+function openLocation(location?: TestArtifactLocation) {
+  return showAttachmentSource(props.test, location)
 }
 
 const {
@@ -37,7 +38,7 @@ const {
   currentScreenshotUrl,
 } = useScreenshot()
 
-function getLocationString(location: TestAnnotationLocation) {
+function getLocationString(location: TestArtifactLocation) {
   const path = relative(config.value.root, location.file)
   return `${path}:${location.line}:${location.column}`
 }
@@ -140,7 +141,7 @@ const meta = computed(() => {
               title="Open in Editor"
               class="flex gap-1 text-yellow-500/80 cursor-pointer"
               ws-nowrap
-              @click="openAnnotation(annotation)"
+              @click="openLocation(annotation.location)"
             >
               {{ getLocationString(annotation.location) }}
             </span>
@@ -164,6 +165,44 @@ const meta = computed(() => {
         <AnnotationAttachmentImage :annotation="annotation" />
       </div>
     </template>
+    <template v-if="test.artifacts.length">
+      <h1 m-2>
+        Test Artifacts
+      </h1>
+      <div
+        v-for="artifact, index of test.artifacts"
+        :key="artifact.type + index"
+        bg="yellow-500/10"
+        text="yellow-500 sm"
+        p="x3 y2"
+        m-2
+        rounded
+        role="note"
+      >
+        <div flex="~ gap-2 items-center justify-between" overflow-hidden>
+          <div>
+            <span
+              v-if="artifact.location && artifact.location.file === test.file.filepath"
+              v-tooltip.bottom="'Open in Editor'"
+              title="Open in Editor"
+              class="flex gap-1 text-yellow-500/80 cursor-pointer"
+              ws-nowrap
+              @click="openLocation(artifact.location)"
+            >
+              {{ getLocationString(artifact.location) }}
+            </span>
+            <span
+              v-else-if="artifact.location && artifact.location.file !== test.file.filepath"
+              class="flex gap-1 text-yellow-500/80"
+              ws-nowrap
+            >
+              {{ getLocationString(artifact.location) }}
+            </span>
+          </div>
+        </div>
+        <VisualRegression v-if="artifact.type === 'internal:toMatchScreenshot' && artifact.kind === 'visual-regression'" :regression="artifact" />
+      </div>
+    </template>
     <template v-if="meta.length">
       <h1 m-2>
         Test Meta
diff --git a/packages/ui/client/composables/attachments.ts b/packages/ui/client/composables/attachments.ts
index af9cbf362b3e..6352c1c4867e 100644
--- a/packages/ui/client/composables/attachments.ts
+++ b/packages/ui/client/composables/attachments.ts
@@ -25,3 +25,13 @@ export function isExternalAttachment(attachment: TestAttachment): boolean {
   const potentialUrl = attachment.path || attachment.body
   return typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))
 }
+
+export function internalOrExternalUrl(attachment: TestAttachment): string {
+  const potentialUrl = attachment.path || attachment.body
+
+  if (typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))) {
+    return potentialUrl
+  }
+
+  return getAttachmentUrl(attachment)
+}
diff --git a/packages/ui/client/composables/codemirror.ts b/packages/ui/client/composables/codemirror.ts
index f40b3fcad0a5..94fd3c4b7561 100644
--- a/packages/ui/client/composables/codemirror.ts
+++ b/packages/ui/client/composables/codemirror.ts
@@ -1,4 +1,4 @@
-import type { Task, TestAnnotation } from '@vitest/runner'
+import type { Task, TestArtifactLocation } from '@vitest/runner'
 import type { RunnerTestCase } from 'vitest'
 import type { Ref, WritableComputedRef } from 'vue'
 import CodeMirror from 'codemirror'
@@ -84,11 +84,11 @@ export function showLocationSource(fileId: string, location: { line: number; col
   })
 }
 
-export function showAnnotationSource(task: RunnerTestCase, annotation: TestAnnotation) {
-  if (!annotation.location) {
+export function showAttachmentSource(task: RunnerTestCase, location?: TestArtifactLocation) {
+  if (!location) {
     return
   }
-  const { line, column, file } = annotation.location
+  const { line, column, file } = location
   if (task.file.filepath !== file) {
     return openInEditor(file, line, column)
   }
diff --git a/packages/ui/client/composables/small-tabs.ts b/packages/ui/client/composables/small-tabs.ts
new file mode 100644
index 000000000000..dcc261514da2
--- /dev/null
+++ b/packages/ui/client/composables/small-tabs.ts
@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface SmallTabsConfig {
+  id: string
+  title: string
+}
+
+export interface SmallTabsContext {
+  id: string
+  activeTab: Ref<string | null>
+  registerTab: (tab: SmallTabsConfig) => void
+  unregisterTab: (tab: SmallTabsConfig) => void
+}
+
+export const SMALL_TABS_CONTEXT: InjectionKey<SmallTabsContext> = Symbol('tabContext')
+
+export const idFor = {
+  tab: (id: SmallTabsConfig['id'], globalContext: SmallTabsContext['id']) =>
+    `${globalContext}-${id}-tab`,
+  tabpanel: (id: SmallTabsConfig['id'], globalContext: SmallTabsContext['id']) =>
+    `${globalContext}-${id}-tabpanel`,
+}

From 129e0409a8474e514312def70e344586826d7f7f Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Wed, 19 Nov 2025 23:43:05 +0100
Subject: [PATCH 3/5] test(ui): visual regression artifact component

---
 .../visual-regression/SmallTabs.spec.ts       |  94 ++++++++++
 .../VisualRegression.spec.ts                  | 160 ++++++++++++++++++
 .../VisualRegressionSlider.spec.ts            | 160 ++++++++++++++++++
 3 files changed, 414 insertions(+)
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/SmallTabs.spec.ts
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegression.spec.ts
 create mode 100644 packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.spec.ts

diff --git a/packages/ui/client/components/artifacts/visual-regression/SmallTabs.spec.ts b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.spec.ts
new file mode 100644
index 000000000000..84fa5faa6ee2
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.spec.ts
@@ -0,0 +1,94 @@
+import { faker } from '@faker-js/faker'
+import { describe, expect, it } from 'vitest'
+import { userEvent } from 'vitest/browser'
+import { defineComponent, h } from 'vue'
+import { page, render } from '~/test'
+import SmallTabs from './SmallTabs.vue'
+import SmallTabsPane from './SmallTabsPane.vue'
+
+function createSmallTabs(children: number) {
+  return defineComponent({
+    setup: () =>
+      () =>
+        h(
+          SmallTabs,
+          null,
+          {
+            default: () => Array.from({ length: children }, () => h(
+              SmallTabsPane,
+              { title: faker.lorem.word() },
+              () => faker.lorem.words(2),
+            )),
+          },
+        ),
+  })
+}
+
+describe('SmallTabs', () => {
+  it('has accessible elements', async () => {
+    render(createSmallTabs(2))
+
+    // a tablist with two elements inside
+    const tablist = page.getByRole('tablist')
+    const tabs = tablist.getByRole('tab')
+    const firstTab = tabs.first()
+    const secondTab = tabs.last()
+
+    await expect.element(tablist).toBeInTheDocument()
+    expect(tabs.all()).toHaveLength(2)
+
+    await expect.element(firstTab).toHaveAttribute('aria-selected', 'true')
+    await expect.element(secondTab).toHaveAttribute('aria-selected', 'false')
+
+    // two tab panels, with one hidden
+    const panels = page.getByRole('tabpanel', { includeHidden: true })
+    const firstPanel = panels.first()
+    const secondPanel = panels.last()
+
+    expect(panels.all()).toHaveLength(2)
+
+    await expect.element(firstPanel).not.toHaveAttribute('hidden')
+    await expect.element(secondPanel).toHaveAttribute('hidden')
+
+    // panels should be labelled by their tab button
+    await expect.element(firstPanel).toHaveAttribute(
+      'aria-labelledby',
+      firstTab.element().getAttribute('id'),
+    )
+    await expect.element(secondPanel).toHaveAttribute(
+      'aria-labelledby',
+      secondTab.element().getAttribute('id'),
+    )
+
+    await expect.element(firstTab).toHaveAttribute(
+      'aria-controls',
+      firstPanel.element().getAttribute('id'),
+    )
+    await expect.element(secondTab).toHaveAttribute(
+      'aria-controls',
+      secondPanel.element().getAttribute('id'),
+    )
+  })
+
+  it('opens one panel at a time', async () => {
+    const tabsLimit = 5
+
+    render(createSmallTabs(tabsLimit))
+
+    const tabs = page.getByRole('tablist').getByRole('tab')
+    const panels = page.getByRole('tabpanel', { includeHidden: true })
+
+    for (let tabIndex = 0; tabIndex < tabsLimit; tabIndex += 1) {
+      const activeTab = tabs.nth(tabIndex)
+      const activePanel = panels.nth(tabIndex)
+
+      await userEvent.click(activeTab)
+      await expect.element(
+        tabs.and(page.getByRole('tab', { selected: true })),
+      ).toBe(activeTab.element())
+      await expect.element(
+        page.getByRole('tabpanel'),
+      ).toBe(activePanel.element())
+    }
+  })
+})
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegression.spec.ts b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.spec.ts
new file mode 100644
index 000000000000..70d81fc54b9d
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.spec.ts
@@ -0,0 +1,160 @@
+import type { VisualRegressionArtifact } from '@vitest/runner'
+import { faker } from '@faker-js/faker'
+import { describe, expect, it } from 'vitest'
+import { userEvent } from 'vitest/browser'
+import { page, render } from '~/test'
+import VisualRegression from './VisualRegression.vue'
+
+const diff = {
+  name: 'diff',
+  path: '/__diff.png',
+} as const
+
+const reference = {
+  name: 'reference',
+  path: '/__reference.png',
+  width: 500,
+  height: 200,
+} as const
+
+const actual = {
+  name: 'actual',
+  path: '/__actual.png',
+  width: 500,
+  height: 200,
+} as const
+
+describe('VisualRegression', () => {
+  it('renders content with no attachments', async () => {
+    const messageContent = faker.lorem.words(5)
+
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: messageContent,
+          attachments: [],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    const article = page.getByRole('article')
+
+    await expect.element(article).toBeInTheDocument()
+    await expect.element(article.getByRole('heading'))
+      .toHaveTextContent('Visual Regression')
+    await expect.element(article.getByRole('paragraph'))
+      .toHaveTextContent(messageContent)
+    await expect.element(article.getByRole('tablist')).toHaveTextContent('')
+  })
+
+  it('renders diff tab', async () => {
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: faker.lorem.words(5),
+          attachments: [diff],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    await expect.element(page.getByRole('tablist').getByRole('tab'))
+      .toHaveTextContent('Diff')
+    await expect.element(page.getByRole('tabpanel').getByRole('img'))
+      .toBeInTheDocument()
+  })
+
+  it('renders reference tab', async () => {
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: faker.lorem.words(5),
+          attachments: [reference],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    await expect.element(page.getByRole('tablist').getByRole('tab'))
+      .toHaveTextContent('Reference')
+    await expect.element(page.getByRole('tabpanel').getByRole('img'))
+      .toBeInTheDocument()
+  })
+
+  it('renders actual tab', async () => {
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: faker.lorem.words(5),
+          attachments: [actual],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    await expect.element(page.getByRole('tablist').getByRole('tab'))
+      .toHaveTextContent('Actual')
+    await expect.element(page.getByRole('tabpanel').getByRole('img'))
+      .toBeInTheDocument()
+  })
+
+  it('renders reference, actual, and slider tabs', async () => {
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: faker.lorem.words(5),
+          attachments: [reference, actual],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    const tablist = page.getByRole('tablist')
+    const tabs = tablist.getByRole('tab')
+
+    await expect.element(tablist).toBeInTheDocument()
+
+    expect(tabs.all()).toHaveLength(3)
+    await expect.element(tabs.nth(0)).toHaveTextContent('Reference')
+    await expect.element(tabs.nth(1)).toHaveTextContent('Actual')
+    await expect.element(tabs.nth(2)).toHaveTextContent('Slider')
+
+    await userEvent.click(tabs.nth(2))
+
+    await expect.element(
+      page.getByLabelText(
+        'Image comparison slider showing reference and actual screenshots',
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it('renders diff, reference, actual, and slider tabs', async () => {
+    render(VisualRegression, {
+      props: {
+        regression: {
+          type: 'internal:toMatchScreenshot',
+          kind: 'visual-regression',
+          message: faker.lorem.words(5),
+          attachments: [diff, reference, actual],
+        } satisfies VisualRegressionArtifact,
+      },
+    })
+
+    const tablist = page.getByRole('tablist')
+    const tabs = tablist.getByRole('tab')
+
+    await expect.element(tablist).toBeInTheDocument()
+
+    expect(tabs.all()).toHaveLength(4)
+    await expect.element(tabs.nth(0)).toHaveTextContent('Diff')
+    await expect.element(tabs.nth(1)).toHaveTextContent('Reference')
+    await expect.element(tabs.nth(2)).toHaveTextContent('Actual')
+    await expect.element(tabs.nth(3)).toHaveTextContent('Slider')
+  })
+})
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.spec.ts b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.spec.ts
new file mode 100644
index 000000000000..7872fc84dc98
--- /dev/null
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegressionSlider.spec.ts
@@ -0,0 +1,160 @@
+import { describe, expect, it } from 'vitest'
+import { locators, userEvent } from 'vitest/browser'
+import { page, render } from '~/test'
+import VisualRegressionSlider from './VisualRegressionSlider.vue'
+
+locators.extend({
+  // @ts-expect-error this gets used only in the first block which tests elements removed from the accessibility tree
+  getByCSS(selector: string) {
+    return selector
+  },
+})
+
+const reference = {
+  path: '/__reference.png',
+  width: 500,
+  height: 200,
+}
+
+const actual = {
+  path: '/__actual.png',
+  width: 500,
+  height: 200,
+}
+
+const containerLabel = 'Image comparison slider showing reference and actual screenshots'
+const inputLabel = 'Adjust slider to compare reference and actual images'
+
+describe('VisualRegressionSlider', () => {
+  it('renders both images with correct URLs', async () => {
+    render(VisualRegressionSlider, {
+      props: {
+        reference,
+        actual,
+      },
+    })
+
+    // !!! images are hidden/removed from the accessibility tree, so we fall back to CSS selectors
+
+    // both image tags should be rendered and contain the path
+    // @ts-expect-error extended only for this block
+    const images = page.getByCSS('img')
+    const referenceImage = images.first()
+    const actualImage = images.last()
+
+    expect(images.all()).toHaveLength(2)
+
+    await expect.element(referenceImage).toHaveProperty(
+      'src',
+      expect.stringContaining(encodeURIComponent(reference.path)),
+    )
+    await expect.element(actualImage).toHaveProperty(
+      'src',
+      expect.stringContaining(encodeURIComponent(actual.path)),
+    )
+
+    // images should be wrapped in (hidden) containers with role presentation
+    // @ts-expect-error extended only for this block
+    const referenceContainer = page.getByCSS('div:has(> img)').first()
+    // @ts-expect-error extended only for this block
+    const actualContainer = page.getByCSS('div:has(> img)').last()
+
+    await expect.element(referenceContainer).toHaveAttribute('aria-hidden', 'true')
+    await expect.element(referenceContainer).toHaveAttribute('role', 'presentation')
+
+    await expect.element(actualContainer).toHaveAttribute('aria-hidden', 'true')
+    await expect.element(actualContainer).toHaveAttribute('role', 'presentation')
+  })
+
+  it('has accessible descriptions', async () => {
+    render(VisualRegressionSlider, {
+      props: {
+        reference,
+        actual,
+      },
+    })
+
+    const container = page.getByLabelText(containerLabel)
+    const input = page.getByLabelText(inputLabel)
+    const status = page.getByRole(
+      'status',
+      { hasText: 'Showing 50% reference, 50% actual' },
+    )
+
+    // container with accessible label should exist and contain input and status
+    await expect.element(container).toBeInTheDocument()
+    await expect.element(container).toContainElement(input)
+    await expect.element(container).toContainElement(status)
+    // split is an implementation detail, but in absence of VRT it's a best-effort approach to check it's working
+    await expect.element(container).toHaveStyle('--split: 50%')
+
+    // input with label should be an input and have an id
+    await expect.element(input).toBeInstanceOf(HTMLInputElement)
+    await expect.element(input).toHaveAttribute('id')
+
+    // status element should exist and be connected to the input
+    await expect.element(status).toBeInTheDocument()
+    await expect.element(status).toHaveAttribute(
+      'for',
+      input.element().getAttribute('id'),
+    )
+  })
+
+  it('has slider boundaries', async () => {
+    render(VisualRegressionSlider, {
+      props: {
+        reference,
+        actual,
+      },
+    })
+
+    const input = page.getByLabelText(inputLabel)
+
+    await expect.element(input).toHaveAttribute('min', '0')
+    await expect.element(input).toHaveAttribute('max', '100')
+    await expect.element(input).toHaveAttribute('step', '0.1')
+  })
+
+  it('updates split percentage on slider movement', async () => {
+    render(VisualRegressionSlider, {
+      props: {
+        reference,
+        actual,
+      },
+    })
+
+    const container = page.getByLabelText(containerLabel)
+    const input = page.getByLabelText(inputLabel)
+    const status = page.getByRole('status')
+
+    // initial state should be 50
+    await expect.element(input).toHaveValue('50')
+    await expect.element(container).toHaveStyle('--split: 50%')
+
+    // keyboard interaction
+    await userEvent.click(status)
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowRight>10/}')
+    await userEvent.click(status)
+
+    await expect.element(input).toHaveValue('51')
+    await expect.element(container).toHaveStyle('--split: 51%')
+    await expect.element(status).toHaveTextContent('Showing 51% reference, 49% actual')
+
+    // mouse interaction
+    await userEvent.click(
+      input,
+      {
+        position: {
+          x: 1,
+          y: input.element().getBoundingClientRect().height / 2,
+        },
+      },
+    )
+    await userEvent.click(status)
+
+    await expect.element(input).toHaveValue('0')
+    await expect.element(status).toHaveTextContent('Showing 0% reference, 100% actual')
+    await expect.element(container).toHaveStyle('--split: 0%')
+  })
+})

From bd828a6a35834bd20c1886c2ad37656299fadb25 Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Thu, 20 Nov 2025 15:24:42 +0100
Subject: [PATCH 4/5] test(ui): optimize suggested deps to avoid hang

---
 packages/ui/vitest.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 075a3a10d2de..5d9fb35a2d0a 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -6,6 +6,9 @@ import viteConfig from './vite.config'
 export default mergeConfig(
   viteConfig,
   defineConfig({
+    optimizeDeps: {
+      include: ['vue-router', 'splitpanes', 'd3-graph-controller', 'vue-virtual-scroller'],
+    },
     test: {
       browser: {
         provider: playwright(),

From 83f75ccf2a2cd47d63c84f8f446d892d73191a4d Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Sat, 22 Nov 2025 02:29:26 +0100
Subject: [PATCH 5/5] fix(ui): tabs unregistering and keys

---
 .../artifacts/visual-regression/SmallTabs.vue | 12 +++++-----
 .../visual-regression/VisualRegression.vue    | 24 +++++++++++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
index 32ecbc68e51f..346cb8311444 100644
--- a/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
+++ b/packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue
@@ -6,10 +6,6 @@ import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
 const activeTab = ref<string | null>(null)
 const tabs = ref<SmallTabsConfig[]>([])
 
-function setActive(key: string) {
-  activeTab.value = key
-}
-
 const id = useId()
 
 provide(SMALL_TABS_CONTEXT, {
@@ -21,7 +17,7 @@ provide(SMALL_TABS_CONTEXT, {
     }
 
     if (tabs.value.length === 1) {
-      setActive(tab.id)
+      activeTab.value = tab.id
     }
   },
   unregisterTab: (tab) => {
@@ -30,6 +26,10 @@ provide(SMALL_TABS_CONTEXT, {
     if (index > -1) {
       tabs.value.splice(index, 1)
     }
+
+    if (activeTab.value === tab.id) {
+      activeTab.value = tabs.value[0]?.id ?? null
+    }
   },
 })
 </script>
@@ -52,7 +52,7 @@ provide(SMALL_TABS_CONTEXT, {
         :aria-controls="idFor.tabpanel(tab.id, id)"
         type="button"
         class="aria-[selected=true]:underline underline-offset-4"
-        @click="setActive(tab.id)"
+        @click="activeTab = tab.id"
       >
         {{ tab.title }}
       </button>
diff --git a/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
index bda7a3869991..77cca7289eda 100644
--- a/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
+++ b/packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue
@@ -29,16 +29,32 @@ const groups = computed(() => ({
       {{ regression.message }}
     </template>
     <SmallTabs>
-      <SmallTabsPane v-if="groups.diff" title="Diff">
+      <SmallTabsPane
+        v-if="groups.diff"
+        :key="groups.diff.path"
+        title="Diff"
+      >
         <VisualRegressionImage :attachment="groups.diff" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.reference" title="Reference">
+      <SmallTabsPane
+        v-if="groups.reference"
+        :key="groups.reference.path"
+        title="Reference"
+      >
         <VisualRegressionImage :attachment="groups.reference" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.actual" title="Actual">
+      <SmallTabsPane
+        v-if="groups.actual"
+        :key="groups.actual.path"
+        title="Actual"
+      >
         <VisualRegressionImage :attachment="groups.actual" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.reference && groups.actual" title="Slider">
+      <SmallTabsPane
+        v-if="groups.reference && groups.actual"
+        :key="(groups.reference.path ?? '') + (groups.actual.path ?? '')"
+        title="Slider"
+      >
         <VisualRegressionSlider :actual="groups.actual" :reference="groups.reference" />
       </SmallTabsPane>
     </SmallTabs>